Taak-e's Dev-Log

Design Pattern (MVC & Flux)

1. Design Pattern 소프트웨어를 설계하면서 자주 발생하는 문제에 대한 모범답안 (설계 노하우를 패턴으로 정리) 일부 코드를 해결하기 위한 비교적 작은 범위를 다루는 것들도 존재, 애플리케이션 전체를 설계할 때 사용하는 큰 범위를 다루는 것들도 존재 2. MVC 애플리케이션 전체를 다루기 위한 디자인 패턴들은 통상 여러 작은 범위의 디자인 패턴들을 함께 사용해서 만들어지기에 복합패턴이라고도 부른다. 시간이 흐름에 따라 애플리케이션의 규모는 점점 다양하고 거대해지며 이를 해결하기 위한 여러가지 디자인 패턴들도 많이 나오게 되었다. 그 중 모든 복합 패턴의 근간이라고 부를 수 있는 패턴이 MVC 패턴이다. MVC 패턴은 애플리케이션을 Model, View, Controller 세가지 구성요소로 나..

의존성 / DIP / 의존성 주입

1. 의존성 (Dependency) 이란? 의존성이란 특정한 모듈이 동작하기 위해서 다른 모듈을 필요로 하는 것 2. 의존성 역전 원칙(DIP) “유연성이 극대화된 시스템"을 만들기 위한 원칙이다. 이 말은 곧 소스 코드 의존성이 추상에 의존하며 구체에는 의존하지 않는 것을 의미한다. 추상 - 구체적인 구현 방법이 포함되어 있지 않은 형태를 의미 - 쉽게 말하면, 그 내부가 어떻게 구현되어있는지 신경쓰지 않고 그냥 내가 “해줘야 하는 일”과 “결과"만 신경쓸 수 있게 된다는 것 구체 - 실질적으로 해당 동작을 하기 위해서 수행해야 하는 구체적인 일련의 동작과 흐름을 의미 - 구체적인 동작들은 굉장히 빈번하게 변경될 여지가 많다. - 이러한 구체에 애플리케이션이 점점 의존하게 된다면 결국 구체가 변할 때 ..

횡단 관심사 (Cross-cutting-concerns)

1. 횡단 관심사 (Cross-cutting-concerns) 란? 횡단 관심사의 의미 - 횡단 관심사란 여러 서비스에 걸쳐서 동작해야 하는 코드 - 관심사란 코드가 하고자 하는 목적, 동작을 의미한다고 하면 확장해서 횡단 관심사란 애플리케이션 내 여러 핵심 비지니스 로직들에 걸쳐서 실행되어야 하는 동작들 횡단 관심사의 대표적인 예시 인증 & 인가 로깅 트랜잭션 처리 에러처리 횡단 관심사는 여러 비지니스 로직들에 걸쳐서 실행되어야 하기 때문에 횡단 관심사를 잘 처리하는 것은 애플리케이션의 유지보수에서 중요하다. 만약, 핵심 비지니스 로직과 횡단 관심사가 혼재되어 버리면, 추후 비지니스 로직, 횡단 관심사 모두를 수정하기 힘들어지는 상황이 발생한다. 예를 들어 인증 로직이 핵심 비지니스 로직 안에 혼재된다..

관심사의 분리 & 리액트에서 관심사를 분리하는 법

1. 관심사의 분리 (Seperation Of Concerns) 관심사의 분리(Seperation Of Concerns) 는 좋은 코드를 짜기 위한 가장 기본적인 원칙이며, 더 좋은 애플리케이션을 만들기 위한 여러 디자인 패턴, 기법, 아키텍쳐 등은 결국 모두 이 SoC를 가장 기본적인 원칙으로 삼고 있다. 관심사 - 간단히 말해서 하나의 모듈이 수행하고자 하는 목적이다. 여기서 모듈은 함수, 클래스 등의 단위로 해석할 수 있다. 관심사의 분리 (SoC) - 각 모듈들이 한번에 여러 관심사를 처리하려고 하지 않고, 하나의 관심사만 처리하도록 분리하는 것 1-1. 관심사를 분리하는 이유 하나의 모듈에서 여러 기능을 할 수 있으면 어떻게 보면 효율적이고 좋을 것 같은데 왜 하나의 모듈은 하나의 관심사만 처리..

Context API 개념과 사용법

Context API 1. 개념 React에서 제공하는 내장 API로서 컴포넌트들에게 동일한 Context(맥락)을 전달하는데 사용할 수 있다. 일반적으로 리액트에서 데이터를 전달하는 기본 원칙은 단방향성이다. 즉, 부모 컴포넌트에서 자식 컴포넌트 방향으로만 데이터를 전달할 수 있다는 의미다. 단방향성은 애플리케이션의 안전성을 높이고 흐름을 단순화하는데 유용하지만 때때로 너무 많은 단계를 거쳐서 자식 컴포넌트에 데이터를 전달해야 한다는 문제점을 야기하기도 한다. 예를들어 5단계 아래에 위치한 자식 컴포넌트에게 데이터를 넘겨야 한다면, 중간에 4개의 컴포넌트는 해당 데이터를 사용하지 않을지라도 props를 계속해서 넘겨줘야하는 문제가 발생한다. 또한, 형제 관계나 특정 범위 안에 있는 컴포넌트들에게 데이터..

useEffect의 Dependency array(의존성 배열)

useEffect의 의존성 배열 useEffect에서 의존성 배열을 다루는 것은 굉장히 중요한 부분 의존성 배열을 제대로 다루지 못한다면 useEffect를 사용하면서 버그가 발생할 확률이 굉장히 높아진다. 1. 의존성 배열이란? 의존성 배열이란 얕게 이해하자면 useEffect에 두번째 인자로 넘기는 배열 그리고 두번째 인자를 넘기지 않으면 Effect는 매번 실행 빈 배열을 넘긴다면 컴포넌트의 첫번째 렌더링 이후에만 실행 이렇게만 이해하고 그동안 useEffect를 사용하고 있었다면 애플리케이션에서 버그가 발생할 확률이 굉장히 높다. useEffect의 시그니쳐는 아래와 같다. useEffect(effect, 의존성) 여기서 effect는 함수의 형태로 표현되고, 의존성은 여러 의존성들을 한번에 전달..