프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
8월 20일 (금)
📚 TIL
1. JavaScript 학습
2. 코딩테스트 대비 문제 해결
📮 Feelings
1. JavaScript 학습
fetch API
오늘은 fetch API에 대해서 학습하게 되었다. 이미 들어보았고 잠깐이나마 공부했었던 내용이지만 학습기록을 남기며 학습하지 않았기 때문에 이번 기회를 통해 학습 기록을 남기게 되었다.
먼저 fetch 함수에 대한 기초 사용법을 익힐 수 있었고 주의해야할 점들에 대해 새로운 공부가 되었다. 특히, HTTP 에러가 발생하더라도 reject 되지 않고 네트워크 에러나 요청이 발생해야지만 reject 처리되는 부분을 알 수 있었고 응답 객체에 대한 상태 확인의 필요성에 대하여 학습하게 되었다.
fetch의 두 번째 옵션을 통해 인증 토큰을 위한 헤더 제작이 가능한 것을 알게 되었고 예전에 공부한 인증이 다시 생각나게 되어 인증 부분을 다시 한 번 복습하게 되었다. fetch API를 통해 인증이 가능한 비동기 호출을 다룬 코드를 개발하고 싶어졌다.
fetch API를 통한 비동기 방식의 데이터 조회를 통해 간단한 상품 정보 페이지에 대한 각각의 기능 컴포넌트들을 직접 구현할 수 있도록 학습하며 직접 구현에 성공하였다. 머리 속으로 설계하기가 힘들어서 필기를 하며 구조를 파악하고 천천히 구현하다보니 시간도 굉장히 오래 걸렸지만 점점 익숙해지고 있다.
2. 코딩테스트 대비 문제 해결
백준 - 1939번 문제
문제를 풀 때 생각보다 시간이 오래걸린 것 같지는 않다. 입력값의 조건을 보고 시간복잡도 O(log n)으로 해결하여야 하며 이 시간복잡도를 통해 이진탐색 알고리즘을 사용하자고 생각하게 되었다.
다음으로 다른 입력값인 섬의 개수가 주어지고 섬들을 이어 주는 다리의 정보들이 주어지므로 그래프를 연상하게 되었고 그래프 탐색 방법(섬의 탐색)으로 BFS 알고리즘을 사용하자고 생각하게 되었다.
그리하여 이진탐색과 BFS 알고리즘을 혼합하여 문제를 해결할 수 있었다. 이진탐색을 통해 결과 값을 도출하는 방법에 대하여 좀 더 익숙해진 것 같다.
마치며 🙏
오늘은 이번 주에 중점적으로 다룬 개발하려는 기능의 모듈화를 위한 Component 단위의 개발과 비동기 처리로 데이터를 다루는 fetch API를 통해 간단한 상품 정보 조회 페이지를 직접 구현해보며 단순해 보이면서도 중요 개념이 담겨져 있는 코딩을 할 수 있었다.
눈으로 보기엔 과정이 이해가 빨랐지만 직접 백지 상태에서 코딩을 하는데에는 진행이 빨리 이루어지지 않았다. 그래도 천천히 노트에 직접 관계도를 그려보며 상태와 렌더링에 대해 중점적으로 생각하며 결국 직접 구현에 성공하였다.
오타에 의한 오류와 예외처리에 대한 로직까지 생각하며 코드들을 구현하다 보니 시간이 더 오래 걸린 것 같다. 하지만 주말에 내가 다듬어야 할 부분이 무엇인지 확실히 파악할 수 있었고 주말에 다시 코딩을 해보며 좀 더 내 것이 될 수 있도록 하려고 한다.
이번 주말도 부지런히 움직여야 겠다.
📅 Future Action Plans
-
주말동안 3주차 학습 내용 다시 구현하며 복습하기
-
주말동안 3주차 회고 TIL 포스팅 하기
-
주말동안 CS 스터디 주제 정하기
-
주말동안 ToDoList 추가 기능 구현하여 정리하여 포스팅 하기
