Touch Slider (Image) Touch Slider Image 기능을 구현하면서 Image 특정 부분에 넣어 Image Touch Slider 구현하기 등 여러 문제를 겪어 다음에는 같은 실수를 반복하지 않고 다른 분들도 효율적인 구현을 할 수 있도록 작성한 글입니다. ( Svelte를 기반으로 제작된 글입니다. ) Tech Svelte JavaScript / Html / CSS 과정 Touch slider은 Image를 쭉 나열해 두고 overflow: hidden으로 이미지를 숨기고 mouse event와 transform: translateX()를 이용하여 image 위치 고정(image index * -보여지는 너비(width)) 및 dragging 하는 모습을 보여줍니다. 1. Imag..
day.js github 정의: 주로 Moment.js와 호환되는 API를 사용하여 최신 브라우저의 날짜와 시간을 구문 분석, 유효성 검사, 조작 및 표시하는 최소한의 javaScript 라이브러리 무게: 2kb 특징: Immutable(불변) : Day.js 개체를 변경하는 모든 API 작업은 새 인스턴스를 대신 반환합니다. => 이것은 긴 디버깅과 버그를 방지합니다. I18n 지원 : 국제화를 지원하지만 사용하지 않으면 어느 것도 빌드에 포함되지 않습니다. 설치 npm install dayjs --save dayjs() .startOf('month') .add(1, 'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss'); See the Pen Untitl..
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를 쌓지 않..