지난주에 포트폴리오 작업하던 게 모두 끝났다. 그래서 기존에 하던 사이드프로젝트를 진행하려고 하니 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다양한 프로젝트들을 진행하며 ..

언제나 시작은 갑작스럽게..문득, 당장 누군가에게 보여줄 만한 프로젝트가 없다는 생각이 들어 포트폴리오 사이트 개발을 시작하게 되었습니다. 어떤 내용을 담을까?우선 포트폴리오에 어떤 내용을 담아야 할지를 고민하며 구글링을 통해 몇 개의 포트폴리오 사이트와 작성해 둔 이력서, 자기소개서를 참고해 목록을 작성했습니다. 그리고 각 메뉴별로 상세 내용과 넣고자 하는 기능들을 간단히 정리했습니다. 디자인을 그려보자대략적인 메뉴 구성이 정해졌으니 틀을 잡고자 Figma를 열었지만, 익숙하지 않아 작은 것 하나를 그리는 데도 너무 많은 시간이 소요되어 아이패드로 대략적인 모양을 그리고 개발을 시작했습니다.(포트폴리오 개발을 어느 정도 끝낸 후에 Figma 유튜브 강의를 보며 공부를 해야겠다는 다짐을 다시 한번 하게 ..

🌿 Supabase 프로젝트 생성🌿 TableEditor에서 테이블 생성ColumnTypeDetault ValueNOT NULLDescriptioniduuid oPKcreated_attimestampnow()o emailvarchar o중복체크sns_typevarchar xNaver / Kakao / Google / Applenicknamevarchar o profile_imgvarchar x updated_attimestamp x sns_keyvarchar x  id와 created_at은 기본적으로 생성되는 컬럼입니다. 회원 가입 시 필요한 항목들을 추가했다. id의 경우 기존에 int8로 설정되어 있던 것을 uuid로 변경했다. 밑에서 다시 언급될 내용이지만, Supabase에서 제공하는 회원 ..

이전에 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 디렉토리 안에 파일을 생성함으로써 자동으로 라우팅을 설정할 수 있다. 각 파일..