\(@^0^@)/

- login과 authorization 관련 학습 https://dev-minju.tistory.com/318 오후 회고 (만족도 : 6) 집중이 잘 안 된다. - login과 authorization 관련 학습 https://dev-minju.tistory.com/318 저녁 회고 (만족도 : 7) 역시나 집중이 잘 안 된다ㅠ 점점 게을러지고 있다.. 이제 더위도 갔고, 운동의 필요성을 느끼기에 내일부터는 하루에 한 시간 운동을 할 수 있도록 노력해보자. 그리고 늘 의자에만 있어서 그런지 살이 꽤 많이 쪄서, 다이어트하려고 닭가슴살과 제로 음료도 주문하였다 흐흐 운동하고, 일찍 일어난다면 공부할 때도 좀 더 에너지 있고, 의지가 생기지 않을까? 파이팅.

axios intercepter 관련 docs와 아티클을 보고 정리 및 학습하려다가 다른 사람들은 login과 auth를 전반적으로 어떻게들 관리하는지, 내가 맞게 하고 있는 건지 궁금해서 여러 글들과 영상을 찾아보다가 해당 영상을 발견하였다. 해당 영상을 토대로 내 프로젝트에 어떤 것을 보완해야 하고, 어떤 것들을 수정하면 좋을지 생각해보자. https://www.youtube.com/watch?v=brcHK3P6ChQ state와 useEffect를 너무 많이 선언했는데 괜찮은가? reactForm 라이브러리를 사용한다면 더욱 효과적일까? 스크린리더를 적용해서 접근성을 높였다. 제로베이스 미션 1 과제에서 css미션 할 때 사용해본 적이 있는데, jsx에서 사용되는 거는 처음 봐서 인상 깊었고, 나도..

- react-router v6 관련 영상 영상보고 v5 와 v6 차이점 TIL 작성 https://dev-minju.tistory.com/316

react-router가 v6로 업그레이드된 지 아직 일 년도 되지 않았기에, 다른 사람의 코드를 참조하려고 살펴보면 v5로 작성되어 있는 경우를 많이 봤고, v6를 사용한다고 하지만 v5같이 쓰는 경우도 많이 볼 수 있었다. 그래서 기존의 v5에서 v6로 어떻게 바뀌었는지 차이점을 알아보고, 새로 바뀐 v6를 제대로 사용하려면 어떻게 해야 하는지 알아보고 싶어서 정리를 하였다. npm install react-router-dom@6 yarn add react-router-dom@6 // 최신버전 yarn add react-router-dom@latest Switch(v5) -> Routes(v6) // v5 import {Switch, Route} from "react-router-dom"; impor..

최근 근황 및 앞으로의 계획 약 일주일 정도 프리온 보딩 FE코스 과제하고, 회고 및 정리들을 노션으로 했기 때문에 TDL를 안 적었다. 우선 오늘 오후에 프리온 보딩에 합격했다는 문자를 받았다. 하지만, 고민 끝에 참여하지 않기로 결정했다. 이번 온보딩의 과제를 해보면서 (비록 3일 정도만에 구현을 하긴 했지만) 이런 기본적인 CRUD에도 많이 버벅거리는 나를 보며 많은 고민이 들었고 현타가 왔다.. 이런 상태로 내가 진짜 취업을 해도 될까?, 나는 정말 개발자가 맞지 않는 걸까?라는 생각이 들면서 과제 제출 후 이틀 동안 코딩을 안 하면서 앞으로 어떻게 해야 할 것인지 나름 진지하게 고민을 한 것 같다. 프리온 보딩은 사실 올초에 한번 수강했었다. 많은 것을 배웠고, 취업을 도와주는 좋은 코스라고 생..

- 프리 온보딩 챌린지 과제 요새 손목이 아파서 쉬엄쉬엄 하는 중이다ㅠ 그래도 며칠 쉬엄쉬엄 했더니 많이 좋아졌음. 오후에는 우선 어제 스타일링했던 회원가입, 로그인 페이지의 간단한 유효성 검사 구현했고, 비밀번호 입력과 비밀번호 확인의 유효성 검사를 구현하려 했는데, state를 범벅으로 구현하지 말고 최대한 줄여보고, 라이브러리도 쓸 수 없는 상태여서 조금 막막해진 상태이다. 구현 가이드라인에 비밀번호 확인 기능은 없기에 우선 보류. 다른 기능들 구현하고 레퍼런스들을 모아서 다시 한번 도전해볼 생각이다. 오후 회고(만족도: 5) - 프리 온보딩 챌린지 과제 auth 부분은 만족스럽진 않지만, 현재 대략적으로 끝낸 상태이다. 생각보다 간단한 구현도 헤매고 있다는 나를 깨닫고 많이 반성하는 저녁이었음....

- 유튜브 강의 Recoil https://www.youtube.com/watch?v=tMQaxZl_MqY React Suspense const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded // Show a spinner while the profile is loading 비동기 작업을 진행하는 컴포넌트를 자식 컴포넌트로 가지며, 자식 컴포넌트들이 비동기 작업을 진행하는 동안 props에게 할당받은 특정 컴포넌트를 렌더링 한다. ex) Spinner 리액트에게 자식 컴포넌트들이 비동기 작업을 진행하고 있다는 것을 전달하여 리액트는 자식 컴포넌트들을 구독? 주시하면서 비동기 작업이 끝나기만을 기다린다. 작업이 끝나면, 자식..

- 유튜브 생활코딩 강의 Redux-thunk 학습 - createAsyncThunk은 비동기 작업을 처리하는 action creator를 만듭니다. - action creator는 아래와 같이 3가지 상태를 갖습니다. - action creator.pending는 대기상태를 의미합니다. - action creator.fulfilled 는 완료 상태를 의미합니다. - action creator.rejected는 오류 상태를 의미합니다. - thunk는 각각의 상태에 따른 reducer를 체계적으로 작성할 수 있도록 유도합니다. - thunk를 처리할 때는 extraReducers를 사용합니다. 나는 영상 보면서 간단하게 사용했을 뿐, 실전에서 사용해본 적은 없기에 아직 크게 장, 단점을 모르겠다. 하지만..

- 제로베이스 REACT 강의 예전에는 리덕스를 멋모르고 복붙 하여 사용했다면, 어제와 오늘 상태 관리 및 리덕스, 리덕스 툴킷을 학습하면서 리덕스의 환경에 대해 어느 정도 이해하고 사용할 수 있게 된 것 같다. 하지만 아직 실습을 안 했기에 몇 번 더 실전을 통해 온전하게 이해해야 할 것 같다. 오후 회고 (만족도: 6) 최근에 너무 놀아서 그런지 집중이 잘 안 됐음..ㅠ - 프리 온보딩 챌린지 강의 오늘 우연히 상태 관리에 대한 강의를 해주셔서, 오후에 상태 관리 관련 학습을 하기를 잘했다고 생각했다. redux와 react-query에 대해 배웠으므로, 내일 react-query 강의를 듣고 오늘 세션 복습하면 더욱 이해가 될 것 같음~ 굿굿 내일 다시 한번 복습하고 제대로 정리해보자. 저녁 회고 ..

- 제로베이스 REACT 강의 전역 상태 관리 라이브러리 Redux store : 모든 state는 하나의 store안에 있는 객체 트리에 저장된다. action : 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 action을 보내는 것뿐 reducers : 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 reducers를 작성해야 한다. https://www.youtube.com/watch?v=yjuwpf7VH74 Redux-Toolkit (RTK) Redux 작업을 단순화하고, 흔한 실수를 방지하여 앱을 만들기 쉽게 해주는 라이브러리 https://www.youtube.com/watch?v=9wrHxqI6zuM Redux-Thunk dispatch에 action객체가 아닌 th..