cyjo9603/chanyeong

👨‍💻 chanyeong's portfolio and blog webpage

README

Chanyeong

chanyeong은 개발자 조찬영의 포트폴리오 및 블로그 기능을 포함한 웹 애플리케이션입니다.

프론트엔드 개발자로써 결과물과 발전하는 과정을 기록하기 위해 개발되었습니다.

이 프로젝트는 지속적으로 리팩토링되며 발전시킬 예정입니다.

Architecture

Skill

Front-end

• React ( Atomic Design )

• TypeScript

• Next.js

• GraphQL

• Apollo Client

• Emotion

• TUIEditor ( WYSIWYG Editor )

• Storybook

  README

Back-end

• NestJS

• TypeScript

• Graphql

• Apollo Server

• Passport.js

• Sequelize ( MySQL )

  README

Deploy

• pm2
• NginX
• docker
• Toast Cloud

Excution Screen

Index Page

About Page

Portfolio Page

Blog Page

• 블로그 페이지는 인피니티 스크롤링을 사용해 포스트들을 표시합니다.

Contact Page

모든 페이지는 반응형 디자인이 적용되어 있습니다.

chanyeong's Issues

#1 프로필 정보 컴포넌트 추가

• about 페이지안에 자세한 프로필 정보를 담고있는 프로필 추가 (모달 형식)
  • 자격증 요소 생성
  • 경력 요소 생성 + 스터디
  • 간단한 자기소개

Storybook 최신화 및 github pages 에 배포

Title

• Storybook 최신화 및 github pages 에 배포
• chromatic 연결

작업 필요 내용

• Storybook 최신 버전 설정
• react v18 지원하도록 설정 변경
• github pages에 master 브랜치 기준 storybook 페이지 배포
• chromatic 설정

Github actions 로 CI & CD 자동화 구축

Title

• Github actions 로 CI & CD 자동화 구축

작업 필요 내용

• test 작성
  • lint 검사
  • 빌드 검사 (node v16)
• client & server 측 각각 CI 자동화 구축
  • docker image 생성
  • docker 배포 명령어 docker config 파일에 정의
  • docker 이미지 repository에 정의
  • secret key 설정
• client & server 측 CD 구축
  • toast cloud instance 에 runner 설정

image upload graphql 로 적용

Title

• image upload graphql

작업 필요 내용

• graphql-upload module 적용
• uploadImage mutation 구현
• ImageUpload 기능에 해당 muation으로 교체

MySQL -> MongoDB migration

MySQL -> MongoDB migration

• 기존 MySQL로 구성되어 있던 DB 를 MongoDB 로 변경
• MongoDB는 기본적으로 제공하는 MongoDB 인스턴스 사용 예정
• 현재 업무에서 사용하는 DB 기술 스택이 MongoDB 이기 때문에 변경 예정

작업 필요 내용

• Mongoose schema 작성 (기존 스키마 및 데이터 포맷 유지)
• Mongo DB 인스턴스 연결

Next.js verstion 12 up

Title

• Next.js 11 버전으로 업데이트

작업 필요 내용

• scroll recoil state 제거 (next에서 진행)
• script optimization 적용
• next lint 적용
• webpack 5 적용

블로그 <-> 포스트 이동 시 스크롤 및 이전 데이터 유지

블로그 <-> 포스트 이동 시 스크롤 및 이전 데이터 유지

• 현재 블로그에서 infinity scrolling으로 새로운 포스트 리스트 요청 후 단일 포스트로 이동 후 뒤로가기 시 이전 데이터 소실 (컴포넌트 트리에서 제거 후 다시 마운트되서 상태가 초기화되는 문제로 예상됨)
• 태그 및 카테고리 상태, 스크롤 위치 등을 기억 해 포스트 리스트는 캐시에서 가져오고 스크롤 위치 설정으로 이슈 해결 예정

작업 필요 내용

• 스크롤 위치 기억
• 태그 및 카테고리 상태 유지
• 이전 포스트 리스트 유지 (태그 및 카테고리 상태에 맞는 포스트 리스트)

아토믹 디자인 적용

• 전체 컴포넌트를 아토믹 디자인 적용
• storybook도 함께 적용

#2 About 페이지 정보 추가

• 경험 및 경력 영역 추가
  • DB 경력 테이블 생성
  • 경력 API 구현
  • apollo query 작성

GTM에 각 tag 및 post click event 설정

Title

• GTM에 각 tag 및 post click event 설정

작업 필요 내용

• event params structure 설계
• GTM click event 설정
  • post
  • tag
  • menu

아토믹 디자인 적용한 컴포넌트 렌더링 최적화

• 아토믹 디자인을 컴포넌트에 적용 후 아직 렌더링 최적화를 하지 않았음
• 각 페이지 별로 무조건적으로 useMemo나 memo를 통한 렌더링 최적화를 하지 않고 데이터는 적게 변경되지만 렌더링이 자주 일어나는 컴포넌트 위주로 렌더링 최적화 진행

검색 페이지 인피니티 스크롤링 버그

• 검색 페이지에 포스트가 인피니티 스크롤링이 적용되지 않음

서버 및 클라이언트 gql 타입 제너레이터 변경

• 서버 및 클라이언트 gql 타입 제너레이터 변경
  • 서버에서는 타입 변경 및 라이브러리 모듈 최소화 설정 작업 필요
  • 기존 클라이언트에서 스키마를 생성할 때 에러가 있었음 -> 다른 스키마 생성 툴 사용 (로컬에서 사용 가능하도록)