작성하게 된 계기
코드잇 프론트엔드 부트캠프에 합류한 지 3주가 훌쩍 지나갔다.
그동안 매일매일 강의를 듣고 과제를 수행하느라 정신이 하나도 없었다. 동시에 배운 건 정말 많은 것 같은데, 내가 얼마나 성장한 거지? 에 대한 이렇다 할 지표가 없어 아쉬웠다.
그래서 매주 진행하는 위클리 미션을 되돌아보며
- 이번 주에 내가 어떤 코드를 작성했고,
- 그 과정에서 어떤 어려움이 있었는지,
- 또 어떻게 해결했는지
등을 아주아주 간략하게 기록하려고 한다.
(그리고 기록으로 남겨두면 나중에 비슷한 문제를 겪었을 때 다시 찾아볼 수 있지 않을까)
위클리 미션은 다음과 같이 진행된다.
- 매주 월요일 디자인 시안과 요구사항을 Figma로 전달 받는다.
- 요구사항에 맞게 코드를 작성하고 제출하면, 다음주 월~수 기간 동안 멘토분께 코드 리뷰를 받는다. (제출은 github에 PR을 날리는 방식으로 진행한다.)
- 저번 주 코드 리뷰에 대한 리팩토링과 이번 주 요구사항에 맞는 코드 작성을 동시에 진행하는 방식으로 매주 진행한다.
1-2주차 위클리 미션
코드 리뷰가 2주차부터 진행돼서 1-2주차를 한번에 작성했다.
디자인 시안 확인
1주차 디자인 시안과 요구사항
2주차 디자인 시안과 요구사항
요구사항 파악
1주차 요구사항은 다음과 같았다.
- PC 사이즈의 UI를 구현하고, meta 데이터를 사용해서 미리보기 기능을 구현하고, 각 버튼이나 아이콘을 누르면 페이지로 이동하는 것까지.
2주차 요구사항은 1주차에 완성한 코드를 확장해 반응형 웹(데스크탑, 태블릿, 모바일)을 제작하는 것이었다.
1-2주차 코드 리뷰
처음으로 코드리뷰를 받아 봤다.
처음으로 github를 통해 PR을 보내서 코드 리뷰를 받아봤다.
PR 내용으로만 질문을 남겼는데 다음부터는 코드에 직접 질문을 추가하는 방식을 사용해야겠다.
코드를 작성하면서 애매하거나 궁금한 것들은 거의 다 질문했던 것 같다.
코드 리뷰를 받고 리팩토링을 진행했다.
폴더 구조
현재는 메인 페이지의 html, css만 작성하지만 계속해서 확장해나갈 수 있다고 생각했다.
그래서 index.html과 styles.css를 고정으로 생각하고,
각 페이지들을 pages 폴더 안에서 관리하려 했다. 그리고 이미지 등의 리소스들은 public 폴더로 관리하려 했다.
├─ pages/
├─ faq/index.html
├─ privacy/index.html
└─ signin/index.html
└─ public/
/index.html
/styles.css 구현과 리팩토링 - header 태그를 "position: sticky"로 리팩토링하기
첫 화면에 보여지는 콘텐츠를 뭐라고 이름 붙여야 하지 고민했는데 hero 콘텐츠라고 많이 부르는 것 같다.
원래 header 안에 hero 콘텐츠를 같이 작성했는데 이를 분리했다. 그리고 header를 fixed로 구현했는데, sticky가 적절할 수 있다는 코드 리뷰를 받았다. 그래서 리팩토링을 진행했다.
처음에 sticky가 제대로 적용이 안 돼서 며칠을 고생했다.
알고보니 header의 부모인 body 태그의 height가 100%인 게 문제였다.
header 태그 안에 있는 hero 콘텐츠를 제거했다
sticky를 사용할 때는, 부모 요소의 height 값을 주의해야 한다.
구현과 리팩토링 - 관심사의 분리
1주차에서 데스크탑 사이즈만 고려해서 코드를 작성하고 나서
2주차에 반응형 웹으로 수정하려니 코드가 엉망이 됐다.
그래서 css를 작성할 때, 맨 하단에 @media query 부분을 모아뒀는데, 리팩토링할 때 불편했다.
예를 들어 header를 리팩토링하는데 css 파일 내에서 계속 위로 갔다가 내려갔다가 하는 불필요한 시간 낭비가 많이 발생했다.
그래서 모든 영역을 분리하고, 각 영역을 개발할 때 태블릿, 모바일 버전을 한번에 개발했다. 그러다 보니 개인적으로 생각할 때 css 코드의 가독성도 높아지고 리팩토링하기가 편해졌다.
하나의 css 코드 영역에 반응형 코드를 병합해서 가독성을 높였다.
구현과 리팩토링 - css grid로 변경하기
모바일 버전으로 넘어갈 때 이미지와 글자의 배치가 변경된다.
원래 figure 태그에 display:flex를 사용해서 이미지와 글을 표현했다.
모바일 버전에서 배치가 변경될 줄 모르고 했던 건데, 모바일 버전 코드를 작성하려니 어떻게 css를 적용해야 할지 막막했다.
그래서 선택한 방식이 html 에 똑같은 p 태그를 하나 더 만들어서 모바일 버전에서만 그 p 태그를 보여주는 식으로 배치가 변경되는 것에 대응하려 했다.
당장의 요구사항을 구현하는 데는 무리가 없었지만, 재사용하기가 어려운 코드였다. 그래서 grid를 처음으로 적용해봤다.
grid를 적용하기 위해 html 구조도 변경했다. 오히려 html 구조도 단순해졌다.
flex 대신 grid를 사용했다.
grid를 쓰기 전까지는 약간의 거부감이 있었다.
flex가 편하니까 이것만 쓰고 싶다..!라는 안일한 생각이었다.
근데 이렇게 코드를 작성했더니 문제가 발생했다.
평소에는 grid에서 1fr을 쓰면 되는 구나! 라고 피상적으로만 이해하고 있었다. 근데 내가 제작해야 하는 UI는 요소 간 높이가 달랐다. 글자의 높이와 이미지의 높이가 다른데 이걸 1fr로 일괄 적용하니 문제였다.
grid 안의 내용들이 grid를 뚫고 튀어 나왔다.
다행히 auto 값을 줘서 해결할 수 있었다.
(하루 종일 고민한다가 eva의 도움을 받았다)
해결 방법은 1fr이 아니라 auto를 주는 것이었다.
기타 - 구현하면서 배웠던 것들
사용자의 폰트 사이즈 변경 대응하기
html에 font-size: 62.5%를 주고
body에 font-size: 1.6rem을 줘서
계산하기 쉬운 0.1rem == 1px 구조가 되도록 만들었다.
이미지 주변 불필요한 공백
div 태그로 img 태그를 감쌀 때 불필요한 공백들이 생겨서 거슬렸다.
- vertical-align을 조절해주거나, line-height를 0으로 만들어버리거나
- img 태그를 block 요소로 바꿔버리거나
- div 태그에 display: flex를 적용하거나
- ...
3주차 위클리 미션
디자인 시안 확인
3주차 디자인 시안과 요구사항
요구사항 파악
로그인 페이지와 회원가입 페이지를 만들고
간단한 로그인/회원가입 로직을 구현하는 게 요구사항이었다.
적절하지 않은 입력을 했을 경우 alert 창으로 안내해준다.
데스크탑 사이즈에서 태블릿 사이즈로는 가로 여백만 줄어들고,
모바일 사이즈에서는 여백이 좌우 32px만 남게 된다.
html, css는 사실 저번 주차의 연장선상이었고 회원가입/로그인 페이지 자체는 복잡한 구조는 아니었기에 쉽게 구현할 수 있었다. 문제는 JS였다!
폴더 구조
저번 주차에 구현한 폴더 구조를 이어서 사용했다.
페이지가 많아졌는데, pages 폴더로 관리해서 다행인 것 같다.
js에서 자주 사용할 법한 함수들을 utils 폴더 안에서 관리하기 위해 utils 폴더도 만들었다.
├─ pages/
├─ faq/
index.html, styles.css
├─ privacy/
index.html, styles.css
├─ forgot-password/
index.html, styles.css
├─ my-link/
index.html, styles.css
├─ signin/
index.html, styles.css
└─ signup/
index.html, styles.css
├─ utils/
└─ public/
index.html
styles.css 주요 구현사항
-
document.querySelector를 매번 길게 사용하는 게 귀찮아서 getElem 함수로 묶어서 짧게 사용했다.
-
요구사항에서는 단순히
test@codeit.com을 검증하라고 했지만, 앞으로 계속 확장될 것 같기도 하고 localStorage를 연습도 해볼겸 여기에 데이터를 임시로 저장하고 테스트하는 방식을 선택했다. -
회원가입 페이지에서 문제를 겪었다.
이메일 주소를 제대로 입력하지 않고 focusout 이벤트가 발생하면 alert 창으로 알려준다.
근데 이때 이메일 관련 alert 창을 받은 상태에서 바로 비밀번호 input 요소를 선택하면 click 이벤트가 발생해 비밀번호에서 focusout이 바로 발생한다. 사용자가 비밀번호를 입력하기도 전에 제대로 입력하라는 alert 창을 받는 것이다.
그리고 비밀번호 input에서 hide 아이콘을 click해도 focusout이 발생해버리는 것이었다.
이벤트 타입을 로그로 찍어보니,
클릭을 하는 순간, focusout 이벤트가 먼저 발생하고 click 이벤트가 뒤이어서 발생하는 게 문제였다.
그래서 생각해본 방식이 뭐였냐면, setTimeout 함수를 사용해서 focusout 이벤트를 강제로 뒤로 미루는 방식이었다. 그리고 나서 아이콘을 클릭하는 순간 flag 변수에 true를 줘서 focusout 이벤트가 발생하지 않도록 강제로 변경했다.
근데 아무래도 이벤트를 이렇게 임의로 지연시켜서 해결하는 게 너무 인위적이어서 찝찝하다..
나름대로 해결책을 생각했는데 여전히 찜찜해서 질문을 남겨두었다.
제출 완료!
최대한 요구사항을 충족한 상태에서 제출했다.
이제 다음 주에 코드 리뷰를 받고 리팩토링을 진행할 것이다.
코드 리뷰를 기다리며 무수히 많은 질문들을 쏟아냈다..
마무리
개발 공부를 시작하고 나서 처음으로 코드 리뷰를 받고 리팩토링을 진행해봤다.
요구사항에 맞게 코드를 작성하는 것도 처음이었다.
사실은 전부 다 처음이었다.
강의를 듣는 시간도 부족한데, 틈틈이 시간을 쪼개 리팩토링에 온 시간을 쏟았다.
덕분에 html/css에 대한 약간의 자신감이 생겼다.
그리고 혼자서 공부하는 게 아니라 피드백을 받으면서 코드를 작성하니
막연함도 많이 사라지고 있다.
물론 코딩은 여전히 어렵다!
