프론트엔드 데브코스 WIL #DAY60~64

에구마·2023년 12월 18일

프론트엔드 데브코스 기록

목록 보기

38/47

1️⃣3️⃣주차 23.12.11 ~ 23.12.17

✅ 이번주 목표

이번 주 강의에서 실습한 컴포넌트를 혼자 해보기 ✅

미니게임천국 마무리 단계 ✅

🤨 이번주 배운 것들

리액트 사용자 컴포넌트, 사용자 훅 만들기
react-router
타입스크립트

react-router-dom

npm i react-router-dom

< BrowserRouter > 사용 방법으로 정리

index.js에서 최상위 컴포넌트 을 < BrowerRouter >로 감싼다.

App.js에서 라우팅 목록을 지정하면 된다.
라우팅 목록을 로 감싸는 대신, <Routes> 사용!!
내부에선 <Route path="*" element={<NotFoundPage />} />
import { PostsPage } from "./pages";
import DefaultTemplate from "./components/template/DefaultTemplate";
import { PostPage } from "./pages";

const App = () => {
  return (
    <DefaultTemplate>
      <Routes>
        <Route path="/home" element={<h1>home~</h1>} />
        <Route path="/posts" element={<PostsPage />} />
        <Route path="/posts/:postId" element={<PostPage />} />
      </Routes>
링크 이동하기 위해 <Link to ="이동할경로">
import { Link } from "react-router-dom";

...
<Link to="/home">Home</Link>
링크에서 파라미터 가져오기
import { useParams } from "react-route-dom";

const PostPage = () => {
  const { postId } = useParams();
Routes 목록 < Route path = “” >에서 설정한 path 경로를 입력해야한다.

:first-child 와 :first-of-type

우선 두 선택자의 차이를 비교해보자

:first-child : the first element among a group of sibling elements.
해당 요소가 첫번째 자식이면!! 선택이 된다. p는 첫번째 자식이 아니기 때문에 적용되지 않는다.

:first-of-type : the first element of its type among a group of sibling elements.
하위의 해당 요소중 첫번째 요소 선택
각각 첫번째 span, 첫번째 p가 선택된다.

참고 : inpa tistory

VanillaJS to TypeScript

몇가지 기억에 남고 이후에 타입스크립트할 때 도움되었던 것은,

이벤트 핸들러에서 이벤트(e)의
  todoLi.addEventListener('click', (e: MouseEvent) => {
  const idx = (e.target as HTMLLIElement).dataset.idx;
  // e.target에 대해 타입 단언이 필요한 이유
  // 이벤트 전파! 버블링 혹은 캡쳐가 발생할 수 있다.
  if (idx) handleComplete(parseInt(idx));
  });
인자로 오는 children의 타입은 ReactNode
  interface Props {
  children: ReactNode;
}
const TaskProvider = ({ children } : Props) => {
styled component에서 사용하는 props에 대한 타입지정
  const Content = styled.span<{ complete: boolean }>`
함수형 컴포넌트에서 new에 대한 타입
-> "함수 컴포넌트에서 new 생성자를 사용하는 건 지양되는 행동이라 any로 매핑하거나 strict 모드를 false로 주는 등의 부차적인 행위가 필요하답니다!"

아직 의문인것,,

setState를 반환하는 컴포넌트 내에서, state값을 갱신했음에도 불구하고 상위 컴포넌트에서 갱신하는 코드를 다시 넣어줘야 했다.. 왜 ?..

✍️ 회고

타입스크립트.타입스크립트.타입스크립트. 어렵다.어렵다. 어렵다.

스타디

바닐라JS로 구현했던 투두앱을 TS로 변환하는 작업을 마무리하고, 스터디 팀원들끼리 코드리뷰도 했다. 비슷한 고민을 같이해서 해결하기도 하고, 더 궁금한 점에 대해 멘토님께도 여쭤보면서 배우는 것이 많았다. 보기보다 꽤 어렵고, 하나하나 찾아보다보니 시간을 꽤 들이게 되었다. 그래도 타입스크립트와 타입에 대해 조금씩 더 알아가고 있어서 의미있는 스터디였다...👍

타입스크립트

스터디로 진행한 VanillaJS -> TS 마이그레이션에 이어서 ReactJS -> React+TS로 마이그레이션도 해보았다. 강의 중에 코드로 사용하는데 막상 변환하는 과정에 대한 강의는 없어서 당황했다가,, 이참에 해보자!는 마음으로 도전했다. 이 후 과제나 프로젝트에서도 주로 사용할 조합이니 이렇게 맛보기부터 해두는게 좋은 것 같다! 스타디에서 했던 작업 덕분에 조금 수월하면서도 알다가도 모를 타입스크립트라 아직 어렵다 ㅠㅠ

기록

TS마이그레이션 과제를 하면서 코드도 조금 수정하였는데, 이 때 before로 요소 삽입하는 방식을 사용해보았다. JS 동적 요소 삽입 이전에 조금 공부해놓은 부분이어서 활용해보고 싶었는데, 이참에 내용을 추가하여 공부해서 기록해두었다. 내가 고민해보고 코드도쳐보고 기록해놓은 것이 확실히 기억에 남아있다는 것을 완전히 느꼈다 !!
그러니 제발,, 개발할때도 트러블슈팅 과정을 조금 더 기록해보기 ....🙀

오프라인

프롱이들 40명이나 만난 오프라인데이😲 내 얼굴도 모르지만 궁금하다고 하신 분들, 어디서 내 이름을 많이 보셨던 분들, 얘긴 못해봤지만 댓글로 디코로 내적 친분 잔뜩이었던 분들 다다 만나서 재밌었다ㅎ.ㅎ 모르는 거 생길때 바로 옆에다 물어보면서 해결할 수 있는 것도 좋았다~! 다들 멀리 살기 때문에 직접 만나는건 어렵겠지만 온라인 동료로 계속 만났으면 좋겠다 ~!