11월 2주차 (프로그래머스 데브매칭 하반기 - 2)

진행 목표

1. 프로그래머스의 과제와 강의를 최우선적으로 학습
   ->  다른데 눈독 들이지 말고 집중해서 주어진 과제와 강의에 집중 ☆☆☆
2. 리엑트 + 타입스크립트 팀 사이드 프로젝트
   ->  OP.GG와 같은 유사 전적검색기 + Riot API 사용 프로젝트 ☆☆
   

 

금주 진행 완료

• 프로그래머스 데브코스 3기 4주차 - 노션 클론 프로젝트
  
  
• 프로그래머스 데브코스 3기 수업 및 실습 (매일 13:00 ~ 19:00 + 특강)
  
  
• 프로그래머스 데브매칭 (하반기) - 2

---

차주 진행 예정

10월 프로그래머스 프론트엔드 데브 코스 3기
2022년 10월 14일(금) ~ 2023년 3월 15일(수), 5개월간
https://school.programmers.co.kr/learn/courses/14714

[3기] K-Digital Training: 빅데이터 플랫폼 프론트엔드 엔지니어링

 

• 🧡 프로그래머스 데브코스 프론트엔드 3기 🎈🎈🎈
  
• 🧡 리엑트 복습 + 타입스크립트 사이드 프로젝트 (with Riot Api) 🎈🎈

 

 

---

한주의 사설

저번주는 독학하느라 바빠서 아예 밀린김에 주차도 맞출 겸 2주만에 쓰는 근황이다  😉

이번 주차에는 드디어 프로그래머스 데브매칭을 봤다. 이전 데브매칭에서 너무 어려워서

 

손도 못대고 나왔었는데.. 이번 과제가 쉬웠던 것도 있고 이제는 보고 무엇을

 

해야 될지 알 수 있어서 조금은 발전한 기분이 든다 🤣

 

자세한 과제 설명은 안될 거 같아서 만든 과제를 다시 구현한 것

https://zerosial.github.io/prg_winter2_table/

2022 Dev-Matching: 웹 프론트엔드 개발자(하반기)-2

이전 과제에서 중심적으로 물어봤던 주제에 대해서 고민한 적이 있는데 (2021 ~ 2022년)

1. SPA 혹은 컴포넌트 분할이 JS로 가능한가 (재사용성)
2. Fetch를 활용하여 API와 통신이 가능한가
3. History API 혹은 Router 기능을 JS로 구현이 가능한가
4. Debounce , Throttling등의 테크닉을 응용 가능한가
5. LocalStorage 등을 활용하여 유저의 특정 동작에 대응 가능한가
6. Async Await를 사용하여 능동적인 비동기 조작이 가능한가
7. 간단한 CSS나 DOM 선택 및 조작이 가능한가
8. 이벤트 버블링을 통한 접근 (Closest , Dataset 등의 조작)이 가능한가
9. 이벤트 디스패치 등을 통한 이밴트의 생성 부착 등이 가능한가
10. 캐싱 , 메모라이징 구현으로 최적화가 가능한가.

 

 

이번 과제에서는 저중 1 , 2 , 6 , 7 , 8 을 중심적으로 물어보는 과제라고 생각된다.

 

단 시간을 좀 많이 잡아먹고 구상에도 시간이 오래 걸리는 router는 아예 빠져있었고

기능이 이전 과제와 다르게 딱 1개만 구현하면 되며 데이터의 양 자체가 적고

 

단순한 하나의 기능 (테이블)만 구현하는 과제라서 시간이 아주 넉넉했다.

 

처음에 설정이 과제관과 조금 달라 30분정도 설정에 시간을 잡아먹어 버려서

 

과제를 다 구현하지 못할 것이라고 생각했는데 의외로 구현을 다 종료하고

 

변수와 상수 분리 및 에러 , 최적화등을 다 하고도 시간이 1시간정도 남았다. 😗

 

작성하면서 고려한 사항은 다음과 같다.

1. 비슷한 테이블을 재사용할 때 다른 테이블에 영향을 주지 않는가 (독립성)
2. 데이터의 길이가 20 ~ 100등 여러 종류일 때 정상 작동하는가
3. 도중 페이지에서 View 조작 (5개  < - > 15개) 시에 초기화 해주기
4. 데이터의 종류 체크 (배열 안에 객체가 들어가고 각 객체에는 4개의 필수요소)
5. 통신 시 에러 발생 등에 대한 예외체크

또한 저번주부터 프로그래머스에서 세미 프로젝트를 시작했다 (노션 클론 프로젝트)

지금까지 배웠던 모든 기능 (상단에 적은 10가지 요소)를 버무린 프로젝트로 만들고 싶어서

 

작성하다 보니 점점 코드가 길어지고 있다.. CSS까지 넣는다고 치면 생각보다 커질 것 같다

 

 

이전 구현에서 디자인은 모든 작업이 끝나고 넣으려고 해서 뼈대만 완성..

해당 프로젝트 후기는 따로 글로 적을 예정이다 😃

 

 

---

학습 목표 (진행 예정)

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/

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

 

https://patterns-dev-kr.github.io/

Home

1순위 -> 바닐라 자바스크립트로 웹 컴포넌트 만들기

2순위 -> 바닐라 자바스크립트로 상태관리 하기

---