WEB/REACT

21. CRA V2 (create-react-app) sass-loader 경로 패치

yarn eject로 따로 webpack.config.js 에서 수정하지 않고 쉽게 할수있다. 폴더 PATH의 목록입니다. C:. │ index.js │ out.txt │ Root.js │ serviceWorker.js │ ssr.js │ ├─components │ │ App.js │ │ │ ├─common │ │ ├─Button │ │ │ Button.js │ │ │ Button.scss │ │ │ index.js │ │ │ │ │ ├─Footer │ │ │ Footer.js │ │ │ Footer.scss │ │ │ index.js │ │ │ │ │ ├─Header │ │ │ Header.js │ │ │ Header.scss │ │ │ index.js │ │ │ │ │ ├─MarkdownRender ..

20. [토이프로젝트 따라하기] 서버사이드 렌더링[개요]

서버사이드 렌더리은 웹 브라어주에서 리액트를 불러와 컴포넌트를 렌더링하는 것이 아니라, 서버에서 미리 렌더링하여 HTML을 생성한후 웹 브라우제 전달하는 것이다. 이때 웹 브라우저는 자바스크립트를 호출할 떄 처음부터 렌더링하는 것이 아니라, 기존에 렌더링된 결과를 유지하면서 필요한 이벤트를 적용한다. 1. 문제점 - 자바스크립트가 실행되지 않기 떄문에 검색 엔진에서 제대로 페이지를 수집할 수 없다. - 자바스크립트 파일을 모두 불러올 떄까지 페이지는 비어 있는 상태를 보여준다. 2. 서버사이드 렌더링의 단점 - 서버의 자원이 소모된다. 서버가 저사양일떄는 서버사이드 렌더링 구현을 권장하지 않음 - 서버에 유저 유입이 순간적으로 늘어나면 서버 선능에 무리가 갈 수있으므로, 동일한 페이지는 특정 기간 동안 ..

19. [토이프로젝트 따라하기] 코드스플리팅

output 기본값 output: { path: isEnvProduction ? paths.appBuild : undefined, pathinfo: isEnvDevelopment, filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js', futureEmitAssets: true, chunkFilename: isEnvProduction ? 'static/js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js', publicPath: publicPath, devtoolMod..

18. [토이프로젝트 따라하기] "/" 방문시 동작되는 방식

간단한 토이프로젝트라서 그런지 backend 보다는 frontend가 더 복잡하다. Fill 처리된곳은 frontend에서 backend 에게 데이터 요청과 관련된것만 모음 각 폴더를 다시 정리하면 - 스타일(styles) : 공통 스타일 저장된곳 - 스토어(Store) : 리듀서, 스토어, 액션 등 - 컨테이너 컴포넌트(Container Component) 1. 어떻게 동작해야 할지를 책임진다. 2. 내부에 Presentational Component 와 Container 컴포넌트 모두를 가질 수 있지만, 대게 전체를 감싸는 div를 제외하고 자체적인 DOM 마크업이나 스타일을 갖고 있지 않다. 3. 데이터 및 데이터와 관련된 동작을 다른 Presentational Component 와 Containe..

17. [토이프로젝트 따라하기] 블로그-2

API 작업 axios : REST API 웹 요청을 프로미스 기반으로 간편하게 할 수 있는 라이브러리 moment : 날짜를 텍스트 형태로 보여주는 편한 라이브러리 query-stinrg : 문자열 형태의 URL 쿼리를 객체 형태로 변환할 수 있고, 반대로 객체 형태를 문자열 형태로 변환가능하게 해주는 라이브러리 (v6 이상은 구형 웹 브라우저에 호환되지 않기 때문에 v5 버전을 설치 @5 라고 뒤에 붙이면됨) remove-markdown : 마크다운 html이 변환지 않으므로 마크다운에서 사용하는 #, **, ```, > 등 특수 문자가 고스란히 보이는 문제점이 있다. 마크다운에서 사용한 특수 문자를 제거해주는 라이브러리 인증시스템 : 이 기능은 서버에서 세션과 인증된 쿠키를 사용하여 구현. 인증된 ..