Today, What I learned? 이번 프로젝트에서는 로그인 여부에 따라서 헤더를 다르게 노출해야 하는 기능이 있다. 이 부분의 로직을 어떻게 짤 것인 가에 대한 얕은 고찰... 구현해야 하는 부분 로그인이 되어 있지 않다면 아래와 같이 로그인 버튼이 보이는 헤더를, 로그인이 되었다면 검색과 마이페이지로 들어갈 수 있는 아이콘이 있는 헤더를 보여주어야 한다. 참고로 우리 프로젝트에서는 파이어베이스를 통해 로그인이 이루어진다. 첫 시도 처음에는 useState를 이용해서 isLoggedIn 이라는 boolean 값의 상태로 관리를 하려고 했다. const [isLoggedIn, setIsLoggedIn] = useState(false); ... useEffect(()=>{ authService.on..

Today, What I learned? 타입스크립트로 기존 프로젝트를 리팩토링하는 것이 아니라 새로운 프로젝트를 생성하는 과정을 글로 남겨보려고 한다. 프로젝트 생성 CRA를 통해 새로운 프로젝트를 시작한다. npx create-react-app 프로젝트명 --template typescript 이 때 --template을 꼭 넣어주어야 처음부터 타입스크립트로 파일들이 실행된다. --template없이 typescript만 넣을 경우에는 자바스크립트 파일로 CRA가 되어서 다시 프로젝트를 생성해야 할 수 있다. 정상적으로 명령어가 실행되었다면 이렇게 ts, tsx로 파일들이 만들어져 있고, tsconfig.json까지 기본적으로 포함되어 있을 것이다. react-app-env.d.ts ? 일반적인 리액..

Today, What I learned? 타입스크립트를 익히면서 생각보다 쉽지 않음을 많이 느끼는 중..! 특히 헷갈리는 몇몇 개념을 좀 정리해보려 한다. JS와 TS 자바스크립트는 동적타입. 프로그램이 실행될 때, 즉 런타임에 변수의 타입이 결정된다. 반대로 타입스크립트는 정적타입. 컴파일 타임에 변수의 타입이 결정된다. 이것은 즉 프로젝트가 실행되기 전에 미리 IDE에서 발생할 오류를 알 수 있다는 것! any 타입 any 타입은 모든 타입을 포함하는 타입이다. (자바스크립트의 모든 변수도 any 타입이라고 할 수 있다.) 자바스크립트 프로젝트를 타입스크립트로 리팩토링하는 경우 임시로 사용하며 점진적으로 타입을 차차 바꿔나갈 때 유용하다. 하지만 모든 타입을 포함한다고 해서 무분별하게 사용하면 타입스..

Today What I learned? 어제에 이어 리덕스 툴킷 투두리스트를 타입스크립트로 마이그레이션 하며 해결한 많은 오류들을 기록해 본다..!! 어찌어찌 모든 에러를 해결하고 정상 작동이 되고 있다.. 🥺 🚧 버튼 컴포넌트에서 발생한 오류 해결 Type '' is missing the following properites from type ~~ Type '' is missing the following properites from type ~~ 암만 봐도 버튼 컴포넌트에 다른 함수 props가 없다는 얘기 같다. 기존 코드는 저 함수들 중 하나만 넣어주어 버튼 컴포넌트를 공통으로 쓰고 있는 상태였기 때문에 꼭 모든 함수 props를 받을 필요가 없었다. 그렇다면 선택적으로 들어가야 하니 타입 속성에..

Today, What I learned? 일차적으로 투두리스트를 redux-toolkit으로 리팩토링 한 후에 본격적으로 타입스크립트로 마이그레이션에 들어가며 만나게 된 오류들을 기록해본다. 에러가 꼬리에 꼬리를 물고 발생해서 모든 에러가 완전 해결된 것은 아니고 현재 진행형이다.. 😇 내일쯤엔 다 완성하기 않을까!.. 🚧 useRef()의 focus 관련 에러 Property 'focus' does not exist on type 'string' Property 'focus' does not exist on type 'string' useRef()의 타입이 제대로 정해져있지 않아 발생한 에러.. 찾아보니 useRef를 DOM 조작 용도로 사용하려면 아래와 같이 HTML태그를 지정해줘야 한다고.. 지역변..

Today, What I learned? 기존 프로젝트에 타입스크립트 리팩토링을 시도하기 앞서, 혼자 했던 투두리스트 프로젝트를 타입스크립트로 리팩토링 해보기로 했다. 먼저 기존 프로젝트는 리덕스와 라우터를 이용해서 페이지 이동과 CRUD가 적용되어 있는 투두리스트였다. 기본 리덕스가 적용되어 있었기 때문에 먼저 redux-toolkit으로 리팩토링 해준 후 본격적인 타입스크립트 적용 시작!.. 패키지 설치하기 먼저 타입스크립트와 관련된 패키지들을 설치해 주었다. 타입스크립트 공식문서에서 보고 패키지를 설치한 후에, https://www.typescriptlang.org/download How to set up TypeScript Add TypeScript to your project, or instal..

프로젝트를 마치며 유독 힘들고 고통이었던 이번 프로젝트가 끝났다!.. 네이티브.. 너무나 힘들었다.. 가장 힘들었던 부분은 배포 후 예상치 못한 에러가 연달아 터졌을 때였던 것 같다 ^^.. 우리의 서비스는 아래 레포지토리에 잘 정리해 두었다! https://github.com/yujleee/intermission GitHub - yujleee/intermission: 공연예술통합전산망(KOPIS)의 OPEN API를 활용한 뮤지컬 정보 제공 및 리뷰 공연예술통합전산망(KOPIS)의 OPEN API를 활용한 뮤지컬 정보 제공 및 리뷰 앱. Contribute to yujleee/intermission development by creating an account on GitHub. github.com 이..

Today, What I learned? 프로젝트를 진행하며 버튼을 클릭할 때마다 뮤지컬의 상세 설명 이미지가 접고 펼쳐지는 부분이 필요했다. collapsible view 같은 라이브러리도 있는 듯했지만, 간단하게 구현하고 싶어서 state를 이용했다. 이 과정에서 겪었던 시행착오를 정리해본다. 접힘, 펼침 버튼 접고 펼쳐지는 부분은 팀원분이 state로 잘 구현해 주셨다. const [isMoreButton, setMoreButton] = useState(false); isMoreButton에 따라서 이미지가 들어가는 영역이 보이고 감춰지도록 했다. {isMoreButton && ( )} 처음에 저 영역은 뮤지컬 정보 영역 컴포넌트 안에 있었는데, 이렇게 변경되었을 때 이미지가 다른 영역의 이미지까지..

Today, What I learned? 프로젝트를 진행하며 카테고리에 따라서 React Query의 useQuery를 통해 다른 데이터를 가져오는 부분을 진행하며 어떤 방식으로 결과물을 만들었는지 기록해 본다. 피그마 상으로 만들어야 했던 부분이다. 각 지역을 클릭하면 해당 지역의 데이터를 받아와야 하는 부분! 일단 버튼을 클릭할 때마다 각 지역의 코드를 API의 params 값으로 넘겨주어야 했다. 그래서 API 함수에서는 아래와 같은 방식으로 params를 받아오기로 했다. export const getLocalPopular = (params) => { const [_, category] = params.queryKey; return fetch( `${BASE_URL}/boxoffice?servic..

어떤 에러? 플랫리스트를 여러 개 사용하려다 보니 아래와 같은 에러가 발생했다. ERROR A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list. 플랫리스트가 중첩되지 않고 여러번 쓰일 때 모든 형제 리스트에게 키값이 필요한 것 같았다. 사실 에러에서 답을 주고있었지만 listKey가 keyExtractor와 연관이 있는줄 알고 많은 삽질을 했다 (...) key가 유니크한 값이 아니어서 그런가? 싶어서 이런 삽집들을 했었다. ..