기타

React의 라이브러리 중 하나자바스크립트 상태관리 라이브러리Props의 불편함을 개선하기 위해 만들어진 개념

netlify로 배포 후 React-Router-Dom을 활용한 url연결에서 ':id'값을 변경하면 해당 에러가 발생에러pulic 폴더 안에 \_redirects 파일을 생성 후내용을 추가하여 재배포하면 react-router-dom이 정상적으로 작동한다!!참고사이트

폴더명을 Compoments에서 components로 변경 후 배포하니.. 빌딩에서 에러가 와장창 뜨기 시작.. git은 대문자 소문자를 구분해내지 못하는데 netlify는 대소문자를 구분해내서 해당되는 폴더가 없다고 인식해서 에러가 뜨는게 아닌가...라고 정확하지는

1. ESLint, Prettier VScode 확장 설치 2. ESLint 설치 ESLint 초기화 3. Prettier 설치 충돌 없애기 ✔️ 추가적인 플러그인 eslint-config-prettier 는 프리티어와 충돌하는 ESLint규칙을 끄는 역할을

: 여러개의 파일을 하나의 파일로 합쳐주는 번들러\--mode : 웹팩 실행 모드를 의미 - webpack에 내장된 환경별 최적화를 활성화할 수 있음/ development, production(기본값), none\--entry : webpack이 내부의 디펜던시 그래

Babel 자바스크립트 컴파일러로, 최신 자바스크립트 코드를 구형 브라우저에서도 호환될 수 있도록 변환해주는 도구 바벨 설치 - 핵심 모듈과 CLI 설치 바벨 빌드 단계 파싱(Parsing) : 소스 코드를 추상 구문 트리(AST)로 변환 변환(Transformi

개발환경과 운영환경을 맞춤으로써 배포시 잠재적 문제를 미리 확인할 수 있기 때문에 개발환경에서도 유사한 환경을 맞춰주는 것이 좋다.ajax 방식의 api 연동은 cors 정책 때문에 반드시 서버 필요하다.프론트엔드 개발환경에서 이러한 개발용 서버를 제공해주는 것이 we

코드가 많아지면 번들링된 결과물이 많아지면서 브라우저의 성능에 영향을 줄 수 있음.따라서 최적화가 필요함mode 값을 설정하는 방식mode : “development”는 디버깅 편의를 위해 NamedChunksPlugin, NamedModulesPlugin 을 사용

Content-Type 헤더는 HTTP 요청과 응답에서 전송되는 데이터의 타입을 명시하는 중요한 요소 이 헤더는 서버와 클라이언트가 데이터를 주고받을 때, 해당 데이터가 올바르게 해석될 수 있도록 돕습니다.Content-Type 헤더는 MIME 타입을 기반으로 하며, 

| 비교 항목 | npm install | npm ci | | --- | --- | --- | | 버전 해석 방식 | package.json의 버전 범위(range) 내에서 다른 버전을 설치할 가능성이 있음 | package-lock.json에 명시된 정확한 버전만 설치 | | package-lock.json 변경 여부 | 변경될 가능성이 있음 | 절대 변...

브라우저는 웹페이지를 로드할 때 다운로드한 리소스(HTML, CSS, JS, 이미지 등)를 저장하여 다음 요청 시 빠르게 불러오는 캐싱 기법을 사용크게 메모리 캐시와 디스크 캐시로 나뉨✅ RAM에 저장(빠른 접근 속도)✅ 현재 열린 탭에서 CSS나 JS 같은 리소스를

구글이 웹사이트 사용자 경험을 평가하기 위해 제안한 핵심 지표사용자 경험과 직결되며 SEO에도 직접적인 영향을 미침LCP (Largest Contentful Paint)INP (Interaction to Next Paint)CLS (Cumulative Layout Sh

최종 번들 크기를 줄이기 위해 사용되지 않는 코드를 제거하는 최적화 방법주로 모듈 시스템을 기반으로 동작하며 사용되지 않은 데드(dead) 코드를 감지하고 번들에게 제거하여 최적화ES 모듈을 사용ES 모듈은 정적인 구조를 가지기 때문에 코드 분석 과정에서 어떤 모듈이