🌿 ThemeProvider란?styled-components에서 제공하는 기능으로, 전역적으로 테마를 관리하고 적용할 수 있게 해주는 컴포넌트React의 Context API를 기반으로 만들어져 있어, 하위 컴포넌트들에게 테마 정보를 props 형태로 전달테마 객체 정의src/types/themes.ts 파일 생성export const lightTheme: Theme = { colors: { background: "#ffffff", text: "#000000", primary: "#0070f3", }, fontSize: { small: "12px", medium: "16px", large: "20px", },};ThemeProvider로 래핑테마를 적용할 컴포넌..

지난주에 포트폴리오 작업하던 게 모두 끝났다. 그래서 기존에 하던 사이드프로젝트를 진행하려고 하니 tailwind css부터 적용해야 할 것이 너무 많아서 다시 할까 조금 고민 중인데..일단 할 수 있는 만큼 고쳐서 진행해 보는 것으로.. :)🌿 Eslint 설정설치하기npm i --save-dev eslint eslint-config-next @typescript-eslint/eslint-plugin @typescript-eslint/parser초기화 및 설정 파일 생성(.eslintrc.json)npx eslint --init패키지 설치하기npm i --save-dev eslint eslint-config-next @typescript-eslint/parser @typescript-eslint/e..

🌿 메인 화면특별한 기능은 없지만 생각보다 시간을 많이 소요했던 메인 화면입니다.우선 사이트의 테마 컬러를 확정하는데 많은 시행착오가 있었고 좋아하는 파란색을 포기할 수 없어 포인트 색상으로 결정했습니다. 메뉴는 이력서에 있는 항목을 참고하여 확정하게 되었습니다.첫 진입 시에 보이는 화면이라 효과를 주고 싶었는데 타이핑 효과와 스크롤 유도 정도가 적당해 보여서 적용했습니다. 🌿 It's ME아직 프로필 이미지는 추가하지 않았지만, 원형에 마우스 호버 시 저에 대한 간단한 정보를 보이게 했습니다.그리고 우측에는 GitHub, 블로그, 링크드인을 연결하여 클릭 시 이동되도록 처리했습니다.프로필 하단에는 이력서 PDF를 다운로드할 수 있는 버튼을 추가했습니다. 🌿 Skills다양한 프로젝트들을 진행하며 ..

이전에 Git 블로그를 Netlify로 배포한 경험이 있다. Netlify는 Git 계정과 레포지토리를 간단하게 연결하면 자동으로 배포가 진행되는 방식이어서 매우 쉽게 설정할 수 있었다. 이번에는 Next.js 프로젝트를 진행하니 Vercel을 사용해 배포해 보고자 한다.Vercel은 Next.js의 공식 호스팅 플랫폼으로, Next.js 배포에 최적화된 성능을 제공한다. 또한 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 원활하게 지원한다. Vercel 배포 순서🌿 Import Git Repository회원가입 및 로그인 후 GitHub 계정과 연동하면 배포할 레파지토리를 선택할 수 있다.🌿 Confiture ProjectBuild Command를 설정할 수 있는데 기본값으로 그대로 사..

지금까지 리액트 프로젝트는 2번 정도 진행 했었는데 상태 관리 라이브러리를 적용해 본 경험이 없어서이번 프로젝트에서는 zustand를 활용하여 상태관리를 해보고자 한다. Zustand란?React 상태 관리 라이브러리hook를 기반으로 한 간결하고 직관적인 API를 제공하며, 전역 상태 관리를 간단하게 구현할 수 있게 해준다.Persist와 같이 사용하기Zustand의 미들웨어 중 하나로, 상태를 브라우저의 저장소에 저장할 수 있게 해준다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫고 다시 열어도 상태가 유지되도록 할 수 있다. Zustand 설치npm install zustand src/store/authStore.ts 파일 생성zustand import인터페이스 정의 : 스토어의 상태와 액션 타..

사이드 프로젝트를 시작해 보려고 우선 Git에 레포지토리 및 프로젝트를 생성했습니다.이 프로젝트의 목적은 Next.js와 TypeScript를 공부하는 것입니다. React도 아직 기초에 불과하지만, 개발을 하면서 하나씩 알아가려 합니다.사이드 프로젝트 GitNext.js 프로젝트 생성npx create-next-app@latest [프로젝트명]cd [프로젝트명]npm run dev 우선 프로젝트가 실행되는 것을 확인했습니다.Next.js의 특징서버 사이드 렌더링(SSR) : 페이지 요청 시 서버에서 렌더링하여 사용자에게HTML 전달. SEO에 유리하고, 초기 로딩 속도가 빨라진다는 장점이 있다.파일 기반 라우팅 : pages 디렉토리 안에 파일을 생성함으로써 자동으로 라우팅을 설정할 수 있다. 각 파일..