세계를 움직이는 사람

🤔 고양이 사진첩 만들기 !!! 들어가기 전에 완성본 영상을 보고 가겠습니다. 폴더 파일 구조 📦src ┣ 📂components ┃ ┣ 📜app.js ┃ ┣ 📜breadCrumb.js //경로 나타내는 곳(경로 선택 가능) ┃ ┣ 📜catNode.js //파일, 폴더 나타내는 곳(파일,폴더 선택가능) ┃ ┣ 📜imageViewer.js //파일 선택시 그림 보여주는 곳 ┃ ┗ 📜loading.js //loading 중 인 상황 ┣ 📂constants ┃ ┗ 📜constants.js ┣ 📂utils ┃ ┣ 📜api.js ┃ ┣ 📜backEvent.js ┃ ┣ 📜fetchCat.js ┃ ┗ 📜returnHTML.js ┗ 📜main.js 뭔가 허접하게 했습니다. 이 것을 3시간 안에 다 끝내야 하는데 생각해보..

TIL Done it 실행, 선언 구별(app.js, main.js) 강사님이 왜 이런지 생각을 해보라고 하셨습니다. 이전에 저의 생각은 실행, 선언 구별같이 정확한 생각보다 C언어에 있는 main처럼 그냥 구별하려 해 놓는 것이라고 생각을 했었습니다. 그런데... 여러개의 죻은 점이 있었습니다. 여러개의 app.js를 생성 할 수 있다. 이 말은 선언부분을 많이 실행 할 수 있는 장점이 있는 것 같습니다. 선언, 실행 부분을 분리하기 위함 이게 주된 이유인 것 같습니다. 다음과 같이 C언어에서도 main.c로 다음과 같이 실행 부분을 나눕니다. int main(int argc, char *argv[]) { } C로 코딩 많이 했는데 이런 사소한 이유도 파악하지 못 한 것이 정말... 슬픕니다. ㅜㅜ 그..

Notion 제작 및 문제해결!! 프로젝트를 한 순서대로 글을 작성하는데 자잘한 문제보다는 큰 문제 위주로 회고를 작성한 것 입니다. 편하게 읽어주세요 :) 처음 들어가기 앞서 실행 영상을 보고 가도록 하겠습니다. !!! 주위에서 처음에 밤을 새워야 한다라고 겁을 너무 많이 주셔서 겁을 많이 먹었던 것 같아서 내가 할 수 있을 까?? 라는 의문점을 가지고 시작을 했습니다. 📦public ┣ 📂api ┃ ┗ 📜kdt-api.js ┣ 📂components ┃ ┣ 📜app.js ┃ ┣ 📜editor.js ┃ ┣ 📜linkButton.js ┃ ┣ 📜postEditPage.js ┃ ┣ 📜postList.js ┃ ┣ 📜postPage.js ┃ ┗ 📜postRootList.js ┣ 📂constants ┃ ┣ 📜con..

TIL Done it 낙관적 API 서버 실행이 늦는 경우 update 된 api가 잘 될 것이다라고 생각하여 서버 실행 완료 전에 먼저 update된 값들을 Client에서 표시하고 서버 실행이 완료되면 다시 Client에 표시해주는 방법 Debounce Event를 지연하다가 일정 시간 지났을 때 event 실행하여 성능 최적화 하는 법 ex) 1초내에 글을 작성 중 일때 event가 지연되고 수정 끝나고 1초 후에 event가 실행한다. let timer = null; new Editor({}) { onEdit: (post) => { clearTimeout(timer);//timer 날리기 timer = setTimeout(() => { //타이핑 저장 } 5000); } } js false und..

TIL Done it history api 너무 중요한게 많아서 블로그에 정리했습니다. :) Feeling 과제를 진행하고 PR을 날리는데 과제를 진행할때 단계별로 계속 commit을 날리다 보니 commit이 엄청 많아지고 이것을 다 정리해서 PR을 날리는 것이 절말 어렵고 효율적인 방법이 없나 고민하게 됩니다. 그래서 우선 최종본을 넣고 큰 틀에서만 링크를 걸어 넣고 있는데 뭔가 아쉬운 느낌이 듭니다. ㅜㅜ 그래도 이번 과제는 많이 발전 할 수 있는 기회가 된 것 같아서 매우 좋았습니다. 아직 더 익숙해 져야 하지만 과제가 나오면 빨리 만들고 refactoring을 하는 식으로 하는 것이 엄청 좋은 방법인 것 같습니다. :) REF https://gwpaeng.tistory.com/389

TIL Done it fetch api XMLHTTPRequest를 대체하며 Promise기반으로 동작하는 비동기 API => Promise + reject = fetch HTTP Error가 발생해도 reject 되지 않고 then으로 떨어집니다. (.status, .ok(.ok: 200 ~ 299인 경우만) 확인 하기) URL ? query를 실행하거나 database에 대한 작업을 수행하는 구분 기호 https://google.com?q=paeng 인 경우 google.com으로 이동하고 검색 상자에 paeng넣는다. # 페이지에서 이동할 위치를 나타낸다. 즉, URL 끝에 #paeng이 있으면 id="paeng"이 포함된 페이지를 검색한 후 해당 지점으로 이동 & 쿼리 문자열이 2개 이상인 경우 ..

TIL Done it 비동기: 특정 코드의 연산이 끝날 때 까지 기다리지 않고 다음 코드를 먼저 실행 addEventListener: 인자로 들어오는 함수를 addEventListener동작 후 사용 setTimeout, setInterval: 시간 후 함수 동작 XMLHttpRequest(XHR): 데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리 제작 tip this.state : 들어오는 데이터 상황 this.setState: Update를 위해 필요한 부분 this.render: 실행 부분 을 기본으로 알고 Component별로 데이터가 어떻게 들어오는 지 잘 알아야 하며 Object형 데이터를 잘 사용하도록 연습해야 합니다. Promise : 비동기 작업을 Chaining 식으로 제어..

TIL Done it Cookie Http 요청시 헤더에 Cookie가 같이 나가기 때문에 주의 document.cookie Local Storage key=value 기반으로 Local에 저장 도메인 기반 Storage 생성(도메인이 같으면 여러탭에 같은 Storage 공유) 직접 삭제 안하면 삭제되지 않는다. JSON.stringify(), JSON.parse() 주로 사용 //저장 localStorage.setItem('문자열', '문자열'); //불러오기 localStorage.getItem('문자열'); //삭제 localStorage.removeItem('문자열'); //전체 삭제 localStorage.clear(); Session Storage 전반적으로 Local Storage랑 같다 B..