CodeSquad Day 49 : Front-end Week 5

 

CodeSquad🔹Day 49

Class by Crong

오전 10시 반부터 오후 1시쯤까지는 크롱의 수업이 있었다. 1부는 코드리뷰, 2부는 프로토타입으로 나눠졌다.

그런데 첫 리뷰로 내 코드가 선택되었다! 이런 경우가 처음이기도 하고, 사실 SASS 위주로 하고 JS는 임시로 빠르게 구현만 했기 때문에 구조화도 안 되어 있어서 좀 당황을 했다. 리뷰는 SASS는 하지 않고 JS만 해주셨기 때문에 더 그랬다. 앞으로는 JS를 임시적으로 구현한 것은 PR 보내지 말아야겠다는 것, 그리고 웬만하면 그래도 어느정도 설계는 시작하고 구현을 해나가야 겠다는 것을 깨달았다.

2부는 프로토타입에 대한 강의였는데 정말 주말에 각을 잡고 제대로 공부해야겠다는 생각을 했다.

 

Mission

수업을 듣고 너무 피곤해서 점심도 먹지 않고 잠들었다가 눈을 뜨니 벌써 2시 20분쯤이었다. 5시가 그룹 리뷰여서 부랴부랴 컴퓨터를 켜고 미션을 시작했다.

이번에는 기능 구현보다는 그전에 index.js 파일에 마구 작성한 로직들을 컴포넌트로 분리하는 리팩토링을 했다.

그리고 키워드를 검색할 때 기존에는 클라이언트 쪽에서 처리하던 것을 express에서 query를 이용해서 검색할 수 있도록 했다.

코드스쿼드 정규 시간이 끝나고 나서는 아래 블로그 글을 참고해서 내 코드에 적용해 보았다. 아직 state 부분은 적용하지 못해서 내일 시도할 예정이다.

 

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일

 

Algorithm

오늘의 알고리즘을 도전했다가 못 풀고, 미리 다음 주 월요일 알고리즘을 풀었다. 내일은 그래서 2개를 풀어야 한다.

First Unique Character in a String - LeetCode

---

밤에 게더타운에 있었는데, 지미가 Event Bubbling을 활용하는 것에 대해서 질문을 해왔다. 도니와 함께 문제상황을 보았다. 추천 검색어 layer는 input 부분을 제외하고 다른 부분이 클릭되면 없어져야 한다. 이 때 document에 click 이벤트를 걸어서 해결하는데, closest를 활용해서 클릭된 target의 조상이 만약 layer가 아닐 경우, 즉 layer 바깥이 클릭되었을 경우 layer를 없애 준다. closest를 활용하는 것을 제안했고, 코드가 깔끔해질 수 있었다.