wei3on 님의 블로그

Command Line Interface (CLI) : 터미널에서 입력하는 여러 명령어 더보기npm init -y🔻더보기npm i -D webpack webpack-cli webpack-dev-server@nextwebpack - 번들러가 동작하기 위한 핵심적인 패키지webpack-cli - 터미널에서 입력하는 모든 명령어 (CLI) webpack-dev-server -        dev 명령을 통해서 개발서버를 오픈할 때 조금 더 개발에 특화되어서         페이지를 바로바로 새로고침 해 줄 수 있게 하는 구조로 만들기 위한 패키지🔻package.json mode 라는 옵션을 추가해서 개발모드인지 제품모드인지 구별   ❗️ parcel bundler는 구성 옵션이 따로 필요없이 기본 적인 내용..

정적 파일 연결❗️ favicon.io 파일을 루트 경로에 둬도 favicon 연결이 안된다. favicon.io 와 같은 정적 파일을 연결할 때 사용하는 플러그인https://www.npmjs.com/package/parcel-plugin-static-files-copy parcel-plugin-static-files-copyParcelJS plugin to copy static files from static dir to bundle directory.. Latest version: 2.6.0, last published: 3 years ago. Start using parcel-plugin-static-files-copy in your project by running `npm i parcel-pl..

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 => {..

react-icons 모듈을 이용해서 아이콘 구현 npm install react-icons https://react-icons.github.io/react-icons/

Jsx자바스크립트의 확장 문법리액트에서는  JSX를 이용하여 화면에서 UI가 보이는 모습을 나타내줌 JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML(markup)를 같이 사용할 수 있기 때문에기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있음 ? 리액트 내에서 JSX 사용이 의무?의무는 ❌자바스크립트 안에서 UI 작업을 하는데 편리를 위해 거의 모든 사람이 사용  모든 UI를 만들때 마다  createElement를 사용해서 컴포넌트를 만들 순 없음→ JSX를 사용한 후 그걸 바벨이 다시 createElement로 바꿔서 사용한다. JSX를 사용하면서 주의해야하는 문법들(문법 규칙) 컴포넌트에 여러 element 요소가 있다면 반드시 부모요소..

public/index.htmlHTML 템플릿 파일. div의 element id를 root로 해둠 src/index.js자바스크립트 시작점여기서 위에 root id를 가진 div element를 잡아줌-> 그 element 안에서 화면을 꾸밀 수 있게 됨   Single Page Application (SPA)기존에는 한 html 파일에 하나의 페이지를 만들었다. -> Multi Page Application 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것 -> Single Page ApplicationHTML 5의 History API를 사용하여현재 페이지 내에서 화면 이동이 일어난 것 처럼 작동하게 함 history.back()세션 기록의 바로 뒤 페이지로 이동하..

리액트 앱 설치npx create-react-app npx create-react-app ./        // 현재 디렉토리 지정   Webpack이란?웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 장점여러 파일의 자바스크립트 코드를 압축하여 최적화 -> 로딩에 대한 네트워크 비용을 줄일 수 있음모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉬움 Babel이란?최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리  npx create-react-app ./ 에서 npx란?npx는 노드 패키지 실행을 도와주는 도구create-rea..

웹 페이지 빌드 과정 브라우저가 서버에서 페이지에 대한 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..

상속 (확장)class Vehicle { constructor(name, wheel) { this.name = name this.wheel = wheel }}const myVehicle = new Vehicle('운송수단', 2)console.log(myVehicle)//extends 확장자class Bicycle extends Vehicle { constructor(name, wheel) { // super() // super가 있는 자리에서 Vehicle 함수가 실행된다 super(name, wheel) }}const myBicycle = new Bicycle('삼천리',2)const daughtersBicycle = new Bicycle('세발', 3)console..