전체 글
이벤트 처리하기
https://ko.reactjs.org/docs/handling-events.html를 읽고 정리한 글입니다. React의 이벤트는 camelCase 사용 preventDefault를 사용해서 기본 동작을 방지 e는 합성 이벤트이며, React는 W3C 명세에 따라 합성 이벤트를 정의하므로 브라우저 호환성에 대해 걱정할 필요 없다 JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않다 방법 3의 문제점은 LoggingButton이 렌더링될 때마다 다른 콜백이 생성된다는 것 콜백이 하위 컴포넌트에 props로 전달된다면 그 컴포넌트들이 추가로 다시 렌더링 수행 가능 // 방법 1 class Toggle extends React.Component { constructor(props) { ..
State and Lifecycle
https://ko.reactjs.org/docs/state-and-lifecycle.html을 읽고 정리한 글입니다. State : props와 유사하지만, 비공개이며 컴포넌트에 의해 제어된다 componentDidMount() : 컴포넌트 출력물이 DOM에 렌더링된 후 실행 componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출 다시 렌더링되지 않으므로 이 안에서 setState() 호출 불가능 State setState()를 이용해 state 값 수정하기 업데이트는 비동기적 여러 개의 변수를 독립적으로 업데이트 // Correct 1 this.setState((state, props) => ({ counter: state.counter + props.increm..
Components와 Props
https://ko.reactjs.org/docs/components-and-props.html를 읽고 정리한 글입니다. Component JavaScript 함수와 요사 props(임의의 입력)을 받고, React Element(화면에 어떻게 표시되는지 기술) 반환 함수형 컴포넌트, 클래스형 컴포넌트(함수형 컴포넌트보다 몇 가지 추가 기능 존재) 사용자 정의 컴포넌트는 대문자로 시작 다른 컴포넌트 참조 가능 ⇒ 버튼, 폼, 다이얼로그 등이 모두 컴포넌트 Button, Panel 등 여러 번 사용될 때는 재사용 가능한 컴포넌트를 만들고 App, Comment처럼 복잡한 경우도 컴포넌트 추출하기 컴포넌트 랜더링 function Welcome(props) { return Hello, {props.name};..
Rendering Elements (엘리먼트 렌더링)
https://ko.reactjs.org/docs/rendering-elements.html 를 읽고 정리한 글입니다. Element(엘리먼트) : React 앱의 가장 작은 단위 화면에 표시할 내용 기술 컴포넌트의 구성 요소 / React 애플리캐이션을 구성하는 블록 일반 객체(plain object)이며 쉽게 생성 가능 (브라우저 DOM 엘리먼트와는 다름) 엘리먼트는 특정 시점의 UI를 보여준다 일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다 React DOM : React 엘리먼트와 일치하도록 DOM을 업데이트 리액트로 구성된 애플리케이션은 일반적으로 하나의 root DOM node가 있다 React Element를 root DOM node에 렌더링하기 위해서는 ReactDOM.re..
JSX 소개
https://ko.reactjs.org/docs/introducing-jsx.html 를 읽고 정리한 글입니다. JSX : JavaScript를 확장한 문법 HTML보다 JavaScript에 가깝기 때문에 camelCase 표기법 사용 JavaScript 코드 안에서 UI 관련 작업 시 시각적으로 도움이 되며, 에러 및 경고 메시지에 효율적 JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식 포함 가능 컴파일이 끝나면, JSX 표현식은 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다 JSX 태그는 자식 포함 가능 JSX에 사용자 입력을 삽입하는 것은 안전 React DOM은 JSX에 삽입된 모든 값을 랜더링하기 전에 이스케이프하므로 애플리케이션에서 명시적으로 작..
Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.
Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. 위의 에러가 여러 상황에서 발생했다. 1. 아래처럼 string 타입이 분명 들어오게 해놨는데 데이터를 이용하려 할 때 위의 에러가 발생하는 경우가 있다. interface StoreDataType { place_id: string; } 이 때는 아래처럼 !를 끝에 붙여서 해결했다. place_id: results[i].place_id!, 2. Next.js를 이용해서 구현하는 과정에서 .env 안 process.env.NEXT_PUBLIC_GOOGLE_KEY를 사용하려는데 에러가 발생한 경우였다. 값..
백준저지 2589번 보물섬 (Java)
출처: https://www.acmicpc.net/problem/2589 2589번: 보물섬 보물섬 지도를 발견한 후크 선장은 보물을 찾아나섰다. 보물섬 지도는 아래 그림과 같이 직사각형 모양이며 여러 칸으로 나뉘어져 있다. 각 칸은 육지(L)나 바다(W)로 표시되어 있다. 이 지도에서 www.acmicpc.net 접근 방법 변수 max : 답이 될 최댓값 cntL : 입력받을 때 센 L의 개수. L이 1이라면 답은 무조건 1이다. 메서드 int getCount(int x, int y, char[][] map) : 현재 위치 x,y와 입력 받은 map[][]으로 BFS를 수행하여 답이 될 이동횟수를 리턴시킨다. 코드 0. 입력을 받는다. 입력 받을 때 L 개수를 세서 cntL에 저장한다. 1. 지도 위 ..
백준저지 4179번 불!
출처: https://www.acmicpc.net/problem/4179 4179번: 불! 입력의 첫째 줄에는 공백으로 구분된 두 정수 R과 C가 주어진다. 단, 1 ≤ R, C ≤ 1000 이다. R은 미로 행의 개수, C는 열의 개수이다. 다음 입력으로 R줄동안 각각의 미로 행이 주어진다. 각각의 문 www.acmicpc.net 접근 방법 1. 지훈의 위치를 저장할 큐, 불의 위치를 저장할 큐, 지훈과 불의 이동을 동시에 저장할 2차원 boolean 배열을 준비한다. 입력 받을 때, 지훈과 불의 위치를 각각 큐에 넣으면서 방문했다고 표시한다. 지훈의 위치는 '.'으로 바꾼다. 2. 입력받을 때부터 지훈이 벽에 붙어있다면 1을 출력하고 끝낸다. 3. 그 외의 경우, 지훈의 큐가 빌 때까지 또는 지훈이 ..
깃허브 프로필 꾸미기
GitHub Stats Card & Top Languages Card https://github.com/anuraghazra/github-readme-stats GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes :zap: Dynamically generated stats for your github readmes - GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes github.com 한국어 버전: https://github.com/anuraghazra/github-rea..
백준저지 17142번 연구소 3 (Java)
출처: https://www.acmicpc.net/problem/17142 17142번: 연구소 3 인체에 치명적인 바이러스를 연구하던 연구소에 승원이가 침입했고, 바이러스를 유출하려고 한다. 바이러스는 활성 상태와 비활성 상태가 있다. 가장 처음에 모든 바이러스는 비활성 상태이고 www.acmicpc.net 접근 방법 1. 연구소의 상태를 입력받으면서 바이러스의 위치를 리스트에 담는다. 2. 바이러스의 리스트 크기와 주어진 M을 통해 조합으로 M개의 바이러스를 구한다. 이때, 브루트포스 알고리즘으로 모든 경우를 생각한다. 3. BFS로 선택된 바이러스를 큐에 모두 담고 퍼뜨리기를 시작한다. 3-1. 매번 큐의 사이즈를 구해 사이즈만큼 for문을 반복한다. 그 안에서 4방 탐색을 진행한다. 3-2-1. ..