오늘도 코딩하나

강의 내용: 강의 링크#5.11 ~ #6.4 1️⃣ nested router props 처리react-router-dom v5에서는 prop를 직접 전달할 수 있지만,react-router-dom v6에서는 prop를 직접 전달할 수 없으므로,Outlet을 사용해 자식 컴포넌트가 부모의 데이터를 공유할 수 있도록 한다.    ( 이유에 대한 자세한 설명은 nested Routes 설명 참고 👉 설명보러가기 )// Coin.tsx// Chart.tsxinterface IOutletProps { coinId: string;}function Chart() { const { coinId } = useOutletContext();}   📌 Outlet에서 context를 설정하면 자식 컴포넌트에서 useO..

강의 내용: 강의 링크 #5.0 ~ #5.11  🚨 React Router v5 → v6에 대한 모든 변경점에 대한 정리가 아닌       #5 강의를 수강하면서 나온 내용들에 한해서 정리된 내용입니다.✅ react-router-dom v6   1️⃣ Link to    ▷ v5 버전 {coin.name} →     ▷ v6 버전 {coin.name} →   2️⃣ nested Routes  - Coin.tsx    ▷ v5 버전      ▷ v6 버전  - Router.tsx }> } /> } />    - Coin.tsx   3️⃣ react-query      이전에는 react..

강의 내용: 강의 링크 #5.0 ~ #5.11 ✅ 페이지간 데이터 전달 기능     ➰ useLocation 현재 URL 정보를 가져오는 hookpathname, search, hash, state, key 등의 정보 제공 {coin.name} →const { state } = useLocation(); {state?.name ? state.name : loading ? "Loading..." : infoData?.name}useLocation().state를 사용하면 URL에 보이지 않는 방식으로 데이터를 전달할 수 있음⇒ 비하인드더씬/${coin.id} 페이지로 이동하면서 state 값을 함께 전달useLocation().state에서 전달된 값을 받아서 사용 ✅ 중첩 라우트 ..

강의 내용 : 강의 링크 #4.0 ~ #4.8 ○ browserRouterimport { BrowserRouter } from "react-router-dom";import Header from "./component/Header";import { Routes, Route } from "react-router-dom";import Home from "./screen/Home";import About from "./screen/About";function Router() { return ( } /> } /> );}export default Router;App.js에서 Router import해서 사용 ○ createBrowserRo..

강의 내용 : 강의 링크 #3.0 ~ #3.7 ○ Interface   ※ interface : object shape을 TypeScript에게 설명해준다.    * Prop Types는 prop이 거기에 있는지 없는지 확인해주지만, 코드를 실행한 "후"에만 확인 가능하다.   * 하지만 우리는 TypeScript처럼 코드 실행 "전"에 확인 하고싶다!!   * 그래서 우리는 Prop Types를 사용하지 않고, prop들을 Typescript로 보호해줄거다!     ⇒ Interface - Circle.tsximport { styled } from "styled-components";interface ContainerProps { bgColor: string;}const Container = styl..

강의 내용 요약 : 강의 링크 #2.0 ~ #2.7 ○ styled-componentimport styled from "styled-components";const Father = styled.div` display: flex;`;const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px;`;const Circle = styled(Box)` border-radius: 50px;`;function App() { return ( );}export default App;style과 구현 부분으로 나누어지고, 구현 부분은 훨씬 가독성이 좋아진다.b..

Typescript ChallengeDictionary add : 새로운 단어와 그에 대한 정의를 추가한다get : 입력된 단어에 대한 정의를 반환한다.delete : 사전에서 특정 단어를 삭제한다.update : 기존 단어의 정의를 새로운 정의로 업데이트한다.showAll : 사전의 모든 단어와 정의를 출력한다.count : 사전에 저장된 단어의 총 개수를 반환한다.upsert : 단어가 존재하면 업데이트하고, 존재하지 않으면 추가한다.exists : 특정 단어가 사전에 존재하는지 여부를 반환한다.bulkAdd : 여러 단어와 정의를 한 번에 추가한다.bulkDelete : 여러 단어를 한 번에 삭제한다.type Word = { term:string; definition:string;}type W..

https://nomadcoders.co/typescript-for-beginners 타입스크립트로 블록체인 만들기 – 노마드 코더 Nomad CodersTypescript for Beginnersnomadcoders.co 강의 내용#4.2 ~ #4.5  🤷‍♀️ public이지만 더 이상 변경할 수 없도록 만들 수 없을까?class Word { constructor ( public readonly term:string, public readonly def :string ) {}}  ⇒ readonly○ static   ※ static : 클래스의 인스턴스가 아니라 클래스 자체에 속하는 메소드type Words = { [key:string]: string}cla..