JW's dev blog

현재 진행중인 사이드 프로젝트에 리액트, 타입스크립트, 스토리북을 사용하고있다. 이 글에서는 타입스크립트로 스토리를 작성하는 방법을 정리하고자 한다. 만약 스토리에 대해 익숙하지 않다면 아래 두 글을 먼저 확인하자. [React & Storybook] 1 - 리액트에서 스토리북 사용하기 이 글에서는 스토리북과 스토리가 무엇인지 알아보고 리액트에서 스토리북(Storybook)을 시작하는 방법을 다뤄보자. 스토리북이란? 우선 스토리북은 무엇이고 왜 사용할까? 공식 문서에서 설명하 jwdevv.tistory.com [React & Storybook] 2 - 스토리 작성 방법 이전글에서 기존 리액트 프로젝트에 스토리북을 추가하는 방법을 알아보았다. [React & Storybook] 1 - 리액트에서 스토리북 ..

리액트 훅에는 useState, useEffect, useMemo 등이 있는데, 리액트에서는 이러한 기본 훅 이외에도 커스텀 훅을 만들 수 있다. 리액트 공식 문서에서는 커스텀 훅을 사용하면 컴포넌트 로직을 재사용 가능한 함수로 만들 수 있다고 소개하고 있다. 그렇다면 커스텀 훅은 언제 사용되고 어떤 예제가 있는지 알아보자. useFetch 출처 프론트엔드를 개발할 때 서버로부터 데이터를 받아와 화면에 뿌려주는 것은 누구나 해봤을 것이다. 이 때 가장 흔한 코드 패턴은 useState를 사용해 `data` state를 선언하고 useEffect를 사용해 컴포넌트가 처음 렌더링될 때 fetch를 사용해서 데이터를 받아오고 그 값을 `data` state에 업데이트하는 것이다. const App = () =..

useMemo와 useCallback 훅에 대해 알아보자. useMemo useMemo에서 memo는 memoization(메모이제이션)을 의미하고, 메모이제이션이란 값을 캐싱하여 같은 계산을 반복하지 않아도 되게 하는 기술을 말한다. useMemo는 memoized 값을 리턴하고, 보통 비싼 연산을 계산할 때 사용된다. 컴포넌트는 렌더링시 위에서부터 아래로 코드를 실행하는데, 이런 경우 내부에 비싼 연산이 하나만 있어도 전체 성능을 저해할 수 있기 때문이다. 예를 들어 computeExpensiveValue() 라는 함수가 있을 때 const value = computeExpensiveValue() 대신 const memoizedValue = useMemo(() => computeExpensiveVal..

useReducer는 state를 관리하는 또다른 훅이다. 하나의 state를 관리하는 useState와는 다르게 useReducer는 좀 더 복잡한 상태의 state를 관리할 수 있다. useReducer 사용법은 아래와 같다. const [state, dispatch] = useReducer(reducer, initialState); 공식 문서의 카운터 예시를 통해 더 자세히 알아보자. const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; case 'decrement': return {count: stat..

Context API Context는 state나 data에 접근하고자하는 컴포넌트를 Provider로 감싸 여러 컴포넌트가 데이터에 접근할 수 있도록 해준다. 이는 일반적으로 리액트에는 발생하는 Props drilling 문제를 해결해줄 수 있다. 예를 들어 아래와 같이 App - Header - UserInfo - Greeting 처럼 중첩되어있다고 가정하자. 우리는 단지 사용자에게 Hi, {user}! 라는 메세지를 Greeting 컴포넌트에서 표시하고 싶을 뿐이다. 따라서 Header, UserInfo에서는 user state가 필요없음에도 불구하고 중간 전달자로서 children인 Greeting 컴포넌트를 위해 props를 내려줘야하는 문제가 발생한다. import { useState } fr..

이전글에서 기존 리액트 프로젝트에 스토리북을 추가하는 방법을 알아보았다. [React & Storybook] 1 - 리액트에서 스토리북 사용하기 이 글에서는 스토리북과 스토리가 무엇인지 알아보고 리액트에서 스토리북(Storybook)을 시작하는 방법을 다뤄보자. 스토리북이란? 우선 스토리북은 무엇이고 왜 사용할까? 공식 문서에서 설명하 jwdevv.tistory.com 이 글에서는 스토리 작성 방법에 대해 더 자세히 알아보겠다. args 앞선 글에서 스토리는 args(argument)를 사용했을 때 Controls 패널에서 동적으로 값을 바꾸며 결과를 확인할 수 있다고 했다. 그렇다면 스토리의 args란 정확히 무엇일까? 스토리에서 args란 리액트의 props와 비슷한 의미라고 생각하면 된다. args..

Recursion과 Dynamic Programming에 대해 간략하게 정리하고 Leetcode 문제를 풀어보자. Recursive solution은 한 문제를 여러 서브 문제로 쪼개 결과를 합치는 방법이다. 이러한 Recursive solution에는 크게 세 가지의 접근 방식이 있다. 바로 Top-down approach, bottom-up approach, 그리고 half-and-half approach다. bottom-up 은 f(0) -> f(1) -> f(2)->...->f(n) 이런 식이고, 탑다운은 반대로 생각하면 된다. 하프앤하프의 대표적인 예로는 binary search와 merge sort가 있다. Recursion 우선 Recursion은 공간복잡도가 비효율적이다. 모든 Recurs..

과목을 수강할 때 선수과목을 먼저 수강하면서 차례대로 들어야하는 문제이다. 문제의 자세한 내용은 아래에서 확인할 수 있다. https://leetcode.com/problems/course-schedule-ii/ Course Schedule II - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제를 읽고 내가 생각한 것은 1. directed graph 라는것 2. bfs로 구현하면 되지 않을까였다. 그렇다면 가장 먼저 들을 과목이 root 노드가 되어야하는..

앞서 두 글에서 트리에 대해 알아보았다. [자료구조] 트리 (Tree) - 트리의 정의와 종류 (이진트리 등) 트리 (Tree)란? 트리는 노드로 구성된 자료구조이다. - 트리는 루트노드(root node)를 가진다. - 루트노드는 0개 이상의 자식노드(child nodes)를 가진다. - 각 자식노드 또한 0개 이상의 자식노드를 가진 jwdevv.tistory.com [자료구조] 트리 (Tree) - 이진 트리 순회 (Binary Tree Traversal) | 트라이 (Trie, Prefix Trees) 이전글 [자료구조] 트리 (Tree) - 트리의 정의와 종류 (이진트리 등) 트리 (Tree)란? 트리는 노드로 구성된 자료구조이다. - 트리는 루트노드(root node)를 가진다. - 루트노드는 ..

이 글에서는 스토리북과 스토리가 무엇인지 알아보고 리액트에서 스토리북(Storybook)을 시작하는 방법을 다뤄보자. 스토리북이란? 우선 스토리북은 무엇이고 왜 사용할까? 공식 문서에서 설명하는 스토리북이란 각각의 UI 컴포넌트와 페이지를 분리해서 빌드하는 프론트엔드 workshop이다. 쉽게 설명하자면 프론트엔트는 다수의 UI 컴포넌트로 구성되는데, 각각의 UI 컴포넌트를 따로 볼 수 있게 만들어서 개발 및 테스트를 더 쉽게 도와주는 것이라고 생각하면 된다. 스토리북은 React, Vue, Angular 등 UI 컴포넌트 기반의 프레임워크/라이브러리에서 사용할 수 있다. 스토리북에서 Story는 UI 컴포넌트의 렌더링된 상태를 캡쳐한다. 각 컴포넌트는 여러개의 스토리를 가질 수 있고 각 스토리는 컴포넌..