이직을 준비하면서 코딩을 잃지 않기 위해 스몰 프로젝트를 진행하기로 했다.
간략하게 모바일에서 사용하는 강의를 선택할수 있도록 하는 사이트를 제작하는 프로젝트 이다.
- 1일차 환경세팅
리액트로 도전하기 위해서 준비를 했다. 타입스크립트도 적용해보려고 한다.
근 1년간 vue로 업무를 진행해서 그런지 리액트를 오래간만에 하니 많이 까먹기도 한것 같다. 이전에 공부한것을 중점으로 리액트 환경을 설정하였다.
그동안 팀프로젝트로 여럿이서 작업하고는 했었는데 혼자하려니 막막하기도 했고 두렵기도 했었다. 그래도 기존에 배웠던것, 해왔던 것을 토대로 진행을 시작했다.
깃허브(오래간만에 써보는)로 이동하여 브랜치를 파서 레포지 토리를 연결해놓고 커밋 및 푸시를 진행하였다.
그리고 프리티어 설정, 라우터 및 styled component를 사용하기 위해
각각 익스텐션들을 다운받았다.
라우터 설정을 하기 위해 npm start를 진행하며 로고가 보이길 기다렸는데
흰화면이 뜨고 안나왔다.
역시.. 초기설정부분에서 많은 시간이 든다고 했는데 맞구나 라고 생각하며
콘솔을 확인해보니 새로본 에러가나있었다.
직면한 에러
Uncaught TypeError: react_dom_clientWEBPACK_IMPORTED_MODULE_1.render is not a function
Uncaught TypeError: react_dom_clientWEBPACK_IMPORTED_MODULE_1.render is not a function구글링을 해보니 근 1년 사이에 리액트도 많이 바뀌어 있었다.
index.js 부분에서 아래처럼 설정을 해왔는데
ReactDOM.render()ReactDOM은 React 18의 최신 가져오기 방법에서 더 이상 사용되지 않는다고 한다.
해결방법
import { createRoot } from "react-dom/client";createRoot를 임폴트하고 ReactDOM대신 createRoot를 사용하면 해소된다.
수정한 코드
import React from 'react';
// import ReactDOM from 'react-dom/client';
import Router from './Router';
import { createRoot } from 'react-dom/client';
import Header from './Header';
const root = createRoot(document.getElementById('root'));이렇게 수정했다.
해결하고 보니 라우터 부분에서 오류가 생겼다.
리액트 로고보기가 이렇게 힘들줄이야 .. ㅠㅠ
직면한 에러 2
'Switch' is not exported from 'react-router-dom'
'Switch' is not exported from 'react-router-dom'라우터를 쓰는데 이런 오류는 처음이었다. 구글링으로 확인해보니
라우터 역시 발전되어 있었다. 에러들을 직면하면서 역시나 개발자는 계속 공부해야 하는구나 라는 생각이 들었고 공부의 절실함을 깨닫게 되었다.
해결 방법
react-router-dom 버전이 6으로 업그레이드되면서, Switch를 더이상 지원을 안한단다.. Switch -> routes로 바꾸어서 사용하면된다. 그리고 component도 element로 바뀌었다.
import 부분은 이렇게 수정해준다.
import {
BrowserRouter,
Routes,
Route,
Link
} from "react-router-dom";그리고 switch 대신에 routes를 사용해서 바꾸면 된다.
<BrowserRouter>
<Routes>
<Route path="/" element={<main />} />
</Routes>
</BrowserRouter>하나하나 처리하고 보니 드디어 리액트 로고를 볼수 있었고
<div>hello world!</div>hello world! 를 찍어놨었는데 hello world! 도 볼수 있었다.
이렇게 초기설정 세팅을 하다보니 하루가 완전히 갔다.
- 2일차 구조 설정
2일차 본격적으로 프로젝트를 시작하기 위해 구조를 짜게 되었다.
디자인은 나와 있어서 컴포넌트를 어떻게 짤지 구조를 생각했다.
top down 형식이기 때문에 프롭스를 어떻게 전달해줄지 생각하게 되었다.
vue로 작업할때는 vuex를 활용했는데 리액트에서는 전역 변수를 사용하기 위해 리덕스를 활용해야 한다. 두개다 써봤는데 확실히 vuex가 훨씬 쉽다.
최근에 다시 리덕스를 공부했었는데 적용해 봐서 복기하면 좋을것 같다는 생각이 들었다.
헤더 부분과 메인 부분을 나눠서 진행하기로 하였다.
헤더 부분은 타이틀 부분이 페이지를 넘길때마다 바뀌었는데
일단 리덕스를 추후에 적용하기 위해 쿼리 파라미터로 받아서 사용하기로 하였고 메인 부분은 다음 페이지 부분 으로 화살표 클릭시 다음으로 넘어가는 화면을 구성해야 할때 이부분도 쿼리 파라미터가 변경 되면 다음 내용을 그려주는 형식으로 구상을 하였다.
파일 구조를 짜놓고 리덕스를 복귀하면서 하루를 마무리 하였다.
