wei3on 님의 블로그

설치해야할 것들nodejs, npm  npm install -g typescript tsc main.ts tsc main.ts -w tsconfig.json을 루트 경로에 생성한다.{ "compilerOptions": { "rootDir": "./src", //src 폴더 안에서 루트파일 "outDir": "./build/js" // 어디로 컴파일되서 들어가게 할건지 }} { "compilerOptions": { "rootDir":"./src", "outDir":"./build/js", "target":"ES6" //ES6 문법으로 컴파일링 }}기타 다른 컴파일 옵션들 💬{ "compilerOptions": { "rootDir":"./src", "outDi..

자바스크립트에 타입을 부여한 언어자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야함 (→ 컴파일 compile)정적 타입(static)                                                                              동적 타입(dynamic)컴파일 타임                                                                                       런타임에서 동작할 때코드 작성 단계에서                                                                             타입 오류 확인오류 확인타입스크립트는 자바스크립트 기능..

최적화?성능 최적화를 왜 할까?-> 불필요한 렌더링을 방지하기 위해서소규모 프로젝트에서는 큰 손실이 없을지 모르지만 프로젝트가 커질수록쓸모없는 렌더링이 메모리를 사용해 속도를 느리게 만들것이고 사용자 경험에도 영향을 미치게 됨 개념"리액트의 최적화" = "렌더링을 최적화 하는것" 렌더링 개념리액트에서 컴포넌트가 렌더링을 언제 수행하나?1. Props가 변경될때2. State가 변경될때3. forceUpdate() 를 실행했을때4. 부모 컴포넌트가 렌더링 되었을때 자식 컴포넌트도 렌더링됨 *참고 :렌더링 과정에서 변수나 함수는 초기화 된다.   React.memo(), useCallback, usememo 모두 memoization 개념 사용? Memoization비용이 많이 드는 함수 호출의 결과를 저장..

gihhub 레파지토리에push 해둔 프로젝트를 배포하는 방법 gh-pages 모듈 설치npm install gh-pages --save-dev package.json 설정"homepage" : "https://깃헙아이디.github.io/레파지토리 이름" "scripts"내    "predeploy": "npm run build"    "deploy" : "gh-pages -d build" 추가  build를 이용해서 배포npm run deploy↓  > react-tictactoe-app-functional@0.1.0 predeploy> npm run build  build를 먼저 실행해서 코드 최적화를 먼저 시키고> react-tictactoe-app-functional@0.1.0 build> re..

' 오류 해결 방법" href="https://wei3on.tistory.com/4" target="_blank" rel="noopener">https://wei3on.tistory.com/4' 오류 해결 방법" data-og-description="Git 레파지토리에서 clone이 아닌 zip 파일을 다운로드 받아서vs code 에서 npm install 하려고 했더니 생겼던 오류  node의 버전은 잘 나오는데 npm의 버전을 확인하니 동일한 오류가 나온다.  버전 확" data-og-host="wei3on.tistory.com" data-og-source-url="https://wei3on.tistory.com/4" data-og-url="https://wei3on.tistory.com/4" dat..

babelJavaScript 컴파일러최신 버전의 JavaScript 코드를 이전 버전의 JavaScript로 변환하는 도구 최신 JavaScript 문법을 사용하면서도 구형 브라우저나 환경에서 코드가 동작할 수 있게 함아직 제안 단계에 있는 JavaScript 기능을 현재 사용할 수 있게 해줌크로스 브라우저 호환성 보장최신 JavaScript 기능을 안전하게 사용 가능코드의 가독성과 유지보수성 향상 더보기npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime개발 의존성으로 패키지 설치  프로젝트 루트에 .babelrc.js 파일 생성바벨이 동작할 수 있는 내용 작성하기 webpack.config.js 파일 설정babel-loader ..

페이지를 index.html로 확인하고 싶을때 개발 서버를 오픈하기 위해 설치하는 플러그인더보기npm i -D html-webpack-pluginplugin을 import와 같은 기능인 require로 불러와서번들링 후 결과물의 처리 방식 등 다양한 방식을 지정해주는 플러그인을 설정해줄 수 있는 plugins 옵션 추가devServer 옵션 - http://localhost:8080 더보기npm run dev  정적 파일을 연결하기 위해서 설치하는 플러그인더보기npm i -D copy webpack-plugincopy-webpack-plugin 패키지를 require해서 CopyPlugin 변수에 담은 후 plugins 옵션 내에생성자로 CopyPlugin 내용을 입력 from: 'static' (어디에..

PropsProps는 Properties의 줄임말상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 읽기전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않음. 더보기A. 부모 컴포넌트     state = { a: "a" } B.      a state 필요     this.props.aProps 부모 컴포넌트에서 보낼 데이터import하는 코드 부분에서 자식 컴포넌트(ExpenseList)로 내려줌 initialExpenses={this.initialExpenses} /> 받아오는 자식에서  읽기 전용으로 내려받음expense 라는 이름으로 다시 자식 컴포넌트(ExpenseItem)에게 내려줌{this.props.initialExpenses.map(expense => {..

웹 페이지 빌드 과정 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다.웹브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정  DOM tree 생성렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 랜더링 할 지 결정🔻Render tree 생성브라우저가 DOM과 CSSON을 결합하는 곳, 화면에 보이는 모든 컨텐츠와 스타일 정보를 모두 포함하는 최종 랜더링 트리를 출력즉, 화면에 표시되는 모든 노드의 컨텐츠 및 스타일 정보를 포함🔻Layout (reflow)브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계🔻Paint실제 화면에 그리기   ❗️문제점 어떤 인터렉션에 의해 DOM에 변화가 발생하면그때마..

리액트란? 사용자 인터페이스를 만들기 위한 javascript 라이브러리앵귤러, 뷰는 프레임워크 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것  프레임 워크는 라이브러리를 포함하고 어떠한 기능을 만들기 위해서 라이브러리를 호출함  ? 리액트가 라이브러리인 이유 - 전적으로 UI를 랜더링하는데 관여하기 때문- 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하며   상태관리를 위해서는 redux, mobx   빌드를 위해서는 webpack, npm 등등   테스팅을 위해서는 Eslint, Mocha 등을 이용  리액트 컴포넌트란?리액트는 여러 컴포넌트 조각으로 되어있다.  클래스형 컴포넌트class App exte..