[Day 62] 2022-0916: 솔로 프로젝트 프로토타이핑, Next.js 등

🐈오늘 공부한 것

✔️솔로 프로젝트 프로토 타이핑

섹션 3을 마무리 하면서 섹션 4 까지 한 달 기한동안 작업할 솔로 프로젝트 기획 및 프로토타이핑을 했다. 

Figma

내가 기획한 웹앱은 '감정 다이어리' 이다. 100% 내 아이디어라기 보다는 todo-mate 나 기타 여러 다이어리 앱에서 아이디어를 차용했다. 매일의 감정을 이모지로 표현하고, 간단한 일기를 작성해서 저장할 수 있는 앱이다. 진짜 다이어리같은 느낌을 주고 싶어서 일기 작성과 목록 화면을 탭으로 디자인했다. 좌측 화면에서는 한 달간 감정 이모지를 한 눈에 볼 수 있는 달력이 있다. 

 

구현할 기능

• 일기 작성 기능
• 일기 목록/ 내용 조회 기능
• 일기 내용 수정 기능
• 일기 삭제 기능

기본적인 CRUD 에 집중해서 구현을 하고, 그 외에 추가적으로 구현할 내용은 아래와 같다.

• 날짜에 해당하는 감정 이모지 달력에서 조회하기
• 날짜, 날씨, 명언 API 사용하기
• 일기 목록 그룹핑 / 필터링
• DB 연동

이제 컴포넌트 구조를 어떻게 짜고 어떤 라이브러리로 구현할지 계획해야겠다.

✔️Next.js

오늘은 캐럿마켓 첫 코딩 챌린지가 있는 날이었다. 사실 데이터를 다루는 부분보다 CSS 에서 시간을 정~말 많이 사용하는 것 같다. 처음에는 더미 데이터로 CSS 를 완벽하게 구현한 뒤에 실제 데이터를 이용하려고 했는데, CSS에 시간이 생각보다 많이 쏟게 되고, 그렇게 되면 기한 내에 제출을 못할 것 같아서 순서를 바꿔서 데이터 -> CSS 순으로 구현했다. 그러고도 시간을 많이 쏟아서 100% 만족스럽진 못하다...

노마드코더 정책상 코드와 과제를 공개하는 것은 안되기 때문에 어떤 방법을 사용했는지 리뷰해보겠음.

 

1. import 에러, eslint 적용되지 않는 문제 해결

먼저 import 구문에서의 에러를 해결하기 위해 구글링을 하면 이런 해결 방법이 많이 나오는데, 이렇게 해결하면 import 파싱 에러는 해결할 수 있지만 eslint 가 적용되지 않는 또 다른 문제가 발생한다. 근본적인 해결책이 아닌 것 같다...

만약 vs code 에 여러개의 작업 영역이 열려있다면, 새 창으로 작업할 프로젝트 하나만 띄우면 에러가 사라진다. 

 

2. 메인페이지 

먼저 api는 서버 쪽에서 호출해서 렌더링 되도록 했고, 디자인은 css-grid 를 사용했다. 오늘 새롭게 css transform 의 scale 속성을 사용했다. 

/* 그리드 컬럼 설정 */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 1000px;
  padding-top: 50px;
  justify-content: space-around;
  gap: 20px;
  color: white;
}

/* hover 상태에서 크기 키우는 효과 */
.rich-card:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  transform: scale(1.08);
}

3. 서브페이지

서브 페이지는 메인 페이지의 카드리스트 중 하나를 클릭하면 상세 정보를 띄워주는 페이지이다. 클릭했을 때 router 객체에 id와 함께 해당 경로를 추가해주고, 상세 페이지의 getServerSideProps 함수에서 context 객체로 접근해하여 서버에서 api를 호출했다. 

export async function getServerSideProps({params: {id}}) {
  const results = await await (await fetch(`https://billions-api.nomadcoders.workers.dev/person/${id}`)).json();

  return {
    props: {results},
  };
}

getServerSideProps 가 context 라는 객체를 받고, 그 안에는 params 라는 객체를 통해 현재 경로로 전달된 파라미터에 접근할 수 있다. 이전 페이지에서 id 라는 이름으로 id 값을 전달해주고 있으므로 이를 가져와서 api 호출을 한 뒤에 그 결과값을 컴포넌트에 전달해줄 수 있다. 이 부분은 어디에 어떤 값을 전달해주어야 하는지만 잘 파악하는게 중요한 것 같다. 

 

과제가 엄청 어렵다기 보다는 next.js 에 익숙하지 않다보니 알음알음 찾으면서 하는데 시간이 오래 걸렸다. 또 style-jsx 를 사용해서 스타일링을 했는데, 다음부터는 그냥 styled-componets 를 사용하는게 좋을 것 같다. style 태그가 분리가 안되는 느낌이라 복잡하고 가독성이 좋지 않다. 

 

추가적으로 next.js 에서는 일반 img 태그를 사용하면, Next/Image 태그를 사용하라는 정보를 띄워준다. 완벽하게 이해는 못했지만 next 의 Image 태그가 이미지를 최적화 시키는 태그이기 때문에 사용이 권장된다고 한다. 이미지를 최적화 한다는게 정확이 무슨 의미인지 이해가 되지 않는다,,

🐈더 공부할 것

1. next.js Image 태그와 최적화

2. 리액트 프로젝트 컴포넌트 설계

🐈오늘의 느낀 점

1. 오늘 next.js 과제와 솔로 프로젝트 기획을 하면서 기획과 설계의 중요성에 대해 다시 깨닫게 되었다. 어떤 구조로 어떻게 흘러갈 것인지 꼼꼼하게 기획해야 머릿속에서도 정리가 잘 되고 헤메는데 소모하는 시간을 줄일 수 있다. 조금 귀찮더라도 어떤 방법을 사용해야 실수를 줄일 수 있는지 좀 알아보고 적용해보는 연습이 필요하다.