React

yarn create react-app 폴더이름: CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드도구, CRA대신 Esbuild를 사용해서 속도가 빠르다.yarn create vite my-first-vite-react-app --template react빠른 콜드

기술적 관점가상 DOM (Virtual DOM)Routing 이점 ⇒ Browser 위에서 Mobile App 처럼 동작함개발 경험 관점컴포넌트 기반UI를 독립적이고 재사용 가능한 여러 컴포넌트로 분리함으로써, 대규모 애플리케이션의 개발과 유지보수를 용이하게 합니다.선

css in js 스타일로 원하는 영역에만 스타일을 적용시킬 수 있다.Yarn add styled componentsGlobalStyle or styled from styled-componentscss-in-js를 사용함으로써 style을 적용할 때 조건문, 변수 등

useCallback()으로 초기화를 한다.초기화로 예시사용const initCount = useCallback(()=>{}): value를 캐싱한다.무거운 컴포넌트나 데이터 값을 최초에 한번만 값을 가져오는 용도로 많이 사용But, 하지만 남발해서 썼을 때는 데이터를

CRA나 Vite를 사용하지 않고 React 어플리케이션을 구성해보기이유 : CRA는 간편하게 설정을 자동화해 주지만, 커스터마이징에 제약이 많아 실무에서 한계가 있을 수 있음CRA대신 Webpack과 Babel을 이용해 React 프로젝트를 설정하는 방법을 익힌다.번

redux아래 slices폴더생성(컨벤션)counterSlice.js 생성초기 상태값 설정counterSlice에 createSlice생성createSlice는 객체(name, initialState, reducers)를 인자로 받음counterSlice.jsconfi

React.mjsindex.mjs

node-modules : 라이브러리 코드 보관함 public : static파일 모아놓는 곳 src : 코드 짜는 곳 package.json : 프로젝트정보 style넣을 땐 style={{스타일명 : '값'}] -쓸 수 없음 ex) font-size => font

Action: 애플리케이션에서 어떤 이벤트가 발생했음을 나타내는 객체Dispatcher: 발생한 Action을 받아서 다른 요소들에게 전달하는 역할Store: Action의 결과로 변경된 상태를 저장하는 공간View: 사용자에게 데이터를 표시하고, 또 다른 Action

클라이언트-서버 모델 기반 동작(클라이언트가 요청 서버가 응답 반환)무상태성: 모든 요청 독립, 이전 쵸엉의 정보를 기억하지 않음 이를 무상태라고 함확장성유연성 : 다양한 데이터 형식 ex)텍스트, 이미지, 비디오요청 메세지 \- 요청 라인 : 메서드(GET,PO

다운로드 UI가 있을 때 또는 UX 저해시키는 불필요한 네트워크 요청을 제거하기 위해 사용대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있다.: 서버 요청이 정상적

lodash는 JavaScript 유틸리티 라이브러리, 배열, 객체, 문자열 등의 데이터 조작을 쉽게 할 수 있는 함수들을 제공한다.성능 최적화와 코드 가독성을 높이는데 유용,throttle, debounce 같은 함수도 포함되어 있다.인증(authentication)