[스터디] 블랙커피 스터디 레벨1 12기 후기

 

 

블랙커피 스터디란?

블랙커피는 프론트엔드 개발자로서 함께 자라기 위한 스터디 모임입니다. 코드 리뷰와 커뮤니케이션을 통해, 서로 간에 스며드는 지식으로 함께 자라는 것을 목표로 하고 있습니다. 잘하기 이상으로 함께 자라기에 더 관심 있는 분들의 참여를 기다리고 있습니다 😄

• 홈페이지 - NextStep
• gitHub
• Notion

 

참여 계기

• 존경하는 시니어 개발자 분의 추천
• 코드 리뷰에 대한 갈증
  블랙커피 스터디 모집 글의 참여 대상에 나와있는 것처럼 나는 이전에 코드 리뷰를 받아본 경험이 거의 없었기에 내가 짜는 코드가 다른 사람들이 어떻게 피드백받을지가 너무 궁금하고 기대됐다. 

블랙커피 스터디 모집 글의 참여 대상

내용

• 기간: 21.11.16 ~ 21.12.14 (약 1달)
• 데모 링크

 

스터디는 다음과 같이 진행된다.

 

스터디 전
1. 각 주차별 미션 확인 후 각자 레포에서 코드 구현
2. PR 남기고 팀원들 코드에 리뷰 남기기

 

스터디 당일
3. 각 팀원들과 함께 줌 소그룹에 모여 코드 리뷰 회고

    - 구현 시 어려웠던 점, 코드 리뷰 시 궁금한 점 등

    - 만약 코드 리뷰를 뒤늦게 올린 팀원이 있으면 이 때 같이 피드백

 

 

 

1주차 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

•  에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.
  •  메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.
  •  사용자 입력값이 빈 값이라면 추가되지 않는다.
•  메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다.
  •  메뉴 수정 시 브라우저에서 제공하는 prompt 인터페이스를 활용한다.
•  메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다.
  •  메뉴 삭제 시 브라우저에서 제공하는 confirm 인터페이스를 활용한다.
•  총 메뉴 갯수를 count 하여 상단에 보여준다.

 

2주차 - 상태 관리로 메뉴 관리하기

•  localStorage에 데이터를 저장하여 새로고침해도 데이터가 남아있게 한다.
•  에스프레소, 프라푸치노, 블렌디드, 티바나, 디저트 각각의 종류별로 메뉴판을 관리할 수 있게 만든다.
  •  페이지에 최초로 접근할 때는 에스프레소 메뉴가 먼저 보이게 한다.
•  품절 상태인 경우를 보여줄 수 있게, 품절 버튼을 추가하고 sold-out class를 추가하여 상태를 변경한다.

 

3주차 - 서버와의 통신을 통해 메뉴 관리하기

•  링크에 있는 웹 서버 저장소를 clone 하여 로컬에서 웹 서버를 실행시킨다.
•  웹 서버를 띄워서 실제 서버에 데이터의 변경을 저장하는 형태로 리팩터링한다.
  •  localStorage에 저장하는 로직은 지운다.
  •  fetch 비동기 api를 사용하는 부분을 async await을 사용하여 구현한다.
  •  API 통신이 실패하는 경우에 대해 사용자가 알 수 있게 alert으로 예외처리를 진행한다.
•  중복되는 메뉴는 추가할 수 없다.

 

후기

좋았던 점

• 코드 리뷰
  스터디 참여 계기의 9할이 코드 리뷰였는데 되돌아보았을 때도 코드 리뷰가 너무 좋았다. 
  처음엔 대부분의 스터디원이 비슷비슷한 주니어 개발자나 취준생이었기에 많이 배울 수 있을까 약간의 의구심도 들었는데 내 착각이었다. 정말 기초 중에 기초인 Todo List인데, 각자 구현하는 코드도 저마다 다르고 조원들이 정성스럽게 리뷰 달아준 걸 읽으며 피드백받는 것도 재밌었다. 조원들 뿐 아니라 기수 사람들 코드를 보며 배운 점이 많았다. 또, 내가 리뷰 남길 때에도 어떻게 하면 부드럽게 조언해줄 수 있을지, 내가 남기는 정보가 정확한 지에 대해 다시 체크하게 되니 더 공부가 되었다.
• 예쁜 UI
  CSS가 이미 예쁘게 꾸며져 있어서 기능에만 신경 쓸 수 있었다. UI도 깔끔하고 예뻐서 구현할 맛이 났다.

 

 

아쉬웠던 점

• Udemy 강의의 연장선
  11기부터 블랙커피 스터디가 Udemy 강의와 함께 진행됐다.
  나는 강의를 듣지 않고 구현했는데, 강의와 함께 스터디를 진행한 분들 중 강의 내 코드를 90% 이상 비슷하게 구현하는 경우가 종종 있었다. 실제로 이 부분에 대해 다른 분이 강의 코드와 너무 비슷한데 본인이 짠 코드가 얼마나 되냐는 코멘트를 받은 것도 보았다. 나도 PR들을 둘러보면 처음엔 몰랐다가 강의에서 짠 코드라는 게 눈에 들어와 아쉬웠다.
  만약 Udemy와 스터디를 함께 진행하고 싶은 분들은 스터디 이후에 강의를 듣거나 혹은 스터디 이전에 강의를 듣고 어느 정도 내용이 휘발된 뒤에 스스로 힘으로 코드를 짜려고 시도하는 것을 추천한다.
• 낙오
  메이커준님 말로는 마치 어둠의 마법 방어술 수업처럼 팀원분들이 사라진다고ㅋㅋㅋ
  막상 돈을 내고 의지를 가지고 진행하더라도 여러 스케줄이나 실력 등의 이유로 팀원들이 하나 둘 낙오되어 결국 수료까지 남는 인원은 소수였다. 실제 우리 팀에서 첫 번째 온보딩 시간에만 참여하고 그 이후로 사라진 분도 계셔서  안타까웠다.
• 추가 구현
  이건 스스로에 대한 아쉬움인데 몇몇 소수의 뛰어난 분들은 스스로 TypeScript나 테스트 코드를 삽입하는 등 필수 기능에서 요구하지 않은 것들까지 추가적으로 구현하는 걸 보며 감탄했다. 

 

 

추천하는 분들

• 데모 링크나 gitHub 레포를 둘러보았을 때 바닐라 JS로 80% 이상 구현할 코드가 그려지고 자신 있는 분
  이 스터디는 애초에 JS를 가르쳐주지 않는다. 개요를 쭉 훑어보며 스스로 구현에 자신이 있다 느껴질 때 스터디에 참여한다면 더 얻어갈 것이 많다 생각한다.
  실제 프론트엔드가 아닌 다른 분야 개발자분들이나 JS에 거의 자신이 없는 분들이 가벼운 마음으로 참여 후 점점 사라져 가는 걸 보며 아쉬웠다.
• 여러 사람들에게 자신이 짠 코드를 리뷰받고, 본인도 리뷰하며 공부하고 싶은 분

 

마치며

• 나름 바닐라 JS에 자신 있어서 당당하게 시작했는데 다른 분들의 코드와 피드백을 받으며 또다시 겸손하게 스스로를 돌아보고 공부하는 계기가 되었다.
• 블랙커피 스터디의 문구는 언제 읽어도 멋있는 것 같다..! 
  내 코드도 언젠가 블랙커피 같이 누군가에게 잠들기 어려운 훌륭한 코드로 읽히는 날이 오길 바래본다.