혼자 적어보는 노트

✅ 오늘의 학습 - 고양이 사진첩 과제 제출 과제 제출 고양이 사진첩을 보완하는 과제를 오늘 제출했다. 새로운 코드를 작성하기보다는 기존에 있던 코드들을 조금 리팩토링을 했다. state 변경 시 렌더링 최적화 isRender함수를 사용하여 조건 만족 시 렌더링을 하도록 하였는데, 객체만 탐색해서 비교하고 나머지는 전부 값을 직접 비교를 했다. import { isObject } from "./typeCheck.js"; export const isRender = (currentState, nextState) => { if (isObject(currentState)) { return compareObject(currentState, nextState); } return currentState !== nex..

✅ 오늘의 학습 - TodoList Drag&Drop Drag&Drop Drag&Drop은 이전에 미니 프로젝트에 적용해보고 스터디에서도 간단하게 진행해 본 적이 있었는데 완전히 익숙하게 다루지는 못했던 부분이라 다시 한번 상기시켰다. 이전엔 droppable을 따로 지정하지 않고 li들이 ondragover과 ondrop이벤트를 지니게 만듬으로써 drop요소를 지정했어서 이 부분에 대해 처음 알게 되었다. 개념에 대해 조금 보완할 부분이 생겨서 이전에 올렸던 Drag&Drop 이벤트 관련된 포스팅을 조금 수정했다 ✍ 느낀 점 확실히 처음에 미니프로젝트 때는 접했던 Drag&Drop은 조금 어려웠는데 두번째, 세번째 접하고 나니 많이 익숙해 진 듯한 느낌을 받았다. 시간차로 복습을 하는 것이 확실히 기억..

✅ 오늘의 학습 - 고양이 사진 검색기 만들기 initialState를 지정해서 전달해주는 이유 검색기를 만드는 과정에서 부모컴포넌트에서부터 intialState를 지정해서 setState를 통해 전달해주는데 이렇게 구현해 놓으면 입력값들을 storage에 넣어놓고 초기화 단계에서 localstorage의 값을 하위 컴포넌트로 밀어넣어 줄 수가 있다. textContent element 안에 tag가 들어있어도 텍스트 값만 꺼내서 가지고 올 수 있다. 안녕? console.log(divElement.textContent) // 안녕 부모, 자식 컴포넌트 간의 setState 상위 컴포넌트에서 값을 내려주고 현재 컴포넌트에서 새로운 값을 추가해서 관리해야 할 때 하나의 setState 함수로 어떻게 구현을..

✅ 오늘의 학습 - 무한 스크롤 UI 구현하기 - Scroll / intersectionObserver 이전에 next를 하면서 무한 스크롤을 구현한 적있었는데 복습할겸 다시 정리를 해보려고 한다. 버튼 여러 번 클릭 시 중복 요청 제어하기 state에 isLoading 값을 넣고 데이터 요청 시작 시 isLoading값을 false로 주고 데이터를 응답받으면 isLoading값을 true로 주는 방법으로 핸들링 할 수 있다. $photoList.addEventListener("click", (e) => { if (e.target.className === "photoList__loadMore" && !this.state.isLoading) { // this.state의 isLoading이 false여야만..

✅ 오늘의 학습 - SPA 배포하기 / 404 Redirect SPA의 경우 index.html은 루트에 하나만 존재하고 historyAPI를 사용하여 url을 조작하는 것이기 때문에 실제 해당 경로에는 index.html이 없다. 당장 변경되는 것 처럼은 보이지만 새로고침 시 브라우저는 변경된 url의 index.html을 찾게 된다. 변경된 경로에 index.html이 없을 경우 404에러가 발생하지만 루트의 index.html으로 돌아가게 만듬으로써 404 에러를 막을 수 있다. 로컬에서는 npx serve -s를 사용하여 자동적으로 루트의 index.html에 접근하게 할 수 있었지만 배포를 하는 과정에서는 어떻게 해야 할 지 감이 잘 잡히지 않았었는데 오늘자 강의에서 SPA의 배포 과정에 대해 ..

✅ 오늘의 학습 - Notion Cloning 과제 마무리 및 제출! 🔥 과제 제출 전 마지막 체크 했던 부분 - 코드 리팩토링 작성한 코드를 리팩토링하면서 시간을 꽤 보냈다. 중복되는 부분을 찾고 모듈화를 진행하거나 테스트를 해보면서 새로 발생한 에러들을 꼼꼼하게 살피며 수정해 보았다. 그랬음에도 불구하고 그 때는 안 보이던 것들이 제출하고나니 몇가지가 추가로 보였다.. 😂 이후 추가적으로 수정해 볼 예정이다. - Component를 재귀구현 하던 방식에서 innerHTML 방식으로 변경 처음에 Document들을 트리구조로 렌더링 하는 부분을 component형식으로 생성자 함수를 만들어서 구현을 했었는데 다른 기능들에는 문제가 없지만 렌더를 할 때마다 해당 컴포넌트가 아예 없어지고 재 생성되기 때문..

✅ 오늘의 학습 - Notion Cloning 과제 구현 📑 추가로 구현해본 내용 Document List에서 선택된 li를 ui로 표시 selected-document를 로컬스토리지에 생성하여 처리했다 { id: documentId } 렌더링 시 현재 id와 selected-document에 담긴 아이디가 같다면, class를 추가하여서 ui를 변경했다. 모듈화를 위한 리팩토링 로컬 스토리지를 사용한 경우 key를 상수로 빼놓고 사용할 때 불러와서 사용했다. 선택된 Document의 id 외에도 토글이 되어있는 Document list의 id가 담겨있는 open-list 또한 로컬스토리지에서 관리를 했기 때문에 두 개의 상수로 나누었고 localstorage에 id를 넣거나 빼는 부분 또한 폴더를 나누..

✅ 오늘의 학습 - Notion cloning 과제 구현 1. contentEditable 이전에 먼저 접해보다가 시간이 걸릴 것 같아서 다른 요구사항 먼저 처리를 하고 이제서야 다시 접하게 되었는데 꽤나 시간이 걸린 부분이다. 정말.. 여러 에러사항들이 있었다.. 📌 문제 상황 1 contentEditable에서 엔터를 누르면 div가 자동 생성되고 해당 div안에 텍스트가 들어가게 된다. 마크다운 형태의 에디터를 구현하기 위해 # 입력 시 div안에 h1태그를 추가하는 식으로 구현했다. 하지만 h1태그로 변경되는 것은 확인되었지만 엔터(개행) 시 원래의 텍스트 크기로 돌아오지 않고 이전에 변경한 상태 그대로 아래처럼 추가가 되는 상황이 발생했다. text text text ✅ 문제 해결 바로 반응할 ..