전체 글

Component 라이프사이클

라이프사이클이란? Component가 처음 생성이 될 때 부터 소멸이 될 때 까지의 수명 주기다. 라이프사이클은 크게 세가지로 나눌 수 있다. Mount DOM이 생성되고 웹 브라우저 상에서 나타나는 것이다. Update 상황 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링 할 때 Unmount DOM에서 제거되는 것이다. // RSP.jsx import React, {Component} from 'react'; class RSP extends Component { state= { result: '', score:0, imgCoord:0, }; componentDidMount() { // 컴포넌트가 첫 렌더링된 후 } compone..

렌더링 최적화

렌더링 실습 코드 ( shouldComponentUpdate() ) // RenderTest.jsx import React, { Component } from "react"; class Test extends Component { state = { counter: 0, }; shouldComponentUpdate(nextProps, nextState, nextContext) { if(this.state.counter !== nextState.counter){ return true; } return false; } onClick = () => { this.setState({}); }; render() { console.log("렌더링", this.state); return ( 클릭 ); } } export..

BFS란? (BFS기본, 송아지찾기 문제)

너비 우선 탐색(BFS)은 맹목적 탐색방법의 하나로 시작 정점을 방문한 후 시작 정점에 인접한 모든 정점들을 우선 방문하는 방법이다. 더 이상 방문하지 않은 정점이 없을 때까지 방문하지 않은 모든 정점들에 대해서도 너비 우선 검색을 적용한다. 최단거리를 탐색 할 때 사용된다. BFS 기본 function solution () { let answer = ""; let queue = []; queue.push(1); // root 노드 while(queue.length) { let v =queue.shift() + " "; answer += v + " "; for(let nv of [v*2, v*2+1]) { if (nv > 7) continue; queue.push(nv); } } return answer..

Webpack Dev Server 와 Hot Reloading

webpack : v5.65.0 webpack-cli : v4.9.1 Hot Reloading에 필요한 패키지 설치 react-refres : v0.11.0 @pmmmwh/react-refresh-webpack-plugin : v0.5.4 webpack-dev-server는 변경점을 저장하면 실시간으로 새로고침을 시켜준다 그 때 기존 데이터를 유지하기 위해 사용되는 패키지다. yarn add react-refresh @pmmmwh/react-refresh-webpack-plugin -D webpack-dev-server 설치 webpack-dev-serve : v4.7.2 webpack-dev-server는 변경점을 감지할 수 있음 yarn add -D webpack-dev-server npm run d..

Webpack

Webpack 등장 이유 여러개의 Javascript를 브라우저에서 로딩을 하게되면 반응속도가 많이 느려진다. 여러개의 Javascript를 하나의 Javascript 파일로 관리하는데 어려움이 있다. Webpack 설치 (yarn) Webpack은 개발환경에서만 사용하므로 -D로 옵션을 넣어준다. (-D : -development) Webpack을 사용하려면 webpack과 webpack-cli를 설치해야한다. yarn add -D webpack webpack-cli Webpack.config.js webpack세팅 const path = require("path"); //webpack 공식문서 https://webpack.js.org module.exports = { mode: "development..

함수형 컴포넌트(Functional component) + 구구단 게임

과거 함수형 컴포넌트는 State를 핸들링 하지 않는 경우에만 사용했었다. React Hooks가 나온 이후부터 함수형 컴포넌트를 권장하기 시작했다. useState state 선언부다. 컴포넌트 함수 안에서 선언하고 사용가능하다. useState 선언은 구조분해할당으로 한다. state는 setState(value); 로 state를 핸들링한다. ex) setFirst(value), setSecond(value) .. const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9)); const [value, s..

Class형 Component + 구구단 게임

과거 React는 주로 클래스형 컴포넌트(Class Component)로 구현을 했지만 함수형 컴포넌트(Functional Component)의 훅(hooks)를 지원한 이후부터는 함수형 컴포넌트를 권장하고있다. 하지만 regacy code가 아직 많이 남아있으므로 클래스형 컴포넌트도 공부를 할 필요가 있다. CDN 방식으로 React를 연결하여 HTML파일 하나로 구구단을 구현했다. 구구단 전체코드 Class Component 선언 React.Component를 상속받는다. constructor 내에서 state 초기값 선언한다. ( this.state ) state는 객체형태다. class GuGuDan extends React.Component { constructor(props) { super(p..

Interface

Javascript에서는 작동을 안하고 Typescript에서만 작동함 인터페이스는 상호 간에 정의한 약속 혹은 규칙 여러가지 타입의 property로 새로운 타입을 정의하는 것과 유사함 object 타입들의 이름을 짓는 역할 Interface 사용 예 // index.ts interface Human { name: string; age: number; gender: string; } const person = { name: "hanjune", gender: "male", age: 22, }; const sayHi = (person: Human): string => { return `Hello ${person.name}, you are ${person.age}, you are a ${person.gend..