절차지향 프로그래밍(Procedural Programming)은 일이 처리되는 논리적인 순서에 따라 코드를 작성하는 패러다임입니다. 물이 위에서 아래로 흐르듯, 프로그램이 정해진 순서대로 한 단계씩 계산 과정을 수행하죠.코드가 실행되는 방식 그대로를 코드로 구현하기 때문에 가독성이 높고 실행 속도가 빠르다는 장점이 있습니다. 이 때문에 복잡한 계산이 많은 작업에 효과적입니다.반면에, 모든 것이 유기적으로 연결되어 있어 기능을 별도의 모듈로 나누기 어렵고, 이로 인해 유지보수성이 떨어진다는 단점이 있습니다.const list = [1, 2, 3, 4, 5, 11, 12];let max = 0; // 최댓값을 저장할 변수를 선언// 배열의 첫 요소부터 마지막까지 순서대로 반복for (let i = 0; i ..

객체지향 프로그래밍(OOP, Object-Oriented Programming)은 우리가 사는 세상을 바라보듯, 프로그램을 독립적인 '객체'들의 모임으로 보고 이들의 상호작용으로 시스템을 표현하는 패러다임입니다. 데이터를 별개의 것으로 취급하는 대신, 데이터와 그 데이터를 처리하는 메서드(Method)를 하나의 객체로 묶어 관리하죠.OOP는 잘 설계하면 코드의 재사용성과 유지보수성을 크게 높일 수 있지만, 초기 설계에 많은 시간이 소요되고 다른 패러다임보다 상대적으로 속도가 느릴 수 있다는 특징이 있습니다.// 최댓값을 찾는 로직 (OOP 스타일)const initialList = [1, 2, 3, 4, 5, 11, 12];class List { constructor(list) { this.lis..

선언형 프로그래밍은 '어떻게(How)'가 아닌 '무엇을(What)'에 집중하는 개발 방식입니다. 우리가 원하는 결과물을 선언하면, 그 과정은 컴퓨터에 맡기는 것이죠.이러한 선언형 패러다임의 핵심에는 "프로그램은 함수로 이루어진 것이다"라는 명제를 담고 있는 함수형 프로그래밍이 있습니다.🧩 함수형 프로그래밍 (Functional Programming)함수형 프로그래밍은 '순수 함수'들을 블록처럼 쌓아 로직을 만들고, '고차 함수'를 통해 재사용성을 높이는 프로그래밍 패러다임입니다.// 최댓값을 찾는 로직const list = [1, 2, 3, 4, 5, 11, 12];const ret = list.reduce((max, num) => (num > max ? num : max), 0);console.log..

개발을 시작할 때 우리는 수많은 '관점'과 마주하게 됩니다. 이 관점, 즉 프로그래밍 패러다임은 프로그램을 어떻게 구성하고 문제를 어떻게 해결할지에 대한 생각의 틀, 즉 개발 방법론입니다.어떤 패러다임을 사용하느냐에 따라 코드의 모양과 구조가 완전히 달라지죠. 예를 들어, 객체지향 프로그래밍은 프로그램을 상호작용하는 '객체'들의 집합으로 보는 반면, 함수형 프로그래밍은 프로그램을 '함수'들의 연속적인 호출로 봅니다.프로그래밍 패러다임은 크게 선언형과 명령형이라는 두 가지 접근 방식으로 나눌 수 있습니다. 🌐 현대 프로그래밍과 멀티-패러다임과거에는 하나의 언어가 하나의 패러다임을 강하게 지지했지만, 현대의 많은 언어는 멀티-패러다임을 지원합니다. 파이썬, 자바스크립트, C++ 등은 개발자가 상황에 맞게 ..

MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴입니다. 뷰모델은 뷰를 위한 전담 매니저라고 생각할 수 있습니다. 뷰가 무엇을 보여줘야 할지, 사용자가 어떤 행동을 할지 미리 다 알고 준비해주는 전문적인 역할입니다. MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징입니다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있습니다.🪄 MVVM 패턴의 예 : 뷰MVVM 패턴을 가진 대표적인 프레임워크로는 뷰(Vue.js)가 있습니다. Vue.js는 데이터가 변경될 때마다 화면이 알아서 반응하여 업데이트되는 반응형(reactivity)이 특징인 프런트엔..

MVP 패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴입니다. 뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴입니다. 1. MVP 패턴은 무엇인가요? MVP 패턴은 MVC 패턴에서 파생된 디자인 패턴으로, 컨트롤러가 프레젠터로 대체된 점이 가장 큰 특징입니다. MVC에서 컨트롤러는 모델과 뷰에 대한 정보를 모두 알고 직접 제어하지만, MVP의 프레젠터는 뷰와 모델 사이의 중개자 역할만 수행합니다. 즉, 사용자의 입력은 뷰를 통해 프레젠터로 전달되고, 프레젠터는 필요한 로직을 모델에 요청한 뒤 그 결과를 다시 뷰에 전달하여 화면을 업데이트합니다. 이 구조에서 뷰와 프레젠터는 인터페이스를 통해 1..

MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴입니다. 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있습니다. 재사용성과 확장성이 용이하다는 장점이 있고, 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점이 있습니다. 1. 모델(model) - 핵심 데이터와 그 데이터를 처리하는 규칙모델은 애플리케이션의 데이터인 데이터베이스, 상수, 변수를 뜻합니다. 사각형 모양의 박스 안에 글자가 들어 있다면 그 사각형 모양의 박스 위치 정보, 글자 내용, 글자 위치, 글자 포멧에 관한 정보를 모두 가지고 있어야 합니다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거..

노출모듈 패턴(revealing module pattern)은 자바스크립트에서 변수나 함수가 의도치 않게 외부에서 바뀌거나 겹치는 것을 막기 위해, 마치 하나의 '캡슐'처럼 코드를 안전하게 포장하는 패턴입니다. 이 캡슐의 일부 내용물은 외부에서 볼 수 없도록 숨기고(private), 허락된 것들만 밖으로 내보여서 사용할 수 있게(public) 해줍니다. 💻 코드 예시1. 자바스크립트(JavaScript)에서의 노출모듈 패턴a와 b는 다른 모듈에서 사용할 수 있는 변수나 함수인 private 범위를 가집니다. c와 d는 다른 모듈에서 사용할 수 있는 변수나 함수이며 public 범위를 가집니다. 참고로 앞서 설명한 노출모듈 패턴을 기반으로 만든 자바스크립트 모듈 방식으로는 CJF(CommonJS) 모듈 ..

이터레이터(iterator)를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴입니다.이를 통해 순회할 수 있는 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능합니다.💻 코드 예시1. 자바스크립트(JavaScript)에서의 이터레이터 패턴다른 자료 구조인 set과 map임에도 똑같은 for a of b라는 이터레이터 프로토콜을 통해 순회하는 것을 볼 수 있습니다.const mp=new Map()mp.set('a',1)mp.set('b',2)mp.set('c',3)const st=new Set()st.add(1)st.add(2)st.add(3)for (let a of mp)console.log(a)for(let a of st) console.log(a)/*['a',1][..

대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층이 있는 디자인 패턴입니다.객체의 속성, 변환 등을 보안하며 보안, 데이터 검증, 캐싱, 로깅에 사용합니다. 이는 앞서 설명한 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용됩니다. 용어설명 :프록시 서버에서의 캐싱: 캐시 안에 정보를 담아두고, 캐시 안에 있는 정보를 요구하는 요청에 대해 다시 멀리 있는 원격 서버에 요청하지 않고 캐시 안에 있는 데이터를 활용하는 것을 말합니다.사용자가 자주 요청하는 데이터를 프록시 서버가 미리 복사해서 보관(캐싱)해둡니다. 덕분에 진짜 서버까지 가지 않고도 프록시 서버가 바로 데이터를 전달해 줄 수 있어 속도가 매우 빨라집니다.불필요하게 외부와 연결하지 ..