React 목차 리액트에서 이벤트 다루는 방법 이벤트 처리(핸들링) 방법 이벤트의 기본동작 방지 처리 1. 리액트에서 이벤트 다루는 방법 : React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사함 React의 이벤트는 소문자 대신 캐멀 케이스(...

React 목차 Next.js 1. Next.js : React + Express.js + React-Router-Dom + SSR 실제 서버까지 내장되어 있는 all-in-one 솔루션 next.js가 제공하는 주요 기능 hot reloading : 개발 중...

React 목차 Routing in React SPA Client-Side Routing 1. Routing in React SPA * Routing: 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스 라우팅과 렌더링은 애플리케이션의 효율성과 속도에 미치는 영향을 추측하는데 도움이 됨 React...

React 목차 React의 memoization useMemo와 useCallback React.Memo와 useMemo 1. React의 memoization : 연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법 React.memo()는 props의 값으로 ...

React 목차 Portal Portal 사용법 Portal 사용 이유 1. Portal : 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 랜더링하는 최고의 방법을 제공(컴포넌트들의 상하 관계, 구조를 가지고 있는 문서인 DOM 상에서, 자식 컴포넌트를 부모 컴포넌트 바깥에 있는...

React 목차 React.Fragment Fragment 사용 이유 1. React.Fragment Fragment는 React v16에 추가된 기능 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 하는데, 이때 fragment를 사용하면 dom에...

React 목차 HOC HOC 장단점 HOC 주의할 점 HOC 사용 예제 1. HOC(Higher-Order-Components) : HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수 고차 컴포넌트(HOC, higher-order-componentm), 이하 HOC로 통일...

Rest API 목차 REST API가 뭔가요? REST API의 구성은 어떤 것이 있나요? REST API를 설계하는데 중요한 것이 있을까요? HTTP 요청 메서드에 대해서 아는대로 얘기해보세요 1. REST API가 뭔가요? : REST API란 REST를 기반으로 만들어진 API를 의미 ...

크로스 브라우징 목차 크로스 브라우징 크로스 브라우징이 작업마다 필요한 원인 브라우저 대응 순서 크로스 브라우징 작업 크로스 브라우징(Cross Browsing) : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업HTML5, CSS3, Javas...

bundle 사이즈 줄이는 방법 목차 BundleAnalyzerPlugin bundle 사이즈 줄이는 방법 1. BundleAnalyzerPlugin(webpack bundle analyzer) 웹팩을 통해 번들링한 결과를 시각적으로 보여줘서 어떤파일이 용량이 큰지 중복되는 패키지는 없는지 체크하여 번들...