본문 바로가기
728x90

③ 프레임워크·라이브러리

 (6)
typescript + react + webpack setting 하기 (CRA❌) 1.프로젝트 폴더 생성 및 초기화 mkdir my-typescript cd ./my-typescript npm init -y 결과 : my-typescript 폴더 안에 package.json 파일 생성 2. 리액트 설치 npm install react react-dom or yarn add react react-dom react : 리액트 라이브러리 react-dom : 리액트 엘리멘트 렌더링 라이브러리 3. 타입스크립트 설치 npm i -D typescript @types/react @types/react-dom typescript : 타입스크립트 라이브러리 @types/react : 리액트를 위한 타입 정의 파일 @types/resct-dom : 리엑트 돔을 위한 타입 정의 파일 4. 웹팩 설치 n..
스무디 리액트 part 4 (10장) 보호되어 있는 글입니다.
뷰 프로젝트 세팅 가이드 https://msko.tistory.com/65 Vue CLI 없이 Wepack으로 프로젝트 구성(+ ESLint) 1. Vue package 설치 npm i vue@next npm i vue 로 설치 시, Vue2 버전이 설치됨 기본적은 Vue의 문법을 사용하는 용도 2. .Vue 파일을 관리하기 위한 Package 설치 npm i -D vue-loader@next vue-style-loader @v.. msko.tistory.com { "name": "vue-setting", "version": "1.0.0", "description": "bolier settings for vue", "main": "index.js", "scripts": { "start": "SET NODE_ENV=developm..
리액트 프로젝트 세팅 가이드 1. 프로젝트 폴더 생성 및 초기화 mkdir my-project cd ./my-project npm init 결과 : 프로젝트 루트에 package.json 파일 생성 2. 리액트 설치 npm install react react-dom yarn add react react-dom react : 리액트 라이브러리 react-dom : 리액트 엘리멘트 렌더링 라이브러리 3. 바벨 설치 npm install -D @babel/core@7 @babel/preset-env@7 @babel/preset-react@7 @babel-core : babel의 core 코드 @babel-preset-react : jsx를 javascript로 트랜스파일링 @babel-preset-env : es6+ 문법을 구브라우저에서..
React 문서 주요개념 요약 jsx란? react 엘리먼트를 생성하는 javascript를 확장한 문법 const name = 'Josh Perez'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); 바벨이 JSX를 React.createElement() 호출로 컴파일 const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 엘레멘트 렌더링 react element는 react의 가장 작은 구성 요소이며, 브라우저 DOM 과는 다르게 순수 오브젝트이다. 따라서..
뷰 라이프사이클이란? life cycle, 인스턴스의 생명 주기 vue 라이프사이클이란 vue의 인스턴스가 생성된 순간부터 종료될 때까지의 순환되는 주기를 말한다. 인스턴스는 이 과정에서 다양한 단계를 가지고, 개발자는 이를 이용해 화면과 데이터를 컨트롤 한다. 따라서 생명 주기 단계 마다 어떤 일들이 일어나는 지 이해하고 개발하는 것이 중요하다. 라이프사이클 단계 마다 메서드를 사용해 개발자가 원하는 커스텀 로직을 수행할 수 있기 때문에 vue는 따로 Controller를 가지고 있지 않다. 그림으로 보는 라이프사이클 new Vue()뷰 인스턴스 생성 Init Events & Lifecycle이벤트와 라이프사이클 초기화 ① beforeCreate인스턴스가 초기화된 직후, 데이터 관찰 및 이벤트/감시자 설정 전에 동기식으로 ..
728x90

티스토리툴바