CodeSquad Day 26 : Front-end Week 1

 

CodeSquad🔹Day 26

✨ First Front-end Mission!

힘겨웠던 CS10이 끝나고 내심 기다리던 첫 번째 프론트엔드 미션은 바로 카카오 페이지를 클론하는 것이었다. 자바스크립트 적용하는 건 역시나 쉽지 않아 보였는데 그래도 HTML & CSS 까지는 할 만해 보였다. UI 자체가 복잡하진 않기 때문이다. 그리고 이번엔 반응형을 하지 않아도 된다고 해서 부담이 좀 덜었다. 하지만 나중에 어차피 해야 한다.

 

10:30~12:00 Orientation by Crong

10시에 이번 조원 분들과 인사과 스크럼을 하고, 10시 반에 크롱이 하는 미션 소개를 들었다. JK가 하던 미션 소개처럼 30분 정도면 끝날 줄 알았는데 1시간 반이 훌쩍 지나 12시에 끝났다. 첫 FE 수업이기도 해서 출석도 부르고 단체사진(이라고 하지만 화면 캡쳐 ㅋㅋ)도 찍었다.

크롱은 1시간 반동안 다양한 이야기를 해 주셨다. CS10 과정의 의의, 기본기가 탄탄한 개발자가 되는 것의 중요성, PR을 보내는 방법 등.

그리고 사전 지식에 대한 설문이 있었는데 여기서도 내가 모르는 게 많아서 정말 공부할 것이 끝도 없이 스택에 쌓이고 있는 기분이 들었다.

 

2:00~4:40 Class by Crong

CS10 과정에서는 수업이 화, 목요일이었지만 이제는 수업이 월, 목요일이다. 그래서 오늘 크롱을 두 번 보게 되었다. 수업은 무려 4시 40분 쯤에 끝이 났다.

브라우저를 새로고침 했을 때 일어나는 일, 렌더링 과정, CSS에 대한 수업이었다. 수업 들으면서 내가 몰랐던 것들을 구멍을 메꾸고, 까먹었던 것들은 다시 머릿속에 집어넣을 수 있었다.

수업이 끝나고 마지막에는 CSS 단위에 대한 질문을 했다. rem, em, px 등 다양한 단위가 있는데 어떤 단위를 써야할 지 헷갈렸기 때문이다. 일단 폰트는 현업에서는 rem을 많이 쓴다고 한다. px의 경우 목적에 따라서 좀 다를 수 있다고 했다. 현업에서 어떤 식으로 쓰는지가 가장 궁금하다.

 

수업이 끝난 후 마무리 스크럼까지 약 1시간밖에 남지 않았기 때문에 미션을 구현하기엔 시간이 부족했다. 코드리뷰를 받기 위한 깃허브 설정하는 데 시간을 다 썼다. 이것도 꽤나 복잡해서 애를 먹었다.

 

Mission!!!

밤 산책을 다녀온 후에는 미션에 몰입했다. 낮에 구현을 아예 못했기 때문에 이 시간을 제대로 이용해야 했다. 그 결과 아래의 캡쳐와 같은 결과물이 나왔다. CSS를 정말 오랜만에(올해로는 처음) 했는데 그래도 기억에 남아 있어서 다행이었다.

왼쪽이 내가 한 것, 오른쪽이 카카오페이지 사이트

구현하기 전, 우선 커밋 메시지를 어떤 식으로 할 것인지에 대한 나름의 규칙을 먼저 세우고 마크다운으로 정리했다.

그리고 HTML 요소에게 클래스 이름을 주기 위한 방법론 중 BEM을 적용하기 위해 규칙을 다시 살펴보고 적용했다.

최대한 가독성 좋게 마크업하고 CSS를 짜 보려고 노력은 했지만, 코드 리뷰를 받아야 내 코드의 부족함을 알고 개선할 수 있을 것 같다.

문제는 이제 자바스크립트를 잘 적용하는 건데, 학습이 정말 많이 필요하다! 브라우저 동작 원리도 복습해야 하고. 어렴풋이 알거나 모르는 것들을 이번 주에 싹 학습해야겠다.

 

앞으로의 회고 방법

지금까지는 CodeSquad Log에는 코드스쿼드 정규 시간(오전 10시부터 오후 6시까지) 동안의 기록만 하고, TIL은 하루의 전체 회고를 종합적으로 해 왔다. 그런데 평일에 두 개의 포스트나 올리는 게 심적으로 부담이 되고, 어차피 앞으로는 평일엔 거의 코드스쿼드 미션을 할 예정이어서 앞으로 큰 이변이 있지 않는 한 평일에는 CodeSquad Log를, 주말에는 TIL을 올리는 식으로 하려고 한다. 조금 더 질이 높고 도움이 되는 회고를 적어볼 수 있도록 해야겠다.