DEVELOPMENT RECORD

npm 캐시 삭제 후 재 설치해주자!! 1: $ npm cache clean --force 2: $ rm -rf node_modules 3: $ npm install 4: $ npm start 출처 https://velog.io/@luvrace/%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C-Next-%EC%8B%A4%ED%96%89%EC%8B%9C-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%97%90%EB%9F%AC 서버에서 Next 실행시 발생하는 에러 1.에러 발생 상황"npm i next"로 next를 설치 후 next를 실행하려 했다그러자 에러가 발생했다.2.해결방법검색을 통해서 문제가 되는 이유가 몇 가지 있다는 것을 알았다첫 번째 해결방법인 웹..

리엑트를 쓰는데 위와 같은 에러가 계속 발생했다... 찾아보니.. 그냥 무시하면 된다!! 출처 https://online.codingapple.com/forums/topic/%EC%83%81%ED%92%88-%EC%83%81%EC%84%B8%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90-%EB%93%A4%EC%96%B4%EA%B0%88%EB%95%8C%EB%A7%8C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%A9%EB%8B%88%EB%8B%A4/

데이터 패칭 라이브러리 : Store의 반복되는 API 요청으로 불필요한 통신 문제 해결 React-Query : Server와 Client 사이 비동기 로직들을 손쉽게 다룬다. - 서버 데이터 캐싱 - 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 - prefetching, retry 등 다양한 옵션 - 쉬운 상태 관리 속성 1) Query 2) Mutate 3) Query Invalidate 출처 https://haesoo9410.tistory.com/m/346 React-Query 의 필요성 1. 소개 * 기존의 상태관리 - 모던한 FE에서 상태를 관리하는 것은 필수이다. 단순한 체크여부 뿐만 아니라 다크모드, 인풋 값, 로딩상태, 에러상태, 눈에 보이는 리스트 데이터부터 눈에 보이지 h..

Pages : 페이지를 담당하는 컴포넌트 - pages/about.js 파일을 생성한다면 /page로 쉽게 접근 function About() { return About; } export default About; 규칙 1) _app.js : pages들의 공통 - 모든 페이지에서 쓰는 스타일, 레이아웃, 메타데이터 등을 넣어주면 된다. import Head from 'next/head'; Layout : 특정 컴포넌트에서 공통 - layout 컴포넌트를 생성 후, 생성한 layout 컴포넌트를 상위 컴포넌트로 감싸주면 된다. 출처 https://velog.io/@___pepper/next.js-layout-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [next.js] layout ..

Next.js : React 라이브러리의 프레임워크 - SSR 제공 - 검색 엔진 최적화 - 직관적인 페이지 기반 라우팅 - 빠른 페이지 전환 - 코드 분할 SSR(Server Side Rendering): 클라이언트(브라우저)에 응답하는 방식 장점 검색 엔진 최적화 가능 : 페이지가 로딩될 때 데이터도 함께 로드되기 때문에 검색엔진에 해당 데이터들이 걸리기 때문에한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다. 단점 페이지 이동 시 페이지를 요청할 때마다 중복되는 파일을 내려 받아야 하기 때문에 서버 부하가 CSR보다 많다. React에서 SSR을 구현할 경우 코드와 구조가 복잡해질 수 있다. CSR(Client Side Rendering): 사용자의 요청마다 페이지를 구성 장점 데이터 요청이 있..

calc : 스타일 사용시에 사용할 수 있는 계산식 - CSS에서 수치화된 숫자값을 사칙연산자를 사용하여 계산을 할 수 있도록 해주는 함수 - 보통 %로 처리된 것을 px로 연산할 때 유용하게 사용할 수 있다. - 사용할 수 있는 사칙연산자는 +(더하기), -(빼기), *(곱하기), /(나누기)가 있다. 반응형과 모바일을 코딩할 때 유용하게 쓰인다!! 출처 https://developer.mozilla.org/en-US/docs/Web/CSS/calc() calc() - CSS: Cascading Style Sheets | MDN The calc() CSS function lets you perform calculations when specifying CSS property values. It can ..

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 : 각각 라이브러리, 프레임 워크에 따라서 설치하는게 다르니까 시작 페이지에서 사용하는 거에 맞게 설치하기 관련 패키지 설치 - Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지 $ npm i @fortawesome/fontawesome-svg-core ​ - Font Awesome 아이콘 대한 패키지 : 무료로 제공되는 Solid, Regular Brands 3개의 카테고리에 대한 패키지만 설치 $ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons..

WebP는 구글이 개발한 손실/비손실 압축 이미지 파일을 위한 이미지 포맷이며 웹페이지에서 JPEG을 대체하기 위해 만들어진 규격이다. Webp는 사진 이미지 압축 효과가 크다. 덕분에 30%가량 줄여 웹사이트에서 트래픽 감소 및 로딩 속도를 단축해준다. JPEG와 같이 압축을 하기 떄문에 화질저하가 있지만 그부분에 대해서는 최소화를 하면서 파일크기를 JPEG이미지의 10~30%까지 압축하였다. PNG와 비교할때는 26%나 더 작게 이미지를 압축한다. - 투명한 이미지로 사용 가능한 Google이 만든 차세대 이미지 - WebP는 PNG보다 26% 더 작은 파일 크기를 제공하는 동시에 투명도와 동일한 품질을 제공 - WebP는 PNG 이미지보다 파일 크기로 인해 더 빠르게 로드 출처 https://fou..

Redux : Flux 패턴의 상태관리 라이브러리 3가지 규칙 - 하나의 어플리케이션 안에는 하나의 Store만 사용한다. - 상태는 읽기 전용이다. - 변화를 일으키는 함수, Reducer는 순수한 함수여야 한다. 설치 npm install redux react-redux 설정 : Provider import { Provider } from 'react-redux'; import store from './store'; ReactDOM.render( , document.getElementById('root') ); - index.js 에서 Provider 컴포넌트로 App 컴포넌트를 감싼다. - store.js 파일을 임포트하여 Provider의 props로 전달 - 결과적으로 최상위에 store가 연결..

상태관리 라이브러리 : 상태(state)를 효율적으로 관리 - 리엑트를 포함한 대부분의 프로젝트는 MVC 패턴이 많이 사용 → 단점으로 인해 Flux 패턴 이용 MVC 패턴 : 컨트롤러가 여러 모델을 제어하고, 모델과 뷰가 서로를 바라보는 구조로 모델과 뷰가 양방향으로 영향을 미치기 때문에 프로젝트의 규모가 커지고 상태가 많아질수록 관리가 어렵다. Flux 패턴 : 데이터의 흐름이 단방형으로 흐르는 구조 - 대표적 라이브러리가 Redux 여러가지의 상태관리 라이브러리 - Redux - MobX - Recoil - Context API … 출처 https://velog.io/@danmin20/%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C..