전체 글 (251) 썸네일형 리스트형 Next.js 와 Redux 테스트(Jest, Enzyme)를 해보자. ## 추가 2019.08.14 Enzyme 3.10.0 에서 컴포넌트 스냅샷이 안되는 경우가 발생하는데, shallow 혹은 mount한 컴포넌트에 .debug()를 추가해주면 정상적으로 스냅샷 된다. 이전 포스팅에서는 React의 컴포넌트들을 테스트 했다. NextJS 역시 테스팅에서의 방법은 다를 바 없는데, 대신 테스팅을 위해 몇가지 설정을 해줘야 하는 것이 있다. 또한 Redux 테스트에 대해서 알아보도록 하자. Next 테스트 보일러 플레이트 npx create-next-app --example with-jest project-name 사실 다음과 같이 설치 해주면 귀찮은 설정들이 모두 해결 된다. 손으로 설정하더라도 다음 프로젝트의 구조를 거희 따라가기 때문에, 만들어진 프로젝트 구조를 살펴보.. React 테스트 (Jest, Enzyme) Jest 자바스크립트 테스트 도구이다. 다음과 같이 설치하고 npm install --save-dev jest npm script를 통해 실행하자. { "scripts": { "test": "jest" } } expect(테스트 데이터).toBe(결과 값) 제일 기본이 되는 문법이다. expect의 파라미터에 테스트할 데이터, toBe에 결과값을 각각 입력한다. 1 2 3 4 5 6 7 8 9 10 const sum = require("./sum") test("1+2는 3입니다.", () => { expect(sum(1, 2)).toBe(3) }) test("2+2는 4입니다.", () => { expect(2 + 2).toBe(4) }) .toEqual(주로 객체 데이터) 객체를 비교 할 때 사용된다... 탐욕법 탐욕법은 DP처럼 최적해를 구하는데 사용되지만. DP 처럼 모든 경우가 아닌 어떤 상황의 최대값을 규칙을 찾아 구한다. 그렇기 때문에 효율적이나, 그 만큼 정확하진 못하다. 탐욕법은 DP와 달리 배열을 순회하며, 그 배열을 직접 조절하여 답을 찾는 경우가 많다. 조건에 맞는 배열을 만든 후 답을 출력 하는 패턴을 가지는게 일반적이다. 패턴을 찾기 위해서 배열 정렬을 자주 사용한다. 체육복 맨 앞과 맨 뒤의 학생의 경우에 index를 벗어나는 경우만 신경 써주자. 나머지는 lost가 reserve를 만날때, 값을 수정해주며 답을 찾으면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34.. [DFS/BFS] 여행경로 문제의 핵심은 모든 도시를 방문할 수 없는 경우는 주어지지 않습니다. 이다. 예를 들어 [["ICN", "ATL"], ["ICN", "SEO"], ["SEO", "ICN"]] 와 같은 경우 알파벳 순서대로라면 ICN -> ATL 이후에 연결될 수 없으므로 ICN-SEO-ICN-ATL와 같이 연결되어야 한다. DFS로 해결하기 위해서 모든 경로의 답을 담아두는 dfsArray를 만들어두고 모든 경로를 돈 경우에만 answer에 더해 마지막에 정렬을 통해 정렬된 답을 도출했다. 주의할 점은 splice를 통하여 타겟이 된 티켓을 배열에서 제거하였다는 점이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var answer = []; f.. [스택/큐2] 기능개발, 주식가격, 계산기 기능개발 조건에 맞는 값들을 queue에 쌓아두고 while문을 이용하여 모두 제거하는 식의 문제이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function solution(progresses, speeds) { var answer = []; let counter = 0; while(progresses.length) { for(let i = 0; i= 100){ progresses.shift(); speeds.shift(); counter++ } if(counter) { answer.push(counter); counter=0; } } return answer; } 주식가격 설명 없음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1.. [스택/큐] 프린터, 탑, 쇠막대기, 다리를 지나는 트럭 스택 큐 문제는 어떤 패턴을 가지고 있느냐에 따라 결정된다. 그런 만큼 많이 풀어보고 다양한 상황에 대처 할 수 있는 수 밖에 없을 것 같다. 프린터 차분하게 조건에 따라 입력하자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function solution(priorities, location) { const map = priorities.map((value,index)=>{ return { id : index, priorities : value } }) let count = 0; while(true){ let target = map.shift(); let moreUpper = map.find((value)=>{ return value... [DP] 가장 큰 정사각형 찾기/ 땅따먹기 dp처럼 배열에서 조건에 맞는 값들을 이전값과 비교하여 하나씩 처리해가지만, dp배열을 추가적으로 필요로는 하지 않는 문제. 그림처럼 현 인덱스의 좌, 상, 좌상의 값이 모두 1이상이면 정사각형이라고 판단되어 진다. 이 때, 좌, 상, 좌상값중 가장 작은 값에 +1 한 값을 현 index에 더해준다. (변이 하나 늘었음을 의미한다.) 인덱스의 값의 제곱한 값이 곧 정사각형의 넓이가 된다. 예시는 최대값 3인 넓이 9의 정사각형을 리턴한다. 그리고 넓이가 1인 경우에는 하나라도 1이 있다면 1을 리턴해주면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function solution(board) { var .. Next.js Next Next는 다음 이유로 인하여 사용된다. 서버 사이드 렌더링을 해준다. 더 빠른 처리 속도를 위한 코드 스플릿을 해준다. 페이지 기반의 클라이언트 사이드 라우팅 역시 제공한다. Hot Moduel Replacement를 지원하기 때문에 추가적인 라이브러리가 필요 없다. Webpack, Babel 기반의 개발환경을 제공 해주면서, 동시에 설정도 원하는대로 가능하다. Dependency npm i react react-dom next Setting next는 npm으로 곧바로 실행 할 수 없다. scripts에 등록후 npm run 으로 실행하자. Next에서는 react를 import 하지 않아도 된다. 하지만 Component는 import해야 하기 때문에 자연스레 Hook을 사용하듯이 함수형 .. 이전 1 2 3 4 5 6 ··· 32 다음
