본문 바로가기

프로젝트 개발일지/TIFY

올바른 추상화와 선언적인 코드 작성하기 코드를 작성하다보면, 어느 단계까지 추상화를 해야할 지 의문이 생길 수 있다. 또, 지금 작성하고 있는 코드가 다른 사람이 봐도 클린 코드라고 할 만큼 선언적인 코드인지, 올바르게 추상화되어있는지 궁금할 수 있다. 이런 의문들을 다는 아니지만, 조금이나마 해결해보기 위해서 글을 써보게 되었다. 선언적 프로그래밍 vs 명령형 프로그래밍 명령형 프로그래밍은 어떤 일을 어떻게 할 것인가에 관한 것이고, 선언적 프로그래밍은 무엇을 할 것인가에 관한 것이다. 이 문장을 들었을 때 확실하게 와닿았다. 코드로 한 번 살펴보자. sum([1, 2, 3]); function sum(nums: number[]) { let result = 0; for (const num of nums) { result += num; } r.. 더보기
스토리북의 문서화 기능을 조금 더 활용해보자 저번에 TIFY 프로젝트를 진행하며 스토리북을 어떻게 활용했는지 글을 쓴 적이 있다. https://gugu76.tistory.com/112 해당 글에서는 진짜 스토리북의 최소한의 기능들만 활용해서 스토리를 작성하고 테스트해봤기 때문에 이번에는 스토리북의 문서화 기능들을 좀 더 알아보고 활용해보는 시간을 가져보려 한다. 먼저, 기존에 작성한 스토리 문서들은 조금 설명이 부족했던 느낌이 있어서 문서화를 좀 더 자세하게 진행해보려 한다. 일단 목표는 다음과 같다. - 각 컴포넌트의 props 타입과 설명을 명시한다. - 컴포넌트에 대한 설명과 각 스토리에 대한 설명을 추가한다. ArgsTable 수정현재 FriendsListA 컴포넌트의 ArgsTable은 각 스토리에서 넘겨주는 args를 토대로 자동 추론.. 더보기
타입 가드로 해결한 Array.map is not a function 에러 map 함수를 사용하다 보면 진짜 자주 나타나는 에러가 하나 있다. Array.map is not a function 이라는 에러인데, 이번에 또 나타나버렸다. 현재는 map 함수 앞에 적힌 변수가 undefined이거나 배열일 수 있다. 그래서 map 함수가 에러를 내는 것이다. 그런데, 갑자기 이 예시가 떠올랐다. 이펙티브 타입스크립트를 읽으며 가장 기억에 남는 예시였다. const members = ['janet', 'michael'].map(who => jackson5.find(n => n === who)); // 타입이 (string|undefined)[] const members = ['janet', 'michael'].map(who => jackson5.find(n => n === who)... 더보기
함수 반환 타입을 명확히 지정하고 특정 프로퍼티를 가지는 타입도 지정해보자 이번 글도 타입스크립트를 써보며 배웠던 점을 적어보려 한다. 사실 프로젝트를 진행하면서 타입을 구체적으로 지정하는 게 생각보다 쉽지는 않았지만, 그 과정에서 배운 점들이 정말 많았다. 이번에는 useToggle이라는 커스텀 훅을 작성해 보며 겪었던 일들과 배운 점들에 대해서 알아보자. useToggle은 생각보다 되게 자주 사용하는 커스텀 훅이다. 타입스크립트와는 처음 사용해 봤는데, 타입을 지정해 주는 게 쉽지 않았다. 내가 처음에 작성한 useToggle 훅과 사용하는 코드는 다음과 같다. import { useCallback, useState } from 'react' const useToggle = (initialState = true) => { const [state, setState] = us.. 더보기
구체적인 타입을 지정하고 재사용성이 있는 코드를 작성하자 TIFY 프로젝트를 진행하면서 본격적으로 타입스크립트를 적용해 볼 수 있는 기회가 생겼다. 나는 타입스크립트 공부를 한 것을 토대로 구체적으로, 그리고 재사용성 있게 타입을 지정하려 노력했다. 그 예시를 한 번 살펴보도록 하자. FriendsListB 컴포넌트인데, 친구 목록을 나타내기 위한 컴포넌트이다. 아래 사진과 같이 세 가지 종류로 이루어져 있다. 먼저 세 종류 간 공통적인 필드와 개별적인 필드로 구분해보자. 공통적인 필드는 프로필 이미지를 나타내는 imageUrl, 친구 이름인 name, 온보딩 상태를 나타내기 위한 currentState, 해당 컴포넌트를 클릭했을 때 발생시킬 함수를 위한 onClick 정도로 생각해 볼 수 있다. 개별적인 필드는 두 가지로 나눌 수 있는데, 이는 이름 아래 설.. 더보기
Storybook을 활용해서 개발해보자 프론트엔드 개발자라면 스토리북에 대해서 한 번쯤은 들어봤을 것이다. 안타깝게도, 저는 이전까지 프론트 개발자가 아니었나 봅니다. TIFY 프로젝트를 하면서 처음 스토리북을 사용해봤다. 처음 써볼 때는 굳이 컴포넌트 만들고 테스트해볼 이유가 있나..?라고 생각했었는데, 잘못된 생각이었다. 내가 생각한 테스트라는 건 프론트엔드 개발자에 한정된 것이었고, 스토리북을 사용하면 프론트 개발자뿐만 아니라 디자이너와도 현재 진행된 상황 공유 및 직접 테스트까지 진행해볼 수 있다는 장점이 있었다. 스토리북의 또 다른 장점으로는 UI 컴포넌트를 문서화까지 진행할 수 있다는 것이다. 이에 대해서는 차차 알아가보도록 하자. Storybook 사용법 Storybook 초기 세팅 관련해서는 별도의 글을 올릴 예정이니 그 부분이.. 더보기
깃허브 이슈를 통해 협업해보자 이번에 TIFY 프로젝트를 진행하면서 깃허브 이슈 기능을 알게 되었다. 깃허브 이슈..? 깃허브 이슈는 프로젝트 진행 시 진행 상황을 한눈에 파악할 수 있게 해 준다. 이슈라고 하면 뭔가 문제가 생겼을 때만 사용할 것 같은 네이밍이지만, 기능 구현, 리팩터링, 개선 사항, 버그 등 작업 상 웬만한 것들을 다 포함한다. 먼저 TIFY에서 진행한 깃허브 이슈 사용법은 다음과 같다. 업무 배정을 받으면 깃허브 이슈를 먼저 생성한다. 이렇게 프론트 리드님이 만들어주신 이슈 템플릿을 이용해서 이슈를 생성할 수 있다. UI 이슈를 예로 들어서 설명해 보자면, 프론트의 경우, 페이지부터 작업을 하는 것이 아니라, 컴포넌트부터 생성한다. 버튼, 바텀 시트 등 재사용할 수 있게 컴포넌트를 먼저 생성하고 페이지 작업을 하.. 더보기