React 18 버전이 정식 릴리스가 되면서 추가된 Suspense에 대해서 알아보자 Suspense? Suspense는 React에서 컴포넌트의 렌더링을 특정 작업이 끝날 때까지 중단시키고 다른 컴포넌트를 먼저 렌더링 하는 기능이다. 일반적으로 REST API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 경우에 사용하면 유용할 것 같다. 유저의 리스트를 출력하는 UserList 컴포넌트가 있다고 생각해보자. 당연히 컴포넌트를 호출하면 화면에 UserList 컴포넌트가 나타날 것이다. 하지만 아직 비동기 데이터인 유저 정보를 가지고 오지 않았다면 로딩 화면이 출력돼야 할 것이다. import { useState, useEffect } from "react"; function Us..

자바스크립트로 개발을 하다보면 Promise 함수, 비동기 작업을 해야하는 경우가 많다. 이때 습관적으로 Async/Await을 많이 사용한다. 하지만 비동기 작업을 하기 위해서는 then이라는 친구도 있고 이 둘의 차이를 머리로는 알고 있지만 따로 정리해본 적은 없어서 이번에 정리해보려고 한다. then console.log("1"); const promise = new Promise(function (resolve, reject) { setTimeout(() => { resolve("success"); }, 1000); }); console.log("2"); promise.then(function (value) { console.log(value); }); console.log("3"); then을 ..

개발을 하다보면 많은 상황이 발생한다. 이때 품질 높은 코드를 작성하기 위한 원칙들이 있는데, 대표적으로 KISS, YAGNI, DRY가 있다. KISS Keep It Simple Stupid 의 첫 글자를 따서 만든 약어이다. 소프트웨어를 설계하는 작업이나 코딩을 할때 되도록이면 간단하고 단순하게 만드는 것이 좋다는 원칙이다. 코드나 설계 내용이 불필요하게 장황하거나 복잡해지는 것을 주의하라는 원칙이다. 당연하게 이들은 단순할수록 이해하기 쉽고, 이해하기 쉬우면 유지보수 등이 쉬워진다. 즉, 생산성 향상으로 연결된다. YAGNI You Ain't Gonna Need It 의 첫 글자를 따서 만든 약어이다. 개발하다보면 당장 필요하지는 않지만 확장성을 위해서 미리 작업하는 경우가 있다. 이런 작업을 하지..

웹 애플리케이션을 만들 때 어려운 것 중 하나가 상태관리이다. 이번에 Derived State ( 파생 상태 )라고 불리는 것에 대해서 공부할 계획이다. Derived State ? 파생 상태라는 것은 최소한의 데이터를 저장하게 끔 상태를 관리하는 방식이다. 즉, 상태를 최소화 한다는 것이다. 계산할 수 있는 상태에 대해서는 저장하지 않고 계산을 통해 변경 사항이 발생하면 동기화 하는 방식으로 관리한다. 실제 예 각 노래에 대해서 체크박스로 구성된 노래 선택기가 있다고 생각해보자. 이러한 노래는 장르별로 그룹화가 되어있다. 그 이유는 개별 노래를 선택할 수 있고 장르를 선택하면 모든 노래가 선택되길 희망한다. 이런 형식의 페이지를 우리가 개발하다보면 쉽게 접할 수 있다. 이것을 만들기 위해서 가장 첫번째..

문제 설명 철수는 롤케이크를 두 조각으로 잘라서 동생과 한 조각씩 나눠 먹으려고 합니다. 이 롤케이크에는 여러가지 토핑들이 일렬로 올려져 있습니다. 철수와 동생은 롤케이크를 공평하게 나눠먹으려 하는데, 그들은 롤케이크의 크기보다 롤케이크 위에 올려진 토핑들의 종류에 더 관심이 많습니다. 그래서 잘린 조각들의 크기와 올려진 토핑의 개수에 상관없이 각 조각에 동일한 가짓수의 토핑이 올라가면 공평하게 롤케이크가 나누어진 것으로 생각합니다. 예를 들어, 롤케이크에 4가지 종류의 토핑이 올려져 있다고 합시다. 토핑들을 1, 2, 3, 4와 같이 번호로 표시했을 때, 케이크 위에 토핑들이 [1, 2, 1, 3, 1, 4, 1, 2] 순서로 올려져 있습니다. 만약 세 번째 토핑(1)과 네 번째 토핑(3) 사이를 자르..

문제 설명 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 A가 올바른 괄호 문자열이라면, (A), [A], {A} 도 올바른 괄호 문자열입니다. 예를 들어, [] 가 올바른 괄호 문자열이므로, ([]) 도 올바른 괄호 문자열입니다. 만약 A, B가 올바른 괄호 문자열이라면, AB 도 올바른 괄호 문자열입니다. 예를 들어, {} 와 ([]) 가 올바른 괄호 문자열이므로, {}([]) 도 올바른 괄호 문자열입니다. 대괄호, 중괄호, 그리고 소괄호로 이루어진 문자열 s가 매개변수로 주어집니다. 이 s를 왼쪽으로 x (0 ≤ x < (s의 길이)) 칸만큼 회전시켰을 때 s가 올바른 괄호 문자열이 되게 하는 x의 개수를 return ..

우리는 많은 유형을 홈페이지 헤더를 만듭니다. const Header = () => { return ( ) } 헤더에는 Logo, MenuItem, UserProfile 등 요소를 포함해서 개발합니다. 이때, 헤더에서 로그인 기능을 제공한다고 생각해보면 UserProfile 부분은 SignIn과 UserProfile로 나뉘어서 제공됩니다. const Header = (props: { showSignup: boolean }) => { return ( {!props.showSignup && } {!props.showSignup && } {props.showSignup && } ) } 다음과 같이 보여집니다. 아직까진 훌륭한 헤더이다. 필터링된 헤더 현재 헤더에서 보여주고 있는 기능이 너무 많아서 특정 화면에..

블로그를 하다보면 웹 마스터 도구 등에 RSS 를 추가해주게 된다. 그런데 이 RSS가 뭐길래 우리는 사이트맵과 함께 RSS 주소를 등록해야 할까? RSS Really Simple Syndication 의 약자가 RSS이다. ( 또는, Rich Site Summary ) RSS 리더 사이트 등으로 만든 RSS 주소를 들어가보면 최근에 등록한 게시글이 나올 것이다. 즉, 글이 올라올 때마다 RSS 주소에는 최신 게시글이 등록된다. 이러한 RSS 주소는 사람을 위해서 있는 것이 아니며, RSS 리더 프로그램 또는 사이트에서 RSS 피드 주소를 등록한다면 새로운 글이 올라올 때마다 알려준다. RSS 버튼을 통해서 사용자가 RSS 피드를 구독할 수 있긴 하다. 하지만 실제로 RSS 구독 을 위한 버튼을 활성화시..