IT

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

NPM(Node Package Manager)이란? 라이브러리 설치, 버전 업데이트, 삭제 등의 관리를 도와주는 Package Manager이다(package.json) 오늘은 npm명령어와 함께 쓰이는 g,--save 등의 플래그에 대해서 알아보겠다. npm install npm install // 축약 형태로 같은 명령어 npm i package.json파일에 포함된 의존성 package들을 설치한다. npm install 특정 package npm install package명 // 축약 형태로 같은 명령어 npm i package명 package명을 명시해 특정 package를 설치한다. npm install 특정 package -P, --save-prod npm install package명 -..

웹팩은 가장 대중적인 모듈 번들러이다. 여기서 번들러(bundler)는 무엇인가? 번들러의 탄생 배경 초기의 웹 페이지와 달리, 발전하며 큰 규모의 웹 서비스들이 생기면서 JS파일을 관리하기가 어려워졌다. - 많은 자바스크립트 파일로 인한 느린 로딩 - 전연 범위를 갖는 많은 자바스크립트 파일의 중복 선언 - 수동적인 웹 개발 루틴 작업(파일, 이미지 압축/CSS 전처리기 변환 등) 이를 해결하기 위해 번들러가 나오게 되었다! 번들러의 장점 - 모듈 단위의 코드 작성 - 네트워크 병목 완화(최적화) - 웹 개발 작업을 자동화 그렇다면 모듈 번들러(module bundler)는 무엇인가? HTML, CSS, JavaScript, images, Font 등을 하나하나 모두 모듈이다. 모듈 번들러는 아래와 같..

교수님이 열심히 클로저 함수 강의해주시던 건 기억이 나지만 (시험 문제에도 나왔던 거 같다) 무슨 내용인지는 가물가물하다.. 오늘은 클로저 함수에 대해 알아보겠다! 클로저(Closure)란? MDN에 따르면 클로저는 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합이다. 즉, 클로저를 사용하면 내부 함수에서 외부 함수의 스코프에 접근할 수 있다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효 범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. Lexical scoping에 대해서 먼저 알아보자 자바스크립트는 Lexical Scope를 따른다! (반대되는 것은 Dynamic Scope) Lexical Scope는 함수와 변수의 scope를 정의된 위치..

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번 이미지에서 왼..

1. firebase-tools 설치 npm install -g firebase-tools 2. 로그인 firebase login 3. firebase 초기 설정 firebase init - Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys 선택 - Use an existing project (현재 프로젝트를 사용) - build (public directory로) - Configure as a single-page app? ->y 4. build yarn build 또는 npm run build 5. deploy firebase deploy 끝! 배포 후 수정 시 yarn build fir..

Redux란? JavaScript App을 위한 예측 가능한 상태 관리 라이브러리이다. 장점 store를 사용하여 간단하게 전역 상태 변경이 가능 상태에 대한 버전 관리가 가능(시간 여행 가능) -> Redux DevTool 각 모듈은 자기 할 일만 하며 디커플링, 즉 의존성이 낮아짐 action 상태 변화를 일어날 때 액션을 발생시킨다. 여기서는 type이 반드시 있어야 한다. { type: "ADD_TODO", data: { id: 0, text: "블로그 작성하기" } } action creator 액션을 만드는 함수로 파라미터를 받아와서 액션 객체 형태로 만들어준다. 액션 생성 함수를 만들어주는 이유는 컴포넌트에서 쉽게 액션을 발생시키기 위해서 이다. 다른 파일에서도 사용할 수 있게 export ..