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

🌱 들어가며 + TMI

바로 올리는 미션 2 후기글...

원래 미션 1, 2 후기글을 같이 올리려 했는데

글이 너무 길어져서 부득이하게 나눴다.

 

무튼 이어서 글을 작성해 보자면

스프린트 미션 1 코드 리뷰를 받은 다음날

바로 스프린트 미션 2를 작업하고 PR을 올렸다.

 

스프린트 미션 2의 요구사항은

미션 1과 동일하게 HTML, CSS를 사용해서

로그인, 회원가입 폼을 구현하는 것이었다.

 

스프린트 미션 1보다 미션 2가

구현해야 할 요소가 더 적어서 금방 완료할 수 있었다.

 

 

🔁 스프린트 미션 진행 과정

🖥️ 이전 작업 수정

스프린트 미션 1에서 멘토님이 피드백 주셨던 내용을 반영하고

미션 2 진행을 위해 파일명을 일부 수정하고, 이미지 파일들을 추가했다.

 

🗂️ 폴더 구조

파일 구조는 스프린트 미션 1과 동일하다.

달라진 부분은 CSS 파일과 images 폴더에 이미지 에셋이 추가되었다는 점이다.

 

1. CSS 파일 이름 변경

다른 페이지들의 CSS 파일을 추가해야 해서

index.html의 CSS 파일이었던 style.css를

index-style.css로 변경해 주었다.

 

2. 변수 등록, 공통 CSS 파일 추가

미션 2 요구 사항에 컬러 변수를 등록하는 부분이 있어서

variables.css 파일을 추가해 주었고,

모든 페이지에 공통으로 적용되는 스타일을 관리하기 위해

common.css 파일을 추가해서 변수 파일 import도 해당 파일에 추가했다.

 

3. auth-style.css 추가

이번 미션에 주제인 로그인/회원가입 폼 작업을 위해

auth-style.css 파일을 새로 추가했다.

 

두 폼의 디자인이 동일하기 때문에

추후 반응형 작업을 할 때 하나의 파일만 관리하면 편할 것 같아서

각각 다른 CSS 파일로 관리하지 않고 하나의 파일로 통합해 주었다.

파일명도 회원가입, 로그인을 포괄할 수 있는 auth-style로 결정했다.

 

🖥️ 컨테이너 레이아웃

로그인 페이지, 회원가입 페이지 둘 다

로고 위 상단 여백을 동일하게 하라는 요구사항이 있어서

컨테이너로 padding 값을 설정해 주었다.

.auth-container {
  margin: 0 auto;
  padding-top: 60px;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

 

🖥️ 로그인 폼, 회원가입 폼

로그인 폼과 회원가입 폼 이미지를 보면 알 수 있듯이

두 폼의 디자인이 동일해서 하나의 CSS로 빠르게 작업할 수 있었다.

 

<form class="auth-form">
    <div class="auth-input-area">
      <label for="email" class="auth-label">이메일</label>
      <input id="email" class="auth-input" type="email" placeholder="이메일을 입력해주세요." />
    </div>
    <div class="auth-input-area">
      <label for="password" class="auth-label">비밀번호</label>
      <div class="password-input-area">
        <input id="password" class="auth-input" type="password" placeholder="비밀번호를 입력해주세요." />
        <!-- TODO: 비밀번호 보거나 가리는 기능 추가 -->
        <button class="show-password-button" type="button">
          <img src="./images/auth/btn_visibility_off.svg" alt="비밀번호 보기" />
        </button>
      </div>
    </div>
    <button type="submit" class="button auth-button">로그인</button>
</form>

 

회원가입/로그인 폼은 form 태그로 전체 요소를 감싸 주었다.

이메일과 닉네임 input은 auth-input-area로 한 번만 묶었지만,

비밀번호 입력란에는 비밀번호 보기 버튼을 추가해야해서

password-input-area로 input과 button을 감싸준 뒤에

password-input-area를 기준으로 비밀번호 보기 버튼의 position을 설정했다.

 

이번 미션은 화면 구현까지만 진행하는 거여서 버튼 기능은 구현하지 않았는데,

추후 다른 미션을 통해 기능을 추가할 때 버튼을 바로 찾을 수 있도록

// TODO 주석도 함께 남겨 두었다. 

 

✍️ 코드 리뷰

이번 리뷰에서는 다행히 수정사항이 없었다. (뿌듯)

그렇기 때문에 이번에는 내가 질문들과 강사님의 답변을 정리하려고 한다.

미션 PR을 올릴 때 작업하면서 궁금했던 alt 속성과 svg 태그에 대해 질문 드렸다.

 

 

1. alt 속성

먼저 alt 속성은 이미지를 넣을 때 alt를 반드시 추가해야 하는데

장식 목적의 이미지처럼 특별히 설명이 필요가 없는 경우에는 어떻게 처리하는 게 좋을지 고민이 되었다.

 

alt 속성 같은 경우 장식용이라면 alt=""로 값을 비워두는 방법을 사용한다고 하셨고,

이 방법은 SEO와의 트레이드 오프가 발생한다고 알려주셨다. 🥲

 

https://www.youtube.com/watch?v=pc4RVw691cQ

 

또, alt와 관련된 영상을 추천해 주셨는데

영상을 보면 이 이미지가 어떤 기능을 하는지 알려주어야 한다는 내용을 담고 있는데

이를 보고 앞으로는 이 이미지가 어떤 역할을 하는지에 초점을 맞춰서 alt를 작성해야겠다고 생각했다.

 

2. svg태그

svg태그 질문은 아이콘 같은 경우 SVG 파일을 사용했는데

<svg> 태그로 직접 넣는게 좋을지 아니면 <img> 태그로 불러오는게 좋을지 고민이 되었다.

강사님께서는 <svg>태그로 직접 넣는 방식은 CSS나 JS로 아이콘을 조작해야 할 때 적합하고,

<img> 태그로 불러오는 편이 코드도 깔끔하고 캐싱에도 유리하다고 하셔서

현재 작성한 방식을 유지하기로 했다.

 

 

👏 스프린트 미션 2 후기

어려웠던 Git과 GitHub 관련된 부분도

미션 1을 진행한 덕분에 이번에는 어렵지 않게 바로 할 수 있었다.

 

미션 1 후기와 마찬가지로 미션 2도 작업하는 과정이 꽤 재밌었다.

아직 작업하면서 큰 어려움이 없어서 그런지

이런 미션이라면 강의 듣는 것보다 계속 하고 싶다는 생각이 들었다. 😂

 

또한, 이번에 미션 1, 미션 2 후기를 작성하면서

내가 이전에 작성한 코드를 다시 보게 되었는데

그 과정에서 불필요한 CSS가 눈에 띄었다.

그래서 미션 3 진행할 때 그 부분을 수정할 계획이다.

(후기의 순기능)