free islet

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 다크 모드 (with Tailwind) next-themes 패키지를 설치하여 비교적 손쉽게 다크 모드를 추가할 수 있다. Tailwind config 수정 tailwind는 OS 설정에 따라 다크 모드를 지원한다. 다크 모드를 직접 설정하려면, 아래와 같이 tailwind.config.ts 파일에서 darkMode 값을 "class"로 설정해야 한다. /** @type {import('tailwindc..

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 한글 폰트 적용 (google font) Next.js 보일러플레이트의 Inter 폰트 대신 한글 폰트를 기본으로 사용하도록 수정했다. 구글 폰트 브라우저에 나오는 한글 폰트 중 Noto Sans Korean을 선택했다. 다음과 같이 layout.tsx에서 Inter를 Noto_Sans_KR로 바꿔주면 간단하게 기본 폰트가 변경된다. import { Noto_Sans_KR } from 'next/font..

Next.js 프로젝트를 GitHub pages에 배포하려면 다음 과정을 거치면 된다. static site 빌드 GitHub에 올리기(push) GitHub pages 노출 설정 Next.js GitHub pages 배포 샘플 프로젝트를 참고하여 그 과정을 정리하면 다음과 같다. 프로젝트 GitHub 등록 우선 새 repository를 만들어서 Next.js 프로젝트를 올린다. next.config.js 수정 next.config.js 파일을 다음과 같이 수정한다. const nextConfig = { output: 'export', basePath: '/(repository 이름)', } static site 생성을 위해 output: 'export' 설정을 추가한다. 이렇게 지정하면 next bui..

Next.js 개발을 위해 프로젝트를 생성했다. 참고로 노드 18.17 버전 이상이 설치되어 있어야 한다. (설치 방법: 2023.12.14 - [웹 개발] - 노드, NPM 최신버전 업데이트) 프로젝트 생성 적절한 폴더에서 터미널을 열어 다음 명령으로 간단하게 프로젝트를 생성한다. Next.js 프레임워크도 물론 포함된다. npx create-next-app@latest 원하는 프로젝트 이름을 입력하고 나머지는 엔터키로 넘어가면, 다음과 같이 프로젝트 생성 완료 메시지가 뜬다. 샘플 코드 생성된 프로젝트 폴더를 살펴 보면, app 폴더 안에 layout.tsx와 page.tsx가 만들어진 것을 볼 수 있다. (App Router 기준) layout.tsx import type { Metadata } f..

오랜만에 프론트엔드 개발을 하게 되어 노드와 NPM 업그레이드를 했다. Node Version Manager(NVM)를 사용했다. NVM 설치 터미널을 열어서 다음 명령으로 NVM을 설치한다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash 노드 최신버전 설치 NVM 설치 후 터미널을 닫았다가 다시 연 후에, 다음 명령으로 최신버전의 노드를 설치한다. node v21.4.0, npm v10.2.4 버전이 설치되었다. nvm install node nvm use node NPM 최신버전 업데이트 NPM을 최신버전으로 업데이트하기 위해 다음 명령을 실행한다. npm install -g npm@latest npm -..

프론트엔드에서 백엔드로부터 받은 request 결과를 캐싱함으로써 앱 성능을 높일 수 있다. 예를 들어, 이미 조회했던 상품 데이터를 다시 조회할 때, 매번 백엔드에 요청하지 않고 기존에 받은 내용을 보여줌으로써 불필요한 통신을 줄일 수 있다. 이미 웹브라우저 상에서 HTTP 캐싱이 이루어지고 있지만, 원하는 대로 캐쉬 사용이 불가한 등의 이유로 프론트엔드 상에서 (service worker 등을 사용하지 않고) 간단하게 직접 캐쉬 시스템을 구현할 때가 있다. 이러한 캐쉬 시스템은 데이터 종류마다 개별적으로, 즉, 상품 데이터 캐쉬, 사용자 데이터 캐쉬를 따로따로 만드는 것이 보통이다. 하지만, HTTP Request 처리단에 캐쉬 시스템을 구현하게 되면, 모든 요청들에 대해 자동으로 캐쉬를 적용하는 것..

쿼리 성능을 높이려면 데이터 스캔 범위가 작아야 하고, 그러려면 최우선적으로 쿼리가 인덱스를 효율적으로 사용해야 한다. 인덱스를 잘 사용하면 스캔 범위를 줄이는 것은 물론, 심지어 인덱스만으로 데이터를 조회할 수도 있다. 따라서, 쿼리 최적화를 위해서는 항상 explain 문으로 쿼리 실행 계획(query execution plan)을 확인하는 것이 좋다. 쿼리 실행 계획을 참고하여 쿼리를 최적화하는 팁 몇 가지를 정리해보았다. 아래 예제들에서는 2023.12.09 - [DB] - MySQL 샘플 DB 적재의 employees 데이터를 사용함 Visual Explain (MySQLWorkbench) explain 문으로 쿼리 실행 계획을 확인하면, 어떤 인덱스를 사용하고 어느 정도의 스캔이 발생하는지, ..

테스트를 위해 Employees 샘플 DB를 적재해보았다. MySQL :: Employees Sample Database Employees Sample Database For legal information, see the Legal Notices. For help with using MySQL, please visit the MySQL Forums, where you can discuss your issues with other MySQL users. Document generated on: 2023-11-15 (revision: 77255) dev.mysql.com DB 다운로드 샘플 DB github 페이지에서 Code 버튼 > Download ZIP을 클릭하여 test_db-master.zip 파..

이미 맥에 MySQL 5.7이 설치된 상황에서 MySQL 8.0을 추가로 설치하게 되어 그 과정을 정리함 참고: https://dev.mysql.com/doc/refman/8.0/en/macos-installation-pkg.html MySQL :: MySQL 8.0 Reference Manual :: 2.4.2 Installing MySQL on macOS Using Native Packages 2.4.2 Installing MySQL on macOS Using Native Packages The package is located inside a disk image (.dmg) file that you first need to mount by double-clicking its icon in the F..

firebase 콘솔에서 DAU를 확인할 수 있지만 최근 통계만 볼 수 있고, 특정 그룹의 DAU를 확인하는 등의 세부 데이터 집계에는 어려움이 있다. firebase 로그를 빅쿼리와 연동하면, 오래 된 DAU/MAU 집계 raw 데이터로부터 원하는 통계 데이터를 자유롭게 집계 할 수 있는 이점이 있다. 반면, 단순 로그 데이터를 지지고 볶는 수고가 들고, 유지보수하기 귀찮은 방식이라는 단점이 있다. 장기적인 관점에서는 Google Analytics 같은 툴을 활용해서 원하는 데이터를 얻을 수 있는지 먼저 찾아보거나, braze, mixpanel 같은 솔루션 연동을 검토하는게 좋다. 하지만, 쿼리만으로 빠르게 DAU와 같은 통계 데이터를 얻고 싶을 때, (세션 로그를 쉽게 쌓을 수 있다면) 빅쿼리를 사용..