매우매우매우 간단하고 직관적인 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..

공부 중 너무 개쩔어서 정리 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); 출력값 구조분해할당 적용코드 구조분해할당 문법을 적용하면 아래와 같이 축약할 수 있..

TypeScript 공부를 하던 중 처음보는 currentTarget을 만나 공부 후 정리 사실 해당 내용은 TypeScript와는 상관이 없는 JS 내용입니다. 정의 - currentTarget : evet handler가 정의된 요소를 반환 - target : 이벤트가 발생된 요소를 반환 예시코드로 보자 예시 코드 function App() { ... const onClick = (e:React.FormEvent) => { console.log("커런트",e.currentTarget); console.log("그냥 타겟",e.target); } return( Log in ) } 콘솔 출력 위처럼 button을 클랙 했을때 나오는 console은 위와같은 차이점이 생긴다. 재밌는 사항 버튼의 가장 바깥..

'별코딩'님의 유튜브를 보다가 정말 중요하고 명확한 강의를 보아서 정리해 두려고 한다. https://www.youtube.com/watch?v=QC3PtSlzp3s 기본 코드 아래 코드는 아주 단순한 input에 텍스트를 입력 후 추가 버튼을 누르면 li가 추가되는 간단한 코드이다. 몇 가지 내가 몰랐던 부분들을 정리하려고 한다. import './App.css'; import { useState } from 'react'; function App() { const [inputValue, setInputValue] = useState(''); const [list, setList] = useState(()=>['밥먹기', '코딩하기']); const addList = () => { setList((pr..