차마시는 개발자

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..

Sequence 파일 / 폴더 배치 1. npm init package.json 생성 2. npm install express node_modules, package-lock.json 생성 3. express 파일 만들기(src/express/index.js) const express = require("express"); const path = require("path"); const app = express(); //public 폴더 연결 app.use(express.static(path.resolve(process.cwd(), "src"))); //public 폴더에 있는 index.html 실행(GET) app.get("/*", (req, res) => { res.sendFile(path.reso..

window에서 SPA를 위한 Express 데브 코스 과제를 하면서 VSCode Live Server로 어찌 어찌 하고 있었습니다. 그런데 .... SPA 관련해서 과제를 진행하면서 Live Server로 세팅을 하여 Extension을 익히는 것보다 express과 서버에 대해 공부를 하는 것이 좋을 것 같아express로 진행하게 되었습니다. 해당 과정을 진행하기 앞서 다음과 같은 고민이 생겼습니다. Node 와 Express를 잘 알고 있나? 왜 Express를 사용하는 가? 그래서 이를 바탕으로 간단하게 정리를 해보았습니다. 링크를 타고 들어가면 좀 더 자세히 볼 수 있는 꿀팁 : ) > Node & Express 우선, Node 와 Express에 대해서 알아보면 > Node 는 오픈소스이며,..

Email geonwoopaeng@gmail.com Github https://github.com/GeonWooPaeng Resume https://quiet-open-6a9.notion.site/47c832e1b9784cc3852aee5de8f4cc88?pvs=4 Portfolio https://quiet-open-6a9.notion.site/Portfolio-1-9534ec9f50ee4b6aa9a23bd7a88a0ac5?pvs=4

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

SPA(Single Page Application) 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것(reloading X) history api Page를 이동할때 마다 url을 쌓아서 Page의 뒤로가기, 앞으로가기, 지정한 위치고 가기 사용가능한 history => api를 이용해 주소를 인위적으로 바꾸고, 서버로 페이지 전체를 요청하는 게 아니라 history.state에 담아둔 정보로 ajax 요청을 보내 화면을 갱신하는 것 history.pushState() 화면 이동없이 url만 바뀌면서 history에 새로운 url쌓는다. => 앞,뒤로가기 가능 history.replaceState() history.pushState()와 다르게 history를 쌓지 않..

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 식으로 제어..