개발할래 운영할래?

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..

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

이번에 원티드에서 모노레포 관련 프리온보딩 프론트엔드 챌린지 11월 에 참가하게 됐다. (스킬업 할 겸!) 주제는 '모노레포' 이다. 11번가 '여행개발팀'에서의 경험과 원티드 제공 사전과제 에 대해 기술하겠다. https://www.wanted.co.kr/events/pre_challenge_fe_4 프리온보딩 프론트엔드 챌린지 11월 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 1. 사전적(?) 의미 모노레포(Mono Repo)란, Monolithic Repository 를 뜻하며, 한글로는 '하나의 레포지토리' 라는 말이다. 한글 뜻만 보자면, 기존에 여러분이 깃허브에 'HelloReact' 라는..

Interface vs Class : interface 는 typescript 가 컴파일 타임(코딩할 때)에 타입 체크를 해주기 위한 '구조체' 같은 것(객체 타입을 정의하는 게 아님! 타입 체크를 위해 임시로 만드는 dummy 타입 이라 생각하자). 즉 컴파일 돼서 js 화 되면 사라진다. 반면에 class 는 객체 타입을 새로 정의하는 것이며, 객체 프로퍼티/메소드 를 갖고 있고, 컴파일 해서 js 화 해도 (런타임) 남아 있다. 불필요한 메모리/파일크기 낭비를 막기 위해선 interface 를 쓰면 되겠고, 클래스 로써의 기능이 꼭 필요한 경우라면 class 를 쓰면 되겠다. 참고 : https://stackoverflow.com/questions/51716808/when-use-a-interfac..

팀 내 FE 소스코드는 대체로 잘 짜여진 코드, 모던한 VueJS, JS 의 장점을 잘 살린 코드였고 많은 구조 개선을 거친 것으로 보였다. 그럼에도 불구하고 처음 업무를 하는 나로썬 수정할 부분이 어디인 지 파악하기가 어려웠다. (물론 지금도...) 사무실에서 쉬면서 유튜브를 뒤적이고 있는데, TOSS SLASH 21 영상중 하나가 눈길을 끌었다. https://www.youtube.com/watch?v=edWbHp_k_9Y 제목 부터 '실무에서 바로 쓰는 FE 클린코드'..... 핵심 내용은 '추상화, 단일책임원칙' '코드가 짧다고 읽기 쉬운 코드가 아니다.' '코드가 길어져도 짧을 때 보다 읽기 쉬운 코드가 될 수 있다.' 로 보인다. 영상을 접하고 난 후엔 '이렇게 하면 다소 코드가 길어지고 파일..