배경 jest는 우아한테크캠프에서 조금 공부하고 사용해보긴 했다. 그런데 사가 테스트에만 사용을 했었고 tdd방식으로 만들어본적도 없다. 또한 백엔드가 진짜 테스트가 중요한데 백엔드에서 적용해본적이 없다. 그래서 이번에 만든 프로젝트에 테스트를 적용해보려고 한다. 이글은 www.daleseo.com) 글들을 바탕으로 적었다. 사용한 라이브러리 버전 package.json "jest": "^27.3.1", "supertest": "^6.1.6", "ts-jest": "^27.0.7", "@types/jest": "^27.0.2", jest 설정하기 jest는 jest.config.js, jest.config.ts, package.json에서 설정할 수 있다. 나는 jest.config.ts에 작성했다. 세..
배경 우아한테크캠프에서 많은 사람들이 자신이 만든 라이브러리를 배포했다. 나도 실제로 유저들이 사용할만큼 좋은 라이브러리는 아니라도 일단 열심히 만들고 배포해보겠다는 생각을 했다. npm 회원가입 먼저 npm 회원가입을 하자. 이메일 연동까지 해야된다. 까먹지 말자 npm 로그인 npm login을 입력하고 아까 가입한 정보를 입력하면 로그인된다. 그리고 확인을 위해 npmwhoami를 입력하면 내 아이디가 뜬다 중복되는 패키지명 확인하기 중복되는 패키지는 당연히 배포할 수 없다. npm info 로 미리 확인해보자. 그렇게 중복되지 않는 내용을 package.json 내용에 입력하자. 패키지 만들기 열심히 패키지를 만들자. typescript와 d.ts로 타입도 넣어줘야 되는데 일단은 그냥 자바스크립트..
배경 저번에 글을 한번 올렸었는데 설정이 조금 바뀐것들이 있어서 다시 글을 쓴다. 청크라던가 코드스플리팅은 아직 적용하지 않았다. 너무 어렵다. 진짜... 쉬운게없네... 간단하게 코드와 설명만 적겠다. 개념은 저번글을 참고하면 된다. 버전 package.json "dependencies": { "@babel/cli": "^7.14.8", "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "babel-cli": "^6.26.0", "babel-loader": "^8.2.2", "compression-webpack-plugin": "^9.0.0", "core-js-pure": "^3.16.1", "css-loader": "^6.2.0", "css-min..
배경 프로젝트를 시작할 때 가장 먼저 하는 것은 프로젝트 구조를 짜는 것이다. 특히 팀프로젝트를 하게 되면 이 부분에서 충돌이 생기기도 한다. 주니어 수준에서 무엇이 옳은지 판단하는 것은 쉽지 않다. 시니어 개발자라고 할지라도 당연히 프로젝트가 어떤 프로젝트인지에 따라서 그리고 어떤 목적을 가지고 진행하는지에 따라 구조가 달라진다. 나는 정호영님이 추천한 깃허브를 보고 참고를 많이 했다. https://github.com/santiq/bulletproof-nodejs 공통스타일 prettier 먼저 코딩 스타일을 맞춰야 한다. 혼자서 프로젝트를 하더라도 prettier정도는 적용하는 것을 추천한다. 기본 vscode에 설정할수도 있지만 여러명이서 작업할 때는 아래와같이 루트경로에 파일을 만들어준다. 아래..
개요 보통 서버에서 db를 연결해서 쿼리문을 직접적으로 사용하지 않고 orm을 사용한다. 사실 나는 지금도 쿼리문이 더 편한것같다. 하지만 orm을 많이 사용하는 추세다. 일단 orm을 사용하지 않으면 쿼리문이 굉장히 지저분하게 보인다. 효율적이고 빠른 쿼리문을 짜는 것도 중요하지만 가독성도 그만큼 중요하다. 그래서 한방쿼리보다 그냥 여러번 쿼리를 만드는 방법을 사용하기도 한다. 어쨋든... sequelize는 책을보고 사용해봤고 우아한테크캠프에서도 사용을 했다. 나름대로 사용법을 익혔다고 생각하고 다른 orm을 사용해보고 싶었다. 우아한테크캠프의 마지막 프로젝트를 보니 우리팀을 제외한 모든팀이 typeorm을 사용했다. 그리고 개발바닥의 향로님도 typeorm을 사용하는것을보고 한번 공부해봐야겠다는 생..
일단 가장 간단한 방법은 a태그에 해시태그를 사용하는 방법이다. 이 방법의 단점은 같은 태그를 선택했을 때 화면이 이동하지 않는다. 그럴때에는 scrollIntoView를 사용하자. 사용법은 어렵지 않다. 문서를 한번만 보면된다. https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org 간단한 예시를 보겠다. behavior smooth를 하면 부드럽게 움직인다..
배경 사실 예전부터 무한 스크롤에 관심이 있었다. 프로젝트를 만들다보면 몇가지 갈림길에 놓이는 경우가 많다. 내가 경험한 바로는 인증에 세션, 토큰(둘다 사용하기도 한다), 스타일링에 styled-components, scss, css module, 게시판 구현방식에 무한 스크롤, 페이징 등이 있다. 나머지는 다 해봤는데 무한 스크롤은 한번도 해본적이 없어서 꼭 해보고 싶었다. 무작정 생각해보기 서버 일단 어떻게 할까 생각을 해봤다. 서버부터 생각을 해보자. 정렬방법에는 여러가지가 있지만 일단은 가장 기본적인 pk desc로 생각을 해보자. 처음에 위에서부터 데이터를 가져오고 그다음에는 id를 받아서 where문에 id보다 작은값을 적용하면 끝날것같다. 그런데 이 방법으로하면 인기순같은 정렬을 해결할 수..
옵저버패턴이란 컴포넌트와 라우터까지 완성을 했다. 이제 바닐라 자바스크립트로 프로젝트를 시작할 수 있을까?? 가능은 하다. 그런데 유저 닉네임 값을 여러곳에서 이용한다면 계속해서 서버와 통신을 해야할까?? 너무 비효율적이다. 그렇지 않다면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줘야 한다. depth가 작으면 문제가 없지만 재사용성을 고려하면서 만든 컴포넌트는 단위가 작고 몇단계씩 데이터를 넘겨야한다. 그렇게되면 의존성도 높아진다. 모듈간에 의존성이 높은 것은 좋은 현상이 아니다. 그래서 웹 프론트엔드에서는 옵저버패턴을 사용한다. 리덕스도 이 패턴을 사용한다. 옵저버패턴에는 구독(subscribe)과 발행(publish) 개념이 존재한다. 어떤일이 발생했을 때 그 일을 알려달라고 하는 것이 구독이..