프론트엔드 개발을 위한 자바스크립트 - 4주차 (수료후기)

 

 

 

https://school.programmers.co.kr/learn/courses/14723

[스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

 

 

---

 

서두

4주 차 미션은 1~3주 차의 총집합이었다. 생각해야 될 것도 많았고 추가해야 될 기능도 많았다.  🙄

상세 작업목록은 더보기를 누르면 나온다.

## 작업 목록 (4주 차)

### 필수 구현 사항
- [x] 각각의 API 연결하기
- [x] 각 API의 비동기 통신을 컴포넌트로 연결하여 구현하기

###  Users 컴포넌트
- [x]  Users 컴포넌트를 만들어서 사용자 목록 노출
- [x]  특정 사용자를 클릭하여 그 사용자의 todos 리스트 노출
- [x]  현재 뿌려진 todos가 누구의 todos인지 표시

### API가 느린 경우의 인터랙션 처리
- [x] 로딩 중임을 사용자에게 알리는 처리 및 오작동하지 않게 하는 각종 처리를 고안
- [x] Skeleton UI를 사용하여 사용자의 이탈 막기

### 미니 트렐로
- [x]  TodoList 컴포넌트를 완료 목록과 미완료 목록으로 로딩
- [x]  하나에는 isCompleted가 false인 todo 목록
- [x]  하나에는 isCompleted가 true인 todo 목록

### Users 컴포넌트에 기능 추가하기
- [x]  LocalDate 연동을 통한 favorite 저장 기능
- [x]  선택창을 통해 좋아요 / 전체 리스트 조회 가능

### 유용성을 위한 추가
- [x]  사용자 (user) 좌우 이동 화살표 등을 통해 다음 사용자로 넘어가는 기능
- [x]  검색창을 추가하여 사용자를 직접 지정하는 것

 

---

 

간단히 보는 기능

기본 데이터 (brian)에서의 추가 , 삭제 , 클리어 , 각 완료 / 미완료 간의 이동 (API)

우측 리스트를 통해 다른 사람의 데이터를 가져와 수정 가능 (API)

하단 좌 우 화살표를 통해 전체 리스트 조회 및 검색창으로 유저 이름 직접 입력 (API)

 

Favorite 기능을 이용하여 언제든지 전체 목록 혹은 좋아요 목록 조회 (로컬 스토리지)

 

 

 

---

 

 

사용하는 기술 스택

• Javascript🐱‍🏍
  시작이자 끝 처음이자 전부
  
  
• TailwindCSS
  수업 중에 사용하지 않는다. 사용하는 감을 잃지 않으려고 틈틈이 쓰는 중
  
  
• HTML + CSS
  과정 중엔 없고 기초적인 지식만 알면 된다.

 

---

4주 차 미션을 하며

이번 미션을 하면서 가장 고생했던 것은 Asyne , Await 그리고 이러한 데이터를 기다리는 와중

어떠한 기능(SkeletonUI 등)을 미리 동작시켜야 할지 등에 대한 고민을 하게 되었다. 😑


어떠한 Await가 끝나기 전에는 정지하고 그 대기상태가 끝난 다음 무언가를 하고 싶을 때

즉 API PUT을 통해 TODO를 수정하였을 때 이후 GET은 이 PUT가 끝난 다음에 작동해야 하고

 

이러한 작업을 Promise. then으로 이어주자니 이미 구조 자체가 asyne , await에다가

 

컴포넌트단으로 기능이 흩어져 있어서 순서를 정하는 방법에 있어서 고민을 하게 되었다. 😣

수요일 실강 때 로토 님에게 이러한 점에 대해서 물어보니

 

낙관적 업데이트 (API단에서 들어가 줄 것이라 확신하고 미리 화면을 그리는 법)

에 대해서 들을 수 있었다. 생각해보면 구조상 API콜을 여러 번 나누지 말고

 

Fetch 한 데이터를 전역 변수 등에 보존하면서 그 데이터의 업데이트 , 갱신을 관리하다가

 

최후에 종료 전에 그 API를 틈틈이 순차적으로 교환하면 된다는 점을 깨달았다. 😁

 

 

그리고 이어서 이러한 작업들을 편리하게 해 주는 것이 React-Query 라던지 

지금껏 이유를 잘 모르고 한 번씩 써왔던 리덕스, 리코일의 중요 기능이라는 사실을 알았다.

JS에서 고통받는 번잡한 고뇌를 해방시켜줄 그대여..

다음에 다시 VanillaJS로 작업하게 된다면 작업을 할 때마다 API콜을 하는 게 아닌

1. 이러한 API에서Fetch 한 데이터를 먼저 가져오고
2. 내부에서 추가 삭제 코멘트 등의 각종 기능들은 되도록 로컬 스토리지 단에서 처리
   
3. 최종적으로 작업이 끝나거나 새로운 작업으로 넘어갈 때 지금까지 했던 작업을 API로 PUT

하는 흐름으로 제작해보고 싶다. (데브 코스에서 6주간 다시 VanillaJS를 시작할 때 자체 하드모드)

 

 

---

면접 공부한답시고 머리로만 외우던 CSR , SSR에 조금 더 상급 개념 (Next.js에서 쓰는)

ISR(Incremental Static Regeneration)과 DSR(distributed persistent rendering)

 

에 대해서도 정리할 수 있었고 흐름을 익히며 CSR, SSR의 개념을 정리할 수 있었던 것도 좋았다.

 

 

태초의 SSR이 있었으니 서버의 과부하와 스케일링 관리가 힘들어 클라이언트에게 책임을
넘기는 CSR이 있었고 이런 CSR로는 SEO(검색 최적화)에서 불리함을 가질 수밖에 없어서
무식하게 모든 페이지를 미리 만들어버리는 SSG가 나왔으나 마치 노가다판에서 모래를
한 땀 한 땀 올리는 노가다에 지친 개발자들은 SSG를 때려 부수고 다시 태초마을의
SSR과 CSR을 섞어서 첫 랜더링은 SSR 나머지는 CSR을 하는 방식에 이르었으니

이 SSR과 CSR을 어떻게 섞냐에 따라 ISR과 SER의 방식으로 다시 분류가 되었다고...

 

자세한 개념과 동작은 조금씩 다르지만 전반적인 흐름을 알고 기억하니 예전처럼 외우지 않고

 

흐름을 알 수 있어서 좋았던 것 같다. 😄

 

 

---

 

정말 배운 게 많고 느낀 점이 많은 스터디였다. 코드 리뷰가 가장 좋은 스터디인 줄 알았는데

 

코드 리뷰도 코드 리뷰지만 단계를 거치는 학습과 흐름이 있는 스터디는 정말 좋다고 새삼 느꼈다.

프로그래머스 프런트엔드 데브코스 에서도 이러한 경험을 다시 할 수 있을 것 같아 너무 설렌다