Webucks 팀프로젝트 회고록

서론

약 3주 동안의 사전 스터디가 끝나고, 개강을 맞이한 나를 포함한 풀스택 3기 인원들은 벌써부터 녹초가 되며 2주 간의 pre-course 끝을 맞이하였다. 개강 전엔 HTML은 뼈대, CSS는 살, Javascript는 두뇌라는 표현만 머리 속에 맴돌던 나는 만족하진 않지만, 얼추 스타벅스 홈페이지에 가까운 웹페이지를 만들 수 있게 되었다. 물론 구글링과 멘토&팀원들의 꿀팁은 필수!

본론 - Webucks 결과물

pre-course에서 제일 값진 순간은 이 때까지 공부한 HTML, CSS, Javascript를 활용해 간단한 Webuck 웹페이지를 구축한 것이었다.

구현 로직

<로그인 페이지 구현>

• HTML: 로그인 박스를 하나의 태그로 묶고, 묶어진 로그인 박스를 3등분(로고,input box & button,비밀번호 잊어버린 여부를 묻는 텍스트) 하였다.
• CSS: flex를 활용하여 justify-content와 align-items 값으로 center를 주고, flex-direction을 column으로 설정하여 모든 요소들이 세로방향으로 중앙 정렬하게끔 설정해주었다.
• Javascript: 아이디에 @가 들어갔는지, 비밀번호는 8자리 이상인지 이 두가지 조건을 체크하는 isvalid() 함수를 생성하였고, 아이디 자리에서든, 비밀번호 자리에서든 두 가지 모두의 경우에서 로그인 비활성화/활성화가 일어나도록 querySelectorAll().forEach()를 활용하였다. 또한 로그인 버튼이 활성화되었을 때 클릭하면 list.html로 이동하도록 addEventListener() 함수를 만들었다.
  login.js 버튼 활성화/비활성화 처리 함수
  
  Login Page
  

<리스트 페이지 레이아웃 구현>

• HTML: 크게 header, 콜드브루 내용을 담을 container, 브루드 커피 내용을 담을 container 이렇게 3개로 나누었다. 그리고 두 container는 둘 다 container-header와 image-list 이렇게 2개로 구성되게끔 설계하였다.
• CSS:: 처음엔 flex로 image들을 담은 list를 정렬하려고 했지만, 콜드브루 container 부분에서 4-4-2구조로 이미지가 배열되었을 떄 Mission 3을 따라 마지막 2개의 image가 왼쪽에 쏠리게끔 justify-content: flex-start로 하게 되면, 오른쪽 공간이 왼쪽에 비해 너무 남게 되어 포기하였다. 그 대신 사용한 것이 바로 grid이다. grid-template-rows 와 grid-template-columns를 통해 간격에 맞춰 이미지가 위치할 곳을 정확히 설정해 줄 수 있어 flex보다 깔끔한 구현이 가능했다
  grid로 이미지 리스트 정렬
  
  Page Layout
  

<상세 페이지 레이아웃 구현>

• HTML: body 안의 구조는 크게 header, 커피 상품 내용을 담을 container, 여러 웹사이트 관련 정보를 담은 footer 이 3가지로 나눠지며, 다시 container는 sub-title, image, coffee 설명란 3가지로 더 쪼개지는 구조이다.
• CSS: 이전 리스트 페이지 때처럼 grid를 기반으로 grid-template-rows 와 grid-template-columns를 통해 container 부분 레이아웃을 디자인하였고, header와 footer는 flex를 기반으로 justify-content: space-between 을 통해 요소들을 정렬하였다.
• Javascript: 상세 페이지에서 자바스크립트로 구현한 부분은 리뷰란에 댓글을 다는 기능이다. 화면 상으로 리뷰라는 큰 글씨와 comment를 달 input box 사이에 ul 태그로 감싸진 빈 공간이 존재하는데 addComment()라는 함수를 통해 input box로 댓글을 입력할 때마다 댓글 내용이 들어간 li 태그가 생성되고 ul 태그 안으로 들어가게 되면서 리뷰란에 comment들이 쌓이게 된다.
  enter시 마다 발생할 addComment()가 담긴 addEventListener()
  
  Review
  

해낸 것

• 5일동안 Mission 1~5를 끝낸 것

• Webucks 주요 기능들 (로그인 활성화/비활성화를 통한 접속 기능, 리스트 페이지 레이아웃 구축, 이미지에 마우스 올리면 확대, 리뷰란에 댓글 남기기)이 정상적으로 잘 작동하는 것

• HTML, CSS, Javascript에 관해 기본적인 개념이 잡히고 배운 걸 응용하여 간단한 웹페이지 제작이 가능해진 것

• 특히 CSS에서 flex와 grid로 레이아웃을 구현하는 능력 향상!

아쉬운 점

• 반쪽짜리 반응형 웹페이지
  웹페이지 화면 크기를 축소 및 확대시 모양이 자연스럽게 변하며 보기 편하게 구현됬어야 하지만 실패.. 미디어 쿼리 공부 필요!

• 하트 구현 실패
  이유는 모르겠지만 클릭해도 색깔 변화가 없어 추가 구글링 필요!

• 세부사항을 신경쓰느라 시간이 너무 오래 걸려 Mission 진행 Delay
  제대로 된 설계없이 진행했었기도 하고 약간의 강박증으로 인해 미세한 margin, padding 조절에 시간 투자를 많이 했는지 개발 과정에서 시간이 너무 오래 걸렸다.

• 클래스, 변수 네이밍이 잘 안된 느낌
  한눈에 봤을 때 직관적으로 알아볼 수 있도록 네이밍을 하고 싶었지만, 초반 설계시 부주의로 임의로 네이밍을 해버렸어서 시간 부족으로 실패.. 리팩토링 시 수정을 했지만 추가 보완 필요!

더 공부할 것

• 클래스,변수,함수 네이밍

• bottom-up 방식으로 웹페이지 설계

결론

결과적으로 pre-study 과정을 통해 HTML, CSS, Javascript에 관한 기초를 다질 수 있었고, Webucks 구현을 하는 동안 생긴 여러 실패와 얻은 조언을 통해 배운 기초 지식을 활용하는 능력 또한 늘었다고 생각한다. 물론 리엑트도 공부해봐야겠지만 결론은 백엔드 개발자가 답인 거 같다