Dahoon06 Store

'무엇을' 풀어내는가에 집중하는 패러다임이며, 프로그램은 함수로 이루어진 것이다. 라는 명제가 담긴 패러다임 💡 패러다임이란? 프로그래밍의 관점을 갖게 하고 코드를 어떻게 작성할 지 결정하는 역할 선언형 프로그래밍이란? 명령형 프로그래밍은 어떻게 할지 표현하고, 선언형 프로그래밍은 무엇을 할 건지를 표현한다. 선언적 방식으로 접근하기 위해서는 명령형 방식으로 어떻게 접근하는가가 먼저 추상화되어야 한다. 선언적 접근 방식의 기저에는 명령형이 깔려있고 추상화 된 것이다. 함수형 프로그래밍이란? 작은 문제를 해결하기 위한 함수를 작성 부수 효과가 없는 순수 함수를 1급 객체로 간주하여 파라미터나 반환값으로 사용할 수 있으며, 참조 투명성을 지킬 수 있다. 부수 효과 (Side Effect) 변수의 값이 변경됨..

MVVM 패턴은 MVC 패턴에서 C인 Controller를 빼고 ViewModel을 추가한 패턴 (Model - View - ViewModel) Data Binding을 활용한 환경에서 데이터와 프레젠테이션 로직을 분리하기 위해서 만들어진 디자인 패턴이다. 💡 Command 와 DataBining 이란? Command: 여러 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 것 DataBinding: Model과 UI 요소 간의 싱크를 맞춰주는 것 View와 로직이 분리되어 있더라도 한 쪽이 바뀌면 다른 쪽도 업데이트가 이루어져 데이터의 일관성을 유지할 수 있다. View 사용자가 스크린을 통해서 보는 것들에 대한 구조, 레이아웃 형태를 정의 유저 인터랙션을 받는 역할로 인터랙션을 받을 시 Vie..

프록시 패턴 대상 객체(Subject)에 접근하기 전 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴 Subject : Proxy와 RealSubject를 하나로 묶는 인터페이스(다형성) 대상 객체와 프록시 역할을 동일하게 하는 추상 메서드 action() 정의 RealSubject : 원본 대상 객체 Proxy : 대상 객체(RealSubject)를 중계할 대리자 역할 프록시는 대상 객체를 합성(Composition)한다. 프록시는 대상 객체와 같은 이름의 메서드를 호출하며, 별도의 로직을 수행할 수 있다. (인터페이스 구현 메서드) 프록시는 흐름제어만 할 뿐 결과값을 조작하거나 변경시키면 안된다. Client : Subject 인터페이스를 이용하여 프록시 객체를 생성해..

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 알려주는 디자인 패턴 주체란? 객체의 상태 변화를 보고 있는 관찰 옵저버들이란? 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 "추가 변화 사항"이 생기는 객체들을 의미 옵저버 패턴은 다른 디자인 패턴과 다르게 일대다 (one-to-many) 의존성을 가진다. 옵저버 패턴의 특징 애플리케이션이 한정된 시간, 특정한 케이스에만 다른 객체를 관찰해야하는 경우 대상 객체의 상태가 변경될 때마다 다른 객체의 동작을 트리거해야할 때 한 객체의 상태가 변경되면 다른 객체도 변경해야할 때 MVC 패턴 Model 과 View 의 관계는 옵저버 패턴의 Subject 역할과 Observer 역..

전략 패턴는 정책 패턴(policy pattern)이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고 전략이라고 부르는 '캡슐화한 알고리즘' 을 컨택스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴 쉽게 말하면 객체들이 할 수 있는 행위 각각에 대해 전략 클래스를 생성하고, 유사한 행위들을 캡슐화 하는 인터페이스 객체의 행위를 동적으로 바꾸고 싶은 경우 직접 행위를 수정하지 않고 전략을 바꿔주기만 함으로써 행위를 유연하게 확장 class Crawler { dataScrape(site: string) { if (site === 'naver') { console.log('naver') } else if (site === 'google') { console.log('google') ..

객체를 사용하는 코드에서 객체 생성 부분을 떼어내어 추상화한 팬턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스 에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴 팩토리 메소드 패턴 객체를 생성하기 위한 인터페이스를 정의하는데, 어떤 클래스의 인스턴스를 만들지는 하위 클래스에서 결정 (즉, 클래스 인스턴스 생성은 하위 클래스에게 맡기는 것) 추상 팩토리 패턴 인터페이스를 이용하여 서로 연관된, 또는 의존하는 객체를 구상 클래스를 지정하지 않고도 생성 (new 지시자를 사용하여 구상 클래스를 만드는 것) 자바스크립트에서의 팩토리 패턴 const factory1 = new Object(10); const factory2 = new Object('전다훈'); fac..

싱글톤 패턴이란? 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나이고 최초 생성 이우에 호출된 생성자는 최초의 생성자가 생성한 객체를 리턴 프로그램 내에서 하나의 객체만 존재 프로그램 내에 여러 곳에서 해당 객체를 공유받아 사용해야하는 경우 싱글톤 패턴의 장점 1. 메모리 측면의 이점 싱글톤 패턴을 사용하게 될 경우 한 개의 인스턴스만을 사용하기 때문에 메모리 낭비를 방지할 수 있다. 2. 속도 측면의 이점 생성된 인스턴스를 사용할 때마다 이미 생성된 인스턴스를 활용함으로 속도 측면에 이점이 있다. 3. 데이터 공유가 쉽다. 전역으로 사용하는 인스턴스이기 때문에 다른 여러 클래스에서 데이터를 공유하여 사용할 수 있다. 💡 경험 웹 사이트 크..

netlify에 Nextjs 프로젝트를 배포하는 과정에서 배포가 되지 않는 문제가 발생하였다. 첫 번째 시도 React나 Vue를 netlify에 배포를 할 경우 _redirects 파일을 생성하여 이동 경로를 잡아주었었다. 그래서 Nextjs에서도 동일한 방법으로 해주면 될 줄 알았는데 실패.. 그래서 찾던 중에 _redirects 파일을 생성하는 대신 next.config.js 안에 rewrite() 를 설정을 해주어 배포하라는 글을 보게되어 배포해보았아. 이전에는 build 자체가 되지 않았었는데 이번엔 build를 성공했고, 배포까지 정상적으로 이루어졌으나 라우터 문제는 그대로 해결되지 않았다.. module.exports = { async rewrites() { return [ { source:..