서론 우아한테크코스를 수료하고 나서 취업을 하면 우아한테크코스에 대한 회고글을 적기로 마음을 먹었다. 드디어 그 순간이 왔다. 자신에게 묻고 답하는 형식으로 회고글을 작성해보려고 한다. 어떤 것이 달라졌을까? 항상 비교는 자신과 해야 한다. 남과 하는 비교는

서론 리액트로 개발을 하다가 가장 하위 컴포넌트인 Button 컴포넌트를 개발하다가 해당 버튼으로 내려오는 props와 children을 클릭 핸들러 함수로 전달하기 위해 Button 컴포넌트에서 분기 처리를 하다가 Button 컴포넌트의 복잡도가 올라가는 문제를 해

레벨로그 프로젝트 React Query Cache 리액트 쿼리는 개발자에게 캐시 설정을 쉽게 할 수 있는 옵션을 제공한다. 바로 cacheTime 과 staleTime 쿼리 상태 fetching : 요청 중인 쿼리 fresh : 새롭게 추가된 쿼리 (만료되지

레벨로그 프로젝트 상황에 맞는 에러처리 같은 API를 통해 응답을 받아오더라도 상황에 맞는 에러처리가 필요하다. 예를 들어 A라는 콘텐츠가 있다고 생각해보자. A라는 콘텐츠가 주가 되는 화면이 있다. 이 화면에서는 A의 API 응답에 에러가 오면 에러 페이지로 리다

레벨로그 프로젝트 레벨로그 프로젝트에서는 어떠한 기술 도입에 있어 필요하다고 생각이 들고 타당한 이유가 존재해야 도입하기로 팀원과 상의했다. 그리고 프로젝트가 상당부분 진행되고 나서 필요하다는 생각이 강하게 들어서 리액트 쿼리를 도입하였다. 리액트 쿼리를 도입하기 전

레벨로그 프로젝트 webpack webpack으로 3개의 환경을 나누어서 번들링을 진행한다. webpack 폴더 구조를 보면 다음과 같다. webpack webpack.common.js webpack.js webpack.dev.js webpack.pr

레벨로그 프로젝트 팀 프로젝트를 하다보면 팀원과 의견이 다를 때가 많다. 당연한거다. 그 팀원은 자신의 방식대로 살아왔고 나는 나 방식대로 살아오면서 행동도 다르고 생각도 다르다. 이는 협업할 때 좋은 쪽으로 귀결될 수도 있으나 안 좋은 쪽으로 귀결될 수 있다. 좋지

해당 프로젝트 https://github.com/woowacourse-teams/2022-levellog 도입전 해당 화면 일단 코드를 한번 보자. 컴포넌트의 구조는 State Waterful방식으로 최상단 페이지 컴포넌트에서 모든 API 요청을 응답받고 그에

해당 프로젝트 https://github.com/woowacourse-teams/2022-levellog 리펙터링을 진행하면서 항상 느끼는 것이지만 좋은 리펙터링의 결과는 불편함에서 나온다고 생각한다. 코드에 대한 불편함을 느껴야 리펙터링을 하는 의미를 느낄 수 있고

리펙터링을 하는 방법은 개인마다 차이가 있을 것이다.

UI 로직과 비즈니스 로직을 분리하는 것은 상당히 강조되어왔던 사항이다. React에서는 hook을 통해 관심사를 분리할 수 있다. 상당히 간단하다. 1.Team을 보여주는 컴포넌트를 작성 `

우선 ContextAPI는 무엇인가? 보통 ContextAPI와 전역 상태관리 라이브러리를 많이 비교한다. 사실이 두 개는 같은 비교군이 아니다. ContextAPI를 전역 상태 관리 툴이라고 오해할 수 있지만 Context는 실제로 아무것도 관리하지 않는다. 단순

https://github.com/woowacourse/perf-basecamp/pull/34성능 최적화에서 가장 중요한 것은 빌드라고 생각합니다.앱이 커질수록 그에 상응하는 코드가 늘어날 확률이 높아집니다.빌드 파일의 용량이 커질수록 앱의 속도는 저하하게 된

create react app을 하지 않고 직접 npm 모듈들을 설치해서 앱을 만드는 이유는 보통 불필요한 모듈들을 설치하지 않기 위해서라고 들었다. 그러나 CRA를 막상 해보면 설치되는 모듈들은 생각보다 적다. 그렇다면 CRA를 하는 것이 더 적은 모듈들을 설치해서

대부분의 개발자들은 markdown으로 글을 작성하는 것이 편하다고 느낄 것이다.마찬가지로 레벨로그를 작성할 때도 markdown을 지원하는 것이 사용할 때도 편할 것 같아 마크다운 지원 에디터를 도입하기로 했다.마크다운 지원 에디터는 생각보다 많다. @toast-ui

file-loader를 통해 이미지와 폰트를 build 할 수 있다. test에는 build할 파일의 확장자를 작성하고option에 name으로 build할 파일 이름과 디렉토리를 설정할 수 있다.file-loader | webpack resolve 옵션은 모듈을 해결

자바스크립트에서 변수란 무엇인가요? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 값의 위치를 가리키는 상징적인 이름이죠. 자바스크립트에서 변수를 어떤 방식으로 저장하나요? 상징적인 이름 변수는 프

자바스크립트의 데이터 타입은 두가지가 있다. 그리고 컴퓨터는 이 두 데이터 타입을 다르게 처리한다.NumbersStringBooleanNullUndefinedSymbolsstring이 method가 있는 것에 대해 의문을 품을 수 있다.자바스크립트는 primitive

컴포넌트의 lifecycle은 3단계로 이루어져 있다. Mounting Updating Unmounting Mounting React가 처음 컴포넌트를 렌더링할 때 제일 먼저 useState(), useReducer()의 첫번째 인자로 함수를 실행하는 구문을 넣으

add 함수는 stateful function 이다.여기서 문제는 foo 변수가 global scope에 위치하고 있으므로 foo 변수를 직접적으로 변경할 수 있는 문제가 있다.이 문제를 해결하기 위해 HOC 를 만들면 된다.이렇게 하면 stateful function