Web (45) 썸네일형 리스트형 [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.. [Node] npm install error 발생시 node_modules package-lock.json 가장 간단한 방법으로 두 파일을 지우고 "npm i install" 명령어를 다시 실행한다. [Node] package.json npm package들을 관리하는 파일 node-modules안의 파일들이 설치되어 있지 않아도 package.json을 공유하면 해당 파일의 설치가 가능하다. - npm init : package.json 생성 - npm install [package name] : package 설치 == npm i [package name] - npm i [package name]@[version] : 특정 version 설치 - npm i [package name] -D : 개발모드로 설치 - npm uninstall [package name] : package 삭제 - npm install : package.json에 있는 모든 package 설치 - npm run [scripts] : scripts에 정의한 c.. [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 3 4 5 다음
