Javascript

Javascript?

JavaScript의 ES란?, ES5/ES6 문법 차이

자바스크립트의 동기와 비동기

setTimeout과 setInterval

forEach, map, filter, reduce, find

Lodash의 Debounce와 Throttle을 이용한 최적화

moment.js 에서 day.js로 변경하기

Intersection Observer 이해하기 (무한스크롤)

수평 스크롤 터치

객체의 문자열 반환

다른 배열 동일 아이디 정보 삽입하기

같지 않은 것을 구할땐 other.id !== item.id 이 아닌 !b.some 를 이용해야 한다.

나이키, 아디다스, 컨버스 등 여러 이커머스들의 상세페이지에서 사용되는 스크롤 인터랙션을 도입하게 되었다. 처음엔 좌우 영역에 스크롤을 만들고 어떤 방법으로 둘을 연결할 수 있을까 고민했으나 CSS 속성의 sticky 를 이용하면 간단할 것 같았다.생각했던 방법은 간단

현재 화면에 보여지지 않는 이미지들은 lazy loading 처리를 통해 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상 시킬 수 있다. image lazy loading 기법은 무엇인지, 그리고 해당 기법을 IntersectionObserver API를 사용한

싱글톤 패턴은 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴이다.동일 클래스로 new 를 해도 인스턴스 하나만 존재한다는 것이다.싱글톤 패턴을 사용하면 고정된 메모리 영역에 인스턴스 하나만을 사용하기 때문에 메모리 낭비를 방지할 수 있다. 또한,

어댑터 패턴(Adapter Pattern)은 서로 다른 인터페이스를 가지는 두 객체를 연결하여 사용할 수 있도록 하는 구조적인 패턴입니다. 어댑터 패턴을 이용하면, 기존에 작성된 코드를 재사용할 수 있으며, 객체 간의 결합도를 낮출 수 있습니다.어댑터 패턴은 서로 다른

옵서버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다.Observer(관찰자)상태 변화를

Facade는 '건물의 정면'을 의미하는 단어로서 하나의 단순화된 인터페이스를 통해서 시스템 안에 내포되어 있는 기능들, 프레임워크 기타 서브클래스 등에 쉽게 접근할 수 있도록 도와주는 패턴이다.클라이언트는 Order 에만 집중하면 되고 그 외에 발생한 세세한 이벤트들

요구사항을 객체로 캡슐화할 수 있으며,매개변수를 사용하여 여러 가지 다른 요구 사항을 집어넣을 수 있다.요청 내역을 큐에 저장하거나 로그로 기록할 수 있고, 작업취소 기능도 지원한다.실행될 기능을 캡슐화함으로써 주어진 여러 기능을 실행할 수 있는 재사용성이 높은 클래스

프록시(Proxy)를 번역하면 대리자, 대변인의 의미를 갖고 있다. 대리자, 대변인은 누군가를 대신해서 그 역할을 수행하는 존재이다. 이는 프로그램에도 똑같이 적용된다. 즉, 프록시에게 어떤 일을 대신 시키는 것이다.어떤 객체를 사용하고자 할때, 객체를 직접적으로 참조

vanilla javascript carousel (slider)

thumb swiper 썸네일 스와이퍼 , 스와이퍼 연동

파라미터 값에 따라 스크롤 이동

랜덤으로 이미지 생성 (랜덤 팝업 모달)

날짜에 따라 구매 버튼 활성화

인코딩문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화. 웹에서 통신시 한글 같은 유니코드 문자가 오작동을 일으킬 수 있으므로 필요함.디코딩 인코딩과 반대로 문자를 원래대로 되돌리는 것.상황에 맞게 사용할수 있지만 encodeURIComponent() 과 dec

일반적인 배열함수(filter,find,map)는 배열 내 요소 전체를 뒤져 중복 값을 찾기 때문에, 셋보다 성능 면에서 떨어집니다. 반면, 셋은 값의 유일무이함을 확인하는데 최적화되어있습니다.