개발할래 운영할래?

상태관리 라이브러리 비교 각 라이브러리 사용성을 비교하기 위해 하나의 예시를 가지고 라이브러리 마다의 코드를 비교해 봤다. 예시 비즈니스 로직 : 옷을 판매하는 서비스를 운영중이며, 옷 상품을 등록하는 화면의 경우이다. url은 다음과 같다 : /regist/clothes/:category :category - path variable 이며 예시로는 신발(shoes), 상의(top), 하의(pants) 가 있다. 옷 상품 등록 화면의 일부 컴포넌트들은 카테고리 마다 다른 정보를 받도록 화면을 렌더링 해야 한다. if-else 조건문을 이용한다면 신규 category가 추가됨에 따라 UI 로직이 너무 더럽혀질 것이기에, map 을 이용해서 category 값에 따라 해당 컴포넌트들을 렌더링 하려 한다. e..

회사에서 NextJS 프로젝트를 하면서 useEffect hook에서 BFF 에 호출하는 로직을 추가했다. function useAxiosCall(apiUrl: string) { const [data, setData] = useState(null); useEffect(()=>{ Axios.get(apiUrl).then(res => { setData(res.data); }); }, []); } 해당 axios 호출에서 예외가 발생하는 경우가 있었고, 익숙하듯 try...catch 문으로 감싸줘 봤다. function useAxiosCall(apiUrl: string) { const [data, setData] = useState(null); useEffect(()=>{ try{ Axios.get(apiUr..

react-query 는 브라우저 cache(& stale)를 이용하므로 컴포넌트가 destroy 되고 다시 생성할 때 캐싱 된 데이터로 빠르게 컴포넌트를 생성할 수 있다. react-query 에선 observer 패턴이 사용된다. useQuery에 전달하는 'key'가 observer 패턴에도 이용된다. https://velog.io/@hyunjine/Inside-React-Query 기본적으로 브라우저에 focus 됐을 때 refetch 한다. (ex 다른 tab 보다가 react-query가 있는 화면에 돌아올 때) 참고 : https://velog.io/@blackeichi/react-query-focus%EC%8B%9C-refetch%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%..

참고 : [모노레포 새 프로젝트 환경설정하기] 참고 한 포스트는 모노레포 기준이지만, 아래에서 셋팅 할 일반 레포 (react app 하나만 있는 repo) 에도 적용 가능 1. cra with typescript yarn create react-app newproject --template typescript 2. set yarn version as berry yarn set version berry 3. change typescript version [tsconfig.json] yarn remove typescript yarn add -D typescript@4.9.3 (yarn berry 와 매칭 가능한 버전 중 최상위 버전) 4. set eslint [.eslintrc.json] yarn add ..

1. react-query 의 isLoading, error 를 Suspense 및 ErrorBoundary 로 대체했다. (좀더 선언적이며 JSX/TSX 친화적이게) [commit link] a. 우선 react-query client 에 'suspense' 를 사용한다고 {suspense: true} option을 줘야 한다. b. react-query의 useQuery 훅이 반환하는 isLoading,error 를 각각 suspense, errorBoundary 로 대체한다. 빨간색 표시 : isLoading -> suspense (참고 : Suspense with React-Query 사용법) 보라색 표시 : error -> ErrorBoundary c. ErrorBoundary 는 아직까진 Re..

1. 어떤 챌린지 이고 어떤 강의일까? 원티드 프리온보딩 챌린지란? 원티드에서 매달 프리온보딩 챌린지를 하고 있다. 강의도 해 주면서 원티드를 통해 채용연계(물론 지원은 스스로 해야하죠 ^^7) 및 상금 수여까지 한다. (높은 강의 퀄리티를 보면 채용연계 보단 공짜로 개발자 교육시켜주고 싶어서 안달난 것 같은...크흠... 원티드 애용하겠읍니다.) 회차가 꽤 된 것 같던데, 지난 11월에야 이런 좋은 교육을 알게 됐다니. 후회가 된다. 12월 챌린지(monorepo) 때 강의 내용이 너무 좋았어서 이번 강의도 신청하게 됐다. 이번 챌린지의 주제/내용 React Query 를 적용해 TODO List CRUD 기능이 있는 웹서비스를 만들어 보는 주제였으며, 강의를 들으면서 사전과제를 발전시키는 방식으로 과..

이슈 회사의 front end 프로젝트는 VueJS 로 돼 있고 점진적으로 NextJS 로 이관하고자 새로 NextJS 레포지토리를 만들어 작업하고 있었다. 그 와중에 VueJS 프로젝트를 수정할 일이 생겼는데, VueJS 프로젝트 dev server 를 실행했더니 무슨... hash 값을 생성하는 데에서 버그가 발생하며 app이 종료됐다. 원인 무슨 이유인가 싶어 구글링 해 보니,NodeJS 버전 이슈란다. VueJS 는 16.x.x 버전을, NextJS 는 18.x.x 버전을 사용하고 있는데, NextJS 를 개발할 때 nvm 으로 버전을 변경해서 발생했던 것이다. 해결(찜찜한 해결) 단순히 NodeJS 버전을 변경해 주기만 하면 되는데, IntelliJ (얼티밋) 에서 edit configurati..

UseEffect 란? UseEffect 는 함수형 컴포넌트에서 sied effect(callback) 를 실행할 수 있게 도와주는 Hook 이다. (React v16.8 에 추가) 즉, 유저가 버튼을 클릭하거나 어떤 상호작용을 통해 컴포넌트 state(변수)가 변경시켰을 때, callback을 수행하도록 할 수 있는 Hook. UseEffect 가 실행될 때 useEffect 는 다음 상황에 실행된다. 1. 처음 component 가 렌더링 될 때 2. component의 state(변수) 가 변경될 때 Dependancy Array (의존성 배열) useEffect 는 '어떤 상태(변수)가 변했음'을 감지하고 callback 을 실행시켜 준다. '어떤 상태' 를 이 useEffect 가 가지는 '의존..

현재 우리 팀의 서비스는 웹 접근성을 위해 구형 PC 브라우저(ex IE11), 모바일기기 구형 브라우저(ex IOS 15ver 이하의 사파리) 에서도 서비스가 작동될 수 있도록 돼 있다. 최근 배포 된 서비스에서 "IOS 13이하의 아이폰" 에서 특정 컨텐츠 영역이 스크롤 되지 않는 이슈가 있어 원인을 조사해 봤다. 1. ES 버전이 원인이었을까? 처음엔 babel 로 낮춘 ES(ECMA script. aka JS) 버전(es5) 이 해당 IOS 버전에서 구동하지 않는 것인가 싶었다. 하지만, ES5는 IOS 6 이상의 사파리에서 전부 지원하고 있었고, 무엇보다 해당 스크롤엔 JS 가 관여하지 않았다. 2. HTML, CSS 의 버전 및 브라우저 호환성의 문제일까? 그렇다면 HTML, CSS 버전의 문..

1. TBD 란? 흔히 사용하는 git flow 방식의 branch 전략 방식과 반대되는 전략이다. git flow 에선 N명의 개발자들이 feature branch 로 개발하고 PR 을 날려 리뷰하고 개발했다면 TBD 에선 PR 하는 대신에 하나의 branch(master or main or trunck) 로 페어(or 몹)프로그래밍을 통해 실시간으로 피드백 & 반영 을 한다. (즉 master branch 에 직접 push) 2. 장점 및 해결하고자 하는 문제점? [개인보단 팀] 1. git flow 전략에서의 'PR, Merge 로 인해 발생하는 단점' 을 제거시킴으로써 '팀이 함께 쓰는 코드' 에서 '개인의 책임' 보다 '팀의 책임' 에 더 비중을 둘 수가 있다. (단점 ex) 여유가 없어 리뷰를..