매우매우매우 간단하고 직관적인 State 관리 라이브러리 recoil를 배워서 정리 State 선언(atoms) 선언 코드 import { atom } from "recoil" export const isDarkAtom = atom ({ key : "isDark", default : false, }) State 불러오기 import { useRecoilValue } from 'recoil'; import { isDarkAtom } from './routes/atoms'; ... const isDark = useRecoilValue(isDarkAtom); ... set함수 불러오기 import { useSetRecoilState } from "recoil"; import { isDarkAtom } from..
Develop/JavaScript
공부 중 너무 개쩔어서 정리 url이 다른 tab메뉴 만들기 두개의 tab메뉴가 있고 클릭에 따라 리로드 없이 다른 url과 컨탠츠를 보여주는 페이지 router 설정 /:coinId 자식으로 두개의 컴포넌트 추가 const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "", element: , }, { path: "/:coinId", element: , children: [ { path: "chart", element: , }, { path: "price", element: , } ] } ], } ]) Outlet추가 Tab 메뉴 아래로 Outlet만 추가 하면 끝! {/* 탭메뉴 */} Chart Price {/..
공부 중 많은 데이터들에 대한 TypeScript의 interface 정의방법과 tip 정리 1. API로 받아온 데이터의 Type 정의필요 fetch로 api 받아오기 (코드) ... useEffect(() => { (async() => { const infoData = await ( await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`) ).json(); const priceData = await ( await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`) ).json(); setInfo(infoData); setPrice(priceData); setLoading(false); }) ();..
프로젝트 중 Reset css를 설정 중이였고, 'styled-components'의 'createGlobalStyle' 설정에 'DefaultTheme'을 추가 하는 과정에 생긴 오류를 정리. 코드 및 오류 코드 import { createGlobalStyle } from "styled-components"; export const GlogalStyle = createGlobalStyle` ... body { font-family: 'Gothic A1', sans-serif; background-color: ${(props) => props.theme.bgColor}; } a { text-decoration: none; } ` 에러 문구 ERROR in src/styles/Reset.ts:68:52 T..
모던자바스크립트 Deep Dive를 공부하던 중 ECMAScript라는 용어가 나와 정리하려고 한다. ECMAScript(ES)란? - ECMA(European Computer Manufacturer's Association)는 정보와 통신 시스템을 위한 국제적 표준화 기구 - 최신 ECMA는 Ecma International로 이름을 바꿈 - ECMAScript 는 Ecma International이 ECMA-262 기술규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 - 재밌는건 JavaScript가 먼저 나오고 이를 표준화 하기위해 생겼다고함 ECMAScript와 JavaScript의 관계 ECMAScript는 Script언어를 어떻게 사용해야 하는지 규격을 제시하고 JavaScript는..
공부 중 모르는 JavaScript 문법이나와 정리하여 한다. 구조분해 할당(Object Destructuring) 말 그대로 오브젝트를 분해하여 변수로 할당하는 방법이다. 하나의 문법으로 변수할당이 매우 간결해 지기 때문에 꼭 정리해 두자 예시 Object obj라는 임시 오브젝트를 선언하고 각각의 값을 변수로 할당하려한다. 내가 아는 지식으론 아래코드와 같이 변수를 할당 해야 한다. const obj = { id: 1, name: '트니', age: 9, } const id = obj.id; const name = obj.name; const age = obj.age; console.log(id, name, age); 출력값 구조분해할당 적용코드 구조분해할당 문법을 적용하면 아래와 같이 축약할 수 있..
