혼자 적어보는 노트

🙌 주말 동안 구현한 과제 내용 📌 보너스 요구사항 ✅ 편집기 최하단에 현재 편집 중인 Document의 하위 Document 링크 렌더링 📌 요구사항은 아니지만 추가한 내용들 ✅ 토글을 열고 추가/삭제 버튼 클릭 시 토글이 닫히는 부분 해결하기 처음에는 낙관적 업데이트 방식을 사용하여 document 추가 시 자동적으로 toggle을 감지하는 isOpne값을 true로 설정하고 해당 document 컴포넌트에 setState를 사용하여 state값만 추가하는 방식을 적용해보기로 했었다. 실패.. map을 사용해서 document를 반복적으로 생성하는 로직이기 때문에 render를하게되면 하위 컴포넌트들이 새로 그려진다는 것을 간과했다. 또한 낙관적 업데이트 이후 서버 업데이트를 하지 않았기 때문에 새로..

✅ 오늘의 학습 오늘도 역시 과제 구현을 중점적으로 진행했다. 과제를 구현하며 가장 많이 본 에러... Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. 보통 javascript module에서 import export시 확장자 명이나 경로를 잘못 입력했을 때 발생하는 오류이다.. 하지만 VanillaJS에서 route에서 url을 변경하고 새로고침 시에도 해당 오류가 발생했다. 이유는 SPA를 구현하기위해 ..

📑 과제 피드백, 복습 오늘은 지난 주에 제출했던 Todo App 과제에 대해 멘토님에게 피드백을 받은 것을 확인하게 되었다. 멘토님이 피드백을 주시기 전에 팀원 분들이 여러가지 적어주었는데 내가 놓치고 있었던 부분들이 많았던 것 같다. 1. 호출되면서 실행되는 함수들은 묶어서 관리하자! const initialize = () => { hasNew(new.target); // ... } initialize(); 생성자 함수가 호출되자마자 실행되는 부분들은 상단에 지저분하게 작성하는 것 보다는 조금은 나누어서 관리를 해주어도 좋을 것 같다. 2. map을 사용한 toggle ✍ 이전에 작성한 코드 const nextState = [...this.state]; const todo = nextState.fin..

✅ 학습 목차 - [DAY 16] VanillaJS를 통한 자바스크립트 기본 역량 강화 (8) ✅ 새롭게 학습한 부분 - 자동 저장 편집기 만들기 (실습) debouce 사용 let timer = null; const editor = new Editor({ $target: $page, initialState: post, onEditing: (post) => { if (timer !== null) { clearTimeout(timer); } timer = setTimeout(async () => { setItem(postLocalSaveKey, { ...post, tempSaveDate: new Date(), }); }, 500); }, }); 이전에 스터디를 하면서 처음 접했던 기능이지만 한번 더 복습 ..

✅ 학습 목차 - [DAY 15] VanillaJS를 통한 자바스크립트 기본 역량 강화 (6) ✅ 새롭게 학습한 부분 - TodoList 만들기 실습 (API 활용) 오늘은 TodoList를 API와 접목시켜서 실습하는 과정에서 처음 알게된 부분이나 기억하고 체크해야 될 부분들을 정리 하기로 했다. 1. 낙관적 업데이트 api요청이 정상적으로 처리될 것이라고 보고 클라이언트 측에 ui로 먼저 업데이트를 시키고 이후에 서버에서 데이터를 받고 업데이트를 하는 방식. = api의 응답이 느릴 때 사용자의 경험 측면을 향상시키기 위함 좋은 방법이지만 서버측에서 오류가 생겼을 때에는 어떻게 처리해야 할 지 한번 더 고려해보아야 할 것 같다 2. 로딩중 처리 state에 isLoading을 추가하여 api요청 전에..

✅ 학습 목차 - [DAY 14] VanillaJS를 통한 자바스크립트 기본 역량 강화 (6) ✅ 새롭게 학습한 부분 - History API 📄 history API 브라우저에서 페이지를 로드하면 세션 히스토리를 갖게 된다. 세션 히스토리는 페이지를 이동 할 때마다 쌓이게 되며, 이를 통해 뒤로가기, 앞으로 가기 등의 이동이 가능하다. pushState / replaceState 두 개의 메서드를 사용하면 화면 이동(새로고침) 없이 현재 url을 업데이트 할 수 있다, ==> 이 특징을 이용하여 SPA가 가능하게 된다. history.pushState(state, title, url) : 세션 히스토리에 새 url 상태를 쌓는다. history.replaceState(state, title, url) ..

✅ 학습 목차 - [DAY 13] VanillaJS를 통한 자바스크립트 기본 역량 강화 (5) ✅ 새롭게 학습한 부분 - fetch api fetch API - 비동기 http요청을 좀 더 쓰기 편하게 해주는 api - XMLHTTPRequest를 대체 🙌 - Promise기반으로 동작한다 ( = then, async await 가능) 데이터 요청을 통해 Response 객체를 받은 후에는 json이나 text로 바꾸어서 사용한다. .blob() const $image = document.createElement("img"); const imageUrl = "https://cors-anywhere.herokuapp.com/http://placeimg.com/640/480/any"; //cors 에러가 생..

✅ 학습 목차 - [DAY 12] VanillaJS를 통한 자바스크립트 기본 역량 강화 (4) ✅ 새롭게 학습한 부분 - Callback - Promise - async await Callback 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생하거나 특정 시점에 도달했을 때 매개변수로 전달된 함수가 다시 호출 되는 것을 의미한다. 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 문제 비동기를 위한 콜백함수는 비동기의 처리 결과를 외부에서 꺼내 쓸 수 없다. 그렇기 때문에 비동기 함수를 범용적으로 사용하려면 비동기 처리 결과에 대한 내용을 콜백 함수를 사용하여 전달해야 한다. 비동기 함수의 결과에 대한 후속 처리를 많이 해주어야 할 경우 콜백함수의 중첩이 많아지고 콜백 헬이 발생할 수 있다. ..