츄리닝개발자

웹 페이지는 상단에 favicon 모양이 있다. 확장자는 .ico인데png 확장자를 ico로 변환해주는 사이트가 있다.  https://convertico.com/ 변환후 파일이름을 favicon.ico로 해준뒤 index.html과 같은경로에 위치시켜주면 된다.  보통 아래의 코드를 html에 넣어줘야하는데 요즘에는 브라우저에서 루트에 위치한 파비콘을 가져가다 쓴다.

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

자바스크립트의 원시타입은 불변성(immutable)이고 참조타입은 가변성(mutable)이다. 원시 타입: Boolean, String, Number, null, undefined, Symbol 참조 타입: Object, Array 원시타입은 Call Stack에 저장을하고 참조타입은 Heap에 저장을 하는데 저장하는 방식이 다르다. 둘다 주소와 값을 가지고 있는 형태인데 Heap이 값을 배열형태로 가지고있는데. 이 값의 주소를 Call Stack에서 Heap의 메모리 참조의 ID를 값으로 저장한다. 원시타입: 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당. 참조타입: 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되고 변수에 ..

super는 자식클래스 안에서 부모클래스의 생성자를 호출할 때 사용한다. - (3) super는 자식클래스 안에서 부모클래스의 메소드를 호출할 때 사용한다. - (6) class Car { (3)constructor(brand) { this.carname = brand; } (6) present() { return 'I have a ' + this.carname; } } class Model extends Car { (2)constructor(brand, mod) { super(brand); this.model = mod; } (5) show() { return super.present() + ', it is a ' + this.model; } } (1)let mycar = new Model("Ford"..

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