Algoroot's space

CS공부로 'CODE'라는 책을 읽고 있는데 가면갈수록 책 내용이 나에게 어렵기도 하고, 더 잘 이해하고 싶은 마음에 찾아본 강의이다. 정리도 잘 되어있고 무엇보다 한 강의당 15분 내외에서 하루에 한두 개씩 보며 공부하기 좋을 것 같아서 시작하게 되었다. 물론 15분 강의여도 이해, 정리하고 찾아보고 하면 1시간이 넘는 것 같지만.. 강의 내용만 그대로 베끼는 것이 아니라, 주어진 학습목표를 이루기 위해서 이해를 우선으로 두고 공부할 것이다. 들어가기 전에 학습목표, 핵심단어는 강의 자료를 가져올 것이고 그 이후로는 내가 이해하고 공부한 부분을 직접 적고, 마지막에는 배운 점이나 느낀 점을 적도록 하겠다. 들어가기 전에 우리가 일상적으로 사용하는 컴퓨터는 어떤 원리로 작동될까요? 우리가 컴퓨터를 사용하..

오늘 배운 자료구조는 힙(Heap)이다. 개념 정리는 항해 99측 강의 자료를 기반으로 썼고, 추가적인 사항은 구글링을 통해 덧붙였다. 힙(Heap) 구현은 자바스크립트로 하기 위해서 유튜브를 참고했다. 강의에서는 파이썬으로 다루는데 결국에는 heap도 내장모듈이 있어 굉장히 편리해보였다. 백준에서 힙관련 알고리즘을 풀어봤는데 구현을 처음부터 해야함에 있어서 꼭 알고 있어야겠다는 생각이들었다. 반면 파이썬으로 푼 답을 보니 다섯줄정도였나..? 아무튼 내장모듈을 써서 코드가 짧았다. 값을 추출하는 poll()부분을 이해하는데 애를 먹었고 경우의 수 하나하나 노트에 그려보며 이해하는 과정을 거쳤다. 힙 (Heap) 힙은 데이터에서 최대값과 최솟값을 빠르게 찾기 위해 고안된 완전 이진트리(Complete Bi..

퀴즈를 만들며 이해했다고 생각한 순간 내일 또 새로울 것 같아 늦은 시각이지만 오늘 한 부분을 되짚어보았다. 확실히 글을 적으니 흐름을 이해하는데 더 도움이 된 것 같다. 특히 reducer를 만드는 부분에서 action을 발동시키는 부분이 헷갈렸는데 적어보고, 실행해보니 이해가 되었다. 아직 익숙하지는 않지만 이 부분은 많이 써보면 해결될 문제 같다. 내일 읽어 볼 자료 : 리덕스는 왜 필요할까? Redux 전역적으로 상태를 관리할 수 있는 라이브러리이다. 리듀서는 순수한 함수여야 한다. (리덕스 규칙) (몰라) 상태관리흐름도 아래는 기능별로 묶은 덕스(ducks) 구조를 따른 코드이다. 1. State 저장하고 있는 상태값("데이터") , 딕셔너리 형태 const ADD_LIST = "quiz/ADD..

라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것. 리액트에서는 라우팅 관련 라이브러리가 많이 있지만 그중 리액트 라우터(React Router)에 대해 아주 간략히 다뤄보겠다. SPA(Single Page Application) 리액트는 SPA방식이다. - 기존 웹 페이지 처럼(MPA 방식) 여러 개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. - 주소를 옮길 때 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.(하나의 html으로 브라우저 주소창대로 다른 페이지를 보여줄 수 있다. ) React-Router는 이런 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더..

React를 공부하면서 Hook이나 State, Redux가 헷갈려서 정리하고자 간략하게 쓴다. 공부한 코드 기반으로 정말 일부분만 후다닥 쓴 거라 아마 나만 알아볼 것 같다...! 1. React.useRef() React Hook 리액트에서 돔요소를 가져올 때 쓸 수 있다. ex) input 에서 text를 가져오고 싶을 때 리액트 요소에서 가져올 수 있다. const id_ref = React.useRef(null); 가져올 요소에 넣는다. 1. React.useState() React Hook 아래를 예시로 들면, count에는 state값이, setCount에는 count이라는 state값을 수정하는 함수가 된다. 괄호 안은 상태의 초기 값을 나타낸다. setCount()라는 함수를 호출하여 s..

프로그래머스 - 베스트앨범 지난 포스트에서는 여러 조건 별로 변수를 나누어서 풀었다면, 이번에는 프로그래머스에서 가장 좋아요를 많이 받은 풀이법에 대해 설명하고자 한다. 너무 깔끔하고, 배열 메서드중에서 몰랐던 기능도 알게되어 여러모로 유익했고 닮고싶은 풀이다. 이번 풀이 역시 주어진 테스트케이스에는 조건3. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 를 확인할 수 없으므로 테스트케이스에 값을 하나 더 추가했다. 따라서 원하는 출력값은 [4, 1, 3, 5] 가 되겠다. const genres = ["classic", "pop", "classic", "classic", "pop", "classic"]; const plays = [500, 600, 150, 80..

프로그래머스 - 베스트 앨범 문제는 위 링크에서 볼 수 있다. 문제에 대한 해설보다는 기억하고 싶은 개념, 사고, 문법을 기록하는 글이다. 답안은 맨 아래에 표기해 두었다. 답안 풀이 이번 문제는 처음부터 끝까지 접근하고 푸는 방식을 적는 게 도움이 될 것 같아서 풀이를 해보려 한다. 이 풀이 말고 프로그래머스에서 best에 있는 풀이법도 가져왔는데, 그건 정말 신박해서 기억하고 싶었다. 그에 대한 풀이는 여기서 확인하면 된다. 참고로 주어진 테스트 케이스에는 조건 3. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 를 확인할 수 없어서 테스트 케이스에 값을 하나 더 추가했다. 따라서 원하는 출력 값은 [4, 1, 3, 5]가 되겠다. const genres = ..

프로그래머스 - 위장 문제는 위 링크에서 볼 수 있다. 문제에 대한 해설보다는 기억하고 싶은 개념, 사고, 문법을 기록하는 글이다. 답안은 맨 아래에 표기해 두었다. 1. reduce() 메서드로 object형태 만들기 reduce()는 자신을 호출한 배열의 요소를 순화하면서 인수로 전달된 콜백함수를 반복 호출한다. 그리고 콜백함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 해시 관련 문제는 key:value 형태로 변환하는 형식으로 풀어야하는 것 같다. 저번 풀이에도 reduce()를 이용했는데 이번에도 같은 방식으로 시작했다. 이 때 for문을 써도 되지만, reduce()를 쓰면 더 간편하게 object형태로 만들 수 있..