turtle601/hwjs-portfolio

내 프로젝트를 보여주는 사이트

준승's potofolio

👉 포트폴리오 보러가기

⏰ 구현 기간

• 2022.08.22 ~ (진행 중)

📌 용도

• 컴퓨터공학과 4학년이 되고 취업하기 위해 내 프로젝트와 간단한 자기소개를 하기 위해 제작되었다.

• 처음 사용하는 기술 스택인 Next.js, Typescript + Recoil + React-query를 사용하고 학습하는데 목적을 두었습니다.

📌 사용한 기술

Next.js

SEO에 신경써서 내가 만든 웹페이지를 검색엔진에 노출시키고 싶었습니다. Next.js를 통해 SSR로 웹페이지를 구현, SEO를 향상시켰습니다.

React.js

컴포넌트 단위 개발을 가능하게 하여 재사용성과 유지보수를 용이하게 하고 JSX 문법을 통해서 직관적으로 템플릿을 구성할 수 있어서 React를 사용하게 되었습니다.

Typescript

객체에 들어가는 구조에 대한 타입을 미리 정의함으로써 타입스크립트에서 제공하는 자동완성 기능을 이용하고 개발 시 발생할 수 있는 예상하지 못한 데이터 구조(ex) null | undefined) 에러를 사전에 방지하기 위해 사용하였습니다.

Styled-Components (CSS in JS)

별도의 CSS파일 관리를 하지 않아도 되고 className을 신경쓰지 않아도 된다는 점을 고려하여 사용하게 되었습니다.

Recoil

필요에 따라 계속해서 추가적인 기능을 구현하기 때문에 state관리의 용이성을 위해 전역 상태 라이브러리를 사용하였습니다.
다른 전역상태 라이브러리에 비해 전역 상태의 설정/정의가 매우 쉽고 get/set 함수로 리액트의 상태를 간단하게 변경할 수 있어서 사용하게 되었습니다.

React-query

서버에서 데이터를 가져오면서 개발자가 구현해야할 다양한 기능(로딩, 에러, 캐싱 등)들을 지원해줍니다.
그리고 클라이언트 전역 상태와 서버의 전역 상태를 분리해서 다룰 수 있다는 점에서 React-query를 사용하게 되었습니다.

ESLint

프로젝트 코드의 일관성있는 코드 작성을 위해서 사용하였습니다. Airbnb 코드 컨벤션을 사용하였습니다.

Github Action(CI/CD)

자동화 배포를 위해 도입했습니다. Github 플랫폼에서 전부 해결 가능하고 사용 방법이 간단해보여 선택하게 되었습니다.

Vercel(deploy)

Vercel은 Next.js를 만든 배포 시스템입니다. 깃허브 주소와 빌드 환경에 대한 정보만 입력하면 쉽게 배포가 됩니다. 뿐만 아니라 메인 브랜치 혹은 메인이 아닌 브랜치(upstream 환경)에서 커밋 시 preview deployment를 제공하여 배포 시 오류를 체크해줍니다. 무엇보다도 무료이기 때문에 Vercel로 배포를 하였습니다.

📌 기능

• 다크 모드 구현
• Notion API를 통해서 Project 데이터 받아오고 렌더링하기 [Project Page]
• 내 이력서 보여주기 [Resume Page]
• 이력서 페이지 스크롤 시 페이드인 효과
• 모바일 반응형 구현

🤔 프로젝트 구현 시 했던 고민들

• 1차 배포 회고

• 2차 배포 회고

• 3차 배포 회고

hwjs-portfolio's Issues

다크모드 구현

To do

• 전역 상태 라이브러리 recoil
• useDarkMode Hook 구현
• Header 컴포넌트의 다크모드 버튼 이벤트 구현

Introduce 컴포넌트 구현

To do

• Home 화면의 자기소개 내용 컴포넌트 구현
• 로티 애니메이션 컴포넌트 구현
  Lotti Animation 사이트

Footer 컴포넌트 구현

To do

• Footer 컴포넌트 구현

스크롤 시 Header, Footer와 다른 컴포넌트 겹침 현상

To do

• 스크롤 시 Footer와 다른 컴포넌트가 겹쳐는 현상 해결하기
• 스크롤 시 Header와 다른 컴포넌트가 겹치는 현상 해결하기

사용자의 편의를 위한 여러가지 버튼 추가

To do

• 기존 헤더 상단에 위치한 다크모드 버튼을 오른쪽 하단에 위치
• 홈 화면에 프로젝트 보러 가기 버튼 추가
• 홈 화면에 내 소개 보러 가기 버튼 추가

Test 코드 삭제

To do

• Project 구현 시 많은 에러로 인해 전반적인 코드 리팩토링으로 인해 그에 관한 테스트 코드 모두 제거하고 작업
• Pull Request 에러로 인해 git workflow에서 jest --ci 구문 제거

Next.js + Recoil 문제

About

• Next.js + Recoil 실행 시 발생하는 에러

When

• Next.js 개발 중 파일이 변경되면 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다.
• key는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 keyfh 선언된 값을 key로 사용해서 문제가 발생

화면 캡처

Header 구현

To do

• header 구현

Test Code 실행 오류

About

• Introduce 컴포넌트 테스트 코드 실행 시 발생하는 에러

When

• Introduce 컴포넌트안 의 LottiAni 컴포넌트릉 인식하지 못하는 에러

화면 캡처

컨텐츠 내용 수정

To do

내 포트폴리오에 넣을 내용들을 하나씩 넣어보자

• Home 화면 컨텐츠 내용 수정
• Header 링크 수정
• Resume 화면 컨텐츠 내용 수정

내 소개 페이지 만들기

To do

이력서 내용 업데이트

To do

• 이력서 내용 수정

3차 배포 빌드 에러

To do

브라우저 @import CSS syntax 에러

About

• 브라우저에서 @import CSS syntax warning 발생

When

• Next.js 앱 실행 시 브라우저에서 경고 발생

화면 캡처

글씨체 변경

To do

• 웹 페이지 기본 글씨체 변경

Error : 홈 화면 -> project 화면 -> 홈 화면으로 갈 경우 다시 원래 홈 페이지로 돌아가지 않는 에러

To do

Notion Api 데이터 가져오기

To do

• 노션 API에서 노션 TOKEN과 DATABASE_ID 값 저장
• 커스텀 훅 - fetching 노션 데이터

Notion 데이터 베이스 데이터 수정 후에도 화면이 변경되지 않는 에러

To do

로딩창 구현

To do

• 로딩창 컴포넌트 구현

깃허브 Action 설정

To do

• Vercel 자동 배포 설정
• Prettier, Eslint 설정
• test 코드 설정

목차 기능 구현

To do

• 목차 기능 구현

Project 컴포넌트 구현

To do

• Notion API에서 입력받은 데이터 레이아웃 구현 (ProjectList 컴포넌트)
• ProjectList 컴포넌트 안 의 ProjecttItem 컴포넌트 구현

Button 컴포넌트 구현

To do

• LinkButton 컴포넌트 구현
• 그냥 Button 컴포넌트 구현
• 그 외 다양한 스타일 속성 부여

Error: Hydration failed because the initial UI does not match what was rendered on the server.

About

• Next(v12) + React(v18) + Styled-Componennts 사용하고 있는 상황
• 정적문서와 렌더링된 페이지가 다를 시 발생하는 에러

When

• 앱을 구동시키고 project 페이지로 들어가고 다른 페이지로 갔다가 뒤로 가기를 했을 시 에러 발생
• 공식 문서에 의하면 Next + React + Styled-component 설정문제라고 나옴 공식문서

화면 캡처

레포 설정하기

To do

• Eslint 설정하기 ( airbnb )
• Prettier 설정하기
• husky 설정하기
• jest + test-library 설정하기
• styled-components 설정하기 ( reset.css )
• 절대경로 설정하기

다크모드 현재 상태 유지

To do

• 새로 고침 했을 때에도 다크모드 라이트 모드 유지

Eslint 수정

What is bug?

• eslint(airbnb) + prettier를 할 경우 둘 다 각각 스타일을 강제하므로 eslint가 게속 발생한다.

How to fix?

• eslint(airbnb)를 놔두고 prettier를 완전히 제거하려고 한다.
• eslint + prettier 문제 원인

CORS 에러

• 실제 어플리케이션 배포 시 Notion 데이터를 불러오지 못하여 발생하는 에러

텍스트 페이드인 효과 구현

To do

• Home 화면 텍스트 페이드인 효과 구현
• Resume 화면 스크롤 시 텍스트 페이드인 효과 구현

홈 화면 최종 구현

To do

• a 링크 태그 -> Link 링크 태그로 변환
• svg파일 웹 접근성을 위한 blind 컴포넌트 생성

에러페이지 구현

To do

모바일, 태블릿 반응형 구현

To do

• 모바일 환경 시 반응형 구현
• 테블릿 환경 시 반응형 구현
• 그 외 다양한 뷰 포트 환경에서 반응형을 구현

Issue, Pull Request 템플릿 만들기

To do

github을 통해서 이슈 및 풀리퀘 생성 시 템플릿 자동으로 생성