웹 개발 (97) 썸네일형 리스트형 디자인 패턴) Container/Presentational Pattern 이 글을 공부하면서 번역하고 정리한 글입니다. 애플리케이션 로직과 뷰를 분리하여 관심사 분리(separation of concerns)를 강제하는 패턴 웹 개발 디자인 패턴 분야에서 관심사(concern)이라는 용어는 소프트웨어 시스템 내에서 특정한 기능을 의미합니다. 예를 들어 사용자 인증 처리, 데이터 영속성, UI 컴포넌트 렌더링, 비즈니스 로직 관리 등과 같은 작업이 있습니다. 관심사를 별개의 모듈로 처리하면 코드의 조직화, 유지보수성, 재사용성이 높아지는 장점이 있습니다. 이를 관심사 분리(separation of concerns)라고 부릅니다. 관심사를 분리함으로써, 개발자는 시스템의 특정 측면에 집중할 수 있고 모듈화를 장려하게 되며, 관심사별로 독립적인 작업이 가능하여 협업이 용이해집니다... 디자인 패턴) Prototype Pattern 이 글을 공부하면서 번역하고 정리한 글입니다. 같은 타입의 여러 객체들 간 속성을 공유하는 패턴 prototype 패턴은 같은 타입의 여러 객체 간 속성을 공유하기 좋습니다. 프로토타입은 JavaScript의 native 객체이며 프로토타입 체인을 통해 객체에 접근할 수 있습니다. 우리는 하나의 애플리케이션에서 같은 타입의 객체를 많이 만들어 사용합니다. 이때, ES6의 클래스의 인스턴스를 여러개 만들어 사용합니다. Example class Dog { constructor(name) { this.name = name; } bark() { return `Woof!`; } } const dog1 = new Dog("Daisy"); const dog2 = new Dog("Max"); const dog3 = n.. 디자인 패턴) Provider Pattern 이 글을 공부하면서 번역하고 정리한 글입니다. 여러 자식 컴포넌트에서 데이터를 사용할 수 있도록 만드는 패턴 애플리케이션에서 데이터를 여러 컴포넌트에서 사용하고 싶을 때가 있습니다. props를 이용해서 데이터를 전달할 수 있긴 하지만 이 방법으로 애플리케이션의 거의 대부분의 컴포넌트에 데이터를 전달하는 것은 어렵습니다. 우리는 종종 prop drilling이라고 불리는 현상을 마주칩니다. 이는 props를 컴포넌트 트리의 깊은 곳까지 전달하는 경우에 발생합니다. 이 경우에 props에 의존한 코드를 리팩토링하는 것은 거의 불가능해지고 특정 데이터가 어디서 오는지 알기 매우 어려워집니다. 특정 데이터를 가진 'App'이라는 하나의 컴포넌트가 있다고 사정해봅시다. 컴포넌트 트리 최하위에 ListItem, .. 디자인 패턴) Proxy Pattern 이 글을 공부하며 번역하고 정리한 글입니다. 타겟 객체에 대한 인터렉션을 가로채서 제어하는 패턴 프록시 객체를 사용하면 특정 객체와의 인터렉션에 대한 더 많은 제어권을 얻을 수 있습니다. 프록시 객체는 값을 가져오거나 설정할 때와 같이 객체와의 인터렉션 할 때의 동작을 결정할 수 있습니다. 일반적으로, 프록시는 '대리인'을 의미합니다. 누군가에게 직접 말하기보다는 그 누군가를 대표할만한 사람에게 대신 말하는 것이죠. Javascript에도 같은 상황이 있는 것입니다. 타겟 객체와 직접 상호작용하기보다는 대리인 객체 즉, 프록시 객체를 통해 타겟과 상호작용하는 것입니다. 'John Doe'라는 인물을 표현하는 person 객체를 만들어봅시다. const person = { name: "John Doe", .. 디자인 패턴) Singleton Pattern 이 글을 공부하기 위해 번역 및 정리한 글입니다. 어플리케이션 전체에서 하나의 전역 인스턴스를 공유하는 패턴 싱글톤은 한 번만 인스턴스화될 수 있고, 전역으로 접근할 수 있는 클래스입니다. 그렇게 만들어진 하나의 인스턴스는 어플리케이션 전역에서 공유될 수 있어서 어플리케이션의 전역 상태를 관리하기 좋습니다. 우선, ES2015 클래스를 사용해서 싱글톤이 어떻게 사용되는지 확인해봅시다. 다음 예시에서 Counter 클래스를 만들어봅시다. 다음과 같이 클래스를 만들면 우리는 여러 개의 Counter 인스턴스를 만들 수 있기 때문에 싱글톤 패턴의 기준에 맞지 않는 방식입니다. let counter = 0; class Counter { getInstance() { // 인스턴스 반환하는 메소드 return th.. Vue.js) vue-cli → vite 변환 작업 1. vite 설치 $ npm install -D vite devDependencies에 넣기 2. 불필요한 의존성 삭제 babel 관련 패키지 vue-cli 관련 패키지 @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service sass-loader (sass만 있으면 된다) 3. package.json에 스크립트 수정 ... "scripts": { "serve": "vite", "build:dev": "vite build --mode dev", "build:stage": "vite build --mode stage", "build": "vite build", "lint":.. CSS) BEM convention의 개념과 사용시 유의사항 BEM convention 이란, CSS 방법론 중 하나로 지금 내가 팀에서 사용하고 있는 방법이다. BEM은 Block-Element-Modifier의 약자로 id나 class 명을 작성할 때 사용하는 규칙이다. B.E.M은 언더바 두개 (_ _)로 연결하여 표현한다. Block을 의미하는 이름_ _Element를 의미하는 이름--Modfier를 의미하는 이름 block, element, modifier은 다음을 의미한다. BEM Naming convention 소문자, 숫자만을 사용한다. 단어 여러개를 조합하는 경우에는 하이픈(-)으로 연결한다. Block 재사용 가능한 독립적인 HTML 컴포넌트를 의미한다. 형태가 아닌 목적에 맞게 결정한다. 예를 들어 red, active 등의 상태가 아닌 men.. 테스트툴) Playwright 란 프론트 프로젝트 규모가 커질수록 기능을 추가할 때마다 사이드 이펙트가 생기는 일이 빈번해진다. 버그들을 자동으로 잡을 수 있는 테스트 툴을 알아보다가 사수님이 Playwright라는 것을 알려주셔서 새로 도전하는 사이드 프로젝트에 이것을 도입하려 보려고 한다. Playwright에 대해 공부하면서 내용을 정리해본다. E2E Test E2E(End to End) Test는 애플리케이션이 예상대로 동작하는지 확인하는 테스트를 말한다. 사용자 사용 시나리오을 시뮬레이션하며 제품의 동작을 테스트 하는 것! 위에서 언급했듯이 프로젝트 규모가 작을 때는 테스트 할 범위가 좁아서 버그들이 눈에 띄지만 그 규모가 커질수록 기능 추가 및 수정으로 발생하는 사이드 이펙트를 발견하기 어려워진다. 또한 운영체제나 브라우저 등.. 이전 1 2 3 4 5 ··· 13 다음
