수업에서나 자격증에서나 디자인 패턴에 대해서 이야기 하지만 직접 사용해보지 않으면 디자인 패턴의 필요성에 대해서 완전히 이해하기는 어렵다.사실 우리는 개발할 때 디자인 패턴을 몰라도 된다.그리고 우리는 우리가  모르는 사이에 디자인 패턴의 형태로 구현을 하고 있었을지도 모른다. 그럼에도 왜 디자인 패턴을 알아야하는지 쉽게 이해해보자! 1. 디자인 패턴이란특정 요리를 만들 때, 어떤 재료를 사용하고 어떤 절차로 요리해야 하는지 레시피가 있다.스파게티를 만들 때, 면을 끓인 뒤 소스와 버무리는 단계는 대부분의 스파게티 요리에 공통적으로 적용된다. 마찬가지로 개발을 할 때 특정 상황에서는 어떻게 개발해야 하는지 정의한 것이 디자인 패턴이다. 2. 디자인 패턴을 사용하는 이유1) 재사용 가능성과 효율성    -..

ErrorBoundary를 React의 컴포넌트 중 하나이다. (라이브러리 X)특정 범위의 컴포넌트를 렌더링할 때 발생하는 JavaScript 에러를 감지 및 처리하도록 돕는다.이와 같은 역할을 할 수 있는데 자세한 사용 예시 등 꿀팁은 글을 통해서 확인해보자!- 에러 기록- 에러 영향 범위 축소- 사용자에게 에러 화면 제공 1. ErrorBoundary의 에러 감지 범위ErrorBoundary는 렌더링 시 발생하는 에러를 감지하며, Errorboundry 하위 컴포넌트 영역에서 발생한 에러를 감지한다.아래 예시에서 두 children에서 발생한 에러들을 감지할 수 있다.  2. ErrorBoundary의 에러 감지[ErrorBoundary가 잡을 수 있는 JavaScript 관련 에..

TS에서 object 타입을 선언할 때 'interface'와 'type'을 사용한다. interface선언하기interface ButtonName { name: string; id: number;}만약 id가 number 또는 빈 값이라면 아래와 같이 표현할 수 있다.두 개가 같은 표현이다.id: number | null;id?: number;정의하기const btn: ButtonName = { name: 'button1', id: 1};확장하기(상속)// extends로 확장하기interface ButtonName2 extends ButtonName { activate: boolean;}const btn2: ButtonName2 = { name: 'button2', ..

TS은 JS 기반의 언어이다.TS와 JS의 차이는 Type지정 여부이다.Type을 지정함으로써 나타나는 장점은 아래와 같다.Type관련 오류발생 저하JS보다 빠른 속도원하는 Type으로 지정가능 함수- 함수 선언식function funcName(param1: type1, param2: type2): resultType{ ... return ...}- 함수 표현식const funcName = (param1: type1, param2: type2): resultType => ...;- return값이 없는 함수function funcName():void { ...} 변수let strVar: string = '문자열';let numVar: number = 1;let nullVar: null = null;..

Suspense가 감싼 내부 컴포넌트 등이 로딩되는 동안 fallback(대체물)을 표시한다. 아래와 같은 상황에서 사용할 수 있다.콘텐츠의 로딩시간이 필요할 때콘텐츠를 한 번에 공개하고 싶을 때전환이 일어나고 있음을 나타내고 싶을 때더 많은 상황을 알고 싶다면... > 공식문서 참고}> //로딩 시 대체내용 //로딩내용작동원리는 아래와 같다.ChildrenComponent가 Promise를 던지면, Suspense가 이를 catch하고, Promise가 pending(보류중) 상태이면 LoadingFallback을 return하고, settled(fulfilled, rejected)(완료된(성공, 실패))이면 ChildrenComponent을 return 한다. * 하지만 무분별한 Suspense사..

React의 Routerreact는 SPA(Single Page Application)과 MPA(Multi Page Application) 중 SPA방식이다.말 그대로 한 개의 화면으로 구성된 어플리케이션이다.화면을 전환할 때 다른 화면으로 이동하지 않고 하나의 화면에 콘텐츠 내용만 변경한다.React-Router는 페이지를 새로 불러오지 않고 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. React에서 대표적으로 HashRouter와 BrowserRouter를 사용한다.두 Router의 특징을 살펴보자! HashRouter주소에 해시태그(#)가 붙는다. (www.test.com/#/path)새로고침해도 에러가 발생하지 않는다.검색엔진으로 읽지 못한다.(# 때문에)주로 정적인 페이지에 ..

MVC패턴 FLUX 패턴을 알기 전 MVC 패턴을 먼저 알아보자!MVC패턴은 Model, View, Controller로 구성되어 있으며 양방향 데이터 흐름(양방향 바인딩)을 가진다.그림처럼 Model과 View에서 양방향 데이터 바인딩이 일어난다.이 구조는 사용자의 입력에 따라 뷰가 모델을 업데이트 해야하고, 하나의 모델이 또 다른 모델을 업데이트해야 해서 프로그램의 내부구조가 복잡해질 수 있다. 내부 구조를 파악하기 어려운 양방향 데이터 바인딩 대신 단방향 데이터 바인딩을 사용하기로 했다.단방향 데이터 바인딩을 사용하며, 새로운 데이터를 넣으면 처음부터 다시 시작되는 구성을 FLUX패턴이라고 한다.FLUX패턴은 Action, Dispatcher, Store, View로 이루어져 있고데이터는 Dispa..

데이터 바인딩이란?두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다.화면에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 일치시키는 기법이다.데이터 바인딩은 양방향/단방향이 있다.단방향 데이터 바인딩은 데이터와 템플릿을 결합하여 화면을 생성한다.반면, 양방향 데이터 바인딩은 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다. > 즉, 화면 사이의 데이터가 계속해서 일치하게 된다. 단방향 데이터 바인딩컴포넌트 내에서 '단방향 데이터 바인딩'은 JS(Model) -> HTML(View) 처럼 한 방향으로만 데이터를 동기화하는 것이다.역으로 JS(Model)  양방향 데이터 바인딩 (자동 동기화)컴포넌트 내에서 '양방향 데이터 바인..

1. 상태관리(State Management)란?데이터를 관리하는 방법데이터를 설계된 UI/UX에 맞게 설계하고 구현하는 일네트워크를 통해 서버로 전달되는 클라이언트의 요청에 따라 변화하는 상태를 관리하는 일  2. MobX의 주요 개념MobX는 react의 상태 관리 라이브러리이다. 1) Observable state(관찰 받고 있는 "state")state의 변경이 있으면 MobX에서 관찰하고 있다가 어떤 부분이 바뀌었는지 파악 2) Computed Value(연산된 값)Observable state의 변화에 따른 값이벤트 발생으로 인해 어떠한 연산에 필요로 하는 state에 변화 발생 시, 그 state변화에 따라 새로운 연산 작업 수행 > 만약 변화 없으면 기존 값 사용 3) Reactions (..

객체지향 프로그래밍에서 객체의 데이터는 객체 외부에서 직접적으로 접근하는 것을 막는다.객체의 무결성을 위해서이다. (사람의 나이를 외부에서 음수로 설정하면 무결성 깨진다.) 데이터는 외부에서 접근하지 않도록 막고, 메소드는 공개하여 외부에서 메소드를 통해 데이터에 접근하도록 한다.메소드는 매개값 검증으로 유효한 값만 데이터로 저장할 수 있다. (사람의 나이는 양수 값만 저장할 수 있다) 이 역할을 하는 메소드가 Setter!  외부에서 객체의 데이터를 읽을 때도 메소드를 사용하는 것이 좋다. 객체 외부에서 객체 값을 사용하기에 부적절한 경우가 있다.이런 경우 메소드로 필드값을 가공한 수 외부로 전달한다. 이 역할을 하는 메소드가 Getter!  참조https://developer-talk.tistory...