김철용 기록소

문제 https://school.programmers.co.kr/learn/courses/30/lessons/147355 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(t, p) { var lenP = p.length; var lenT = t.length; var numP = Number(p); var answer = 0; for (var i = 0; i

문제 https://school.programmers.co.kr/learn/courses/30/lessons/12915?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(strings, n) { var sortedS = strings.sort(); var answer = sortedS.sort(function(a, b) { if (a[n] > b[n]) { return 1; } if (a[n] < b[n]) { return -1; } return 0; }) return answer; }..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/81301?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(s) { var eng_num = { "zero": "0", "one": "1", "two": "2", "three": "3", "four": "4", "five": "5", "six": "6", "seven": "7", "eight": "8", "nine": "9" } for (var key in eng_num) { ..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/17681?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(n, arr1, arr2) { var answer = []; for (var i = 0; i < arr1.length; i++) { var bi = (arr1[i] | arr2[i]).toString(2).padStart(n, "0"); var decoding = ""; for (var elem of bi) { if (..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/86491?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(sizes) { var width = 0; var height = 0; for (var size of sizes) { max = Math.max(...size); min = Math.min(...size); if (max > width) { width = max; } if (min > height) { height = ..

이전 포스트에서 만든 애플리케이션은 리액트로 만든 앱에 리덕스를 추가해서 만든 앱이다. AddNumber, DiplayNumber라고 하는 container 컴포넌트를 만들어서 presentational 컴포넌트인 AddNumber와 DisplayNumber가 재사용될 수 있게 수정하였다. 하지만 이렇게 container 컴포넌트를 추가하면서 코드의 양이 많아지고 해야할 작업도 많아지게 됐다. 만약 이 앱에서 빨간 박스로 칠해진 부분에 'kg'과 같이 단위를 추가하려고 하면 아래와 같이 코드를 변경해야 한다. displayNumberRoot 파일의 DisplayNumberRoot 컴포넌트에서 containers 파일에 있는 DisplayNumber 컴포넌트에 props로 unit을 넘겨주고, contai..

이전에 만든 어플리케이션에서 Add Number와 Display Number의 코드를 보면 둘 다 redux의 store를 사용하기 때문에 이 어플리케이션의 상태에 의존하고 있는 상황이다. 즉, 이 컴포넌트를 다른 프로젝트에서 사용하기 어렵다는 의미이다. 코드의 재사용성을 위해 새로운 컴포넌트를 만들어 감싸는 wrapping을 통해 이 문제를 해결할 수 있다. 기존의 addNumber와 displayNumber는 Presentational 컴포넌트로, 리덕스와는 관계없이 그저 보여주는 역할을 하는 컴포넌트로 수정하고 이 컴포넌트들을 감싸는 익명 컴포넌트들(Container 컴포넌트)이 리덕스의 store와 연결되도록 할 것이다. src 디렉토리 아래에 containers라는 폴더를 만든다 이 폴더 안에 ..

리액트는 사용자 정의 컴포넌트를 만들어서 코드를 간결하게 정리정돈할 수 있게 해주고, 리덕스는 데이터를 중앙에서 관리하여 데이터가 예기치 않게 변하는 것을 방지해준다. 위 그림은 리액트와 리덕스를 단독으로 사용했을 때 데이터의 흐름을 보여준다. 리액트는 어떤 컴포넌트에서 데이터가 변화되면 그 정보가 다른 컴포넌트들에게 전파된다. 이 때 그 데이터를 사용할 컴포넌트는 사용하면 되고, 그렇지 않은 컴포넌트들은 아무런 동작을 하지 않으면 된다. 이렇듯 모든 컴포넌트에 데이터의 변화가 전파되기 때문에 필요없는 render() 함수가 호출된다는 단점이 있다. 리덕스는 store라는 곳에서 데이터를 관리하기 때문에 어떤 컴포넌트에서 데이터를 변화시키면, store가 한번에 데이터의 변화를 컴포넌트들에게 알려준다. ..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/131705?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function getSubSets(arr, n) { if (n === -1) { var flag = new Array(arr.length).fill(false); var subSets = []; var subSet = function DFS(depth) { if (depth === arr.length) { var element = arr.filte..