Front-End(Web)
-
[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) 작업이 불필요해진 것이..
-
[Redux] React-ReduxFront-End(Web)/React - 라이브러리들 2021. 2. 16. 18:58
이전 포스팅에서 React+Redux 조합을 했듯이, Container 와 Presentational 기능분리의 번거로움이 있었다. 아마, 이를 Context API의 Provider, Consumer 개념처럼 Global State를 공급하는 역할을 이 react-redux가 해줄 것 같다. 💜 React? Redux? React-Redux? React는 자바스크립트 기반 SPA 라이브러리, Redux는 React 뿐만 아니라 JS환경의 상태관리를 개선하기 위해 등장한 라이브러리다. 그렇다면, React 프로젝트 시 설치하는 Redux 말고, React-Redux 라이브러리의 의의는 무엇일까? - 의의 Redux 자체는 React, Angular, Vue 및 vanila JS 를 포함한 모든 UI 레이..
-
[Redux] React + Redux App 만들기(생활코딩)Front-End(Web)/React - 라이브러리들 2021. 2. 16. 16:16
이번엔, React 컴포넌트와 Redux의 조합을 공부하려고 한다. (생활코딩 react-redux 과제와 함께) Global State를 Redux 문법을 통해서 다루는 것 뿐만 아니라, 디렉토리와 파일구조(store, reducer 등)를 배우는 것에도 중점을 둬야겠다. 💜 React Without Redux 💀 이번엔, 아래와 같이 숫자를 수정하고 표시하는데 있어 각각 두 번의 Depth를 거치는 컴포넌트를 React로 만들었다. // 1. AddNumber.js const AddNumber = ({ plusNum }) => { const [size, setSize] = useState(1); return ( Add Number { setSize(Number(e.target.value)); }} /..
-
[Redux] 순수 Redux App 만들기(생활코딩)Front-End(Web)/React - 라이브러리들 2021. 2. 15. 23:05
🧐 서론 앞서 Redux는 리액트뿐만 아니라 모든 환경에서 (심지어 vanila JS에서도) 사용가능한 상태관리 툴이라고 했다. 먼저, Redux의 기본개념들과 활용법을 HTML scriipt 환경에 적용하면서 공부해보고, 추후 react-redux 를 활용해 리액트에서의 활용법을 공부하려고 한다. 💜 Without Redux 💀 이처럼, 버튼을 누르면 박스들의 색깔이 바뀌는 앱을 만든다고 가정하자. 이처럼, 색깔(박스)들이 추가될 때 마다 색깔함수와, 모든 함수의 onclick 인자로 각각 추가를 해줘야한다. 지금은 HTML 안에 모두 들어있지만, 박스 하나하나가 컴포넌트라면 그만큼 수정소요와 props Drilling 추가가 필요할 것이다. 💜 With Redux 😍 - 설치 우선, Redux 라이브..