coding- w00se

React에서는 컴포넌트(component) 외부에서 상태(state)를 관리하기 위한 방법으로 useReducer가 제공됩니다. useState와 useReducer 모두 상태를 관리하기 위한 Hook으로 어느 것을 사용해도 문제가 없지만 프로젝트 규모가 큰 경우 useReducer를 사용하는 것이 편리할 거 같습니다😊 오늘은 typescript로 useReducer를 사용하는 예제를 정리했습니다. useReducer에 대한 자세한 설명은 아래 공식 문서에서 확인할 수 있습니다. https://reactjs.org/docs/hooks-reference.html#usereducer Hooks API Reference – React A JavaScript library for building user in..

https://www.acmicpc.net/problem/14891 14891번: 톱니바퀴 첫째 줄에 1번 톱니바퀴의 상태, 둘째 줄에 2번 톱니바퀴의 상태, 셋째 줄에 3번 톱니바퀴의 상태, 넷째 줄에 4번 톱니바퀴의 상태가 주어진다. 상태는 8개의 정수로 이루어져 있고, 12시방향부터 www.acmicpc.net 해당 문제는 구현 문제입니다. 문제의 목표는 k번 회전한 후 각 톱니바퀴의 12시 방향에 있는 극에 따라 점수를 계산하고 점수의 합을 구하는 것입니다. 톱니바퀴가 회전하는 경우는 두 가지로 나뉩니다. 1. 톱니바퀴를 직접 회전시킨다. - 각 회차마다 회전시키는 톱니바퀴가 여기에 해당됩니다. 2. 옆 톱니바퀴에 의해서 회전된다. - 인접한 톱니바퀴가 회전을 한다면 인접 부분의 극을 비교하여 회..

https://www.acmicpc.net/problem/2374 2374번: 같은 수로 만들기 n(1 ≤ n ≤ 1,000)개의 자연수 A[1], A[2], A[3], …, A[n]이 있다. 이 자연수에 Add(i)라는 연산을 하면, A[i]가 1만큼 증가한다. 이때, A[i]만 증가하는 것이 아니고, A[i]의 좌우로 인접한 같은 수의 그룹이 한 www.acmicpc.net 해당 문제는 그리디 알고리즘으로 해결하는 문제입니다. 문제에는 특별한 Add 연산이 소개되며, 이 문제의 목표는 주어진 모든 수를 같게 만들기 위한 최소한의 Add 연산 회수를 구하는 것입니다. Add(i) 연산은 i번째 수와 주변 같은 숫자를 가지는 그룹의 수들을 모두 1씩 증가시키는 연산입니다. Add 연산을 최소로 하여 모든..

React의 컴포넌트 안에 로컬 함수를 정의하면 컴포넌트가 다시 렌더링 될 때마다 함수가 새로 만들어진다. 더 자세히 말하면 함수가 새로운 메모리 주소에 다시 만들어 지는 것이다. useCallback을 사용하면 특정 조건을 만족할 때만 함수를 새로 만들 수 있다. useCallback 이란? React 공식 문서에 'useCallback은 dependencies(특정 조건)에 의해서만 바뀌는 memoized 된 콜백을 반환한다.' => 즉, dependencies가 바뀔 때만 함수가 새로 만들어진다. useCallback에 대한 더 자세한 설명은 아래의 공식 문서에서 확인 가능하다. https://reactjs.org/docs/hooks-reference.html#usecallback Hooks API..

렌더링을 최적화하기 위해서는 컴포넌트가 렌더링 되는 시점을 알아야 한다. 공식 문서에서 해당 내용을 찾아보고 싶었지만 아쉽게 찾지 못했고, 구글링을 통해 해답을 찾았다. React에서 컴포넌트가 리렌더링되는 시점은 크게 네 가지로 나뉜다. 1. 부모 컴포넌트가 리렌더링 될 때 2. props가 변할 때 3. state가 변할 때 4. forceUpdate가 호출될 때 위 네 가지 경우 중 1번은 불필요한 렌더링을 초래할 수 있다. 자세히 말하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 props에는 변화가 없는데, 부모 컴포넌트의 리렌더링으로 인해 자식 컴포넌트도 불필요하게 리렌더링 되는 경우다. 이런 경우를 방지하기 위한 방법으로는 자식 컴포넌트에 React.memo를 적용하는 것이다. React.m..

React Native에서 공식적으로 Animated api를 제공해줍니다. https://reactnative.dev/docs/0.63/animated 해당 기능은 1) 사용하기 쉽고 2) 공부할 자료가 많은 장점이 있습니다. 하지만 아래와 같은 단점이 존재합니다. 1) Reac Native에서 지원하고 있는 Animatd는 JS thread(Javascript Thread)에서 실행되며, 이는 JS thread가 바쁠 때 fps가 떨어지는 현상을 발생시킬 수 있다. 2) 위 현상을 해결하기 위해 useNativeDriver 옵션을 제공하지만 해당 옵셥을 적용할 수 있는 style 속성이 제한된다. - transform 또는 opacity style 속성에는 적용가능 하지만 layout 관련 속성(wi..

Typescript도 연습하고 React에도 적응하기 위해 기초부터 다시 연습하려 합니다. 연습은 벨로퍼트님의 '벨로퍼트와 함께하는 모던 리액트'로 진행했습니다. 해당 게시글은 React를 Typescript로 연습하면서 타입 선언, 기존 Javascript를 사용했을 때와 다른 점을 위주로 기록했습니다. React에 대한 개념과 자세한 설명은 아래 링크에서 확인 가능합니다😊 https://react.vlpt.us 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us Props의 각 속성에 타..

Typescript에서의 Function, Obejct, Interface를 정리해 보았습니다. Function Typescript에서는 매개 변수와 반환 값에 타입을 명시할 수 있습니다. 지정한 값과 다른 값이 전달 또는 반환되면 컴파일 에러를 발생시킵니다. function sum(a: number, b: number): number { return a+b; } const res: number = sum(100, 11); console.log(res); // 111 sum(100, "100"); // error Function 관련 유용한 기능으로는 선택 매개 변수가 있습니다. 매개 변수 이름 옆에 ?를 붙이면, 함수 사용 시 해당 매개 변수의 전달을 생략 가능합니다. function greet(nam..

Typescript는 정적 타입 언어로 변수의 타입이 컴파일할 때 결정됩니다. 따라서 타입 오류를 컴파일 타임에 확인할 수 있는 장점이 있습니다. 오늘은 Typescript에서 사용되는 타입에 대해 정리를 해보았습니다. 원시 타입 - string: 문자열 - number: 숫자 - boolean: 논리 * javascript에서는 int와 float에 대응되는 타입이 없으며, 모두 number을 사용한다고 합니다. const str1: string = "hello"; const num1: number = 123; const num2: number = 123.123; const bool1: boolean = true; console.log(str1); console.log(num1); console.log..

프로젝트를 시작하기 전 Typescript를 연습할 필요가 있어 Typescript를 실행할 수 있는 환경에 대해 알아보았습니다. 여러 방법이 존재하겠지만 간단히 연습할 수 있는 방법은 아래 두 가지가 있는 거 같습니다. 1. tsc로 Typescript 파일을 Javascript 파일로 컴파일한 후 실행시키기 https://code.visualstudio.com/docs/typescript/typescript-compiling TypeScript Compiling with Visual Studio Code Learn about TypeScript compiling with Visual Studio Code. code.visualstudio.com 설치 방법은 아래와 같습니다. npm install -D..