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

1월 둘째 주를 보내며 개인적으로 이번 프로젝트는 정말 힘들었다!... 앱과 웹의 환경은 정말 다르구나를 또 한 번 느끼며.. 하지만 힘들었던 만큼 얻은 것들도 분명해서 좋은 경험이었다. 벌써 1월 중순.. 🥺 👀 Fact 리액트 네이티브 프로젝트를 할 수 있는 선에서 완성도를 높여 무사히 끝냈다. 이번 프로젝트에서 깃 충돌이 정말 많이 일어났다. 리액트 네이티브가 마음처럼 안 되는 부분들이 있어 삽질을 많이 했다. 프로젝트를 진행하며 개인 파트 리팩토링을 잘 해낸 것 같다. 🙂 Feeling 배포 후 테스트 때는 만나지 못했던 에러들이 연달아 발생해서 잠시 멘붕이 왔었음.. 삽질 후의 성공은 아주 뿌듯하기도, 조금 허무하기도 ^^.. 깃 충돌 때문에 머리가 아프기도 했는데 차라리 이 시기에 겪어서 다행..

프로젝트 인터미션을 갈무리하며 처음 접하는 리액트 네이티브로 배포까지 마무리한 우리의 프로젝트 인터미션이 끝났습니다. 프로젝트를 마무리하며 각자 작성해 본 KPT 회고와 느낀 점을 취합해 보았습니다. Keep 우리의 팀명처럼, 서로를 배려하며 모든 팀원이 낙오 없이 프로젝트를 진행한 점 코드 컨벤션 설정 슬랙, 및 노션을 프로젝트 정리에 적극 활용하여 활발하게 소통하기 잘 해결 안 되는 부분을 팀원끼리 적극적으로 공유하기 Problem 깃허브 충돌이 잦아서 시간을 많이 뺏겼던 점 리액트 네이티브라서 생각지도 못한 오류를 많이 마주침 UI 색상이 구체적으로 정해지지 않아 시간이 추가적으로 소모된 점 yarn 패키지 오류가 발생하여 중간에 npm으로 변경한 부분 Try 제때 Pull을 받자 브랜치는 PR 한..

프로젝트를 마치며 유독 힘들고 고통이었던 이번 프로젝트가 끝났다!.. 네이티브.. 너무나 힘들었다.. 가장 힘들었던 부분은 배포 후 예상치 못한 에러가 연달아 터졌을 때였던 것 같다 ^^.. 우리의 서비스는 아래 레포지토리에 잘 정리해 두었다! 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가 유니크한 값이 아니어서 그런가? 싶어서 이런 삽집들을 했었다. ..

Today, What I learned? 프로젝트 중!.. api에서 가져오는 xml 데이터를 JSON 데이터로 변환하기 위해 라이브러리를 사용하는 과정을 정리해 본다. 먼저 사용한 라이브러리는 이것이다. https://github.com/connected-io/react-native-xml2js GitHub - connected-io/react-native-xml2js: XML to JavaScript object converter. XML to JavaScript object converter. Contribute to connected-io/react-native-xml2js development by creating an account on GitHub. github.com 변환하기 const p..

에러 발생 멀쩡히 잘 되고있던 expo 서버가 갑자기 yarn start 하니 아래 오류를 내면서 종료되었다. node:events:505 throw er; // Unhandled 'error' event ^ Error: EMFILE: too many open files, watch at FSWatcher._handle.onchange (node:internal/fs/watchers:204:21) Emitted 'error' event on NodeWatcher instance at: at NodeWatcher.checkedEmitError (/Users/yjlee/project/intermission/node_modules/sane/src/node_watcher.js:143:12) at FSWatche..

1월 첫째 주를 보내며 다시 프로젝트가 시작되었다. 🫠.... 이번 리액트 네이티브 공부기간은 유독 짧게 느껴졌다. 아직 강의 내용을 체득하지 못한 것 같은데 프로젝트 기간이 돌아와서 개인적으로는 아쉬움이 크다.. 🤔 👀 Fact 리액트 쿼리를 이용해서 API로부터 데이터를 가져오는 데 성공했다. 리액트 네이티브로 무한스크롤 구현을 했다. 리액트 네이티브 프로젝트가 시작되었다. 벌써 캠프 기간이 두 달 여가 지났다 (!!) 🙂 Feeling 리액트 쿼리가 마냥 어렵게 느껴졌었는데 이해가 좀 된 것 같아 좋다. 네이티브에서 무한스크롤을 구현해보았으니 리액트에서도 어떻게 해볼 수 있지 않을까? 하는 기대감.. 리액트 네이티브는 뭔가 생각대로 되지 않는 부분들이 꽤 있어서 답답함 😇 두 달 정도 뒤면 수료라니..