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

📝 스프린트 미션 주제

이번 미션은 미션 1, 2에서

작업한 로그인, 회원가입, 랜딩페이지를 반응형으로 구현하고

메타태그로 og이미지를 추가하는 것이 주제였다.

 

🔁 스프린트 미션 진행 과정

🖥️ 이전 작업 수정

미션 2 코드 리뷰에서 큰 수정사항은 없었지만

코드를 다시 확인해보니 불필요한 CSS와

요구사항과 다른 padding 값이 적용되고 있어서 그 부분을 수정해주었다.

 

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-postcss-sorting

PostCSS Sorting - Visual Studio Marketplace

그리고 이번 미션부터 postCSS라는 css 정렬 확장프로그램을 발견해서 적용해보았다.

CSS를 어떻게 정렬하는지 궁금해서 찾아보다 보니

postCSS와 style lint?를 발견했는데

지금 HTML과 CSS 파일만 사용하는 환경에서는

postCSS가 더 간편하게 확장프로그램만 설치하면 사용할 수 있어서 postCSS를 선택했다.

 

프리티어 적용처럼 저장하면 바로 되도록 세팅하고 싶었는데

그 부분은 잘 안돼서 별도로 단축키를 설정해주었다.

 

정렬 순서는 box → layout → background → font → 그 외 요소들로 정렬되도록

settings.json에 값을 추가해주었다.

내가 원하는 대로 정렬을 커스터마이징 하려면 일일히 다 적어야 돼서 그 부분은 좀 아쉽다...

 

그래도 막상 사용해보니까 CSS 정렬을 신경쓰지 않아도 되고,

단축키 한 번에 관리할 수 있어서 자주 이용할 것 같다.

 

🗂️ 폴더 구조

폴더 구조는 이전 미션과 동일하다.

다른점은 og-img 파일, 텍스트 로고 이미지 파일이 추가된 정도이다.

이번 미션에서는 og 이미지를 만들어서 추가했어야 했는데

예시 이미지로 로고만 넣은걸 제공해주긴 했지만

뭔가 색다르게 만들어보고 싶어서 피그마 에셋을 가지고 만들었다.

(나름 귀엽게 만든 것 같아서 만족)

 

🖥️ 로그인, 회원가입 반응형 구현

로그인, 회원가입에 적용되는

CSS를 한 파일로 관리하고 있기도 하고,

반응형으로 크게 달라지는 요소가 없어서 빠르게 끝낼 수 있었다.

미션 요구 사항 중에 모바일 사이즈의 내부 요소는

기기의 너비가 커지는 만큼 커지지만 400px을 넘기지 말라는

요구사항이 있어서 max-width로 값을 추가해주었더니

태블릿 크기에서 모바일로 넘어갈 때 갑자기 내부 요소가 확 줄어들어 보여서

그 부분이 조금 아쉬운 것 같다. 🥲

 

🖥️ 랜딩 페이지 반응형 구현

랜딩페이지도 크게 어려움은 없었는데

작업하면서 몇 가지 기억에 남는 부분이 있어서 정리해 보려고 한다.

1. 줄바꿈 처리

PC → Tablet → mobile 순으로

배너 문구가 줄바꿈이 있었다가 없어졌다가 다시 생긴다.

이렇게 줄바꿈이 있었다가 없어졌다가 하는걸 처음 구현해봐서

이 부분을 어떻게 처리할까 고민하다가

br태그에 display 속성을 변경해주는 것으로 결정했다. (inline → none → inline)

@media screen and (max-width: 1199px) {
  .main-banner-title-br {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .main-banner-title-br {
    display: inline;
  }
}

 

 

2. 브라우저 크기별 로고 변경

PC, 태블릿에서는 기존 로고가 보이지만

모바일에서는 텍스트 로고만 보여지도록 구현해야 했다.

 

이 부분도 어떻게 구현할지 고민하다가

멘토링 시간에 들었던 picture 태그가 생각나서 사용했다.

<picture>
  <source media="(max-width: 767px)" srcset="./images/text-logo.svg" />
  <img src="./images/logo.svg" alt="판다마켓 로고" class="logo-img" />
</picture>

 

picture를 사용해서 모바일에서는 텍스트 로고가 보이도록

source태그에 조건을 추가해주었고

img태그를 넣어서 원래 로고가 보이도록 설정했다.

 

3. 메타태그 설정

    <meta property="og:title" content="판다마켓" />
    <meta property="og:url" content="https://sprint-pandamarket.netlify.app/" />
    <meta property="og:image" content="https://sprint-pandamarket.netlify.app/images/og-img.png" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="판다마켓" />
    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
    <meta name="twitter:image" content="https://sprint-pandamarket.netlify.app/images/og-img.png" />

 

메타 태그 설정을 할 때 주의할 점은

image나 url 경로는 절대 경로로 작성해주어야 깨지지 않는다는 점이다.

 

이렇게 작성하고 카카오톡 공유 디버거로 확인해주니

아래 이미지처럼 잘 동작했다.

 

그런데 트위터는 또 뭔가 잘못된건지 계속 이미지가 뜨지 않아서 당황했는데

다행히 캐시 문제였고 정상적으로 동작하는 걸 확인했다.

 

 

 

👏 코드 리뷰 & 미션 후기

이번 코드리뷰에서도 다행히 수정사항이 없었다.

매번 리뷰를 받을 때마다 긴장되는데 피드백 없이 넘어가서 뿌듯하다.

다음 미션에서도 수정사항이 생기지 않도록 꼼꼼하게 작업해야 할 것 같다. 🥹

 

다음 미션에서는 로그인, 회원가입 폼 에러 처리를 자바스크립트로 직접 구현해야 하는데

정말 오랜만에 바닐라 자바스크립트로 해보는거라서 잘 할 수 있을지 걱정된다.

 

그래도 강의만 듣는 것 보다는 미션을 하는게 재미있어서

빨리 강의 진도 끝내고 미션 4도 진행하고 싶다. 👊