몽땅뚝딱 개발자

너무 오랜만에 올리는 클론코딩 근황... Vue는 정해진 hook이 있었고 강의나 실제 사용하는 곳에서도 비슷비슷한 느낌의 구조라 금방 적용할 수 있었다. 하지만 리액트는 라이프사이클을 보고... hook을 봐도 무슨 말인지 모르겠다. (Vue를 처음 공부할 때랑 똑같은 느낌.. 나중엔 나아지겠지만..!) 그래서 주변에 리액트를 사용하는 개발자들에게 물어보고 구글링도 많이 해봤는데 모두 구조를 다르게 사용하고 있었다. 고민하다가 여러가지 정보들 + Vue에서 사용하는 구조를 다 혼합해서 구조를 정리하고 페이지에 데이터 연동까지 완료했다. 1. 설정 해당 글을 참고하였다. 이 글과 동일하게 AxiosInstance를 생성하고 api를 작성했다! [Axios][업무][베트남🇻🇳] - Axios instanc..

https://reactrouter.com/en/main/utils/create-routes-from-elements createRoutesFromElements v6.4.4 createRoutesFromElements createRoutesFromElements is a helper that creates route objects from elements. It's useful if you prefer to create your routes as JSX instead of objects. import { createBrowserRouter, RouterProvider, } from "react-router-dom"; // Y reactrouter.com

처음 한 것 치곤~~ 잘했자나~~ 하지만 앞으로 개선해야 할 것들은 꽤 많아 여기에 기록해두고 하나하나 추가하려고 한다. [✓] css 개선 - 다른 사람들은 어떤 구조를 사용하고 있는지 서치 - GlobalStyles를 어떻게 더 효율적으로 입력할 수 있나, 그리고 분리할 수 있는지 고민고민 [✓] 폰트 최적화 [✓] API - 이것도 다른 사람들은 구조를 어떻게 가져가는지 봐야 함 [✓] Redux - 공부하즈아...! ^_^ [✓] 다크모드 [✓] Jest [✓] 목업 API 추가 [✓] 경로 설정

예전에 prettier랑 eslint 설정하다가 막힌 적이 있는데 당시 그냥 하지말아야지! 하고 넘어갔었고 결국 같은 오류에 직면하고야 마는데.... 역시 그때 그때 해결해두어야 한다. (이 깨달음만 54875456465번째) 출처는 모두 여기!!!!!!!! 감사합니다. React ESLint + Prettier 적용하기 React ESLint + Prettier 적용하기 React에 ESLint와 Prettier를 적용하는 방법에 대해 알아보겠습니다. 1. ESLint 설치 ESLint는 JavaScript 코드를 분석하여 문법 검사를 지원하고 런타임 이전에 오류를 찾아주.. freestrokes.tistory.com ◽ prettier npm i --save-dev --save-exact pretti..

장대하지 않은 클론코딩의 시작...! 두두둥.. (나의 목적은 단순히 리액트를 익히는 것이다.) 나름 일정관리를 위해 노션도 만들고, 회의도 간략히 했다. 너무 심각하게 일정을 짜면 오히려 안 할 것 같아서 우선 러프하게 가되 시작부터 해보자고 했다. 친구는 모델링을 시작했고 나는 프론트엔드 프로젝트 세팅을 시작했다. 그리고 친구는 다 끝났다. 너무 멋있다. 근데 나는 안 끝남... 프론트 개발은 내가 다 주도하고 결정해야했다. (왕부담ㅠ) 리액트로 개발한다는 것만으로도 쉽지 않을 것 같아서 타입스크립트까지 하면 더 힘겨워지는건 아닌지 고민했다. 근데 주변에서 그냥 타입스크립트까지 적용하라고 해서 그렇게 했다. 어차피 고통스러운건 나,, 그래도 배우는 사람도 나,, 화이팅,, ◽ react + types..