728x90 반응형 Learn to Code62 [디자인패턴] 자바스크립트로 옵저버패턴(Observer pattern) 구현하기 옵저버 패턴은 Subject라 불리는 객체가 옵저버라 불리는 디펜던트들을 유지하고, 상태 변화가 생겼을 때 이들에게 상황을 알리는 경우를 의미한다. 이 패턴은 한 객체의 액션을 다른 객체에 업데이트시켜야하는 상황에서 특히 유용하다. 아래는 자바스크립트로 구현한 예시이다. UI나 로그 시스템 객체는 Character 객체의 변화를 알고 싶어한다. Character의 HP가 바뀌면, 옵저버인 UI가 이에 대해 알아야하고, 변경된 HP를 보여줘야 한다. 1. Subject 인터페이스를 만들고, 이걸 사용해서 Character 클래스로 만든다class Subject { addObserver(observer) { throw new Error("You must implement addObserver met.. 2024. 6. 24. [디자인패턴] 자바스크립트로 전략 패턴(Strategy Pattern) 구현하기 1. 전략패턴(Strategy Pattern)이란?전략 패턴(Strategy Pattern)은 객체의 행위를 바꾸고 싶은 경우 직접 수정하지 않고 전략(알고리즘)을 객체화하여 동적으로 행위를 변경할 수 있게 해주는 디자인 패턴이다. 이 패턴은 여러 알고리즘을 하나의 추상적인 인터페이스로 묶어 알고리즘군을 정의하고, 각 알고리즘을 구체적인 전략 클래스로 캡슐화하여 필요에 따라 서로 교체 가능하게 만든다. 이를 통해 클라이언트는 알고리즘의 내부 구조를 알 필요 없이 유연하게 알고리즘을 변경할 수 있다. 알고리즘군이란?- 동일한 기능을 수행하지만 다른 방식으로 구현된 알고리즘들의 모음 예)- "정렬"이라는 동일한 문제를 해결하는 알고리즘 군 안에는 버블정렬, 삽입정렬, 퀵정렬, 병합정렬 등이 있다.- 이 알.. 2024. 6. 11. [디자인패턴] React + Tanstack Query 서비스 레이어 패턴으로 구조짜기 현 회사 프로젝트는 React + Next.js (v.13, app routing)으로 구성해놨다. Tanstack Query도 주요하게 사용하는데, 비즈니스 로직과 UI 컴포넌트, 그리고 그 중간 어딘가에 관여하는 코드들을 어떻게 정리하면 좋을까 열심히 찾아보다가 서비스 레이어 패턴(Service Layer Pattern)에 근접하게 정착하게 되었다. 서비스 레이어 패턴이란?서비스 레이어 패턴(Service Layer Pattern)이란 앱의 데이터 처리와 관련된 로직을 여러 레이어로 분리하여 구조화한 패턴이다. 이를 통해 코드의 재사용성과 유지보수성을 높이고, 각 레이어가 특정한 책임을 갖도록 만든다. 리액트에 적용하기: 최대 4개의 레이어1. Layer 1: 순수 네트워크 호출이 레이어는 네트워크 .. 2024. 6. 3. [디자인패턴] 요즘 가장 핫한 프론트엔드 디자인패턴: Feature Sliced Design (번역) 원본: https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj Feature-Sliced Design: The Best Frontend ArchitectureIntroduction Frontend developers often face a problem related to application architecture....dev.to 개요프론트엔드 개발을 할 때 앱 내 구조에 관한 문제는 흔히 발생한다. 확장성이 있으면서 디펜던시가 강하지 않으며 앱 모듈 간 높은 응집력이 기반이되는 구조의 사용이 요구되기 때문이다. 본 글은 저자가 생각하기에 리액트에서 선택할 수 있는 최고의 옵션인 Feature-Sliced De.. 2024. 6. 3. [Next.js] 브라우저 캐싱 문제 해결 방법 next.config에 generateBuildId를 추가한다 // next.config.js module.exports = { generateBuildId: async () => { return new Date().toISOString(); }, }; 프로젝트를 빌드할 때, 빌드 날짜와 시간을 기반으로 새로운 build ID가 생성된다. 새로 업데이트된 웹앱을 배포할 때, Next.js에 의해서 이 새로운 build ID가 에셋들(eg. JS, CSS 파일 등의 URL)에 사용된다. 유저가 웹사이트를 방문하면, 유저의 브라우저가 에셋 URL의 일부로써 새로운 build ID를 전달받게 된다. 이 브라우저는 새로운 build ID와 함께 에셋들을 받게 된다. 미래에 웹앱이 업데이트되면, 새로운 build.. 2023. 10. 20. [Next.js] 버전 13+으로 업데이트하기 요즘 pages 디렉토리를 사용한 Next.js 이전 버전의 프로젝트에서 Next.js 13+@ 버전으로 이동하는 작업을 하고 있다. 사실 이전 작업 방법에 대해선 Next.js Docs에 잘써있는데, 그래도 한번 쓱 번역하면서 직접 처음부터 끝까지 글을 한번 쭉 보면 머리에 더 쏙쏙 박히는 것 같아서 한글로 대충 번역을 했다. 근데 이걸 또 공유해달라는 친구가 있어서 정말 러프하게 내가 보려고 대충 쓴 글이지만 블로그에 기록으로 남기려고 한다. 업데이트하는 방법은, 페이지 단위로 아래 글에 적힌 번호 순서대로 쓱쓱 따라가면 된다. 1. npm install next@latest ㄱㄱㄱ 2. src/안에 app 디렉토리를 만든다. 3. Root Layout 폴더를 만든다 - app/layout.tsx e.. 2023. 10. 7. [React] 커스텀훅(Custom Hook) Custom hook이란?React의 커스텀 훅(custom hook)은 리액트의 함수형 컴포넌트에서 상태 또는 사이드 이펙트가 있는 로직을 재사용하기 위해 캡슐화할 수 있는 특정 네이밍 규칙을 따르는 함수이다. 커스텀훅을 사용하면 복잡한 로직을 재사용가능한 함수로 만들어버릴 수 있는데, 이렇게 할 경우 코드가 깰끔해지고 컴포넌트 내 관심사 분리를 유지하기 쉬워진다. 일반 함수 vs. 커스텀훅커스텀훅 또한 함수라고 했는데, 그렇다면 일반 함수와 커스텀 훅의 차이는 무엇일까? 1. 네이밍 규칙커스텀훅들은 "use"라는 이름으로 시작해야 한다(예: useFetchData). 이를 통해 리액트가 이 친구가 커스텀훅이라는걸 알 수 있게 되고, 리액트 내부에서 진행되는 특정 최적화 작업의 대상이 될 수 있다... 2023. 8. 16. TCP와 UDP TCP(Transmission Control Protocol) UDP(User Datagram Protocol) TCP와 UDP는 OSI 모델 4계층인 전송 계층에 속하는 프로토콜들이다. 같은 transport protocol이지만 이 두 프로토콜엔 차이가 존재한다. OSI 4계층, Transport Layer 4계층은 목적지 단말 안에서 동작하는 여러 애플리케이션 프로세스 중 통신해야 할 목적지 프로세스를 정확히 찾아가고, 패킷 순서가 바뀌지 않도록 잘 조합해 원래 데이터를 잘 만들어내기 위한 역할을 한다. TCP(Transmission Control Protocol) TCP는 네트워크상으로 데이터를 전송할 때 사용되는 신뢰성있는(reliable) 연결 기반(connection-oriented) 프로토.. 2023. 8. 15. 클라이언트 사이드 렌더링 vs. 서버 사이드 렌더링 (CSR vs. SSR) CSR과 SSR이란 CSR과 SSR은 클라이언트-서버 아키텍처 상 웹페이지를 렌더링할 수 있는 두가지 다른 방법을 뜻한다. CSR의 경우, 페이지 렌더링의 대다수는 클라이언트 쪽에서 React, Angular, Vue.js와 같은 자바스크립트 프레임워크를 사용해 진행된다. 클라이언트의 브라우저는 자바스크립트 코드를 다운로드 하고, 그 이후 브라우저에 컨텐츠를 동적으로 렌더링하기 위해 API 호출 등을 한다. 이러한 접근법은 더욱 인터렉티브하고 다이나믹한 유저 경험을 만들 수 있다는 장점이 있으며, 페이지 전체를 로딩할 필요 없이 특정 부분만 업데이트 된다는 장점이 있다. 반면, SSR의 경우엔 서버가 HTML 컨텐츠의 렌더링을 완성하여 클라이언트의 브라우저로 보낸다. 브라우저는 완전히 렌더링된 HTML을.. 2023. 8. 3. 이벤트 버블링(Event Bubbling)이란? 이벤트 버블링(event bubbling)은 웹 개발에서 사용되는 필수 개념 중 하나다. 이벤트가 발생했을 때, 해당 이벤트가 DOM 구조를 통해 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 특정 요소에서 버튼 클릭과 같은 이벤트가 발생하면, 그 이벤트는 그 특정 엘리먼트에서만 트리거되는게 아니라 이벤트가 발생한 요소의 부모 요소들과 document의 루트까지 트리거된다. 이벤트 버블링에 대한 이해는 효과적이면서 유지하기 쉬운 프론트엔드 앱을 개발하는데 필수적이다. 특히나 유저 인터페이스가 복잡하고 인터렉션 가능한 요소가 많은 프로젝트일 수록 그 효과가 더 커지기 때문에 미리미리 공부해두면 좋다. 이벤트 전파(Propagation)의 3단계 이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3.. 2023. 7. 27. 레이지로딩(lazy loading)이란? 레이지로딩 (lazy loading)이란? 레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술을 의미한다. 레이지 로딩의 목적은 (1) 최초 페이지 로딩 시간을 개선하고 당장 화면에 표시되지 않는 이미지, 영상 등의 리소스를 나중에 로딩하면서 (2) 최초 데이터 전달 양을 감소시키는 것이다. 웹페이지를 로딩하는 기존 방식은 모든 리소스들을 한번에 받는 것이다. 이렇게하면 최초 로딩 시간이 더 커지게 되는데, 이러한 로딩 시간 증가는 인터넷 연결 속도가 느린 지역이나 디바이스를 사용할 때 특히 더 두드러지게 체감된다. 이러한 문제를 해결하기 위해 사용할 수 있는 테크닉이 레이지 로딩인 것이다. 레이지 로딩을 적용.. 2023. 7. 27. [JS] 이벤트룹 (Event loop), 힙(Heap), 콜 스텍(Call stack) * 본 포스팅은 이벤트 룹이 무엇인지 공부하고 정리한 내용을 재작성한 것입니다. 자바스크립트 런타임 환경의 동작 원리를 이해할 때 빼놓을 수 없는 주제가 바로 이벤트룹(event loop)이다. 이 이벤트룹의 존재로 인하여 자바스크립트 엔진이 싱글 스레드(single-thread)임에도 불구하고 브라우저 또는 Node.js와 같은 환경에서 마치 멀티 스레드로 동작하는 것과 같은 효과를 낼 수 있게 되는 것이다. 이벤트룹(Event loop)이란? 이벤트룹(Event loop)은 자바스크립트 런타임 환경에 포함되어 있는 기능 중 하나로, (1) 자바스크립트 엔진 내 콜 스택(Call stack)이 비어있고(2) 런타임 환경 내 이벤트큐(Event queue(task queue 또는 message queue.. 2021. 11. 18. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
