Front-End
-
[Typescript] 열거형(Enum) & Literal TypeFront-End(Web)/Typescript 2021. 2. 23. 04:06
앞서 타입을 공부하면서, 값들을 나열한 열거형(Enum)에 대해서 공부했다. 이것이 적용될 방법 중 하나가 바로 이 Literal Type인 것이다. 얼핏 보았을때, 자료형이 아닌 특정값을 직접적으로 타입으로서 설정하는 방법인 것 같다. 💙 열거형(Enums) 열거(Enum)는 비원시 타입이자, 멤버라 불리는 값의 집합을 이루는 자료형이다. enum 키워드로 선언하며, {} 안에 자료형을 나열한다. enum Fruits { Apple, Banana, Kiwi, } 열거형을 사용하는 대표적인 목적은, 특정 프로퍼티를 자료형보다는 값(혹은 값의 집합)으로 제한하고자 하는데 있다. - Enum 적용 다음 예제에서, enum(Subject)로 설정한 subject 프로퍼티를 string('Typescript')..
-
[Typescript] 인터페이스(Interface)Front-End(Web)/Typescript 2021. 2. 22. 19:12
이전 글에서부터, 타입의 커스터마이징에 대해 얘기하면서, 그리고 Type Aliase 를 공부하면서 Interface 가 종종 거론되었다. 타입의 유형화에 유리한 이 인터페이스에 대해 한번 알아보도록 하자. 💙 Interface 란? 인터페이스는 특정 자료형의 구조를 나타낸 일종의 커스텀 타입이다. 인터페이스는 Javascript같은 동적타입 언어환경에선 다뤄지지 않으나, 정적타입 언어인 Typescript는 타입검사가 요구되므로 이를 지원한다. - Interface 문법 및 적용 'interface' 키워드를 통해 제작할 수 있다. 나머지는, 변수선언 문법과 유사하다. * Interface 이름 첫 글자는 대문자로 시작하도록 한다. 다른 정적언어는 I+인터페이스명을 권장하나, 타입스크립트는 해당되지 않..
-
[Typescript] 타입(Type)Front-End(Web)/Typescript 2021. 2. 22. 18:24
타입스크립트의 가장 기본이 되는 타입(자료형)들에 대한 정리이다. 얼핏보니, 익숙한 JS 자료형들도 있고, 새로운 자료형과 (파이썬에서 본 튜플같은) 문법들이 등장한다. 차근차근 공부해보았따! 💙 타입 추론(Type Inference) 위 예시를 먼저 보자. ts파일에서, a라는 변수에 5(number)를 할당했다. 그런뒤, 이를 'five'(string) 으로 수정하려하니 에러가 발생했다. Typescript 에서는 변수타입이 명시되지 않은 경우, 타입정보를 제공하기 위해 유추를 하는데 이것이 '타입 추론' 인 것이다. 다음 예제를 보자. calculateCodingIQ() 라는 함수가 있고, 이는 lostPoints 라는 인자를 받아 뺄셈을 한 값을 반환한다. Typescript는 이 인자에 대해서도..
-
[Typescript] Typescript 기초 및 설정Front-End(Web)/Typescript 2021. 2. 22. 15:00
🤔 서론 2차 프로젝트가 끝나고 2주간의 개인학습 기간을 가지고 있다. 저번주 Redux에 이어, 이번주는 Typescript 에 대한 공부다. 우선 기본개념과 문법을 가이드북과 유튜브를 병행하며 학습해보고, Todo List를 만들어보면서 프로젝트 도입여부를 결정할 생각이다. 💙 Typescript 소개 [타입스크립트 가이드북] TypeScript는 2012년에 발표된 오픈 소스 프로그래밍 언어로, 대규모 JavaScript 애플리케이션 개발을 목적으로 Microsoft에 의해 개발되었습니다. [위키백과] 마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 파일인 .js를 출력한다. 최종적으로 런타..
-
[Redux] Redux-SagaFront-End(Web)/React - 라이브러리들 2021. 2. 21. 00:29
Redux-saga 역시 공식사이트에서 비동기의 최적화를 위한 미들웨어라고 소개하고 있다. 채용사이트를 보면 Redux 와 가장 많은 조합을 이루고 있었으며, thunk 에 비해 일관적으로 액션객체를 반환하는 장점이 있다고 한다. 이러한 Redux-saga에 대해 공부를 하면서, Redux 필수 미들웨어를 확실히 알고 넘어가려고 한다. 💜 Redux-Saga 알아가기 redux-saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다. (원문) redux-saga is a library that aims to make application ..
-
[Redux] Redux-thunkFront-End(Web)/React - 라이브러리들 2021. 2. 18. 15:40
🤔 Redux 의 비동기 오류 Context API 에서 Redux 로 수정하는 토이 프로젝트를 진행하는 중이었다. action 생성자들을 별도파일로 제작하여 import 해서 사용중이었고, 이처럼 fetch() 로 가져온 데이터로 상태를 최신화할때 에러가 생겼다. 내용은 대충, fetchList() 라는 액션 생성자에 cartList를 담았는데 이것이 객체형태로 정상적인 반환이 되지 않은 것 같다. 또한, 대놓고 Async action에 대한 미들웨어를 사용하라고 권장하고 있다. 이러한, 비동기 처리를 위한 적절한 미들웨어를 찾아보았다. 💜 Redux-thunk 알아가기 리덕스를 사용하는 앱에서 비동기 작업을 사용할 때, 가장 기본적인 방법으로 사용되는 것이 redux-thunk 이다. 이 미들웨어는,..
-
[Redux] 미들웨어(Middleware)Front-End(Web)/React - 라이브러리들 2021. 2. 18. 02:29
🙃 Redux 너란 녀석... Redux의 장점이자 단점이... 깊은 역사와 엄청난 생태계인 것 같다. 그만큼 많은 부가기능들과 트랜디한 업데이트들이 지원되고 있으며, 대체되는 기술들이 등장하지만 바로 넘어가기엔 부담이 있다. 분명, 소규모 프로젝트에까지 도입하기엔 다소 무게감이 있는 친구지만, Context API에 비해 완성도가 있다고 느껴진다. 오늘은 그 이유 중 하나인, 위에서 말한 '부가기능'에 해당하는 미들웨어의 개념을 간단히 공부해보았다. 💜 미들웨어(Middleware) 란? 미들웨어란 말이 낯설지는 않다. Node.js 서버 프레임워크인 Express.js 에서도 미들웨어라는 개념이 있었다. Request-Response 사이에 작동하는 함수들을 일컫는 말이었다. 즉, 미들웨어는 특정한 ..
-
[Redux] Hooks - useSelector, useDispatchFront-End(Web)/React - 라이브러리들 2021. 2. 17. 02:55
😅 서론 react-redux의 connect() 함수와, mapStateToProps, mapDispatchToProps 를 열심히 공부했는데... Dev Ed님 유튜브 영상을 복습하면서, useSelector, useDispatch 라는 간편한 Hooks들을 지원해주는 것을 알았다. (하마터면 connect() 함수로 프로젝트 진행할뻔) 이를 계기로, react-redux에서 지원하는 Hooks 들의 종류와 기능에 대해 한번 공부해보았다. 💜 React-Redux의 Hooks 적용 React-Redux 7버전 이후로, React 에 대한 Redux 관련 Hooks API들을 제공하게 되었다. 이에 따라, 이전의 connect() HOC(Higher-Order Component) 작업이 불필요해진 것이..