Javascript(47)
-
[JS] 숫자 타자 대회
문제 요약 위와 같은 모양으로 배열된 숫자 자판이 있습니다. 숫자 타자 대회는 이 동일한 자판을 사용하여 숫자로만 이루어진 긴 문자열을 누가 가장 빠르게 타이핑하는지 겨루는 대회입니다. 대회에 참가하려는 민희는 두 엄지 손가락을 이용하여 타이핑을 합니다. 민희는 항상 왼손 엄지를 4 위에, 오른손 엄지를 6 위에 두고 타이핑을 시작합니다. 엄지 손가락을 움직여 다음 숫자를 누르는 데에는 일정 시간이 듭니다. 민희는 어떤 두 숫자를 연속으로 입력하는 시간 비용을 몇몇 가중치로 분류하였습니다. 이동하지 않고 제자리에서 다시 누르는 것은 가중치가 1입니다. 상하좌우로 인접한 숫자로 이동하여 누르는 것은 가중치가 2입니다. 대각선으로 인접한 숫자로 이동하여 누르는 것은 가중치가 3입니다. 같지 않고 인접하지 않..
2022.12.26 -
순수 JS로 SPA 처럼 사용하기 - 1. 함수형 프로그래밍
발단 요즘 과제 테스트를 몇 번 해보다보니 함수형 프로그래밍을 통해 추상화하여 구현하는 예제들을 요구한다. 처음엔 막막했지만 쓰다보니 꽤 익숙한 부분들도 있어서 몇 번 풀어보면 금방 감이 올 것 같다. 명령형 vs 함수형 이 비슷한 듯 다른 두 가지 방식의 차이는 재사용성에 있다고 본다. React에서 컴포넌트를 재사용할 수 있는 로직이 함수형이라고 말한다. 예를 들면, 아래처럼 id="app"인 어떤 dom 아래에 카드 레이아웃을 만들어주는 코드를 짜보자. // 명령형 방식으로 구현. const app = document.getElementById("app"); const card = document.createElement("div"); card.classList.add("cardcontainer")..
2022.12.22 -
[JS] 삼총사 - dfs를 써보자!
기본에 충실하게 dfs를 써봅시다! 문제 요약 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다. 한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하..
2022.10.17 -
[JS] 택배상자 - 구현 문제와 예외케이스
문제 요약 영재는 택배상자를 트럭에 싣는 일을 합니다. 영재가 실어야 하는 택배상자는 크기가 모두 같으며 1번 상자부터 n번 상자까지 번호가 증가하는 순서대로 컨테이너 벨트에 일렬로 놓여 영재에게 전달됩니다. 컨테이너 벨트는 한 방향으로만 진행이 가능해서 벨트에 놓인 순서대로(1번 상자부터) 상자를 내릴 수 있습니다. 하지만 컨테이너 벨트에 놓인 순서대로 택배상자를 내려 바로 트럭에 싣게 되면 택배 기사님이 배달하는 순서와 택배상자가 실려 있는 순서가 맞지 않아 배달에 차질이 생깁니다. 따라서 택배 기사님이 미리 알려준 순서에 맞게 영재가 택배상자를 실어야 합니다. 만약 컨테이너 벨트의 맨 앞에 놓인 상자가 현재 트럭에 실어야 하는 순서가 아니라면 그 상자를 트럭에 실을 순서가 될 때까지 잠시 다른 곳에..
2022.10.14 -
[TIL] Redux 2. Never do mutate the state.
이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) [시작하기 전에] 이번 2편은 React가 아니라 순수 JavaScript 환경에서 실습을 해봅니다. 이후에 React-Redux도 다루니 다른 편을 참고해주세요! 🎛️ TO-DO Apps with Redux 결과물 저번 클래스에서 간단한 redux의 사용법을 알아봤다. 1. store를 안에서 primitive type의 state를 관리해보고, 2. state를 관리하는 다양한 기능의 함수를 정의한 다음, 3. action을 넣은뒤 dispatch로 실행하고 subscribe를 리스너로 써 볼 수 있었다. 이번엔 primitive..
2022.10.13 -
[TIL] Redux 1. 순수 JS에서 Redux와 상태관리 wtih. store와 reducer
이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) [시작하기 전에] 이번 1편은 React가 아니라 순수 JavaScript 환경에서 실습을 해봅니다. 이후에 React-Redux도 다루니 다른 편을 참고해주세요! 🎛️ Redux: JS에서 쓰는 상태관리 컨테이너 Redux는 그냥 저냥 듣기로는 React에서 쓸 수 있는 공용 저장소고, Props drilling같은 상태관리를 도와준다고 알고 있었다. React 뿐 만 아니라 JavaScript 전반적으로 쓸 수 있는 "상태 관리" 컨테이너라고 한다. 구글링으로 상태관리 관련된 포스트를 보면 블로거 분들이 각자 상태관리를 자신만의 ..
2022.10.11