![]()
먼저 폰트를 적용한 프로젝트의 기술 버전은 다음과 같습니다.Next.js 15 (Page Router)Tailwind v4Typescript 5 💬 폰트 파일 다운로드하기제가 사용할 폰트는 'Pretendard'와 '이롭게 바탕체'였습니다.공식 사이트에서 웹 폰트를 다운로드하고, 'woff' 파일을 프로젝트에 추가합니다.저는 다음과 같은 폴더 구조로 폰트 파일을 저장했습니다. (./src/assets/fonts) 💬 localFont 불러오기프로젝트의 뼈대가 되는 '_app.tsx' 파일에 Next.js의 'next/font' 모듈을 임포트 하고 폰트를 로드합니다.import localFont from 'next/font/local';// 프리텐다드 폰트const pretendard = localFo..
![]()
티스토리에 글을 올리면 깃허브에도 잔디가 심어지도록 RSS와 Github Actions를 사용해 연동해보도록 하겠습니다. 🖇️ 준비하기1) 티스토리 RSS 설정'블로그 관리 페이지 - 관리 탭 - 블로그 항목'에서 기타 설정을 사진과 같이 변경해줍니다.잘 설정되었다면 '자신의_블로그_주소/rss'로 접속 시 다음과 같은 화면이 보입니다.ex) https://dev-district.tistory.com/rss 2) 깃허브 레포지토리 클론하기깃허브에서 README.md 파일이 있는 폴더를 클론해옵니다.선호하는 방법으로 클론해 오면 되며, 개인적으로 SSH 방식을 추천합니다. (참고 링크)VSCode에서 클론해 온 폴더를 열어 연동할 준비를 마칩니다. 🖇️ Github Action 파일 작성하기(로컬에서..
![]()
🌳 훅(Hook)이란함수형 컴포넌트에서 리액트의 상태(state)와 생명주기 기능을 연동해주는 함수입니다.리액트 버전 16.8부터 새롭게 추가된 기능으로, 리액트의 클래스형 컴포넌트에서만 이용할 수 있던 기능을 함수형 컴포넌트에서도 사용할 있게 해줍니다.따라서 훅을 사용하면 기존의 클래스(class)를 작성하지 않고도 상태와 리액트의 다른 여러 기능들을 이용할 수 있습니다.훅은 함수형 컴포넌트에 맞게 만들어진 것이므로 함수형 컴포넌트에서만 사용이 가능하며, 'use'라는 키워드로 시작하는 특징을 가지고 있습니다. 리액트에는 여러 가지 훅들이 존재합니다. 이번 글에서는 대표적인 5가지 훅을 정리해보겠습니다.useStateuseEffectuseRefuseMemouseCallback 🌳 대표적인 훅 5가지..
![]()
쿠키, 그리고 웹 스토리지에 해당하는 로컬 스토리지와 세션 스토리지는 모두 브라우저에 데이터를 저장하는 방식인 클라이언트 기반 저장소입니다.그러나 데이터의 저장 위치, 수명, 관리 주체, 저장 목적 등에 차이가 존재합니다. 아래에서 쿠키, 로컬 스토리지, 세션 스토리지의 순서로 자세히 살펴보겠습니다. 🗂️ 쿠키쿠키(cookie)란 웹 사이트에 접속할 때 서버에 의해 사용자의 컴퓨터에 저장되는 작은 데이터 조각을 의미합니다.- TCP school웹 사이트에 접속하면 종종 쿠키의 사용 여부를 물어보는 아래와 같은 팝업을 볼 수 있습니다. 쿠키의 특징은 다음과 같습니다.키-값 형태의 데이터로 저장됩니다.문자열 형식만 저장할 수 있습니다.하나의 키에 최대 4KB 크기의 값(작은 데이터 조각)까지만 저장할 수 ..
