차마시는 개발자

day.jsgithub정의: 주로 Moment.js와 호환되는 API를 사용하여 최신 브라우저의 날짜와 시간을 구문 분석, 유효성 검사, 조작 및 표시하는 최소한의 javaScript 라이브러리무게: 2kb특징:Immutable(불변): Day.js 개체를 변경하는 모든 API 작업은 새 인스턴스를 대신 반환합니다.=> 이것은 긴 디버깅과 버그를 방지합니다.I18n 지원: 국제화를 지원하지만 사용하지 않으면 어느 것도 빌드에 포함되지 않습니다.설치npm install dayjs --savedayjs() .startOf('month') .add(1, 'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss'); See the Pen Untitled by..

JavaScript 반복JavaScript에서 객체나 배열등을 반복할 때 for문을 사용하게 됩니다. 또한, JavaScript에서 for ... in, for ... of, .forEach 등을 만들어서 보다 편리하게 Object, Array등을 반복할 수 있게 됩니다.for ... in- 객체의 열거가능한 key(속성)들을 반복하는데 사용한다. (Nonenumerable(비열거형)인 value에는 접근할 수 없습니다.)- Object의 key or index를 반복 - 반복할 때마다 인스턴스 or 프로토타입 체인을 검색하므로 느린 속도를 가집니다.- index에 할당되는 값들은 String 타입으로 변환됩니다.let obj = { a: 1, b: 2};for (let key in obj) ..

객체 배열 JavaScript는 객체와 배열로 이루어져있는데 정확히 그들의 관계와 의미에 대해 이해가 부족하여 작성하게 되었습니다. 우선, 비교에 앞서 배열과 객체의 기본적인 내용부터 설명하도록 하겠습니다. 객체 다양한 키 컬렉션과 복잡한 엔터티를 저장하는 데 사용되는 것 (첨부: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) 배열 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖는 것 (첨부: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array) 배열은 객체인가 ? 정답부터 말하..

Babel 최신 JS -- 변환 --> 구형 JS => 구형 browser에서 사용할 수 있게 변환 시켜준다. 🦊 1. babel 기본을 위한 "@babel/core, @babel/cli" 🐯 > 설치 @babel/core : babel package @babel/cli : terminal에서 명령 동작 시킬 수 있게 하는 것 > npm init -y > npm i -D @babel/core @babel/cli 🐯 > package.json browserslist : 프로젝트가 어느 browser까지 가능하게 할 것인가(browser 범위 지정) "browserslist":[ // global browser 점유율의 1%이상에 해당하는 모든 browser에 적용 "> 1%", //죽지 않은 browser..

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