IT/React

ESLint 자바스크립트 문법에서 에러를 찾아준다. Prettier 코드 스타일을 자동으로 fotmatting해준다. 이 두가지를 함께 사용하면 협업 시 코딩 스타일에 대한 규약을 지킬 수 있다! React에서 ESLint와 Prettier 설정 React 프로젝트 생성 npx create-react-app example CRA로 생성된 프로젝트는 안에 ESLint가 자동으로 들어간다. 추가로 ESLint를 설치하면 에러가 나니 주의! Prettier 설치 npm i prettier -D -E npm i eslint-plugin-prettier eslint-config-prettier -D Prettier와 ESLint를 함께 쓰기 위해 설치해준다. eslint-plugin-prettier eslint-..

Infinite scroll(무한 스크롤)이란? 사용자가 페이지 하단에 도달했을 때, 콘텐츠를 추가로 제공하는 것이다. 사용자 입장에서 페이지를 따로 넘겨야 할 필요가 없어 편리하다. 구현할 수 있는 방법이 여러 가지였다. - scroll - getBoundingClientRect() - Intersection Observer - useRef scroll 이 방식은 스크롤할 때마다 이벤트가 발생하므로 throttle(일정 시간 동안의 이벤트 실행을 막고, 입력을 모아서 일정 시간이 지날 때마다 한 번씩 출력하는 것)로 성능 최적화를 해줘야 한다. scroll을 이용한 구현 방법은 아래에 잘 설명되어있다. https://ghur2002.medium.com/react%EC%97%90%EC%84%9C-infi..

전에 했던 프로젝에 추가하고 싶은 게 생겨서 git에서 가져와 실행하는 과정에서 다음과 같은 에러가 발생했다. node:internal/modules/cjs/loader:488 throw e; ^ .... 그래서 node_modules와 package-lock.json을 삭제하고 npm install과 npm start를 했지만 똑같은 에러가 발생했다. 찾아보니 nodejs 버전의 문제였다. 원래 내가 사용하던 버전은 v17.0.0이고 16으로 변경해주기로 했다. nodejs 버전을 변경할 수 있는 방법은 여러 가지였다.(nvm을 이용하는 방법 등...) 나는 n을 이용했다 n이란? https://github.com/tj/n GitHub - tj/n: Node version management Node ..

반응형으로 만들기 위해 화면 사이즈가 변경될 때마다 width값이 필요했고 resize 이벤트리스너를 이용했다. window.addEventListener('resize', ...) 1. 초기값(사이즈 변경 전)을 세팅해준다. const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight, }); 2. useEffect에서 마운트 시 resize 이벤트 리스너를 넣어주고 언마운트 시 이벤트 리스너를 제거해준다. 여기서 제거해주지 않으면 메모리 소모가 많아지고 리렌더 시 이벤트 리스너 중복으로 인한 버그가 생길 수 있다. useEffect(() => { window.addEventListener("resize",..

원티드 프리온보딩 프런트엔드에 지원하며 과제로 캐러셀을 만들어봤다. 결과는 불합격했다. 변명을 하자면 남은 시간이 이틀이었고 네비 바를 꼼꼼하게 만들다가 시간이 부족했다. 솔직히 내 실력이 충분했다면 충분히 완성할 수 있지 않았을까? 그래서 캐러셀을 다시 정리해보기로 했다. 조건 라이브러리 없이 만들기 버튼 클릭 시 넘어가기 무한 캐러셀로 마지막 이미지일 경우 다시 처음으로 돌아가기(첫 이미지일 경우 마지막 이미지로) 5초 뒤에 자동으로 이미지 넘기기 한 번에 이미지가 3개씩 보이도록 무한으로 이미지를 넘기기 위한 방식은 다음과 같다. 나는 총 9장의 이미지를 사용하고 양 옆의 이미지가 조금씩 보여야 하므로 앞쪽에 8,9번 이미지를 추가해주고 뒤쪽에 1,2번 이미지를 추가해준다. 여기 1번 이미지에서 왼..

장점 - children, propTypes, contextTypes, defaultProps, displayName이 기본적으로 있다. 단점 - children이 필요하지 않는 경우에도 들어가 있으므로 타입이 명확하지 않다! type FC = FunctionComponent; interface FunctionComponent { (props: PropsWithChildren, context?: any): ReactElement | null; propTypes?: WeakValidationMap | undefined; contextTypes?: ValidationMap | undefined; defaultProps?: Partial | undefined; displayName?: string | unde..