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

1. 디자인 수정

• [x] 레이아웃 배치 구상 및 반영
• [ ] 스크롤 시 레이아웃에 애니메이션 적용 (framer-motion 라이브러리 사용)
• [x] 라이트/다크 모드 구현
• [x] 반응형 구현

---

1.1 처음 접속시 로딩화면에서 로고 및 애니메이션 구현하기

모든 컴포넌트를 최상위에서 Suspense로 감싸고 fallback으로 Loading 컴포넌트가 보여지도록 작성하였는데 로딩 화면이 보이지 않는다. 로딩이 너무 빨라서 안보이는 걸까?

→ 그렇다. 로딩이 너무 빨라서 나오긴 나왔는데 너무 빨리 지나간 것이었다. 로딩시에 보여줄 화면에서 임팩트를 주기 보다 useEffect를 의존성 배열을 빈배열로 줘서 최초 렌더링시에만 setTimeout같이 특정 시간만큼만 어떤 컴포넌트를 화면에 보여주는 식으로 하는 식으로 하면 될 것 같다.

---

1.2 framer-motion 라이브러리로 애니메이션 효과 구현

→ 다음 제작기에서

---

1.3 라이트/다크 모드 구현

리덕스 대신 Context API로 작은 규모의 웹앱에서의 전역 상태관리를 연습해보기로 하였다.

1. 화면 테마의 맥락인 context를 하나 생성하고 현재 테마의 값을 담을 state도 생성한다.
2. 테마 전환 버튼의 onClick 이벤트 핸들러에서 테마가 바뀔때 state 변경함수를 실행해서 테마의 state를 바꾼다.
3. App.js에서 모든 컴포넌트를 감싸는 컴포넌트의 id로 현재 테마의 state 값을 부여한다.
4. 전역에서 현재 테마의 state값이 들어간 id에 접근할 수 있는 상태가 되었으므로 전역 스타일을 지정하는 styled-components의 GlobalStyle.js에서 테마에 따라 css 속성값이 바뀔 수 있도록 id 선택자를 활용하여 라이트/다크 테마에 따라 배경색과 글자색을 바꾸는 간단한 테마 변경을 구현해보았다.

App.js

// App.js

const App = () => {
  
	// ... 생략

  return (
    <Suspense fallback={<Loading />}>
      <ThemeContext.Provider value={(theme, toggleTheme)}>
        <div className="App" id={theme}>
          <button
            onClick={() => {
              toggleTheme();
            }}
          >
            mode
          </button>
          <ScrollToTop />
          <GlobalStyle />
          <NavContainer>
            <NavLists>
              <NavItem onClick={() => scrollToSection(home)}>Home</NavItem>
              <NavItem onClick={() => scrollToSection(about)}>About</NavItem>
              <NavItem onClick={() => scrollToSection(skills)}>Skills</NavItem>
              <NavItem onClick={() => scrollToSection(works)}>Works</NavItem>
              <NavItem onClick={() => scrollToSection(testimonials)}>
                Testimonials
              </NavItem>
              <NavItem onClick={() => scrollToSection(contact)}>
                Contact
              </NavItem>
            </NavLists>
          </NavContainer>

          <SectionDivider ref={home}>
            <Home />
          </SectionDivider>
          <SectionDivider ref={about}>
            <About />
          </SectionDivider>
          <SectionDivider ref={skills}>
            <Skills />
          </SectionDivider>
          <SectionDivider ref={works}>
            <Works />
          </SectionDivider>
          <SectionDivider ref={testimonials}>
            <Testimonials />
          </SectionDivider>
          <SectionDivider ref={contact}>
            <Contact />
          </SectionDivider>
        </div>
      </ThemeContext.Provider>
    </Suspense>
  );
};

GlobalStyle.js

// GlobalStyle.js

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

const GlobalStyle = createGlobalStyle`
* {
     margin: 0;
     box-sizing: border-box;
 }
body {
  #light {
    background-color: #fff;
    color: black;
  }
  #dark {
    background-color: black;
    color: #fff;
  }
}
`;

export default GlobalStyle;

할 일

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