프로그래머스 데브코스 프론트엔드 3기
✓ TIL DAY - 27
🗓 오늘은...
고양이 사진들을 많이 봐서 힐링하는 느낌
오늘은 강의를 통해 검색기를 구현했다. 자동완성 API와 디바운스를 활용하였고 상태 값이 바뀔 때만 setState를 한다던지 방향키로 목록을 고를 수 있는 기능들을 구현해보았다. 반복적이라고 느껴지기도 하지만 소소하게 새로 배울 점들이 생겼다. 이전에 구글 클론하며 여러 기능을 사용해보았는데 vanilla JS로 구현하는데 큰 의미가 있다고 느꼈다. 여전히 상태 관리가 어렵긴 하지만 프로젝트 리팩토링을 통해 더 학습해보려고 한다.
6주 차 과제 마무리
오늘 배운 내용들을 참고하며 과제를 마무리 지었다. 이번 과제에서는 예외처리와 상태 값의 타입을 체크하는데 시간을 들였고 validations라는 파일에 따로 유효한 값인지 확인하는 함수들 export 하였고 이를 활용해서 정리했다. 중복이 많이 줄었고 수정이 필요할 때 쉽게 고칠 수 있는 점이 편리했다. 과제를 진행하며 여러 가지 시도들을 해보았고 내일 PR 궁금한 점에 이런 시도들이 괜찮았는지 질문해보려고 한다.
로토님의 특강!
9시 정도에 시작한 특강에서는 strapi를 활용하는 방법에 대해 학습했고 이전에 GraphQL이나 Rest API에 대해 공부해본 내용이 도움이 되었다. 토이 프로젝트나 프로토타입 배포에 강점이 있을 것 같다고 느꼈고 headless CMS(content management system)의 개념도 알게 되었다.
새롭게 배운 것
- initialState를 하위 컴포넌트에 밀어 넣어 두면 마지막 작성한 내용을 기억하게 하는 작업이 가능해진다.
- strapi 활용법
- 정합성을 확인하는 방법들 (isArray, typeof)
- includes를 통해 문자열 포함 여부 확인이 가능하다.
오늘 깨달은 점
- main과 App을 분리하는 이유
- App 컴포넌트를 여러 개 만들 수 있다.
- 컴포넌트를 선언하는 곳과 실행하는 곳을 분리하기 위함이다. (C나 Java는 Main 함수가 따로 구분되어있어 괜찮지만 자바스크립트는 경계가 모호하여 구분하여 준다.)
- 로컬 캐시를 만들어 fetch를 줄일 수 있다.
- 상태 값을 활용해 cursor 기능 구현법
참고했던 자료
Headless CMS - Top Content Management Systems | Jamstack
Check out this showcase of some of the best, open source headless CMSes. This is community-drive so be sure to submit your favorite CMS today!
jamstack.org
Strapi - Open source Node.js Headless CMS 🚀
Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.
strapi.io
'프로그래머스 데브코스 > TIL' 카테고리의 다른 글
| TIL - Day 29~30 (0) | 2022.11.26 |
|---|---|
| TIL - Day 28 (1) | 2022.11.24 |
| TIL - Day 26 (0) | 2022.11.21 |
| TIL - Day 25 (0) | 2022.11.20 |
| TIL - Day 21~24 (0) | 2022.11.18 |
