🙆‍♀️ FE/JavaScript

시작하며- 채팅 어플을 구현해보고, 그 동작 원리에 대해 파헤치고 싶어서 시작하게 되었다.- 바로 요 영상을 참고하였다. (참고:유투브) 좋은 강의 감사드립니다 _꾸벅 우선 베이스부터 시작하자.내가 생각한 기본적인 진행 순서는 다음과 같다.1. express 서버 실행하기2. socket.io 생성하여 연결하기3. 채팅 UI 만들기1. express 서버 실행하기express란? : 웹 및 모바일 어플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 어플리케이션 프레임워크이다. 쉽게 말해  Node.js를 사용해 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체라고 한다. - express 를 설치한다. (공식사이트)npm install express --sav..

Infinity Scroll- Virtual Scroll을 알기 전에 Infinity Scroll (무한 스크롤) 에 대해서 알고 있으면 이해가 쉽다. 웹 상에서는 데이터를 불러와서 DOM 요소를 생성해 화면에 렌더링하는데, 정보를 한꺼번에 가져와서 보여주기에 정보량이 너무 많아 API Fetch로 받는 결과가 느릴 때, 스크롤을 통해 일부부만 가져와 보여주고 스크롤하면 추가로 보여주는 기술이자 인터페이스라고 한다.- 기본적인 원리는 Scroll의 End 지점에 도달하면 추가 정보를 Fetch 하는 방식이다. 무한 스크롤 구현하는 방법무한 스크롤을 구현하는 방법으로는 크게 2가지가 있다. 각 방법에 대해 자세하게 설명해놓은 블로그들이 많으니 한번 찾아보고 공부해보자. (요새 세상이 참 좋다..)1. Sc..

✨ 버블링 한 요소에서 이벤트가 발생하게 되면, 해당 요소의 이벤트 핸들러가 동작하고 이어서 부모의 이벤트 핸들러가 동작하게 된다. 이는 가장 최상단 부모 노드까지 전달된다. 때문에 특정 요소에서 이벤트 발생 시 부모 컨테이너가 자식컨테이너에서 일어나는 모든 이벤트를 들을 수 있다는 것이 자바스크립트의 특징이다. 아래 화면을 보면 child -> father -> grandFather 순으로 동작하는 것을 알 수 있다. 즉 자식 객체의 이벤트가 발생하고 부모의 이벤트가 동작하는 것을 볼 수 있다. 이렇게 동작하는 것을 이벤트 버블링이라고 한다. ✨ 캡처링 캡처링은 버블링과는 반대 방향으로 부모 컨테이너에서 이벤트가 발생한 해당 요소를 찾아내려가는 이벤트 전파방식이다. 위의 소스코드에서 capture : ..

💪Array Cardio ' Array.prototype ' 1. filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. filter는 배열 내 각 요소에 대해 한번 제공된 callback 함수를 호출해서, callback이 true로 반환하는 모든 값이 있는 새로운 배열을 생성한다. callback 테스트를 통과하지 못한 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않는다. - arr.filter(callback(element[, index[, array]])[, thisArg]) const result = inventors.filter( (data) => data.year = 1500 ); 2. map() : 배열 내의 모든..

CSS Variables ⭐️Point - Javascript로 CSS 의 속성값의 변경할 때는 변수를 사용하면 된다. 우리는 :root를 통해 속성값을 지정해놓고 쓰는데 이걸 이용하면 된다. - dataset은 우리가 data- 로 설정한 값을 자바스크립트에서 확인할 수 있다. (ex, data-sizing, data-id) - setProperty : style.setProperty(propertyName, value, priority); 이렇게 사용하면 속성값변경을 할 수 있다. 인자로 변수를 넣어주면 된다!

⭐️ Point - transform-origin: 100%; : 시계바늘이 rotate하는 위치를 지정 (50%이면 중간, 100%이면 오른쪽 끝) - transform: rotate(90deg); : 시계바늘이 12시를 기준으로 회전할 수 있도록 기본 지정 - transition: all 0.5s; : 움직임이 부드럽게 - transition-timing-function: cubic-bezier(0, 2.55, 0.66, 1); : second-hand가 약간 튕기는 듯한 느낌을 주는 CSS - const now = new Date() : Date객체를 생성해 오늘 날짜를 가져올 수 있다. (Sun Dec 17 1995 03:24:00 GMT...) - Date객체에서 자주 쓰이는 메서드 -> get..

⭐️ Point - 키보드 하나하나마다 고유한 keyCode가 존재한다.(ex. A = 65) 그래서 이 keyCode를 각각의 고유한 data-key로 해당 태그에 지정하게 되면 키보드가 입력 될 때 audio를 play하면 된다. - window.addEventListener('keydown', function) : 키보드가 입력될때 Event Listener는 window에다가 설정하면 된다. - 이벤트가 실행될때마다 소리가 재생되게 하고 싶다면 play전에 audio.currentTime = 0을 지정해주면 된다! - classList : 키보드가 선택될때마다 classList.add로 스타일변화를 주면 된다. 이러한 변화를 키에서 손을 떼면서 사라지게 하고 싶다면 key에 querySelecto..

자바스크립트로 개발 프로젝트를 진행하면 당연히 디비는 다른 도구의 도움을 받아야 한다고 생각했는데 holy.... localStorage 라는 게 있었다. 나만 몰랐던 듯.. 역시 여전히 배울 게 많다. 웹 스토리지에는 2가지가 있다. localStorage와 sessionStorage이다. localStorage / sessionStorage 두 스토리지는 어떻게 다를까? 우리는 어떤 것을 어떤 때에 사용하는 것이 맞을까? 이 둘의 차이점은 데이터가 어떤 범위 내에서 오래 보존되는지이다. sessionStorage는 웹 페이지 세션이 끝나면 데이터가 지워지고, localStorage는 웹 페이지 세션이 끝나더라도 데이터가 지워지지 않는다. 오오 신기하다 🙆‍♀️ 하지만 로컬 스토리지는 어디까지나 동일 ..