0516 TIL

김형석·2022년 5월 16일
0

wanted-POB

목록 보기
11/26

✅ 할 일

  • 리팩토링
  • redux toolkit 공부

🗒 메모


💡새로 배운 내용

1. Redux ToolKit

2. React-use

npm i react-use

3. Route 예시

         <Routes>
            <Route path='/' element={<MainPage />} />
            <Route path='auth/:category' element={<AuthPage />} />
            <Route path='trade' element={<TradePage />}>
              <Route path=':symbol' element={<TradePage />} />
            </Route>
            <Route path='fullchart' element={<FullChartPage />}>
              <Route path=':symbol' element={<FullChartPage />} />
            </Route>
            <Route path='wallet_old' element={<WalletPageOld />} />
            <Route path='wallet' element={<WalletPage />}>
              <Route path=':page' element={<WalletPage />} />
            </Route>
            <Route path='history' element={<HistoryPage />}>
              <Route path=':page' element={<HistoryPage />}>
                <Route path=':tab' element={<HistoryPage />} />
              </Route>
            </Route>
            {['login', 'resetPassword', 'forgot', 'signup'].map((path) => (
              <Route key={path} path={path} element={<SessionPage />} />
            ))}
            <Route path='rewards' element={<RewardsPage />} />
            <Route path='systemCheck' element={<SystemMaintPage />} />
            <Route path='support' element={<SupportPage />}>
              <Route path=':page' element={<SupportPage />}>
                <Route path=':subPage' element={<SupportPage />} />
              </Route>
            </Route>
            <Route path='user'>
              <Route path='kyc/jumio/:status' element={<PhotoIdCallback />} />
              <Route path=':page' element={<UserPage />} />
            </Route>
            <Route path='policies' element={<PoliciesPage />}>
              <Route path=':page' element={<PoliciesPage />} />
            </Route>
            <Route path='*' element={<NoMatchPage />} />
          </Routes>
  • Stylelint 저장시 자동으로 정렬해주는 세팅
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint":true 
      },

4. axios 모듈 예시

import { axios } from 'hooks/worker'
import { IWeatherAPIRes } from 'types/weather.d'

const WEATHER_BASE_URL = 'url'

interface Params {
  lat: number
  lon: number
}

// 37.494958, 126.844128
export const getWeatherForecast5DaysApi = (params: Params) =>
  axios.get<IWeatherAPIRes>(`${WEATHER_BASE_URL}/forecast`, {
    params: {
      ...params,
      appid: process.env.REACT_APP_WEATHER_APP_ID,
      units: 'metric',
    },
  })

5. Strict Mode

리액트로 작업중 마운트가 두번되는 현상이 발생되는것을 확인했다.. 이유를 도통 몰라서 헤매고 있었는데

react did mount twice 라는 검색어로 검색했고

React Component Mounting Twice

그 결과 Strict Mode 때문이라는걸 알았다... react-beautiful-dnd 때도 말썽이더니.. 검색을 생활화하자

5. 절대 경로 설정

tsconfig.json

 "compilerOptions": {
    "baseUrl": "src"
  }

이렇게 하면 절대경로를 사용할수 있다

💻 오늘 한 일

코드 리팩토링

Refactoring Task

  • NavLink 사용한 nav
  • Style 피드백 내용 수정
  • recoil 데이터에 또 다시 타입 적용하지 말기
  • api의 <>타입 넣어주기 (❓ )
  • api ⇒ service 디렉토리로 옮기기
  • map을 돌릴거면 ul태그 써야할지 확인해보기
  • map의 item을 i 라고 쓴 부분 수정
  • store js로 localStorage 변경하기
  • return이 없으면 forEach를 쓰면됨 (map 대신)
  • 즐겨찾기 데이터 로직 변경
    • 검색결과 직접 조작x 검색결과는 놔두고 검색결과가 랜더될때 북마크 된걸 확인하도록 변경
  • onclick때문에 role=’section’ 쓰지말것 “button”으로 변경
  • 절대 경로사용
  • Infinite Scroll 로직 수정 마지막에 얇은 div넣고 해당 div 추적되도록
  • route 경로 기본 경로 외엔 ‘/’ 빼기
  • push 를 할거면 reduce를 쓰기
  • 불필요한 constants 데이터 삭제
  • alert & window.confirm 지우기
  • 로딩 야매로 짠 setTimeOut 지우기 ⇒ (suspense 사용해보기)

📝내일 할 일

1.나머지 리팩토링

  • push 를 할거면 reduce를 쓰기
  • 불필요한 constants 데이터 삭제
  • alert & window.confirm 지우기
  • 로딩 야매로 짠 setTimeOut 지우기 ⇒ (suspense 사용해보기)
  • lint 에러 나머지 정리

2.react-query 공부

3.원티드 기업 과제 시작

🌙 회고

리팩토링 하느라 하루가 다갔다,, 손목이 너무 아프다. 코드를 이렇게 그지같이 짠다는 사실에 너무 화가났지만 오히려 이번 기회에 싹 다 들어내고 좋은 습관만 쏙쏙 흡수시켜보려한다.

코치님이 써주신 코드를 꼭 꼭 읽고 이해시켜서 앞으로의 개발에 적용시켜보자

  • 알려주신 hook들 (useMount 등등)
  • 절대경로 작성
  • store.js, reactQuery 등 라이브러리
  • ❗️ lint및 warning 무시하지말기

등을 적용해서 다시 리팩토링 할 예정이다

얼른 마무리하고 내일 준비를 해야지

profile
코드로 소통하기 위해 힘쓰는 프론트엔드 개발자 입니다.

0개의 댓글