차마시는 개발자

Parcel SFC 와 드디어 bundler에 대해서 배우기 시작했습니다. bundle란 묶는다는 의미로 vue 작업 요소를 js로 사용 가능하게 변화시키고 묶어주는 것 입니다. 참!! 이것은 SFC 구성을 목적으로 하는 것이라는 것을 알고 시작을 해보도록 하겠습니다. 🐻‍❄️ 1. Vue 프로젝트 설치 및 기본 구성 > npm init -y > npm i vue@next > npm i sass -D npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 npm i sass -D: devDepedencies에 scss를 설치 추가 개념) nod..

VSCode Prettier & ESLint Setting 와 진짜 드디어 MAC을 구매하게 되었습니다. 그래서 기본 Setting만 해도 하 세월이 걸리는 것 같아서 다음 번에는 보다 빨리하기 위해 오늘의 실패를 토대로 잘 작성을 해보려고 합니다. 우선 기본적인 node, npx를 설치 완료 했다는 가정하에 진행을 하도록 하겠습니다. :) 아.. 시작전에 앞서 간단 명령어 tip을 써볼려고 합니다. 이것으로 인해 필요 없는 것을 확실하게 없앨 수 있게 되었습니다. ㅎㅎㅎㅎ > npm list npm에 설치 되어 있는 것들을 볼 수 있습니다. > npm list //workspace의 list > npm list -g //global의 list> npm uninstall [list에서 본 이름] npm에..

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

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 는 오픈소스이며,..

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를 쌓지 않..

클로저 문제에 대한 var와 let의 차이점(왜 5 5 5 5) 같은 부분 setTimeout()함수가 task Queue에 들어간 다음 call stack에 있는 for문이 끝나면 call stack에 들어와서 실행을 하는데 이때 클로저를 이용하여 i를 참조합니다. 1. var인 경우 var는 함수형 스코프로 setTimeout()함수가 call stack에 들어와서 실행 할 때 상위 스코프에게 i값을 물어보면 i값은 이미 5값이 되어 있어서 5 5 5 5 5와 같이 출력이 됩니다. const nums = [0, 1, 2, 3, 4]; for (var i = 0; i < nums.length; i++) { setTimeout(function () { console.log(`${i}`); }, i * 1..

Promise.reject있어 중간에 Error을 출력하지 않고 나중에 원할 때 출력하는 법 => catch를 미리 걸어두는 것!! a); 2. Error 출력도 안하고 Catch를 원할때 Error 값 받아오는 경우 Promise.reject 부분만 진행을 하고 .catch는 진행을 하지 않은 상황이기 때문에 다음 원하는 부분에서 .catch를 활용할 수 있습니다. var a = Promise.reject('ㅎ'); a.catch(a => a); 마무리 Promise를 반복하면서 Error가 있는 부분을 처리하는 것에 대해 미리 catch를 적용시켜 Error를 미리 출력하지 않고 원하는 부분에서 Error를 출력하도록 하는 방법들입니다. 이것에서도 catch를 미리 실행하는 것에 따라 Error를 원..