호박너구리 블로그

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

LG화학, 금호석유화학, 롯데케미칼... 모두 한 번쯤은 들어본 기업들이죠. 그런데 해당 기업들이 속한 석유화학 산업에 대해서도 잘 알고 계신가요? 석유화학은 정유, 철강, 제지, 유리와 같이 다른 제품의 원료가 되는 '소재 산업' 중 하나입니다. 마커, 보드, 에어컨 껍데기, 샤시, 자동차 내장재, 휴대폰 케이스 등 우리 주변에 있는 많은 것들이 석유화학 기업이 생산한 제품으로 만들어지는데요. 석유화학 기업이 만든 소재는 완제품과 달리 우리 눈에 잘 안보이기 때문에 많이 알려져 있지 않죠. 오늘은 그런 석유화학 산업에 대해 어떤 생태계를 갖추고 있고, 어떤 제품을 만들어내는지 한 번 살펴보겠습니다! (기술적인 내용이 많이 포함되어 있으니 부담되신다면 참조 부분들은 넘어가셔도 됩니다) # 소재 산업의 특..

산업 분석 2021. 5. 28. 18:30

코로나19가 발생하고 가장 큰 영향을 받았을 것으로 예상되는 분야 중 하나는 화장품 산업입니다. 실제로 이화여대 근처를 지나다보면 과거에는 로드샵 브랜드를 비롯한 수많은 화장품 매장이 있었는데, 지금은 많은 상가가 비어있는 것을 확인할 수 있습니다. 그렇다면 글로벌 화장품 산업은 어떨까요? 오늘은 글로벌 화장품 산업에 대해 어떤 기업이 주도하고 있고, 어떤 변화를 겪고 있는지 한 번 살펴보고자 합니다! ※ 화장품 산업의 밸류체인/생태계나 국내 화장품 산업에 대해 궁금하신 분은 이전 글도 추천드려요! # 글로벌 화장품 산업 개요 유로모니터에 따르면, 2019년 글로벌 뷰티&퍼스널케어 전체 시장 규모는 약 4,996억 달러(약 550조원)입니다. (구체적인 2020년 수치를 찾을수는 없었으나 유로모니터는 코..

산업 분석 2021. 5. 21. 18:30

오늘은 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

최근들어 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