storybook은 작성한 리액트 컴포넌트를 독립적으로 개발하고, 관리하고 테스팅하며, 문서화 할 수 있게 해줍니다. 쉽게 생각하면 현재 작성하고 있는 프로젝트의 Button 컴포넌트를 부트스트랩 공식 문서처럼 누구나 컴포넌트의 코드, 외형을 파악하고 문서화해서 관리하게 해줍니다. 때문에 협업에서 뛰어난 효율성을 가집니다. 아쉬운 점은 높은 러닝 커브와 모듈이 자주 충돌하는 번잡한 환경 설정이 있었습니다. 최신 버전에는 Interaction Tests로 실제로 테스팅 과정에서 개발자가 직접 button을 누르거나 input을 입력하면서 테스팅할 필요가 없이 jest, testing-library 함수를 자동으로 상호작용해서 테스팅해줍니다. 예전에는 콘솔로만 확인했던 테스트가 아닌 화면에 상호작용해주면서 ..
Styled Components에서 폰트를 적용하다 ttf 파일 폰트가 적용이 안되서 해결법을 검색해보고 적어보려합니다. import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` * { @font-face { font-family: 'GmarketSansMedium'; src: url('./fonts/GmarketSansTTFMedium.ttf') format('truetype'); font-weight: normal; font-style: normal; } } 5번째 줄 url은 public 폴더가 루트 경로입니다. format을 format('ttf')로 해도 반영이 안 됐는데 간단한 답은 ..
TDD 개발 방식에 대해서 들어보셨나요? 리액트를 개발할 때 보통 컴포넌트 부터 작성하지만 TDD는 '테스팅 코드 작성' -> '컴포넌트 코드 작성' -> '코드 리팩토링' 순으로 개발 절차가 이루어집니다. 이 테스팅 절차를 편리하게 해주는 라이브러리가 있습니다. 요즘 웹 테스팅하면 바로 떠오르는 라이브러리는 Kent C. Dodds라는 개발자분이 만드신 @testing-library가 아닐까 합니다. 실행 환경 설정 yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event 이번 글에서 쓰일 라이브러리들입니다. jest는 가장 널리쓰이는 필수적인 테스트 ..
오늘은 일회성 초기화에 관해서 글을 써보려합니다. 예제 // ✅ 정적 인스턴스가 한번만 생성됩니다. const resource = new Resource() const Component = () => ( ) Redux나 React Query를 사용하시는 분들은 앱 수명당 한번만 초기화 되는 변수가 필요합니다. 보통 컴포넌트 외부에서 인스턴스를 초기화합니다. 위 코드의 const resource는 자바스크립트 번들이 evaluated(평가)될 때 한번만 생성되고 ResourceProvider를 통해서 App컴포넌트에서 사용가능합니다. 하지만 컴포넌트를 여러번 렌더링해서 렌더링마다 자체 resource가 필요한 경우에는 어떡할까요? resource를 컴포넌트 안에 입력하는 방법을 사용할 수도 있습니다. co..
오늘은 useState를 다룰때 미세한 차이지만 좋은 코드 작성에 도움이 되는 것들을 알아보겠습니다. 1. The Functional Updater import { useState } from "react"; const [count, setCount] = useState(0) // 🚨 다음 값을 계산할 때 현재 값에 의존하게 됩니다. setCount(count + 1)}>Increment // ✅ previousCount를 사용해서 다음 값을 계산합니다. setCount(previousCount => previousCount + 1)}>Increment 새로운 값을 setter(setCount)에 전달하지 않고 대신 함수를 전달하는 방법이 있습니다. 리액트는 우리가 함수를 호출한다면 이전 값(previo..
React로 개발을 하다보면 useState hook을 가장 많이 사용하게 됩니다. 오늘은 컴포넌트가 props를 받아와서 state(상태)를 초기화 할때 쉽게 함정에 빠지는 경우를 소개하려합니다. 먼저 오늘의 핵심 코드를 보고 시작하겠습니다. 핵심 코드 import { useState } from "react"; interface IDetailViewProps { initialColor: string; } const fruits = [ { id: 1, name: "banana", color: "yellow", }, { id: 2, name: "apple", color: "red", }, ]; const Pratice: React.FunctionComponent = () => { const [select..
Next.js로 웹 앱의 인증 기능을 구현하면서 MongoDB, Next API Routes와 Next Auth라는 Hooks로 인증 상태관리가 편리한 라이브러리를 사용했습니다. 하지만 이것만으로는 모든 상황의 인증 로직 구현을 이해했다 보기 어려워 jwt 토큰과 쿠키를 쓰는 코드를 따로 구현해보았습니다. 쿠키를 도입한 이유는 local storage,session storage가 취약한 csrf 공격은 프론트엔드 개발자 입장에서 막기 힘들지만 xss 공격에 취약한 쿠키는 httpOnly: true 옵션과 access token, refresh token 활용으로 보안상의 이점을 더 누릴 수 있다는 의견이 커뮤니티에서 더 많아 사용하게 되었습니다. 이 글에서는 access token, refresh to..
