[1st_Project] Notion Clone

첫번째 프로젝트인 [노션 클로닝 - 자동 편집기 구현] 작업을 시작했다. 컴포넌트 단위로 app을 만들어보는 첫번째 시도이다! 오늘은 html과 css를 작성하고, 컴포넌트를 만들어 화면을 구성했다. 일단은 하던대로 HTML로 먼저 구조를 짰다. 짠 html을 보면서

fetchAPI와 historyAPI를 연동해 페이지 리스트를 클릭 할 시 해당 페이지의 데이터를 불러와 편집 화면에 내용이 그려주는 기능을 구현했다. 크게 페이지 목록을 보여주는 섹션과 페이지를 편집하는 섹션으로 나뉜다. 흐름을 정리해보려고 한다. step 1.

popState이벤트로 url앞 뒤 이동을 구현했는데 많은 버그가 생겼다. 현재 보여지는 페이지를 목록에서 삭제 할 시 어떤 화면을 보여줘야 하는가? history.back()을 이용해 바로 전 페이지로 이동 현재 페이지 삭제 전에 바로 전 페이지를 먼저 삭제해

서버 데이터 요청이 2번씩 되는 버그가 있었다. 한참을 찾다가 자료형이 달라서 생긴 문제라는 것을 발견했다. editFrame컴포넌트의 setState함수에서 현재 id와 다음 id를 비교해 다를 시 서버 요청를 하도록 코드를 짰다. 서버에서 불러진 데이터를 thi

[x] 자동 저장 이벤트 지연 [x] 제목 변화 시에만 페이지 목록 업데이트 [x] 트리 목록 만들기 [x] 트리 목록 스타일 [x] 토글 구현 굳이 문서가 없을 때 시작페이지를 보여주지 않아도 됐다. 그냥 new페이지 보여줬으면 됐음 ⇒ 이것때매 여러경우

가급적 부모 돔에 내 템플릿을 삽입하는 방법을 이용한다.내 돔(this.node)을 만들어서 부모 돔에 appendChild하는 방법은 리스트에 동적으로 item을 추가해야할 때만 사용한다.부모 컴포넌트에 자식 컴포넌트를 연결할 빈 태그를 만들어서 연결하고, data-

기존에 script type module로 사용했던 것을 webpack을 적용해 번들링하고 webpack설정에 babel을 같이 설정해주었다. 환경 설정 관련 트러블 슈팅 babel 오류 async, await를 사용하니까 regeneratorRuntime is n

트리 구조 목록 구현 받아온 문서 목록 데이터를 받아서 최상위 ul에 PageItem를 렌더링하면서, 문서에 자식 문서들의 데이터가 있다면 재귀적으로 하위 목록들을 렌더링시켰다. 이벤트 설정 오류 문제점 ul에 걸 경우 하위 ul에도 이벤트가 걸렸기에 이벤트

클래스 필드 선언에서 typescript와 javascript이 다르게 동작하는 부분을 발견했다. 클래스 확장을 했을 경우 부모 클래스의 constructor함수가 다 실행되고 나서 자식의 필드가 생성된다. constructure함수 내부에서 프로퍼티 생성 및 할당

헤맨 것 페이지를 이동할 때 컴포넌트가 생성되게 했다. 엄연히 따지면 App컴포넌트가 한 페이지고 Sidebar와 EditFrame은 자식 컴포넌트지만 나는 각각 두 영역을 페이지로 사용하고 싶었기 때문이다. 왜냐하면 두 영역에 대한 로직을 각 App에 합쳐서 작