오열매의 코딩 공간

- 설치: npm install react query - api 관련 함수(fetcher 함수) 들은 따로 파일로 분리하는 것이 좋다. ~ api.ts - fetcher함수는 json data의 Promise 를 return 해야 한다. (정확히 json data는 아니지만) - const { 로딩여부, 데이터 } = useQuery(query key, fetcher 함수) ... 로딩중 또는 로딩이 끝나면 react query가 알려준다. ... 로딩이 끝난 데이터를 담아서 주기도 한다. - React query가 데이터를 캐시에 저장해두기 때문에, 로딩하고 화면을 전환한 뒤에 다시 돌아가도 로딩을 하지 않는다. - React query 에 있는 devtools를 import 해오면, 캐시에 있는 qu..

npm i react-router-dom ... React Router Dom: 어플리케이션에 URL을 가질 수 있도록 해준다. // [router.tsx] import { BrowserRouter, Routes, Route } from "react-router-dom"; function Router() { return ( ); } export default Router; * 상위 tsx파일 (index.tsx / app.tsx)에 를 추가해줘야 함

타입스크립트와 styled-components 테마를 연결 1) 설치: npm install @types/styled-components (이미 함) 2) declaration 파일 생성 ... 기본적인 index.d.ts 파일은 있지만, 커스텀 파일을 만들어야 한다. ... src 폴더에 styled.d.ts 파일 생성 및 아래 코드 복붙 // [styled.d.ts] // import original module declarations import 'styled-components'; // and extend them! declare module 'styled-components' { export interface DefaultTheme { borderRadius: string; colors: { m..

npm i styled-components npm i --save-dev @types/styled-components import { createGlobalStyle, ThemeProvider } from "styled-components"; const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,..

mixin을 이용하다가 parameter를 사용하지 않아도 default 값을 설정하고 싶을 때가 있다. 그런 경우에는 기존에 올렸던 포스팅처럼 변수를 파라미터로 보내어 if elseif 문으로 처리하는 방식은 적용되지 않는다. (parameter없이 사용 불가하다는 뜻) 프로젝트를 진행하고 있는데 위 박스에 있는 코드들이 자주 반복된다. 매번 쓰는 것도 상관은 없지만, 반복되는 코드들이 거슬려서 mixin을 사용하려 한다. @mixin flex-center($jcc: center, $aic: center) { display: flex; justify-content: $jcc; align-items: $aic; } 위 코드처럼 parameter 자리에 변수 및 default값을 직접 설정할 수 있다. 해..

웹 사이트에서 경고 문구를 띄우려는 경우에 사용할 수 있다. 하지만, 이 방식은 웹 페이지의 기본 동작을 일시정지 시킨다. 예를 들어 어떤 링크에 alert를 연결하여 사용한다고 하자. 링크를 누르면 해당 페이지로 넘어가야 하는데, 링크를 눌렀을 때 alert 에 해당하는 코드를 써놓으면 페이지로 이동하기 전에 경고 문구를 보여준다. 해당 경고문구가 사라지면 페이지를 이동한다. 이러한 이유(웹 페이지의 기본 동작 일시 정지) 때문에 개발자들이 많이 사용하지는 않는다. alert("Stop!") 참고) https://nomadcoders.co/javascript-for-beginners

문자열과 변수를 같이 사용할 수 있는 편리한 방식이 있다. 키보드 기준으로 ESC 아래의 '~' 표시를 shift 없이 누른 문자가 'backtick' 이다. ` ` 생긴 모습은 작은 따옴표와 같다. 사용은 $ 기호와 함께 사용한다. `Hello, ${name}!` 자연스럽게 문자열과 함께 쓸 수 있으며, 괄호 안에 넣은 변수만 그 자리로 들어가게 된다. 아주 유용하다. 참고) https://curryyou.tistory.com/185 https://nomadcoders.co/javascript-for-beginners/lectures/2903

JavaScript 파일에서 CSS를 변경하는 방법에 대해 정리한다. event를 활용하여 실습을 진행한다. 1) CSS 적용 순서 실습을 통해 살펴본다. step 1 > element를 찾는다. const text = document.querySelector(".container__contents"); step 2 > event를 listen한다. text.addEventListener("click", handleTitleClick); step 3 > event에 반응한다. function handleTitleClick() { const currentColor = text.style.color; let newColor; if (currentColor == "blue") { newColor = "toma..

document를 활용하면 많은 이벤트들을 다룰 수 있다. 간단한 예시를 통해 살펴보고, 원하는 이벤트를 찾는 방법에 대해서도 알아본다. 1) addEventListener const title = document.querySelector(".container__contents"); function handTitleClick() { title.style.color = "tomato"; } title.addEventListener("click", handTitleClick); 위 자바스크립트 코드를 활용하여 이벤트를 만들었다. document 및 querySelector로 불러온 객체를 활용하여 이벤트 및 함수를 다룬다. addEventListener 의 두 번째 파라미터에 함수명이 있는데, 원래 그 안에..

브라우저는 기본적으로 document라는 object를 가지고 있다. console.dir(document)를 입력하면 확인할 수 있다. 이처럼, 내가 입력하지 않은 사이트의 정보에 대해 접근하고 사용할 수 있다는 점은 아주 중요하다. JavaScript는 HTML을 읽어온다. 1) HTML 코드와 Element를 JS로 접근하기 document 객체에 있는 정보로 접근하는 것에서부터 모든 것이 시작된다. 예시로, getElementById 메서드를 통해 html 요소에 접근한다. const title = document.getElementById("contents"); 2) querySelector getElement 방식보다는 querySelector가 더 자주 쓰이는 편이다. CSS 방식으로 ele..