리액트 포트폴리오 사이트 제작기 3편

728x90

1. 할 일

[x] 반응형 레이아웃 전면 수정 - 현재 모바일 화면에서 body가 왼쪽으로 밀리고 있다.
- PC/타블렛/모바일 미디어쿼리 px 기준점 명확히 정의하고 css 수정
- GlobalStyle 파일 안쓰는 css 코드 제거 또는 참고할 코드 주석처리
- 공통적으로 쓰이고 있는 Container 컴포넌트를 지금처럼 GlobalStyle 파일에서 export 할 지 common 폴더에서 export 할지 각 컴포넌트에서 새로 정의할지 컨벤션 정하기
- 모바일 레이아웃에서 화면이 위아래로 늘려져서 나오는 부분 수정하기
- 모바일 레이아웃에서 사라지거나 형태가 바뀔 부분 생각하고 반영하기
  - navbar: 햄버거 메뉴로 모양 변경. 클릭 시 전체화면으로 nav item들이 중앙정렬되어 보여지게 수정
[ ] testimonial 컴포넌트
- 로그인 상태 context로 상태관리되어야 하는지 확인해보고 전역으로 관리되어야 한다면 반영.
- 글 추가, 수정, 삭제, 로그아웃 기능 구현하기
[ ] framer-motion으로 스크롤 시 들어갈 애니메이션 넣기
[x] 라이트/다크 테마 변경시 바뀌는 부분 조금 더 context 상태관리에 대해 좀 더 공부해서 추가해보기
- ~~프로필 사진 색감 변경~~ → 나중에
- 안바뀐 글자 색들 변경
[ ] Contact 페이지 컴포넌트 구현
- nodemailer 붙이기
- 깃허브, 블로그 링크 버튼 만들기
[x] About 페이지 컴포넌트 구현
- 더미텍스트 실제 소개글로 대체
[x] Works 페이지 컴포넌트 구현
[x] 메인 페이지 필살기

2. 작업한 내용

1. 재사용 가능한 컴포넌트를 만들고 활용할 것.

const LoginBtn = styled(Button)`
	background-color: transparent;
	font-size: 16px;
`;

GlobalStyle.js
- 모든 컴포넌트에서 사용가능한 컴포넌트라면 지금 페이지 컴포넌트 하나에서 일일히 styled-component 새로 만들지 말고 분리시키고 GlobalStyle으로부터 import 받아와서 확장시켜서 속성값을 바꾸자.
src > components > 각 페이지별로 구분한 폴더들
- 데이터를 동적으로 받아오는 등의 기능이 있거나 동일한 내용이 반복되어 들어갈 경우 해당 폴더에서 컴포넌트를 만들고 재사용하기.

2. 데이터 흐름도 만들기

→ 다음에

3. 라이트/다크 테마 변경 적용 안된 요소들도 적용

→ 해당 요소에 클래스명을 주어서 GlobalStyle.js에서 테마의 state값인 id 선택자와 클래스 선택자를 함께 사용해서 테마 변경 시 별도의 스타일링을 주었다.

import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
* {
     margin: 0;
     padding: 0px;
     box-sizing: border-box;
 }
body {
  /* width: 100vw;
  height: 100vh; */
  display:flex;
  flex-direction: column;
  overflow-x: hidden;
  
  #light {
    background-color: #ededed;
    color: #414141;
  }
  #dark {
    background-color: #202020;
    color: #e5e5e5;
  }
  #dark .skills {
    color: #414141;
  }
  #dark .nav {
    color: #e5e5e5;
  }
  @media all and (min-width: 768px) and (max-width: 1023px) {
  }
  /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
  @media all and (min-width: 480px) and (max-width: 767px) {
  }
  /* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
  @media all and (max-width: 479px) {
   
  }
   
}
`;

export default GlobalStyle;

3. 리뷰

기록하지 않았지만 작업한 내용이 많았다. 하지만 의도대로 동작하지 않아서 갈아엎은 대공사가 3번은 있었다. 그래서 뭔가 작업은 정말 많이 한거 같은데 막상 화면에 보여지는건 정작 별로 달라진게 없었어서 조금 허탈한 감이 있었다.

이번 개인 포트폴리오 앱을 처음으로 개인 프로젝트를 만들어 보며 느낀 점은 리액트에서 리렌더링되는 시점을 아직도 잘 모르고있구나 느끼고, css도 결국 미루고 미루다 프로젝트 직전에서야 발등에 불이 떨어진걸 다시 또 느낀다. 파이어베이스는 레퍼런스가 많이 부족하고 네트워크나 서버 쪽 지식이 내가 많이 부족해선지 차라리 익스프레스랑 몽고디비를 쓰는게 낫겠다 생각이 들기도 한다.

그래도 항상 첫 술에 배부를 수가 없는 거고 어쨌든 지금 내가 실질적으로 짤 수 있는 실력이 어느정도인지 프로젝트전에 확인했다는데 의의를 둔다.

아직 완성은 아니지만, 이번 스터디의 목적이 포폴앱 만들기가 아니라 자기소개 페이지 만들기였으니, 스터디 목적은 그래도 달성은 하기는 한 채로 오늘 스터디의 마지막 날을 맞이했다.

임시 배포판:

Ryan Kim

neon-kleicha-5f51ad.netlify.app

4. 남은 할 일

섹션4 해커톤까진 완성하기

works 컴포넌트 완성
about 기술스택 완성
testimonial 파이어베이스 crud 완성
contact 컴포넌트에 nodemailer 붙이기