Front End42 [TypeScript] Utility Types 회사 프로덕트에서 자바스크립트 대신 타입스크립트를 기본으로 쓰기 때문에 조금 더 잘 이해하고 쓰기 위해서 타입을 정리해본다. 스터디로 타입 스크립트 챌린지를 하고 있기도 한데, 타입스크립트를 사용해본 건 VS Code에서 마우스를 위에 올리면 나오는 타입으로 가져다가 쓰기만 하는 것으로 충분하지 않기 때문에. 흔히 타입스크립트는 자바스크립트에 타입을 얻은 것이라고 표현한다. 그렇기 때문에 타입스크립트 안에 자바스크립트가 포함된다. TypeScript의 Utility Types 페이지에서 'TypeScript는 일반적인 타입 변환을 쉽게 하기 위해서 몇 가지 유틸리티 타입을 제공합니다. 이러한 유틸리티는 전역으로 사용 가능합니다.'라고 공식문서에 쓰여있다. https://youtu.be/IeXZo-JXJj.. 2022. 3. 14. [Redux] todoMVC에 Redux 적용하기 스터디를 하며 알게 된 사이트. 새로 접하는 프레임워크에 익숙해지기 위해 개발자들이 많이 만들어보는 것이 todo 앱이 아닐까 싶다. 이 웹사이트에서는 기본적으로 여러 프레임워크로 만들 수 있는 소스를 깃허브에서 제공하고 있으니 많은 도움이 될 것이다. 스터디에서 하드트레이닝을 할 때는 React + TypeScript + State management의 조합으로 여러가지를 해보았다. 이 중에서 Redux toolkit, jotai를 써보았기에 각각의 조합에 대한 과정을 기록해보려고 한다! [React + TypeScript + Redux] 프론트엔드 개발자라면 한 번쯤은 들어봤을법한 상태관리 라이브러리 'Redux'. 지난 포스팅에서도 언급했었지만, 이 라이브러리를 사용하는 기본적인 원리를 이해하기 위.. 2022. 2. 14. [React] 직접 개발 환경을 구축하고 배포시 이미지가 안 보일 때 | copy-webpack-plugin CRA(Create React App)를 쓰지 않고 리액트 개발환경을 직접 구축할 수 있다는 것을 알게 된 이후 npx create-react-app my-app 같은 명령어를 커맨드라인에 치는 것보다 하나라도 직접 해보자는 생각으로 과제를 할 때 바벨과 웹팩을 이용하여 리액트 개발환경을 구축하고 있다. 그러면서 CRA가 얼마나 많은 환경설정들을 포함하고 있는지도 알게 되는 중이다. 사전과제를 진행하면서 로컬에 이미지 파일을 저장하고 배포할 때 같이 묶어서 배포하는데 데브서버에서 잘 보이던 이미지가 배포를 하고 나니 원하는대로 보이지 않고 엑박인 상황이 발생했다. file-loader를 설정해줘야 했나 싶어서 설치하고 웹팩에 해당 설정을 해주었는데도, npm build 로 앱이 빌드된 상황을 보니 설정해.. 2022. 1. 19. [React] CRA 쓰지 않고 리액트 개발환경 구축 | webpack.config.js 리액트로 개발을 하는 사람이라면 직접 개발환경을 구축하기보다는 npx create-react-app my-app 이라는 명령어로 개발환경을 구축하는 경우가 많을 것 같다. 나는 리액트를 처음 시작할 때, 개발환경을 직접 구축할 수 있다는 생각을 하지 못했고 위의 명령어를 사용하는 것이 리액트를 사용하는 방법이라고만 알고 있었다. 그런데 리더님이 넘겨주신 자료를 보며, babel과 webpack을 포함하여 직접 리액트의 개발환경을 구축할 수 있다는 사실을 알게 되었다. CRA로 개발환경을 구축하면 편리하다는 장점이 있지만, 사용하지 않는 기능까지 포함하여 모듈의 크기가 크다는 단점을 꼽을 수 있다. 프론트엔드 스터디의 1주차 과제로 리액트 개발환경 구축하기를 하고 이를 계기로 webpack에 대한 궁금증이.. 2022. 1. 4. [TS + React] 원래 가지고 있는 state와 props로 받는 state가 다를 때 프론트엔드 스터디에 참여하기 시작하면서 TodoMVC라는 걸 리액트와 타입스크립트의 조합으로 구현해보고 있다. 타입스크립트에 대한 아주 얕은 기본 지식만 있는 상태에서 쓰려니 VS code에서 계속 마주하게 되는 에러들. 오늘 문서를 참고하며 기능구현을 하다가 내가 마주한 에러는 이것. // App.tsx import React, { useState } from 'react'; import Header from 'components/Header'; import Main from 'components/Main'; import Footer from 'components/Footer'; const App = () => { const [todoList, setTodoList] = useState([]); ret.. 2021. 12. 24. 이전 1 2 3 4 ··· 9 다음
