원래는 search 페이지의 UI를 시작해야 하지만, 공공데이터를 가지고 오기 위해 redux toolkit을 이용한 slice를 미리 만들어두려고 했다가, typescript를 이용한 redux toolkit 사용 방법은 조금 다르다는 것을 깨달았다. 원래 쓰던 slice 코드는 다음과 같다. import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' import axios from 'axios'; const API_URL = ''; export const 함수이름 = createAsyncThunk('slice이름/', async (payload, { rejectWithValue }) => { let result = null; try { cons..
리액트와 타입스크립트를 이용해 만들 예정이기 때문에, 먼저 타입스크립트를 깔아야 한다. npm install typescript --save-dev yarn add typescript --dev 둘 중 하나를 사용해서 깔아주면 된다. 그리고 타입스크립트를 사용하는 리액트 프로젝트를 만들면 된다. npx create-react-app 프로젝트이름 --template=typescript yarn create react-app 프로젝트이름 --template typescript 그런데 문제가 있었다. 타입스크립트를 써야 한다는 걸 중간에 떠올리고, 그냥 리액트 프로젝트를 만들어버린 거다. 이미 있는 리액트 프로젝트에 타입스크립트를 추가하려면 리액트 프로젝트에 이렇게 추가해준다. npm install --sav..
취업 준비 기간 동안 타입스크립트를 공부할 겸 개인 프로젝트를 하나 해보기로 했다. 프로젝트라고 해서 거창한 건 아니고, 공공 데이터 포털에 있는 무료 api를 사용해서 분실물을 찾는 사이트를 만들어보려고 한다. 이미 있는 서비스지만... 한 번 만들어보고 싶었다. UI는 고심하긴 했지만 그리 예쁘진 않다... 애초에 배경에 그림을 몇 개 붙여놓은 수준이니까. 검색이라도 잘 되게 하자. 원하는 기능은 다음과 같다. 타입스크립트는 처음 써보는 거라 조금 긴장된다. 아마 엄청 실수하고 수많은 에러에 부딪히겠지... 그래도 열심히 해보는 수밖에 없다.