전체 글(50)
-
TypeScript의 Object 타입 선언
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', id: ..
2023.04.25 -
TypeScript의 Type선언
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:..
2023.04.25 -
React의 Suspense, ErrorBoundary
Suspense 가 감싼 내부 컴포넌트 등이 로딩되는 동안 fallback(대체물)을 표시한다. 아래와 같은 상황에서 사용할 수 있다. 콘텐츠의 로딩시간이 필요할 때 콘텐츠를 한 번에 공개하고 싶을 때 전환이 일어나고 있음을 나타내고 싶을 때 더 많은 상황을 알고 싶다면... > 공식문서 참고 //로딩 시 대체내용 //로딩내용 작동원리는 아래와 같다. ChildrenComponent가 Promise를 던지면, Suspense가 이를 catch하고, Promise가 pending(보류중) 상태이면 LoadingFallback을 return하고, settled(fulfilled, rejected)(완료된(성공, 실패))이면 ChildrenComponent을 return 한다. * 하지만 무분별한 Suspen..
2023.04.20 -
React의 Router
React의 Router react는 SPA(Single Page Application)과 MPA(Multi Page Application) 중 SPA방식이다. 말 그대로 한 개의 화면으로 구성된 어플리케이션이다. 화면을 전환할 때 다른 화면으로 이동하지 않고 하나의 화면에 콘텐츠 내용만 변경한다. React-Router는 페이지를 새로 불러오지 않고 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. React에서 대표적으로 HashRouter와 BrowserRouter를 사용한다. 두 Router의 특징을 살펴보자! HashRouter 주소에 해시태그(#)가 붙는다. (www.test.com/#/path) 새로고침해도 에러가 발생하지 않는다. 검색엔진으로 읽지 못한다.(# 때문에) 주로 ..
2023.04.20 -
FLUX 패턴
MVC패턴 FLUX 패턴을 알기 전 MVC 패턴을 먼저 알아보자! MVC패턴은 Model, View, Controller로 구성되어 있으며 양방향 데이터 흐름(양방향 바인딩)을 가진다. 그림처럼 Model과 View에서 양방향 데이터 바인딩이 일어난다. 이 구조는 사용자의 입력에 따라 뷰가 모델을 업데이트 해야하고, 하나의 모델이 또 다른 모델을 업데이트해야 해서 프로그램의 내부구조가 복잡해질 수 있다. 내부 구조를 파악하기 어려운 양방향 데이터 바인딩 대신 단방향 데이터 바인딩을 사용하기로 했다. 단방향 데이터 바인딩을 사용하며, 새로운 데이터를 넣으면 처음부터 다시 시작되는 구성을 FLUX패턴이라고 한다. FLUX패턴은 Action, Dispatcher, Store, View로 이루어져 있고 데이터는..
2023.04.19 -
React와 데이터 바인딩
데이터 바인딩이란? 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 화면에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 일치시키는 기법이다. 데이터 바인딩은 양방향/단방향이 있다. 단방향 데이터 바인딩은 데이터와 템플릿을 결합하여 화면을 생성한다. 반면, 양방향 데이터 바인딩은 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다. > 즉, 화면 사이의 데이터가 계속해서 일치하게 된다. 단방향 데이터 바인딩 컴포넌트 내에서 '단방향 데이터 바인딩'은 JS(Model) -> HTML(View) 처럼 한 방향으로만 데이터를 동기화하는 것이다. 역으로 JS(Model)
2023.04.19