분류 전체보기
-
divide and conquer vs dynamic programming분석과탐구 2023. 4. 8. 01:06
divide and conquer(분할 정복) divide and conquer는 문제를 작은 문제로 나누어 해결한다. 문제 자체가 답이 될 정도로 작게 분할한다. 그리고 그 결과들을 취합하여 조금 더 큰 문제를 해결한다. 이것을 반복하여 원래의 문제까지 돌아오고 문제를 해결한다. divide and conquer를 구성하는 원리 divide: 큰 문제를 작은 문제로 나눈다. 작은 문제는 큰 문제와 유사하지만 좀 더 사이즈가 작은 문제이다. 작은 문제는 다른 문제와 독립적이라, 문제를 풀어도 다른 문제의 정답엔 영향을 주지 않는다. 예를 들어, 원소 10개 배열을 정렬하는 문제를 5개 배열 2개로 나누어서 해결한다. 원소 5개 배열 하나를 정렬하더라도, 다른 배열을 정렬하는 문제와 독립적이다. conqu..
-
CRA의 npm run start는 서버를 띄우는 걸까?분석과탐구 2023. 3. 28. 13:43
CRA의 npm run start는 어떤 일을 하는 걸까? CRA(Create React App)의 npm run start 커맨드를 실행하면, 브라우저에서 로컬호스트의 3,000번 포트로 접속하여 개발한 내용을 확인할 수 있다. 그렇다면, 이 커맨드는 서버를 띄우는 것인가. 아니면 로컬의 파일들을 취합해서 단순히 보여주는 것인가. 확인해 보자. package.json의 scripts npm run start는 package.json에 scripts안에 정의한 것을 실행하는 커맨드이다. scripts안에 있는 커맨드를 보니 모두 react-scripts라는 것을 이용하여 커맨드를 실행하는 것으로 보인다. react-scripts는 어디에 있는 것일까. node_modules/.bin npm run으로 실..
-
서로 다른 프로젝트에서 코드를 공유하기짧은경험기 2023. 3. 25. 20:54
서로 다른 프로젝트에서 코드를 공유하기 서버, 클라이언트 프로젝트가 독립적으로 존재할 때, 요청과 응답을 다루는 코드에 중복되는 부분이 있어 공유하고 싶다. 어떻게 코드를 공유할 수 있을까? 방법 서버, 클라이언트, 공통 코드를 다루는 프로젝트가 따로 있다고 가정해 보자. 디렉토리 구조는 다음과 같다. 위와 같은 구조에서, client.ts는 common.ts에서 export하는 타입과 함수를 import하여 사용하려고 했다. 빌드는 실패했고, 에러는 다음과 같다. TS6059: File 'C:/workspace/test/structure/common/common.ts' is not under 'rootDir' 'C:/workspace/test/structure/client'. 'rootDir' is e..
-
node.js + typescript 디버그 모드 실행하기(웹스톰)짧은경험기 2023. 3. 22. 18:51
디버그 모드는 왜 쓰는지? node.js, typescript를 사용하는 웹스톰 프로젝트에서 디버그 모드에 들어가는 방법을 알아본다. 디버그 모드에서 브레이크 포인트를 걸어 코드 진행을 멈출 수 있고, 변수의 값과 같은 정보를 알 수도 있다. 디버그 모드 없이 개발한다면, 특정 변수를 확인하기 위해서 console.log(변수) 같은 코드를 추가해야 할 것이다. 디버그 모드를 이용하면, 이러한 번거로움 없이 코드를 확인할 수 있다. 디버그 모드 적용하기 참고링크: 웹스톰공식문서 전제조건: 프로젝트에 ts-node가 설치되어 있어야 한다. 1. 상단 메뉴의 Run탭에서 Edit Configuration을 선택한다. 2. 새로 나타난 창의 좌측 상단 + 버튼을 누르고 Node.js를 클릭한다. 3. 우측 화..
-
미니 게시판에 서버 추가짧은경험기 2023. 3. 21. 15:32
목적 이전에 만든 미니 게시판에 서버를 붙인다. 목표 node.js, express를 이용하여 서버를 구현하고 mysql을연동한다. 기존의 미니 게시판을 서버와 연동한다. 과정 데이터베이스 db는 mysql로 하고, 따로 설치없이 docker를 이용하여 이미지를 띄워보기로 했다. mysql은 익숙하기도 하고 많은 사람들이 사용하여 자료 찾기가 쉬울 것 같아서 선택했다. 서버를 배포할 것이므로 docker를 사용하면 로컬에 설정한 내용을 기반으로 세팅하기 용이하지 않을까 싶었다. docker에 mysql 공식 이미지와 설명이 있어 이를 활용하였다. 링크에 있는 yml파일 예제에 몇가지를 추가하였다. volums: 저장한 데이터를 영속적으로 저장하기 위해 사용하였다. 도커에서 volums를 이용하여 매핑된 ..
-
미니 게시판짧은경험기 2023. 3. 19. 17:31
타입스크립트, 리액트, 스타일드 컴포넌트 등을 배웠으니, 작게라도 프로젝트를 하나 해봐야겠다는 생각이 들어서 미니 프로젝트를 시작했다. 딱히 생각나는 주제가 없어서 게시판으로 정했다. 저장소는 다음과 같다. 깃허브 만들면서 생각하고 정리했던 것들을 적어본다. 목적 게시글과 댓글을 읽고 쓸 수 있는 게시판 목표 게시글을 작성하고 볼 수 있다. 댓글을 작성하고 볼 수 있다. 작성한 게시글과 댓글을 저장하여 다시 볼 수 있어야 한다. 스택 react, typescript, styled-component 리덕스 없이 useReducer, useState, context api로 상태 관리를 한다. 생각거리 Post(게시글) 컴포넌트가 비대해졌다. 게시글과 댓글 관련 기능들이 모여 있어서 그런 거 같다. 어떤 게..
-
동적인 데이터를 처리하는 다양한 방법.간단기법 2023. 3. 13. 13:16
동적인 데이터를 다뤄야 하는 상황 서버가 클라이언트로부터 데이터를 받는 지점이라 거나, npm jwt 라이브러리와 타입스크립트를 같이 사용하다 보면, 타입을 어떻게 해야 할지 고민이 생기는 곳이 있다. // jwt는 내가 원하는 키:밸류 를 이용하여 서명을하고 검증을 할 수 있다. token = jwt.sign({id: "1234"}, secret) // 을 통해 얻은 token을 쿠키에 담아 클라이언트로 응답한다. // 클라이언트는 서버에 요청할 때마다 쿠키를 같이 보내게 되고, 서버는 쿠키에서 토큰을 꺼내 검증한다. result = jwt.verify(token, secret); // 이 때, verify로 얻은 result에 id가 있는지 아닌지는 verfiy의 리턴 타입만으론 알 수 없다. // ..
-
express의 Request 타입 확장하기분석과탐구 2023. 3. 13. 11:57
express의 Request 타입 확장이 필요한 상황 // 익스프레스의 미들웨어 function auth(req, res, next) { // 인증을 다 한후에 id를 얻어낸다. // 이 id를 컨트롤러에서도 쓰고싶다. req.id = id; } app.get('/', auth, (req, res) => { // 미들웨어에서 req.id에 id를 등록하여 가져올 수 있다. const userId = req.id; }); 익스프레스에 미들웨어를 적용해서 사용하다 보면, 미들웨어에서 얻은 데이터를 컨트롤러로 그대로 넘기고 싶은 경우가 있다. 해당 데이터를 컨트롤러 쪽에서 다시 얻으려고 하면 미들웨어에서 했던 일을 반복해야 하는 경우가 있기 때문이다. 자바스크립트에서라면 `req.id = id;`처럼 그대로..