프로젝트 개발 기록51 TypeScript + node.js에서 Jest로 단위테스트 하기 0. 개요 [ 내가 TDD를 하게 된 이유 ] 엘리스 2차 프로젝트의 개발 기간은 3주였다. 3주라는 시간 내에 기획과 개발, 배포, 발표 준비를 해야 한다는 부담감에 테스트 코드 작성을 우선순위에서 미루고 바로 비즈니스 로직을 구현했다. 하지만 점점 로직이 쌓이면서 새로운 기능 코드를 작성할 때 기존 코드에 영향을 주지 않고 작성을 해야 하는데 테스트 코드가 없어 내가 생각하지 못한 사이드 이펙트가 터졌다. '코드 작성 -> 사이드 이팩트 -> 코드 수정 -> 사이드 이팩트 -> 코드 수정' 과정이 반복되니 2가지 불편함이 생겼다. 코드 생산성 감소 코드에 대한 자신감 하락 내 코드에 대한 자신감이 떨어졌다. 프론트에서 문제가 생겼다고 물어볼 때 백엔드 API 기능의 문제가 없다는 것을 증명하기 어려웠.. 2022. 7. 17. [프로그래밍 언어] Java 이 게시글은 Java 알고리즘 풀이에 필요한 내용을 공부하며 계속 추가할 예정이다. 1. 입출력 ✔️ Scanner import java.util.Scanner; public class Ex1000 { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int a = sc.nextInt(); int b = sc.nextInt(); sc.close(); System.out.println(a+b); } } Scanner 클래스는 생성자의 입력으로 System.in, 즉 콘솔입력인 InputStream을 필요로 한다. in.next() : 문자열 입력시 공백 전 까지 in.nextLine() : 문자열 입력시 Enter 입.. 2022. 7. 9. React app build 해서 배포했는데 CSS 적용 안되는 에러 해결 방법 우선 build 후 css 적용이 안되는 것의 원인은 다양하다. 그 중 내가 겪은 에러와 해결 방법에 대해 포스팅하고자 한다. 1. 문제 상황 배포된 사이트에서 main.css를 확인해본 결과 build된 css는 모두 잘 적용이 되었고, 스케줄 페이지의 css가 빌드되지 않은 것을 확인했다. 이유를 알고 보니..! 2. 문제 원인 💡 front의 GlobalStyle.js의 코드 중에서 아래 코드가 있는 것이 문제였다. @import url('https://webfrontworld.github.io/SCoreDream/SCoreDream.css%27'); npm run build나 yarn build를 통한, 웹팩(WebPack)을 이용한 번들링을 통해 build 폴더를 만들게 된다. 이 과정에서 위 .. 2022. 7. 1. React build해서 배포할 때 sourcemap 제거 때는... React 프로젝트를 배포하기 위해 build 하던 중.. 힘차게 yarn build를 실행시키는 동시에 찝찝한 컴파일 warning 메세지를 보았다..! 콘솔에 뭐가 이렇게 찍히지?? 콘솔에 찍힌 source map 은 어떤 것일까?! 지금부터 알아보자! 😊 1. webpack CRA로 React 프로젝트를 구성하는 경우는 webpack에 의해 번들링 되어 난독화되고 압축된다. 이렇게 압축되면 디버깅하기가 힘들어진다. 그래서 source map이 필요하다. 2. source map 일반적으로 React App을 배포할 때는 배포를 위해서 Build를 하게 된다. 이때 source map은 빌드한 파일과 원본 파일을 연결시켜준다! Build 파일은 성능을 위해서 압축되어 있는데 이때 오류가 생.. 2022. 7. 1. [Flask] AttributeError: module 'jwt' has no attribute 'decode' 오류 해결 방법 🥺 문제 상황 local에서 테스트 한 다음 배포를 했을 때 로그인 후 서비스를 이용하면 500 에러가 나왔다. 아니!! 왜 안돼??? 침착하게 로그를 확인해보자. Docker로 배포했기 때문에 아래 명령어로 컨테이너 로그를 확인했다. $ docker logs 로그를 확인해보니 jwt 모듈 에러였다. 💡 문제 해결 JWT와 PyJWT가 모두 설치된 경우 문제가 발생한다. 나는 분명 PyJWT만 install 했는데 함께 설치된 것이다. 그래서 import 할 때 다른 라이브러리 JWT를 가져와서 생긴 문제이다. requirements.txt를 확인하면 두가지가 함께 설치된 것을 볼 수 있다. 기존에 설치된 패키지를 모두 삭제하고 다시 PyJWT를 설치하면 문제를 해결할 수 있다. $ pip uninsta.. 2022. 6. 30. [AI] 자연어처리, konlpy 설치 현재 AI 웹서비스를 진행하고 있다. 우리 서비스의 메인 기능은 자신의 증상을 문장으로 작성하면 영양제 추천을 해주는 서비스이다. 이때, 형태소 분석을 위해서 사용하는 모듈이 konlpy 인데 이 친구 참.. 설치가 쉽게 안된다. 스쳐지나간 오류 지옥 ㅎ.. 해결하면 다음 에러가 나타나고... 0. KoNLPy 한국어 정보처리를 위한 파이썬 패키지이다. 명사 뿐 아니라 모든 품사의 형태소를 알아내려면 morphs라는 명령을 사용한다. konlpy 내 클래스는 Java 기반으로 JDK 설치가 필요하다. 1. JAVA 설치 설치 사이트 https://www.oracle.com/java/technologies/downloads/ 현재 운영체제에 맞게 설치하면 된다. 2. 환경변수 설정 환경변수를 설정해야 JA.. 2022. 6. 23. [TypeScript+Express] Redis로 Refresh Token 관리 0. 개요 이전 프로젝트에서는 MongoDB를 사용하면서 Refresh Token을 DB에 저장했다. 이번에는 Redis를 연결하여 구현을 해보자. 지난 포스팅에서 JWT에 대한 개념을 올렸기 때문에 이번에는 Redis에 초점을 맞춰서 작성하도록 하겠다. 👉 [Node.js+Express] Refresh Token 구현 1. 사용 이유 [ 왜 Refresh Token을 저장해야할까 ] Access Token은 서버에 따로 저장해 둘 필요가 없지만, Refresh Token의 경우 서버의 stroage에 따로 저장해서 이후 검증에 활용해야 한다. 검증을 위해 서버는 Refresh Token을 별도로 저장하고 있어야 하며, Refresh Token을 이용한다는 것은 추가적인 I/O 작업이 필요하다는 의미이며.. 2022. 6. 21. 파이썬 가상 환경(virtualenv)과 Flask 서버 구축, pip freeze vs pipreqs 파이썬을 사용하여 프로젝트를 진행할 때엔 가상 환경을 구축한 뒤 개발을 권장하고 있다. 가상 환경을 구축하여 프로젝트를 하는 이유는 프로젝트 마다 라이브러리의 버전이 다를 수 있기 때문에 프로젝트 내에 버전을 일치시켜 독립적으로 개발하기 위해서이다. 1. 설치 $ pip install virtualenv 2. 프로젝트 폴더 생성 $ virtualenv "프로젝트폴더명" 나는 프로젝트 이름을 app 으로 했다. 이렇게 폴더가 생성된다. 3. 가상환경 시작 위에서 생성한 app 폴더로 cd app 해서 다음 명령어를 실행한다. 그러면 가상환경이 시작된다. 가상환경 명이 (app) 처럼 뜬다면 정상적으로 실행된 것이다. $ source ./Scripts/activate 이제 여기서 원하는 패키지를 설치하면 된.. 2022. 6. 18. [TypeScript + Express] Error handling error middleware를 구현해보자! 1. Express Error handling middleware error.status로 error를 던질 때 상태코드도 설정할 수 있도록 구현했다. import { Request, Response, NextFunction } from "express"; import { HttpException } from "../utils/error-util"; function errorMiddleware(error: HttpException, req: Request, res: Response, next: NextFunction) { console.log("\x1b[33m%s\x1b[0m", error); const status = error.status || 500; r.. 2022. 6. 17. [Error: TS(2339)] TypeScript에서 catch(error) 에서 error message 사용하기 💡문제 상황 JavaScript에서 catch 문에서는 error.message를 쓰는 경우가 많았다. TypeScript에서도 JS와 같이 코드를 작성하니 다음과 같은 오류가 생겼다. TypeScript는 error의 타입을 unknown을 기본값으로 갖는다. 그래서 catch 절 error 변수에 Error 타입을 넣어보았다. 하지만 뚜둥! 다음과 같은 오류가 생겼다. catch 문에서 발생하는 에러가 Error 객체가 아닌 에러일 수도 있기 때문에 Error 타입을 지정해줄 수 없다. 따라서 error가 Error 객체라면 error.message를 반환하고 다른 객체라면 error 자체를 stringify 해서 반환하자. 💡 해결 방법 catch문에 사용할 error util 함수를 만들었다. e.. 2022. 6. 15. [#1] TypeScript + Express에서 Sequelize 시작하기 0. 개요 시퀄라이즈는 node.js ORM이다. Postgres, MySQL, MariaDB, SQLite, Microsoft SQL Server를 지원한다. 3차 웹 프로젝트에서 MySQL DB를 사용하기 위해서 Sequelize를 사용해보자! 1. 설치 yarn add sequelize sequelize-cli mysql2 sequelize: RDB와 매핑되도록 해주는 ORM 패키지 sequelize-cli: commandline for sequelize mysql2 : mysql과 연결을 위해 필요한 패키지 2. 초기 설정 ✔️ sequelize init sequelize 명령어 확인 -h 옵션으로 명령어를 확인할 수 있다. npx sequelize -h 아래 명령어를 입력하면 초기 폴더 구조가 .. 2022. 6. 14. hard delete(물리삭제)와 soft delete(논리삭제), sequelize에서 구현 1. hard delete (물리삭제) : 직접 데이터를 삭제하는 방법이다. 삭제한 데이터가 추후에 조회할 필요가 없을 때 사용하는 방식이다. 2. soft delete (논리삭제) : 데이터를 삭제하지 않고 삭제 여부를 확인하는 칼럼에 값을 넣는 방식이다. 현업에서는 user 데이터는 soft delete를 한다고 한다. 👩💻 sequelize에서 구현 이제 sequelize에서 User 테이블에 soft delete, hard delete 하는 방법을 알아보자. 👉 공식 문서 1) Paranoid 옵션 sequelize는 모델을 정의할 때 deletedAt이라는 칼럼을 추가하는 옵션을 제공한다. paranoid: true 로 하면 자동으로 deletedAt 칼럼이 생긴다. 나는 칼럼명을 스네이크 표.. 2022. 6. 13. [Error: TS(2339)] Express Request 확장하기 😥 문제 상황 1. Token 검증 Middleware 작성 토큰 검증 코드를 작성하면서 req.currentUserId로 decoded한 값을 할당하려던 중 js 프로젝트에서는 오류가 없었던 코드가 ts에서 오류가 생겼다. // ./src/middlewares/loginRequired.ts ... try { if (!process.env.JWT_SECRET_KEY) { throw new Error("JWT_SECRET_KEY가 존재하지 않습니다."); } const secretKey: string = process.env.JWT_SECRET_KEY; const jwtDecoded: any = jwt.verify(userToken, secretKey); const userId = jwtDecoded.us.. 2022. 6. 9. TypeScript + Node.js + Express 에서 프로젝트 시작하기 0. 프로젝트 폴더 생성 나의 프로젝트 폴더 구조는 다음과 같다. 1. 패키치 설치 나는 package manager로 yarn을 사용했다. 내 프로젝트 폴더 구조 기준으로 back 폴더에서 다음 명령어를 실행했다. 1) yarn 초기화 $ yarn init 2) 필요한 패키치 설치 typescript 전역으로 설치 yarn add typescript -g $ yarn add ts-node nodemon typescript @types/express @types/node nodemon --dev $ yarn add express typescript는 node에서 바로 실행되지 않기 때문에 tsc를 사용해서 javascript로 변환한 다음 실행된다. 프로덕션 환경에 올리기 위해서는 모든 파일.. 2022. 6. 6. Swagger를 활용한 API 명세와 개발 협업 2탄 0. 개요 💡 swagger를 명세하는 방법은 다양하다. 모듈을 설치해서 각각의 router 파일 상단에 직접 명세 yaml 파일이나 json 파일 하나에 모든 API 명세를 하는 방법 [ 이전 프로젝트에서 2번 방식을 선택한 이유 ] 개인적으로 라우터가 지저분해지는 것을 정말 싫어한다. 1번 방식은 코드가 복잡해지고 명세와 router 코드가 함께 있어 코드 가독성이 떨어졌다. 그래서 지난 프로젝트에서는 하나의 파일에 모든 API를 설계하는 방식으로 협업을 했다. [ 아놔.. 어디 괄호가 잘못된거야? ] 일단 yaml 파일, json 파일 두가지 모두 들여쓰기 또는 괄호가 중요하다. 그런데 점점 API가 많아질수록 괄호나 들여쓰기 실수가 발생했을 때 오류를 찾는 과정이 정말 피곤했다.. (정말정말) 🤣.. 2022. 6. 4. 이전 1 2 3 4 다음 반응형
