Daehyunii's Dev-blog

fetch API 란? 1. 비동기 HTTP 요청을 좀 더 쓰기 편하게 해주는 API이다. XMLHTTPRequest를 대체하며, Promise기반으로 동작한다. 2. fetch는 HTTP 에러가 발생하더라도 reject되지 않는다. 3. 네트워크 에러나 요청이 완료되지 못한 경우에만 reject 된다. 따라서 실제로 fetch가 성공했는지 확인을 해야한다. response의 status code나 ok를 체크하는 것이 좋다. 4. 참고로 ok는 status가 200-299 사이인 경우만 true가 되기 때문에, 300대 status에도 처리를 해야한다면 사용이 어려울 수 있다. fetch API 사용하기 1. fetch의 기본 응답 결과는 Response 객체이다. 따라서 json()이나 text()로..

이번 6주차 과제는 기존의 강의를 토대로 최적화 및 간단한 기능을 추가하는 간단한 과제였다. 우선 고양이 사진첩 만들기 강의를 통해서 그 동안 배웠던, 내용들을 복습하는 의미가 강했고 컴포넌트를 구성하고 API를 통해서 서버와 통신하고 또 받아온 데이터를 하위 컴포넌트에게 뿌려주어 이를 활용하는 일련의 과정을 다시 한 번 고양이 사진첩을 통해서 복습하는 과정이었고 그 과정에서 간단한 과제가 주어졌다.요구 사항은 아래와 같다. 과제 기본 요구 사항 1. 지금 구현된 코드에서는 state에 대한 정합성 체크를 전혀 하지 않는데, 이 부분을 보충해주세요. 2. 컴포넌트별로 올바르지 않은 state를넣으면 오류가 발생하도록 해주세요. 3. 각 컴포넌트의 setState를 최적화하여 이전 상태와 비교해서 변경사항..

10월 17일부터 11월 16일 까지는 시간이 어떻게 흘러갔는지도 모르겠다. 블로그를 작성할 시간적 여유가 없을 정도로 개인적으로 공부해야할 것들이 굉장히 많았다. 한 달이라는 기간이 어떻게 보면 코드 구현과 관련해서 사고의 틀을 넓혀주는 과정이라는 생각이 들었다. 그리고 대망의 개인 프로젝트가 11월 7일부터 ~ 11월 16일까지 이어졌다. 노션 클로닝 관련 내용은 후기를 작성해 보았다. 2022.11.17 - [📄 Dev Cours/Personal Project] - Notion cloning(11.7 ~ 11.16) 회고 Notion cloning(11.7 ~ 11.16) 회고 노션 클로닝 약 10일 정도의 시간을 가지고 노션의 기본기능을 구현하는 개인 프로젝트를 진행했다. 우선 기본적인 요구 사항..

노션 클로닝 약 10일 정도의 시간을 가지고 노션의 기본기능을 구현하는 개인 프로젝트를 진행했다. 우선 기본적인 요구 사항들은 다음과 같다. 화면 좌측에 Root Documents를 불러오는 API를 통해 root Documents를 렌더링 합니다. Root Documents를 클릭하면 오른쪽 편집기 영역에 해당 Documents의 Content를 렌더링 합니다. 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다. Document Tree에서 각 Document 우측에는 + 버튼이 있고, 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다. 편집기에는 기본적으로..

데브코스가 시작된지 벌써 3주?.. 아니 무슨 벌써 삼주가... 시간이 너무 빨리 흘러가는것 같다. 매일 열심히는 하고 있다고 생각했는데 3주 동안 무엇을 했지? 라고 물어본다면 설명하기가 어려워 지는것 같다. 슬프지만,, 그래도 오늘도 열심히 공부했다!!🔥 우선 오늘은 데브코스 3주차 과제를 다시 공부하고 구현해 보았다. 강의를 들으며 구현해본 todoList를 강화하는것이 이번주 과제였고, 과제 제출 당일에는 해당 과제를 완벽하게 수행해 내지 못했다. 그래도 이대로 물러날순 없기 때문에 데브코스의 장점을 살려 다른 많은 분들의 코드를 분석하고 또 읽었다. 그 중에서도 코드를 가장 깔끔하게 작성했다고 생각하는 분의 코드를 분석했다. 그리고 공부했고, todoList 코드를 최대한 혼자 작성하려고 노력했..

이번주는..어려웠다 진짜.. 이번 주는 정말 쉽지 않은 일주일을 보낸것 같다. 과제를 함에 있어 SIMPLE TODO LIST를 만들어야 했고, 강의에서도 Local Storage, fetch(), promise 등등 많은 것들을 활용해서 계속해서 TODO LIST를 구현하는 것을 강의했다. 하지만 문제는 컴포넌트 단위로 코드를 구성해본적도, 제대로 본적도 없었기 때문에 코드를 제대로 이해하지도 못했다. 그래서 결국 과제도 제출하긴 했지만,, 내가 봐도 이걸 코드라고 할 수 있나?.. 싶은 느낌이 들었다. 그 동안 기본개념과 동작원리부터 차근차근 충실하게 알아나가야 한다는 생각을 하며 나름대로 열심히 해왔다고 생각했는데 ㅠㅠㅠ 데브코스 과정은 이런 날 기다려주지는 않았다,,,과제를 제출하는 당일에는 멘탈..

3주차 과제 3주차 과제는 이번주 동안 공부한 내용들을 토대로 SIMPLE TODO LIST를 강화하는것이 과제였다. 기본적인 구현들을 되어 있었고, 추가적인 요구사항들이 있었다. 리스트의 삭제 버튼을 추가한다. 리스트를 클릭시 해당 text를 토글시킨다. 해야 할 일 전체 개수와 토글이 된 완료된 할 일의 개수를 표현하는 todoCount 컴포넌트를 구성한다. new 연산자 없이 호출한 경우 에러가 나도록 방어코드를 구현한다. status를 갖는 곳에 validation을 추가한다. 정도가 요구사항 이었던것 같다. 컴포넌트 방식으로 구현하는것이 처음이다보니 코드를 읽는것 조차 쉽지 않았던것 같다. 그래서 처음 과제를 제출해야하는 금요일에는 거의 40% 완성된,,내가 봐도 엉망인 코드를 제출할 수 밖에 ..

DOM객체, 이벤트, 타이머 어제 월요일 강의를 들으면서 많은 당황을 했었다. 바로 바닐라 자바스크립트로 컴포넌트를 구성하면서 'TodoList' 를 만들어 보는 강의였다. 그 동안의 강의에서는 자바스크립트 기초개념, 알고리즘과 자료구조에 대해서 공부를 했었다. 그래서 나에게는 그래도 익숙한 부분이라 그렇게 빡빡하게 느껴지지는 않았다. 그런데 오늘 강의에서는 실제로 어떤 기능을 구현하는(?)것들을 시작했는데 순간 머리속이 하얗게 질렸었던 것 같다. 그러다 곧 내가 무엇이 부족한지를 깨달을 수 있었다. DOM객체를 한 번도 조작해 본적이 없고 이벤트가 발생했을때 이벤트 핸들러를 조작해 본적이 없었다. 그와 더불어 setTimeout, setInterver과 같은 클라이언트 사이드 웹 API도 제대로 개념..