츄리닝개발자

npm install cra-template-typescript -g 위 패키지가 없어서 안될가능성이 있으니 이것을 적용혹은 이전 프로젝트 캐시가 남아있을수 있으니 npm uninstall -g create-react-app위 명령어로 캐시를 한번 삭제해준다.  이전에는 --template typescript를 설정해줘도 적용이 안되었던것이 위 패키지를 설치해주니 아래와같이 정상적으로 적용이 되었다.

1. node js를 설치해준다. LTS버전으로  2. yarn을 설치해줘야한다. # 맥북에서 설치 brew를 설치한후brew install yarn  3. 루트 디렉터리에 CRA(create-react-app) 세팅yarn create react-app 사용할폴더이름 -template typescriptcd 사용할폴더이름 4. react router dom 추가yarn add react-router-dompackage.json에 dependency가 추가된다 dev dependency에 추가해줄 경우 로컬 환경에서 개발 및 테스트할때만 사용되는 패키지들을 정의한다. yarn add --dev @types/react-router-dom

visual studio code에서 아래순으로 명령을 실행시켜준다. // 패키지를 만들어준다. npm init -y npm install webpack-cli --save-dev //실행할 웹서버를 설치/ 트랜스파일러로 babel을 설치 npm install webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev package.json { "name": "2.3", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "build": "webpack", "test": "echo \"Err..

리액트에서는 요소의 리스트를 나열할 때 key를 넣어줘야한다. key는 React에서 변경하거나 추가 또는 제거된 항목을 식별하는데 도움이된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야한다. key에는 유니크한 값을 넣어주는데 index는 리스트가 추가되거나 제거되면 해당 리스트들의 키값도 변경되서 추천하지 않는다. {/* before */} 1 2 {/* after */} 3 2 {/* after */} 3 1 2

class 없이 state를 사용할 수 있는 기능이다. React는 원래 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다. React Component 1. Class Component: 더 많은 기능, 더 긴 코드, 더 복잡한 코드, 더딘 성능 import React, { Component } from 'react' export default class Hello extends Component { render() { return { hello my friends! } } } 2. Functional Component: 더 적은 기능, 짧은 코드, 더 심플한 코드, 더 빠른 성능 import React from 'react' export d..

export를 통해 이 파일을 어떻게 사용한다고 알려줘야하는데 import React, { Component } from 'react' export default class Board extends Component { render() { return ( Board ) } } 이런식으로 매번 써주기는 귀찮으니 rcc라는 요약어를 적어주면되게하는데 이것을 사용할려면 확장을 깔아줘야한다. es7을 visual studio code안에 설치해준다. ES7+ React snippets 파일명에 export default class 이렇게 적어주면 이 클래스를 main으로 외부로 보내주겠다는 뜻이다.

자바스크립트의 확장 문법으로 화면에서 UI가 보이는 모습을 나타내준다. JSX는 UI를 보이게할때 자바스크립트(logic)과 HTML구조(markup)을 같이 사용할 수 있어 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현하게한다. 만약 JSX를 사용하지 않고 리액트를 사용하면 이렇게 사용해야한다. React.createElement API를 사용해 객체를 생성하고 In-Memory에 저장한다. ReactDOM.render 함수로 웹 브라우저에 그린다. const myelement = React.createElement('h1', {}, 'I do not use JSX'); -> ReactDOM.render(myelement, document.getElementById('roo..

일반적으로는 멀티페이지 어플리케이션이라고 여러 페이지들을 사용한다. 하지만 최신의 프론트엔드 라이브러리들은 싱글페이지 어플리케이션을 이용해 개발을 한다. 이게 가능한 것은 HTML5의 History API를 이용해서 가능하게된다. 하나의 html파일안에서 화면 이동이 가능하다. # History API History.back() 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드로 브라우저 뒤로가기와 같은 효과를 가지고 있다. History.forward() 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드로 브라우저 앞으로 가기와 같은 효과를 가진다. History.go() 특정한 세션 기록으로 이동하게 해주는 비동기 메서드로 1을 넣어 호출하면 바로 앞페이지로 가고, -1을 넣어 호출하면 바로 ..

리액트는 여러개의 컴포넌트로 구성되어있다. 리액트의 컴포넌트는 두가지가 있다. 1. 클래스형 컴포넌트 (Class Components) class App extends Component { render() { return 안녕하세요. } } 2. 함수형 컴포넌트 (Functional Components) - 리액트 Hooks이 나온이후 함수형 컴포넌트를 사용해서 개발을 많이 한다. function App() { return 안녕하세요. } # 리액트 실행전 node js, npm(node js가 설치될때 같이 설치된다.)을 설치해야한다. 리액트는 가상돔을 사용한다. CRP(critical render path)과정을 이용해서 브라우저에 뿌려주게된다. DOM tree 생성 -> Render tree생성(브..