호박너구리 블로그

개발을 하다보면 가장 어려운 것 중에 하나가 바로 네이밍입니다. 어쩔 때에는 변수와 함수 이름을 고민하는 것이 개발 시간의 상당 부분을 차지하기도 하는데요. 이러한 네이밍에 대한 고민은 단순히 함수와 변수 이름에만 그치지 않습니다. API를 만들다 보면 한 부분에서 네이밍에 대한 고민을 추가적으로 하게 되는데요. 바로 api url 주소 구성/네이밍에 대한 고민입니다. REST 방식으로 api를 만들면 url 주소에 대해 고민하고, graphql 방식으로 만들면 쿼리나 뮤테이션 이름에 대해 결정해야 하는데요. 오늘은 REST API의 URL 컨벤션에 대해 다루어보겠습니다. 사실 네이밍에 정답은 없습니다. 그러나 고민하시는 분들의 결정에 도움이 될 수 있도록 스택오버플로우 질의응답, 개발 블로그, 유명한 ..

개발 2022. 1. 13. 23:13

- 종종 개발 삽질기를 보내드리고 있습니다. 간단하지만 재미있는 개발 삽질기를 받아보고 싶으시다면, 호박너구리 개발일지 뉴스레터를 구독해 주세요:) api를 구현할 때 토큰을 자주 활용하게 됩니다. 현재 요청을 보낸 유저가 누구인지에 따라 보내줘야할 정보가 달라지기 때문인데요. 만약 자기의 정보를 요청하는 것이라면 정보를 보내줘도 되지만, 다른 유저의 정보를 요청하는 api 호출이라면 제한된 정보만 보내줘야 할 수도 있습니다. 이렇듯 api 구현에 있어서 토큰 검증은 자주 사용되는데, 매번 똑같은 코드를 작성할 수는 없죠! 오늘은 토큰 검증을 위한 미들웨어 추가 방법에 대해 다루어보겠습니다:) 1. Express의 Middleware Express에서 미들웨어 구현은 어렵지 않습니다. (관련 문서) 다음..

개발 2021. 12. 22. 22:48

- 종종 프론트엔드 삽질기를 보내드리고 있습니다. 간단하지만 재미있는 개발 삽질기를 받아보고 싶으시다면, 호박너구리 개발일지 뉴스레터를 구독해 주세요:) RestApi를 쓰고 있다면 어느새 라우터에 함수가 많아져 있을 것입니다. 그리고 router가 적을 때에는 몰랐는데, 많아지고 보면 비동기 함수 에러 처리를 위해 매번 똑같은 try, catch를 사용하고 있는 자신의 코드를 발견할 수 있게 되죠. 오늘은 중복 코드를 줄일 수 있는 미들웨어 에러 핸들링에 대해 다뤄보겠습니다! 1. Express의 Middleware Express에서는 다음과 같이 미들웨어 기능을 제공합니다. (Express 문서) 미들웨어를 사용하면 모든 코드에 콘솔을 찍지 않아도, 하나의 함수만으로 모든 api에 대한 로깅 등이 가..

개발 2021. 12. 22. 22:23

- 종종 프론트엔드 삽질기를 보내드리고 있습니다. 간단하지만 재미있는 개발 삽질기를 받아보고 싶으시다면, 호박너구리 개발일지 뉴스레터를 구독해 주세요:) 사실 웹(React)에서 Google API로 구글 계정 연동 기능을 만드셨던 분들은, React Native에서도 비슷하게 구현하면 된다고 생각하실 수 있습니다. 사실 저도 그런 생각을 갖고 있었는데요. 그러나 App이어서 그런지, web에서 url redirect 방식을 사용했던 것과 방식이 조금 다르더라고요. 저는 Expo를 통해서 만들고 있는데, 검색해보니 많은 글들은 expo가 deprecated 시킨 Google이나, GoogleSignIn 패키지를 이용한 내용을 다루고 있었습니다. Expo 는 현재 AuthSession 이라는 패키지 사용을..

개발 2021. 12. 22. 18:30

이제까지 Jest를 통해 테스트를 적용하기는 했으나, 강제성이 없고 스스로 커버리지를 따로 확인해야만 한다는 아쉬움이 있었습니다. 그래서 커버리지를 꾸준히 트래킹하고 쉽게 확인하기 위해 test coverage 툴 중의 하나인 Codecov를 적용했습니다. Code Coverage 툴을 사용하는 이유 위에서 간단히 언급했지만, 자세히 설명하자면 코드 커버리지 툴을 통해 다음과 같은 이득을 얻을 수 있지 않을까 생각했습니다. Code coverage 트래킹 (jest --coverage를 사용하면 coverage를 확인할 수는 있으나) 값의 변화를 트래킹하고 보다 시각적으로 잘 확인하기 위해서 pull request에서 coverage 확인 의도적으로 커버리지를 찾지 않더라도 평소에 자연스럽게 covera..

개발 2021. 5. 30. 14:49

husky는 깃 훅에 따라 원하는 동작을 하게 도와주는 패키지입니다. git add나 commit, push가 시행되기 전이나 후에 원하는 스크립트를 실행시켜주죠. 오늘은 husky를 사용하는 방법에 대해 알아보겠습니다! 주로 사람들이 많이 사용했던 ver 4에서는 다음과 같이 husky를 package.json에서 설정했습니다. { "husky": { "hooks": { "pre-commit": "yarn test" } } } 그러나 이제는 버전 6이 나왔고, ver 6에 대한 사용법으로 살펴보겠습니다. 1. husky 설치하기 우선 두 가지 방법이 가능합니다. a) husky를 처음 사용한다면?: 자동으로 설치 npx husky-init && npm install // npx husky-init &&..

개발 2021. 5. 30. 14:48

오늘은 NextJS 프로젝트에 유닛테스트를 위해 Jest와 react-testing-library를 설치해보려고 합니다! ※ 유닛테스트, Jest, react-testing-library 가 무엇인지, 그냥 React에서 어떻게 사용하는지 궁금하다면 이전 글을 참조해주세요! 1. Jest 설치하기 우선 jest를 설치합니다. yarn add jest // or npm install jest ※ 타입스크립트를 사용하신다면 코드 에디터의 지원을 받기 위해 @types/jest 를 설치하시는 것을 추천합니다. yarn add --dev @types/jest 만약 이후 바로 테스트를 추가한다면 ES6 이상의 문법이나 typescript는 사용하지 못할 것입니다. 왜냐하면 jest가 commonJS 기반으로 작동..

개발 2021. 5. 21. 13:51

이전 글에서 jest와 react-testing-library를 통해 react 유닛 테스트 하는 법을 살펴봤습니다. 그런데 toMatchSnapshot 테스트를 통해 컴포넌트 테스트를 하는 경우 한 가지가 아쉬웠는데요, 바로 snapshot 파일이 생성되는 경로였습니다. 그래서 저는 컴포넌트 위치에 스냅샷 파일이 생기는 것이 파일구조를 복잡하게 만드는 것 같아서 따로 모아두고 싶었습니다. 한 번 어떻게 경로를 바꿀 수 있는지 살펴볼게요! 1. snapshot 파일 모아둘 경로 생성 일단 루트 디렉토리에 관련된 파일을 전부 담아둘 tests라는 폴더를 만들었습니다. 그리고 그 안에 snapshot 파일을 모아두기 위한 __snapshots__ 라는 폴더도 생성할게요. 2. jest.config.js 설정..

개발 2021. 5. 21. 13:49