Web/React (15) 썸네일형 리스트형 [React] 라우터 및 코드 스플릿 React Router React로 블로그 만들기 14 : 리액트 라우터 (React Router. 1) : 네이버 블로그 (naver.com) React로 블로그 만들기 14 : 리액트 라우터 (React Router. 1) 본격적인 블로그 만들기에 앞서 리액트 라우터 (React Router)를 추가해보겠습니다. 14-1. React-Route... blog.naver.com Code splitting / lazy Lazy Loading & Code Splitting | DailyLog (ui-tricks.netlify.app) Lazy Loading & Code Splitting How to set up lazy loading components in React ui-tricks.netlify.app [React] React에서 index.html( css) React를 사용하더라도 web이 결국 running하는 파일은 index.html 파일이다. 성능, 검색 최적화시 핵심 css는 index.html에 inline으로 넣는 것을 google에서도 권장한다. [React] 메뉴얼 React webpack 환경 설정 typescript가 js 파일까지 바로 해석을 할 수 있으나, typescript와 babel 사용시 "typescript --> babel --> js" 를 거쳐서 파일을 해석하는 이유는 webpack+babel은 모든 파일을 하나의 .js파일로 변경해주기 때문이다. babel-loader, style-loader, css-loader, file-loader, url-loader loader 옵션들이 .js파일로 bundling 해준다. package name npm i [package name] react : react 모듈 react-dom : react-dom 모듈 typescript : typescript 모듈 @types/react : react용 typescript 모듈 @types/rea.. [React] React props React props는 부모 component에서 자식 component에게 데이터를 넘겨줄때 사용한다. props에는 여러 종류의 method가 있는데 부모에서 넘겨주는 값 이외에 children, deafaultProps가 있다. children은 "Children 데이터" 로 tag로 감싸진 부분의 데이터이다. default props는 props의 값을 주지 않을 경우에도 자동으로 props의 값을 주고 싶을때 사용한다. [React] React 기초 ★ React 1. 사용자 경험 2. Component의 재사용( 유지 / 보수) 3. 데이터-화면 일치 ( 기존 웹개발은 직접 DOM에 접근하여 값을 변경하였지만 React의 경우 state로 값을 변경) ★ Webpack: 수백 수천개의 관련 파일들을 하나로 합쳐주는 것 ★ Webpack에서 필요 없는 plugin을 추려 낼 때 하나씩 빼며 오류가 있는지 확인하며 하는 방법도 있음 ★ Babel : 최신식 코드를 실제로 Javascript가 이해 할 수 있도록 바꾸어주는 library ★ babel - babel/core: 파일들을 최신 문법으로 - babel/preset-env: 내가 원하는 환경대로 설정 - babel/preset-react: react jsx를 사용할수있음 - babel-load.. 이전 1 2 다음
