어제보다 더 나은 오늘

팩토리 패턴을 사용하면 함수를 호출하는 것으로 객체를 만들 수 있다. new 키워드를 사용하는 대신 함수 호출의 결과로 객체를 만들 수 있는 것이다. 장점 동일한 프로퍼티를 가진 여러 작은 객체를 만들어낼 때 유용하다. 유사한 반복 작업을 하는 객체를 만드는 것이 팩토리 패턴의 주요 목적이다. 단점 대부분의 상황에서 객체를 일일히 만드는 것보다 클래스를 활용하는 편이 메모리를 절약하는 데 더 효과적이다. 예제 코드) chart import React from 'react'; // Chart Factory function createChart(chartType, data) { switch (chartType) { case 'bar': return new BarChart(data); case 'line': ..

2. Prototype Pattern 동일한 타입의 여러 객체들이 프로퍼티를 공유할 때 유용하게 사용할 수 있다. 생성자의 prototype 프로퍼티와 생성된 인스턴스의 __proto__ 프로퍼티는 동일하며, 이들을 통해 Prototype 객체를 확인할 수 있다. class Dog { constructor(name) { this.name = name } bark() { return `Woof!` } } const dog1 = new Dog('Daisy') const dog2 = new Dog('Max') const dog3 = new Dog('Spot') console.log(Dog.prototype) // constructor: ƒ Dog(name, breed) bark: ƒ bark() console..

서론에 이어 이제 본격적으로 개별 패턴의 특징을 하나씩 살펴보자. 1. Singleton Pattern 애플리케이션 전체에서 단일 인스턴스를 공유 클래스를 한 번만 인스턴스화하고, 이 인스턴스를 전역적으로 접근해서 사용한다. Object.freeze() 메소드를 사용해 객체를 사용하는 쪽에서 직접 객체를 수정할 수 없도록 한다. 장점 메모리 공간 절약 단점 자바스크립트에서는 전역 변수를 생성하는 것을 흔히 안티 패턴으로 여긴다. 만약 전역 변수가 잘못된 판단으로 올바르지 않게 만들어진 경우 잘못된 값으로 덮어쓰여질 수 있으며, 이 변수를 참조하는 구현들이 모두 예외를 발생시킬 수 있기 때문이다. 그러나 Singleton 패턴은 일반적으로 앱에 전역 상태를 위해 사용한다. 코드의 여러 부분에서 수정 가능한..

지난 한 달 간 디자인 패턴에 대해 주1회 스터디를 진행했다. 매주 patterns.dev의 디자인 패턴 중 4~6개 아티클을 순서대로 정해 스터디 전에 읽어온 후에 스터디 시간에는 서로 궁금한 점이나 잘 이해가 되지 않는 부분을 논의하고, 각자 프로젝트에서 작성한 코드베이스 중에서 유사한 패턴이 있는 경우 공유하기도 했다. 다른 사람의 코드를 보는 경험은 늘 흥미롭기 마련인데 디자인 패턴이라는 틀 안에서 볼 수 있다는 점이 좋았고, 꼭 디자인 패턴이 아니라더라도 현재 고민하고 있는 부분들을 나누면 스터디 파트너 분이 같이 고민해주셔서 감사했다. 한 달 간의 스터디를 마무리하고 다음 주제로 넘어가기로 해서 디자인 패턴에 대해 공부한 내용을 간략하게나마 나의 언어로 정리해두려고 한다. patterns.de..

1. innerText 해당 요소 내에서 사용자에게 ‘보여지는’ 텍스트 값 display: none 으로 정의된 숨겨진 텍스트는 가져오지 않는다. 사용자가 브라우저에서 ctrl + c 해서 클립보드에 복사한 내용을 가져오는 것과 마찬가지이다. innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. 2. textContent Node의 속성 innerText와 달리 나 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다. textContent로 가져온 것은 모두 string 이다. HTML로 분석할 필요가 없기 때문에 innerHTML보다 textContent의 성능이 더 좋다. 세 가지 중에 권장하는 속성이다. 3. inn..

CodeSnap https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap Carbon 같은 사이트를 일부러 방문할 필요 없이 vs code 상에서 코드를 바로 캡처해서 이미지 파일로 만들어주는 확장 프로그램이다. 사용법도 매우 간단하다. 1) 공유하고 싶은 코드를 드래그한다. 2) 마우스 우클릭 3) CodeSnap 선택을 하면 아래처럼 바로 코드 이미지를 만들어준다. 4) 우측 CodeSnap 에디터에서 카메라 셔터 같이 생긴 colorful circle 아이콘 클릭 5) 코드 이미지 파일 저장

를 사용하는 가장 흔한 패턴은 다음과 같이 to 속성으로 경로를 지정해주는 것이다. 로그인 회원가입 이제 다음과 같은 경우를 생각해보자. 상품 목록 페이지가 있고, 상품 카드를 클릭하면 상품 상세 페이지로 넘어간다. 상품 목록 페이지에서 상세 페이지로 넘어갈 때 보통 router에서 /:productId와 같은 형태로 url parameter로 상품의 ID를 넘기고, 상세 페이지에서는 const { productId } = useParams(); 로 product ID를 받아 상품 상세 정보를 다시 fetch한다. {products?.map((product) => ( {product.name} → ))} 상품 상세페이지의 소제목이나 브라우저의 탭의 정보를 상품명을 렌더링하고 싶다면 productId로 다..

프론트에서 가장 많이 쓰는 JavaScript 내장 자료구조는 단연 배열과 객체일 것이다. 하지만 객체에 비해 Map이 가지는 장점이 있다. - key에 다양한 자료형을 허용한다. - map.size를 통해 map의 크기를 O(1)의 시간복잡도로 구할 수 있다. - map은 삽입 순서를 기억해 삽입된 순서대로 순회한다. - map은 그 자체가 iterable하기 때문에 내장 메소드 forEach나 for of를 써서 순회할 수 있다. (object는 먼저 key나 value를 구하고, 그것들을 통해 순회해야 한다.) 프론트 내에서만 사용하는 데이터라면 상관없지만 서버와 통신하는데 사용하는 데이터라면 JSON.stringify()를 통해 직렬화 과정을 거쳐야 한다. Map을 JSON.stringify에 넣..

input 요소의 focus 여부에 따른 스타일 속성을 정의하던 중 input 안의 placeholder가 미세하게 튀는 현상이 나타났다. input의 border 속성이 레이아웃에 영향을 주는 reflow를 유발하기 때문이었다. - reflow가 일어나는 속성: border - repaint만 일어나는 속성: border-radius, border-style, outline 📍 outline의 특징: - 요소의 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다. - border와 달리 상하좌우 모든 테두리에 적용된다. (border-top 등 한쪽 부분에만 적용할 수 있는 것과 대비됨) - IE7 이하에서 지원되지 않는다. 📍 해결책: outline으로 제어가 가능한 경우라면 reflow를 일으키는 b..

우리의 벗, 우리의 학습백과사전 mdn 문서의 localization이 오픈 소스라는 것을 얼마 전에 알게 되었다. 무한스크롤 UI를 스크롤 방식으로 구현하던 중 scrollTo() 메소드 관련한 mdn 문서의 영문 버전과 한국어 버전에 차이가 있음을 발견했다. mdn 문서 번역에 기여할 수 있는 방법은 상세 가이드에 잘 나와있어서 해당 가이드의 순서대로 따라가기만 하면 된다. 기본적인 git 사용법과 github의 fork, pull request 등에 대한 개념, 마크다운 작성법을 알고 있다면 아래의 가이드만 보고도 작업을 할 수 있다. 도움이 되었던 링크들은 아래와 같다. MDN 번역 콘텐츠에 대한 일반 안내서 https://github.com/mdn/translated-content/blob/ma..