호박너구리 블로그

최근들어 TDD (test-driven development, 테스트 주도 개발) 라는 말이 더 자주 들리는 것 같습니다. 실패하는 테스트 코드를 만들어놓고, 그 테스트를 통과하는 진짜 코드를 작성하고, 수정할 것이 있으면 리팩토링하는 방식인데요. 그렇게 하면 작은 기능 단위로 개발하게 되기 떄문에 깔끔하고 좋은 코드를 유지할 수 있게 됩니다. 1. 테스트의 종류: 유닛 테스트란? 프론트엔드 테스트는 크게 세 가지 종류가 있습니다. E2E(End to End) 테스트는 프로젝트가 브라우저 위에서 제대로 작동하는지 사용자 관점에서 테스트하는 방법입니다. 보통 셀레니움(Selenium)이나 퍼페티어(Puppeteer) 등을 사용합니다. 통합(Integration) 테스트는 기능 단위로 묶어서 테스트하는 방법..

개발 2021. 5. 21. 11:10

회원가입과 로그인 같은 인증(auth) 기능을 구현하기 위해서 프론트엔드에서 쿠키에 토큰(jwt)을 저장하는 경우가 많습니다. 저는 그런 경우에 react-cookie를 자주 사용하는데요, 패키지 설명을 읽어보면 조금 복잡하게 되어있더라구요. 저는 거의 인증기능에서만 쿠키를 이용하기 때문에, 보다 쉽게 사용하는 방법을 설명하고자 합니다! ※ 만약 Hooks 방식으로 쿠키를 이용하고 싶은 분들은 패키지 설명을 보시는 것을 추천드립니다. 1. 쿠키 관련 함수 만들기 우선 패키지를 먼저 다운받습니다. npm install react-cookie // yarn add react-cookie 그 후 저는 쿠키와 관련된 함수를 모아두는 util 파일을 하나 만들었습니다. cookie.ts (혹은 cookie.js)..

개발 2021. 5. 20. 21:51

※ ESLint를 Typescript에 맞게 설치하는 것이 궁금하다면 이전 글을 참고해주세요. 타입스크립트를 사용한다면 인터페이스에서 임시 변수명을 지어줘야 하는 경우가 있습니다. 다음과 같이 말이죠. interface InputProps { setValue: (value: string) => void value: string } 그런데 기본적인 ESLint설정을 해둔 상태라면 다음과 같은 no-unused-vars Lint 에러가 나타납니다. 인터페이스니까 사용하는 부분이 없는 것은 당연한데 말이죠. 이 부분은 린트 rules 설정으로 해결 할 수 있습니다. module.exports = { ... extends: [ "eslint:recommended", // "plugin:react/recommen..

개발 2021. 5. 19. 13:35

리액트에서는 자체적으로 상태 관리를 할 수 있는 Hooks나 Context를 제공합니다. 그러나 내장된 상태 관리 프로그램은 다음과 같은 몇 가지 단점이 있죠. - 컴포넌트의 상태는 공통된 상위요소에서 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 함 - Context는 단일 값만 저장할 수 있으며, 여러 값들의 집합을 담을 수는 없음 - 이 두가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할을 어렵게 만듦 그래서 사람들은 보통 Redux, Mobx을 사용합니다. 그리고 페이스북에서 새로운 상태관리 라이브러리 Recoil도 선보였죠. 오늘은 그 중에서 Recoil에 대해서 간단히 살펴보고 적용해보겠습니다! ※ ..

개발 2021. 5. 18. 15:40

ESLint와 Prettier는 코드를 깔끔하게 유지하고 컨벤션을 통일하는데 좋은 툴입니다. 그래서 많은 프로젝트에서 많이 사용하고 있는데요, 오늘은 NextJS 프로젝트에 ESLint와 Prettier를 적용해보겠습니다! ※ 혹시 ESLint를 잘 모르시거나 자세한 설정에 대해 궁금하시다면 이전 글을 먼저 읽고 와주세요! 1. ESLint 적용하기 ※ 사실 패키지 설치와 설정 파일 세팅은 NextJS가 아니더라도 동일하게 적용 가능합니다. (1) 패키지 설치 우선 다음 명령어를 통해서 패키지를 설치합니다 npm install eslint --save-dev # or yarn add eslint --dev (2) 설정 파일 세팅하기 그리고 설정 파일을 세팅하면 되는데요, --init 플래그를 사용한 다음..

개발 2021. 5. 17. 12:09

1. ESLint란? Lint는 협업하며 개발을 하신 분이라면 많이 들어보셨을 것입니다. Lint(혹은 Linter)란 에러가 있는 코드에 표시를 달아주는 것을 뜻하는데요, 에러와 코딩 스타일을 잡아주기 때문에 여러 명이 코드를 작성하더라도 한 사람이 코딩한 것처럼 깔끔하게 만들어줄 수 있죠. ESLint는 ES(Ecma Script)와 Lint를 합친 것으로, (Ecma라는 기구에서 만든 Script가 표준 Javascript이기 때문에) 자바스크립트 코드의 에러를 표시해 줍니다. 린트를 통해 잡아내고 싶은 에러의 기준은 직접 설정할 수 있는데요, 문법적인 오류만 잡아낼 수도 있고 세미콜론(;) 사용과 같은 전반적인 코딩 스타일을 정해둘 수도 있습니다. 2. ESLint 설정하는 방법 (1) 패키지 설..

개발 2021. 5. 16. 20:25

이전 글에서 레이아웃 컴포넌트를 만들고 헤더와 푸터를 추가했습니다. 헤더에는 로고도 있고 메뉴바도 있죠. 보통 로고를 누르면 메인페이지로, 메뉴를 누르면 해당 메뉴로 페이지가 이동(라우팅) 됩니다. 원래 html에서는 a 태그로 사용하죠. 이와 달리 NextJS는 CSR과 SSR을 모두 지원하기 때문에, 자체 태그와 라우팅 함수를 만들었습니다. 오늘은 그 중에서 어떻게 a 태그대신 Link태그로 라우팅 할 수 있는지 살펴보겠습니다. 1. 링크 태그 이용하기 이것은 현재 헤더의 모습입니다. 로고와 메뉴, 그리고 스타일까지 적절하게 적용되어있죠. import styles from './Header.module.scss' const Header = () => { return ( Traffickr 서비스 소개 ..

개발 2021. 5. 11. 18:30

이전 글에서, 설치된 NextJS 프로젝트에 Typescript를 추가했었습니다. 그리고 이번에는 본격적으로 React 컴포넌트를 추가하여 페이지와 내부 컴포넌트를 만들어서 index 홈페이지를 구성하려고 합니다. 1. 컴포넌트 디렉토리 생성 우선 컴포넌트 디렉토리 구조는 사람마다, 프로젝트마다, 회사마다 다릅니다. 어떤 곳은 atomic 디자인을 추구하며 디렉토리를 여러 단계로 구분하고, 어떤 곳은 components라는 한 폴더 안에 두기도 하죠. (컴포넌트 디렉토리 구조에 대해서는 나중에 구체적으로 다뤄볼게요!) 우선은 대부분의 프로젝트가 components라는 폴더를 갖고있으니 만들어보겠습니다. (선택) Container 디렉토리 생성 그리고 저는 page와 1:1 대응하는 컴포넌트를 contai..

개발 2021. 5. 8. 18:30