프로젝트 소개

포트폴리오 프로젝트는 SEO에 최적화된 웹 애플리케이션으로, NEXT.js와 TypeScript를 사용하여 개발하였습니다. TypeScript를 도입하여 정적 타입 검사를 수행하여 코드의 안정성과 가독성을 높였습니다.

이 프로젝트를 통해 저는 최신의 웹 개발 동향에 대한 이해와 SEO에 대한 경험을 쌓았습니다. 또한, NEXT.js와 TypeScript와 같은 인기 있는 기술 스택을 활용하여 효율적이고 유지보수가 용이한 코드를 작성하는 방법을 익혔습니다.

포트폴리오를 검토하시는 인사담당자 분들께서는 이 프로젝트를 통해 제가 웹 개발에 필요한 기술과 실무적인 경험을 가지고 있다는 것을 확인하실 수 있을 것입니다.

기능 구현

Light / Dark 테마

• 기능 소개 : Header의 Theme 버튼(아이콘)을 통해서 Light 또는 Dark 테마를 적용할 수 있습니다.
• 기능 구현 : MyApp 컴포넌트는 AppProps를 매개변수로 받고, ThemeProvider 컴포넌트로 감싸져 있습니다. ThemeProvider는 "class"라는 속성을 가지며, 클래스를 사용하여 테마를 전환할 수 있게 합니다. 헤더에는 themeToggleButton 컴포넌트가 있습니다. 이 컴포넌트는 버튼을 렌더링하며, 버튼을 클릭하면 useTheme 함수를 사용하여 테마를 토글할 수 있습니다. 만약 현재 테마가 "light"이면 "dark"로, "dark"이면 "light"로 테마가 전환됩니다.

Notion API를 사용한 프로젝트 목록 가져오기 기능

• 기능 소개 : Notion API를 사용하여 데이터를 파싱하고 프로젝트 목록을 표시하는 기능을 구현했습니다
• 기능 구현 : postman을 통해 API 통신을 확인한 후, 초기에는 getServerSideProps()를 사용하여 데이터 통신을 구현하였으나 배포 후 페이지 변경이 많지 않을 것으로 판단하여 성능 향상을 위해 getStaticProps()를 사용하였습니다. 데이터는 types 폴더에 따로 정의된 Repo와 ProjectItem 타입을 사용하여 파싱하였고, Projects 컴포넌트에서는 받아온 데이터를 랜더링하는 로직을 구현하였습니다.

이슈