본문 바로가기

전체 글

함수 반환 타입을 명확히 지정하고 특정 프로퍼티를 가지는 타입도 지정해보자 이번 글도 타입스크립트를 써보며 배웠던 점을 적어보려 한다. 사실 프로젝트를 진행하면서 타입을 구체적으로 지정하는 게 생각보다 쉽지는 않았지만, 그 과정에서 배운 점들이 정말 많았다. 이번에는 useToggle이라는 커스텀 훅을 작성해 보며 겪었던 일들과 배운 점들에 대해서 알아보자. useToggle은 생각보다 되게 자주 사용하는 커스텀 훅이다. 타입스크립트와는 처음 사용해 봤는데, 타입을 지정해 주는 게 쉽지 않았다. 내가 처음에 작성한 useToggle 훅과 사용하는 코드는 다음과 같다. import { useCallback, useState } from 'react' const useToggle = (initialState = true) => { const [state, setState] = us.. 더보기
구체적인 타입을 지정하고 재사용성이 있는 코드를 작성하자 TIFY 프로젝트를 진행하면서 본격적으로 타입스크립트를 적용해 볼 수 있는 기회가 생겼다. 나는 타입스크립트 공부를 한 것을 토대로 구체적으로, 그리고 재사용성 있게 타입을 지정하려 노력했다. 그 예시를 한 번 살펴보도록 하자. FriendsListB 컴포넌트인데, 친구 목록을 나타내기 위한 컴포넌트이다. 아래 사진과 같이 세 가지 종류로 이루어져 있다. 먼저 세 종류 간 공통적인 필드와 개별적인 필드로 구분해보자. 공통적인 필드는 프로필 이미지를 나타내는 imageUrl, 친구 이름인 name, 온보딩 상태를 나타내기 위한 currentState, 해당 컴포넌트를 클릭했을 때 발생시킬 함수를 위한 onClick 정도로 생각해 볼 수 있다. 개별적인 필드는 두 가지로 나눌 수 있는데, 이는 이름 아래 설.. 더보기
yarn berry + vite + react + typescript + react-query + emotion + prettier + eslint + husky + lint-staged + storybook 프로젝트 세팅을 해보자 이전에 yarn berry와 vite에 대한 글을 쓴 적이 있다. 그때는 yarn berry와 vite가 무엇인지 정도만 알아봤었는데, 이번에는 직접 프로젝트 세팅을 해보자. yarn berry, vite, react, typescript, react-query, emotion, prettier, eslint, husky, storybook 이렇게 세팅을 해보려고 한다. vite + react + typscript 프로젝트 생성 가장 먼저, vite 프로젝트를 먼저 생성해 보자. 이때, react와 typescript를 사용하도록 생성해 주면 된다. 아래 명령어를 통해서 생성해 주었다. yarn create vite {project name} --template react-ts 추가적으로 vite에서는 .. 더보기
Vite에 대해서 알아보자 Vite Vite는 네이티브 Javascript 모듈인 ES Module을 기반으로 한 데브 서버이다. 기존 프론트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있는데도 불구하고, 현재는 CRA를 통한 React 앱을 구축하는 것보다 Vite를 사용해서 React 앱을 구축하는 방향으로 많이 사용한다고 한다. 이제부터 왜 Vite를 사용하는지에 대해서 알아보자. 번들링 Vite에 대해서 이해하기 전에 알아야 할 사전 지식들이 몇 개 있다. 그 중 하나가 번들링이다. 웹 개발에서 번들링은 빌드라고 이해하면 될 것 같다. 번들링은 말 그대로 웹 애플리케이션을 제공하기 위해서 여러 코드와 프로그램들을 묶는 행위 정도이다. 개발자가 번들링된 웹 애플리케이션을 만들고, 사용자는 번들링한 .. 더보기
yarn berry에 대해서 알아보자 yarn berry yarn berry는 다들 한 번씩은 들어봤을 거 같다. 쉽게 말하자면 새로운 패키지 관리 시스템이다. 왜 요즘 npm을 사용하지 않고 yarn berry를 사용하려 하는가?에 대해서 알아보자. npm 다음은 npm의 단점들이다. 파일 시스템을 이용해서 의존성을 관리하는 npm은 node_modules 폴더를 이용한다. 처음 패키지를 import하는 경우, npm은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색하게 된다. 패키지를 찾지 못하면 계속해서 느린 I/O 작업이 일어나게 되고, 실패하기도 한다. 또, 각 패키지의 상위 디렉토리의 환경에 따라서 해당 의존성을 찾을 수 있는지가 달라진다. 따라서 일관성 있게 패키지를 불러올 수 없는 것이다. 하지만.. 더보기
Storybook을 활용해서 개발해보자 프론트엔드 개발자라면 스토리북에 대해서 한 번쯤은 들어봤을 것이다. 안타깝게도, 저는 이전까지 프론트 개발자가 아니었나 봅니다. TIFY 프로젝트를 하면서 처음 스토리북을 사용해봤다. 처음 써볼 때는 굳이 컴포넌트 만들고 테스트해볼 이유가 있나..?라고 생각했었는데, 잘못된 생각이었다. 내가 생각한 테스트라는 건 프론트엔드 개발자에 한정된 것이었고, 스토리북을 사용하면 프론트 개발자뿐만 아니라 디자이너와도 현재 진행된 상황 공유 및 직접 테스트까지 진행해볼 수 있다는 장점이 있었다. 스토리북의 또 다른 장점으로는 UI 컴포넌트를 문서화까지 진행할 수 있다는 것이다. 이에 대해서는 차차 알아가보도록 하자. Storybook 사용법 Storybook 초기 세팅 관련해서는 별도의 글을 올릴 예정이니 그 부분이.. 더보기
깃허브 이슈 템플릿과 PR 템플릿을 생성해보자 이전에 깃허브 이슈 관련 글을 올린 적이 있다. 해당 글은 아래 링크로 접속하면 볼 수 있다. https://gugu76.tistory.com/110 그때 꼭 깃허브 이슈 템플릿과 PR 템플릿을 직접 생성해 보겠다고 했었는데, 이번 기회에 생성도 해보고 글도 남겨보려고 한다. 템플릿을 만들어두면, 일관적으로 이슈 및 PR을 생성할 수 있고, 매번 새롭게 작성하지 않아도 된다. 만약 템플릿을 만들어두지 않는다면, 다음과 같은 과정을 매번 겪어야 한다. 그래서 프로젝트를 진행한다면, 편리함과 일관성을 유지할 수 있도록 템플릿을 만들어보려고 한다. 이슈 템플릿을 생성해보자 먼저, 이슈 템플릿부터 만들어보자. 이슈를 생성하고 싶은 레포지토리에 들어가서 Settings 부분을 보면 아래와 같이 이슈 템플릿을 만들.. 더보기
깃허브 이슈를 통해 협업해보자 이번에 TIFY 프로젝트를 진행하면서 깃허브 이슈 기능을 알게 되었다. 깃허브 이슈..? 깃허브 이슈는 프로젝트 진행 시 진행 상황을 한눈에 파악할 수 있게 해 준다. 이슈라고 하면 뭔가 문제가 생겼을 때만 사용할 것 같은 네이밍이지만, 기능 구현, 리팩터링, 개선 사항, 버그 등 작업 상 웬만한 것들을 다 포함한다. 먼저 TIFY에서 진행한 깃허브 이슈 사용법은 다음과 같다. 업무 배정을 받으면 깃허브 이슈를 먼저 생성한다. 이렇게 프론트 리드님이 만들어주신 이슈 템플릿을 이용해서 이슈를 생성할 수 있다. UI 이슈를 예로 들어서 설명해 보자면, 프론트의 경우, 페이지부터 작업을 하는 것이 아니라, 컴포넌트부터 생성한다. 버튼, 바텀 시트 등 재사용할 수 있게 컴포넌트를 먼저 생성하고 페이지 작업을 하.. 더보기

티스토리툴바