차마시는 개발자

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

Window 사용자.... 멘토님들이 답변을 주셨는데 간단히 정리를 하고 경험을 쌓은 다음 이 글을 토대로 해결해 나갈려고 작성하는 글 입니다. 현재 간단한 협업에서는 크게 문제가 되지 않다고 하셨습니다. + WSL2를 더 많이 사용하자 문제점 및 해결 1. 개행 문자 차이 옵션이나 Prettier 설정을 잘 하면 괜찮다. https://www.lesstif.com/gitbook/git-crlf-20776404.html git 에서 CRLF 개행 문자 차이로 인한 문제 해결하기 www.lesstif.com 2. 대소문자 차이 Mac 인 경우 대소문자를 구분하기 때문에 대소문자를 잘 구분 해야 합니다. 마치며 Window를 사용하면서 WSL2 세팅과 Window 환경 설정을 하면서 멘탈이 많이 갈리고 있는..

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

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

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개 이상인 경우 ..