신비한 개발사전

조건부 렌더링v-if는 조건에 따라 컴포넌트를 렌더링하거나 안 보이게 하는 디렉티브다. Vue 튜토리얼의 샌드박스에서 써보니 v-if만 있어도 무방하지만 v-else는 반드시 v-if와 동반돼야 하고, 둘을 같이 쓸 땐 형제 컴포넌트로 가까이 둬야 한다. v-else-if 디렉티브도 있으며, 일반적인 if/else-if처럼 사용하면 된다. Vue is awesome! Oh no 😢 목록 렌더링리액트에서 array.map() 메소드로 컴포넌트를 렌더링할 때와 같은 디렉티브다. 리액트에서와 마찬가지로 배열을 렌더링할 땐 key prop을 추가해줘야 한다. {{ todo.text }}  computed() 상태Vue에서는 상태값의 변화에 맞춰 갱신되는 "파생된 상태값"을 생성하는 기능이 빌트인..

Vue는 선언적 렌더링(declarative rendering)에 중점을 두고 있는 프론트엔드 프레임워크다. Vue 앱을 굴러가게 만드는 기본적인 building block에 대해 알아보자. SFC 파일Vue는 리액트와는 전혀 다른 고유 문법을 사용한다. Vue 컴포넌트는 Single-File Component(SFC)라고 하는 하나의 단독적인 파일로 이루어진다. 확장자 .vue를 붙여 저장하는 SFC 파일에는 자바스크립트, HTML 태그, CSS 스타일이 다같이 들어가 아래와 같은 구조를 이룬다. {{ username }} 상태 저장Vue 컴포넌트의 상태는 reactive()나 ref()로 저장할 수 있다. reactive()는 객체만 저장할 수 있는 반면, ref()는 제한 없이 모든 데이터 타..

react-calendar 라이브러리를 사용해 달력 컴포넌트를 만들 때, locale을 한국으로 설정하면 아래 이미지와 같이 모든 날짜 뒤에 "일"이 기본값으로 붙은 다소 난잡한 UI가 탄생하게 된다.import Calendar from "react-calendar"; 다행히도 달력에서 문자열을 지우는 건 매우 간단했다. react-calendar에서 제공하는 Calendar 컴포넌트는 CSS 스타일링은 물론 달력에 보이는 모든 텍스트를 커스터마이징할 수 있게 해준다. 일, 월, 연도는 각각 formatDay, formatMonth, formatYear prop으로 타겟 날짜의 string 값을 리턴하도록 함수를 전달하면 된다.import Calendar from "react-calendar"; date..

json-server는 백엔드 API를 모킹하는 데에 가장 빠르고 편리한 툴이다. CLI 커맨드 하나면 내가 지정한 JSON 파일을 가지고 RESTful API 엔드포인트를 구축해준다. 이 과정에서 난 JSON 파일 하나만 준비하면 된다. json-server 자체적으로 다양한 키워드를 제공해서 데이터를 정렬하거나 필터링해서 받을 수 있는데, 결정적으로 내 json-server 경험은 _embed 키워드를 알기 전후로 나뉜다. _embed로 엔드포인트 합치기데이터를 저장할 땐 프로젝트와 관련된 모든 데이터를 다 하나의 데이터베이스에 담는 게 아니라 목적에 맞춰 나눠서 저장한다. 보통은 프로젝트가 몇가지 페이지로 구성되어 있을텐데, 한 페이지에서 필요한 데이터가 다른 페이지에서는 필요없을 수 있다. 그런 ..

Next.js 프로젝트에서는 다양한 방법으로 페이지의 route path와 쿼리 파라미터를 읽을 수 있는데, 그중 Pages Router에서 useRouter 훅 외적으로 쓸 수 있는 방법을 정리해봤다. useParams 훅으로 dynamic route값 읽기내 페이지가 dynamic route를 쓴다면 useParams() 훅으로 바로 그 값에 접근할 수 있다. useRouter() 훅의 라우터 객체를 통하지 않고 순수하게 query 객체만 읽을 수 있는 전용 훅이다.// src/pages/[hello]/index.tsximport { useParams } from "next/navigation";export default function Page() { const params = useParams(..

Next.js 13 이상부터 App Router를 사용하면서 내비게이션 동작 방식이 변경됐다. 이전 버전의 pages 디렉토리를 사용하던 Pages Router에서 app 디렉토리를 사용하는 App Router로 전환하려면 라우터 관련 코드를 수정해줘야 한다. useRouter 훅 사용App Router에서도 클라이언트 컴포넌트에 한해 useRouter 훅으로 router를 생성해 router.push() 메소드를 사용할 수 있다. 다만 기존 Pages Router의 "next/router"에서 import하던 라우터를 App Router에서 그대로 사용하게 되면 "NextRouter was not mounted." 오류가 발생한다. App Router 디렉토리에 생성된 컴포넌트의 경우 useRouter..

Next.js를 배우고 여러 자료를 읽으면서 종종 SSR이나 RSC 등의 단어를 접했었는데, 좀처럼 이해되지 않아서 개념을 정리해보기로 했다. Server-side rendering(SSR)서버사이드에서의 서버는 클라이언트 코드가 호스팅되는 서버를 말한다. 깃헙 pages에 내 웹앱을 호스팅한다면 깃헙이 서버인 것이고, Vercel 같은 서비스에 호스팅하면 Vercel의 서버를 쓰는 것이다. 서버사이드 렌더링은 클라이언트 코드가 호스팅된 서버에서 내 컴포넌트를 렌더링한다는 뜻이다. 지금까지는 React 컴포넌트를 생성할 때 컨텐츠가 없는 빈 HTML 문서를 먼저 다운로드 받고, HTML 문서 안에 있는 태그를 읽어 필요한 자바스크립트 파일을 추가로 다운로드해서 DOM 요소들을 자바스크립트를 통해 주입하..

Material UI(MUI)는 구글의 디자인 프레임워크(Material Design)를 기준으로 하는 리액트 전용 UI 라이브러리다. 디자인 프레임워크는 간단히 말해서 하나의 표준으로 삼는 UI 스타일이라고 보면 된다.MUI는 Material Design을 따라 input, button, select처럼 웹에 흔히 쓰이는 구성 요소들을 컴포넌트화했기 때문에, 커스터마이징에만 익숙해지면 빠르고 간편하게 어디에서나 통용되는 UI 컴포넌트를 활용할 수 있다. MUI 컴포넌트를 내 사이트에 맞게 커스터마이징하는 방법은 다양한데, 그 중 커스텀 스타일을 개별적으로 적용하는 방법과 일괄로 적용하는 방법이 가장 보편적인 것으로 보인다. sx prop 사용 (개별 적용)각 MUI 컴포넌트에는 리액트 컴포넌트의 sty..