혼자 적어보는 노트

✅ 오늘의 학습 - 고양이 사진 검색기 만들기 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의 배포 과정에 대해 ..

error: failed to push some refs to 검색을 해보니 다양한 상황에서 발생이 되었었고 보통 로컬과 원격의 저장소의 상태가 다를 때 발생 되는 문제였다. 내가 접한 상황: 로컬에서 기존에 작업되어있는 파일들을 복사후 새 폴더를 생성하여 붙여넣은 후 github에서 레포지토리를 생성하고 연결하려는 과정에서 발생했다. git init git remote add origin 깃헙주소 git branch -M main git push -u origin main // *이 명령어 시 에러 발생 error: failed to push some refs to 'github repository 주소' ✅ 해결 git add . git commit -m "커밋 메세지 작성" git push -u o..

✅ 오늘의 학습 - 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 ✅ 문제 해결 바로 반응할 ..

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