[코드잇 스프린트 FE 19기] 스프린트 미션 1 후기

🌱 들어가며

코드잇 스프린트 과정은 개인 학습 외에도

강사님의 코드 리뷰를 받을 수 있는 미션이라는 것이 존재한다.

 

총 과정 동안 12번의 미션을 해야하는데,

미션의 마감 기한?은 크게 없지만 그래도 과정에 맞춰서

미션을 진행하는 게 좋을 것 같아서 현재 미션 1과 2를 완수했다.

 

그리고 이번에 미션 이벤트도 진행 중이라서

이벤트 기간 내에 꼭 제출하고자 하는 열망이 더 커졌다.

(네이버페이 20,000원 놓칠 수 없어!!!!!!!)

 

 

📝 스프린트 미션 주제

내가 진행한 미션 1, 2는 피그마로 제공된 화면을 보고

HTML과 CSS로 화면을 구현하는 미션이었다.

피그마 파일에 화면 구현할 때 이렇게 구현하라는 요구사항이 몇 가지 있었고,

요구 사항은 무조건 충족해야하는 기본 요구사항과 구현해보면 좋은 심화 요구사항으로 나뉘어 있었는데

심화까지 작업해보면 좋을 것 같아서 미션 1, 2 모두 심화 요구사항까지 충족시키려고 노력했다.

 

 

🔁 스프린트 미션 진행 과정

미션1은 '판다마켓'의 랜딩 페이지를 구현하는 것이었다.

미션 시작 전에 나름 몇 가지 규칙을 세웠는데

이 세 가지 규칙은 코드 작성하거나 커밋할 때 최대한 지키려고 했다.

 

1. 공통으로 묶을 수 있는 CSS는 파일 상단에 적기

2. CSS 클래스 이름은 container → contents → area → 요소명 순으로 이름 짓기

3. 커밋 메세지 규칙 지키기

✨ Feat: 새로운 페이지 생성, 새로 뭔가 만들었을 때
🐛 Fix: 내가 몰랐던, 오류였던 것을 수정했을 때
♻️ Refactor: 코드 내용을 개선/수정했을 때
📦️ Chore: 디렉토리 구조 생성, 파일/디렉토리 이름 변경

 

 

🗂️ 폴더 구조

faq, items, login, privacy 파일들은 링크 연결을 위해서 빈 html파일을 만들어 두었고

CSS는 아직 index.html에서 밖에 사용하지 않아서 css > style.css로 만들어 두었다.

 

이미지는 페이지 별 사용 이미지, 아이콘으로 분리해두면 좋을 것 같아서

디렉토리를 home, icons로 구성했고 로고는 쓰이는 곳이 많을 것 같아서 images 하위에 바로 두었다.

 

 

리드미 파일은 사실 미션 요구 사항에는 없었지만,

내가 미션 별로 어떤 요구사항을 구현했는지 체크하는 용도로 리드미 파일을 추가했다.

 

이번에 리드미 파일을 작성하면서 처음 알게된 부분이 있는데

노션에서 작성한 내용을 복사하면 마크다운 형식으로 변환해준다.

평소 노션에 기록을 많이 해두는 편이라 자주 사용할 것 같다.

 

🖥️ GNB 구현

GNB 레이아웃 잡는건 어렵지 않았는데,

요구사항을 잘못 이해해서 처음에 코드를 엉뚱하게 작성했다.

화면에 너비가 1920px 보다 작아질 때,
'판다마켓' 로고의 왼쪽 여백 200px 로그인 버튼의 오른쪽 여백 200px이 유지되고,
화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정한다.

 

위 요구사항을 잘못 이해해서 처음에 미디어 쿼리로 작성했었다.

@media screen and (max-width: 1919px) {
  .gnb {
    padding: 0 200px;
  }
}

 

미션 1 제출할 때만 해도 위 코드에 대해 이상함을 느끼지 못하고 있다가

미션 2를 작업하면서 이 부분을 다시 보니

왜 이렇게 했지 싶어서 아래 방식대로 코드를 수정했다.

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 200px;
  width: 100%;
  height: 70px;
  background-color: var(--gray-0);
}

.gnb {
  margin: 0 auto;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gnb를 감싸고 있는 .header-container에

padding: 0 200px를 추가하는 것으로 변경했다.

 

🖥️ 상단 배너, 하단 배너

상단 배너, 하단 배너는 레이아웃이 동일해서

공통 CSS를 만들어서 한번에 작업했다.

 

이 부분도 구현할 때 어떻게 할지 고민했었는데

처음에는 두 배너 모두 height 값이 동일해서 height값을 설정해 두었다가

나중에 미디어쿼리로 반응형 부분을 추가하다 보니

뒷 배경이 height 값때문에 화면이 줄어들어도 늘어나지 않아서

padding-top으로 배경이 유연하게 늘어나도록 조절해 주었다.

 

🖥️ 소개 영역

개인적으로 이 부분을 구현할 때 다른 부분들보다 시간을 더 쏟았던 것 같다.

배너나 gnb, footer는 UI 이름이 명확해서 어렵지 않게 지었는데

저 부분은 보통 어떤 이름으로 부르는지 잘 모르겠어서

클래스 명을 지을 때부터 고민했다.

 

소개? 이미지 영역? 등등 고민하다가

결국 판다마켓이 어떤 서비스인지 설명하는 부분인 것 같아 overview로 지었다.

 

화면 구현 같은 경우에도

처음에는 반응형 생각도 않고 작업을 했다가

미디어쿼리를 추가하면서 뭔가 잘못되었음을 느끼고 다시 작업을 했다.

 

.overviewContainer {
  width: 100%;
  height: 720px;
  display: flex;
  justify-content: center;
  align-items: center;
}

처음에 코드를 작성할 때는 오버뷰 각 섹션별로 컨테이너를 주고

그 컨테이너 크기에 맞춰서 flex로 가운데 정렬을 했었다.

 

PC만 고려했을 때는 해당 방식도 화면 상에서는 문제가 없었지만

반응형을 작업하다 보니 컨테이너를 각각 주는게 아니라 전체 섹션으로 잡고

gap으로 간격을 조절하는 것이 편할 것 같다는 생각이 들어서

아래 방식으로 수정했다.

.overviewContainer {
  padding: 138px 0 276px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 276px;
}

.overviewContents {
  width: 100%;
  max-width: 988px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  background-color: #fcfcfc;
  border-radius: 12px;
}

@media screen and (max-width: 1020px) {
  .overviewContainer {
    padding: 32px 16px;
    gap: 24px;
  }

  .overviewContents {
    width: 100%;
    flex-direction: column;
    gap: 32px;
  }
}

더 좋은 방법이 있을 수도 있지만

현재는 지금 방식이 반응형 관리하기 편한 것 같아서 만족하고 있다.

 

.overviewRight {
  text-align: right;
  order: -1;
}

이 소개 영역 레이아웃의 한 가지 특이한? 점은

중간에 배치 순서가 변경이 된다는 점이다.

 

처음에는 html 코드 자체를 텍스트 → 이미지 순으로 작성했다가

flex에 order 속성이 생각나서

위 아래 레이아웃들과 동일하게 이미지 → 텍스트 순으로 변경하고

order로 컨텐츠 순서를 바꿔주었다.

 

 

🖥️ Footer

footer 구현하는 것은 크게 어렵진 않았다.

 

구현하면서 신경썼던 부분은

멘토링때 _blank를 사용할 때 rel="noopener noreferrer" 옵션을

명시적으로 추가해주는게 좋다고 말씀해주셨었는데

 

<a href="https://www.instagram.com/codeit_kr/" target="_blank" rel="noopener noreferrer">
  <img src="./images/icons/ic_instagram.svg" alt="인스타그램" />
</a>

푸터를 구현하면서 _blank를 사용해야해서 바로 rel 옵션을 추가해주었다.

 

📝 코드 리뷰

제출하기 전까지 코드 작성한 거에 확신이 없어서 리뷰를 어떻게 작성해주실지

설렘 반 걱정 반이었는데 자세하게 수정해야할 부분들에 대해 남겨주셔서 큰 도움이 되었다.

 

리뷰를 통해서 새로 알게된 부분들을 작성해보자면

1. link의 as 속성은 preload를 지정했을 때 사용함

<link
  rel="stylesheet"
  as="style"
  crossorigin
  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
 />

프리텐다드 코드를 적용하기 위해서

프리텐다드 깃허브에 있는 html link태그를 그대로 복사해서 넣어주었다.

공식에서 안내해준 코드라서 크게 신경쓰지 않고 바로 넣어줬었는데,

해당 코드에 as라는 속성이 있어서 문제가 되었었다.

 

mdn <link> 문서에서 발췌

as라는 속성은 rel="preload", rel="modulepreload"

속성을 지정했을 때만 사용한다고 한다.

새로 알게된 속성이라 잘 기억해둬야겠다고 생각했다.

 

2. html, css는 kebab-case를 많이 사용함

이 부분도 사실 카멜 케이스가 익숙해서 자연스럽게 카멜 케이스로 작성했는데

알고보니 HTML, CSS는 케밥 케이스를 많이 사용한다고 한다.

이 부분도 바로 다음 미션부터 적용해야겠다고 생각했다.

 

 

👏 스프린트 미션 1 후기

GitHub에서 포크를 해오고, 포크한 레포지토리를 클론하고

그걸 다시 push하고 upstream에 PR을 올리고... (중략)

이런 과정들이 다 처음해보는 거라 어색하고 생소했다.

 

또, 미션을 맞게 잘하고 있는 건지 확신이 잘 들지 않았는데

리뷰를 받아보니 맞게 가고는 있구나 싶어서 안도하기도 한 것 같다.

 

그래도 강의만 듣다가 직접 코드를 작성해보니 훨씬 재밌었다.

코드잇 강의가 짧고 퀴즈와 실습도 함께 구성되어 있어서 크게 지루한 편은 아니지만,

계속 강의만 듣기보다는 새로운 시도를 할 수 있어서 더 좋았던 것 같다.