개발여행

Clerk 서비스를 사용하면 간편하게 인증 플로우를 구현할 수 있는 것은 물론, Clerk가 관리해주는 유저 계정에 metadata를 추가해 일반 유저와 어드민 유저를 분리할 수도 있다. 관리자페이지를 작업하면서 이것저것 알아본 김에 Clerk 미들웨어를 통해 유저의 metadata를 확인하고, 어드민 유저만 특정 페이지에 접근할 수 있도록 구현하는 방법을 정리해봤다. 유저 계정에 metadata 추가Metadata는 API를 사용하거나 대시보드에 접속해서 수동으로 설정할 수 있다. 이번에는 관리자사이트의 특성상 사용자 계정과 관련된 불필요한 사고를 방지하고자 수동으로 metadata를 추가하는 방법을 선택했다. Public과 unsafe metadata는 클라이언트에서 접근할 수 있는 방면 privat..

최근 간편한 authentication 솔루션으로 Clerk가 많이 보이고 있어서 한번 활용해 보기로 했다. 대부분의 메이져 프레임워크를 지원하고, 공식 문서도 잘 정리돼있어서 빠르게 시작할 수 있다. 마침 사용자 로그인 기능이 필요한 Next.js 프로젝트가 있어서 바로 @clerk/nextjs 패키지를 설치해 사용해봤다. Clerk 서비스 사용에 필요한 퍼블릭과 시크릿 키는 .env.local 파일에 추가하면 된다고 한다. Clerk에서 제공하는 API를 사용하려면 우선 를 wrap 시켜준다. 앱 최상위에 provider를 적용해 두면 모든 페이지에서 Clerk의 인증 관련 훅을 사용할 수 있게 된다.import { ClerkProvider } from "@clerk/nextjs";export def..

조건부 렌더링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()는 제한 없이 모든 데이터 타..

리액트를 배우기 시작하면서 만든 내 생애 첫 리액트 프로젝트는 뽀모도로(Pomodoro) 앱이었다. 나도 많은 초보자와 마찬가지로 to-do 리스트 튜토리얼로 리액트를 처음 접했는데, to-do 리스트 구현이 간단하다고 느껴져서 추가적으로 기능을 더해서 실용적인 웹앱을 만들어보고 싶었다. 마침 생산성 앱 중에서는 to-do 리스트와 뽀모도로용 타이머를 결합한 앱이 많았어서 뽀모도로 앱을 리액트로 구현해보기로 했다. 타이머를 구현하기 위해 setInterval 함수를 사용했는데, 리액트의 리렌더링으로 인해 setInterval 함수가 중복적으로 호출되는 등의 로직오류로 많이 헤맸던 기억이 있다. 그래도 꾸준히 작업해서 제대로 동작하는 타이머를 만들긴 했는데, 정작 더 중요한 문제는 따로 있었다.  데스크톱..

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로 엔드포인트 합치기데이터를 저장할 땐 프로젝트와 관련된 모든 데이터를 다 하나의 데이터베이스에 담는 게 아니라 목적에 맞춰 나눠서 저장한다. 보통은 프로젝트가 몇가지 페이지로 구성되어 있을텐데, 한 페이지에서 필요한 데이터가 다른 페이지에서는 필요없을 수 있다. 그런 ..

클린코딩 철학을 따라 코드를 모듈화하고 기능대로 분리해서 사용하다 보니 import할 컴포넌트나 메소드들이 점점 늘어가는 것을 문득 체감했다. 파일 최상단에 import 줄이 길어지면 export ... from을 써서 코드를 정리하는 것을 고려해보자.import한 즉시 exportexport ... from은 다른 파일에서 코드를 import함과 동시에 해당 파일에서 다시 export하는 문법이다. export ... from을 사용하면 여러 모듈에서 import해온 함수, 상수, 컴포넌트 등을 한 곳에서 한꺼번에 export할 수 있다.// aggregator.js// 여러 파일에서 import해온 것을 export...from을 써서 한 파일에서 export하도록 함export { 유틸함수1 } f..