코딩 일기장

Context API는 리액트 프로제그에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러가지 종류가 있을 수 있다. Context API는 리액트 v16.3부터 사용하기 쉽게 개선되었다. Context API를 사용한 전역 상태 관리 흐름 리액트 애플리케이션은 컴포넌트 간의 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 하위 컴포넌트가 많아지면 각 하위 컴포넌트에 상태 업데이트 함수를 여러번에 걸쳐서 전달 해야한다. 이러한 상황은 프로젝트의 유지 보수성이 낮아질 수 있다. 그렇게 때문에 리덕스나 MobX 같은 상태 관리 라이브러리를 사용하여..

웹을 만들다보면 처리할 때 시간이 걸리는 작업이 있다. 웹에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용하셔 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 자바스크립트에서 비동기 작업을 할 때 흔히 사용하는 방법은 콜백 함수를 사용하는 것이다. 콜백 함수 function increase(number, callback) { setTimeout(() => { const result = number + 10; if (callback) { callback(result); } }, 1000) } increase(0, resul..

리액트 라우터 v6 변경점 switch → routes 네이밍 변경 기존의 route 들을 구성하는 부모 요소를 switch 라는 네이밍으로 사용하였지만 v6에서는 route 복수개를 뜻하는 routes로 이름이 변경되었다. StaticRouter의 import 위치 변경 import { StaticRouter } from 'react-router-dom/server'; exact 옵션 삭제 기존 / 라우트의 경우 React Router 의 디폴트 매칭 규칙으로 인해 앞부분만 일치해도 전부 매칭되기 때문에 정확히 라우트를 일치시키고자 exact 속성을 사용하였으나 v6부터 기본적으로 정확히 일치하도록 매칭 규칙이 변하여 exact 옵션을 더이상 하용하지 않는다. 만약 하위경로에 여러 라우팅을 매칭시키고 ..

일반 css 일반 CSS를 작성할 때 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것이다. CSS 클래스 중복을 방지하는 방법은 이름을 지을 때 특별한 규칙을 사용하는 것, CSS selector를 활용하는 것이다. 이름 짓는 규칙 클래스 이름을 컴포넌트 이름-클래스 형태로 지어 실수로 중복되는 클래스를 방지한다. 또는 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 BEM 네이밍을 사용한다. .App-header {} /* 컴포넌트 이름-클래스 형태 */ .card_title-primary {} /* BEM 네이밍 */ CSS selector CSS selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 ..

Hooks는 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 해 준다. import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Coun..

render() render() { ... } 컴포넌트의 모양새를 정의한다. 라이프사이클 메서드 중 유일한 필수 메서드 메서드 안에서 this.props, this.state에 접근할 수 있으며, 리액트 요소를 반환. render 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안 되며, 브라우저 DOM에 접근해서도 안 된다. DOM 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다. constructor constructor(props) { ... } 컴포넌트의 생성자 메서드, 컴포넌트를 만들 때 처음으로 실행된다. state를 정할 수 있다. getDerivedStateFromProps props로 받아온 값을 state에 동기화 시키는 용..

리액트 컴포넌트에는 라이플사이클(생명주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리할 수도 있고, 불필요한 업데이트를 방지해야 할 수 도 있다. 라이플 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 라이프사이클 라이프사이클 메서드의 종류는 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행하는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행하는 메서드다. 라이프사이클은 총 3가지 마운트, 업데이트, 언마운트 카테고리로 나눈다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나..

문제 링크 : https://www.acmicpc.net/problem/5430 5430번: AC 각 테스트 케이스에 대해서, 입력으로 주어진 정수 배열에 함수를 수행한 결과를 출력한다. 만약, 에러가 발생한 경우에는 error를 출력한다. www.acmicpc.net 문제 선영이는 주말에 할 일이 없어서 새로운 언어 AC를 만들었다. AC는 정수 배열에 연산을 하기 위해 만든 언어이다. 이 언어에는 두 가지 함수 R(뒤집기)과 D(버리기)가 있다. 함수 R은 배열에 있는 숫자의 순서를 뒤집는 함수이고, D는 첫 번째 숫자를 버리는 함수이다. 배열이 비어있는데 D를 사용한 경우에는 에러가 발생한다. 함수는 조합해서 한 번에 사용할 수 있다. 예를 들어, "AB"는 A를 수행한 다음에 바로 이어서 B를 수..

문제 링크 : https://www.acmicpc.net/problem/1405 문제 통제 할 수 없는 미친 로봇이 평면위에 있다. 그리고 이 로봇은 N번의 행동을 취할 것이다. 각 행동에서 로봇은 4개의 방향 중에 하나를 임의로 선택한다. 그리고 그 방향으로 한 칸 이동한다. 로봇이 같은 곳을 한 번보다 많이 이동하지 않을 때, 로봇의 이동 경로가 단순하다고 한다. (로봇이 시작하는 위치가 처음 방문한 곳이다.) 로봇의 이동 경로가 단순할 확률을 구하는 프로그램을 작성하시오. 예를 들어, EENE와 ENW는 단순하지만, ENWS와 WWWWSNE는 단순하지 않다. (E는 동, W는 서, N은 북, S는 남) 입력 첫째 줄에 N, 동쪽으로 이동할 확률, 서쪽으로 이동할 확률, 남쪽으로 이동할 확률, 북쪽으..

문제 링크 : https://www.acmicpc.net/problem/1365 문제 공화국에 있는 유스타운 시에서는 길을 사이에 두고 전봇대가 아래와 같이 두 줄로 늘어서 있다. 그리고 길 왼편과 길 오른편의 전봇대는 하나의 전선으로 연결되어 있다. 어떤 전봇대도 두 개 이상의 다른 전봇대와 연결되어 있지는 않다. 문제는 이 두 전봇대 사이에 있는 전깃줄이 매우 꼬여 있다는 점이다. 꼬여있는 전깃줄은 화재를 유발할 가능성이 있기 때문에 유스타운 시의 시장 임한수는 전격적으로 이 문제를 해결하기로 했다. 임한수는 꼬여 있는 전깃줄 중 몇 개를 적절히 잘라 내어 이 문제를 해결하기로 했다. 하지만 이미 설치해 놓은 전선이 아깝기 때문에 잘라내는 전선을 최소로 하여 꼬여 있는 전선이 하나도 없게 만들려고 한..