react15 [Redux] todoMVC에 Redux 적용하기 스터디를 하며 알게 된 사이트. 새로 접하는 프레임워크에 익숙해지기 위해 개발자들이 많이 만들어보는 것이 todo 앱이 아닐까 싶다. 이 웹사이트에서는 기본적으로 여러 프레임워크로 만들 수 있는 소스를 깃허브에서 제공하고 있으니 많은 도움이 될 것이다. 스터디에서 하드트레이닝을 할 때는 React + TypeScript + State management의 조합으로 여러가지를 해보았다. 이 중에서 Redux toolkit, jotai를 써보았기에 각각의 조합에 대한 과정을 기록해보려고 한다! [React + TypeScript + Redux] 프론트엔드 개발자라면 한 번쯤은 들어봤을법한 상태관리 라이브러리 'Redux'. 지난 포스팅에서도 언급했었지만, 이 라이브러리를 사용하는 기본적인 원리를 이해하기 위.. 2022. 2. 14. [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. [React] 로컬에서 데이터 로직에 대한 고민 개발이라고 해야할지, 퍼블리싱이라고 해야할지 그런 일을 리액트로 작업하고 있는데 한, 두개가 아닌 수십개의 이미지를 어떻게 하면 하드코드하지 않고 로직을 만들어서 브라우저에 띄울 수 있을까에 대한 고민과 이를 풀어낸 과정. 적은 개수의 이미지 같은 경우엔 src 폴더 안에 img 폴더를 따로 만들고 여기에서 해당 이미지를 import 해서 사용했는데 구글링을 해보니까 이미지 같은 경우는 굳이 import를 하지 않아도 public 폴더 안에 assets 폴더를 만들고 여기에 이미지를 넣어 로 사용할 수 있더라. 이미지를 컴포넌트에 직접 import해서 사용했던 방식 import React from 'react'; import dropdown from 'img/btn_dropdown.svg'; const .. 2021. 12. 22. [Redux] 리덕스의 흐름을 이해하기 위한 여정 바닐라 자바스크립트의 코드를 보고서 '어떤 내용인지 알겠다'정도의 감이 잡혔을 때 자바스크립트를 이용한 라이브러리 중 하나인 리액트를 배우기 시작했다. 유데미에 있는 리액트 강의 중 하나인 Modern React with Redux 라는 강의를 통해 리액트와 리덕스를 같이 공부하면 되겠다 생각했는데 리액트는 어찌어찌 내용의 흐름을 따라갈 수 있는 반면, 리액트에서 리덕스를 사용하는 강의로 넘어가는데 전혀 이해를 할 수 없었다. 리덕스의 진입장벽이 높다고 들었는데 이런 의미였던건가. 강사분도 리덕스에 대해 설명을 하면서 처음에는 이해하기 어려워도 쓰다보면 그 난이도가 그렇게 어렵게 느껴지지 않는다라고 언급했다. 상태관리를 양방향이 아닌 단방향으로 흐르게 하는 Flux를 바탕으로 설계된 것이 Redux라고 .. 2021. 12. 20. [React] Hook으로 카카오맵 API 사용하기 | 마커 표시, 커스텀 오버레이 📍카카오맵 API 키 발급받기 업체의 장소를 표현하기 위해 카카오맵 API를 사용하였다. https://developers.kakao.com로 접속해서 로그인을 하고 애플리케이션 추가하기 버튼으로 앱 키를 발급 받는다. 네이티브 앱 키, REST API 키, Admin 키, JavaScript 키 중에서 JavaScript 키를 이용한다. 📍도메인 등록하기 내 애플리케이션 > 앱 설정 > 플랫폼에서 구현하려는 운영체제에 맞게 플랫폼 등록을 한다. 리액트를 이용하여 웹 사이트 화면에 지도를 띄우려고 했기 때문에 Web 플랫폼에 등록을 했다. 그 도메인에서만 API를 사용할 수 있기 때문에 꼭 등록해줄 것! (최대 10개까지 가능) 📍카카오맵 API 문서 훑어보기 https://apis.map.kakao.c.. 2021. 12. 13. 이전 1 2 3 다음
