[React Query] 리액트 쿼리 이해하기
2022. 8. 22. 13:10
프로그래밍/React
리액트 쿼리란? React Query는 리액트 앱에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업(fetching, caching, synchronizing, updating)을 도와주는 라이브러리다. function Coins() { const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await response.json(); setCoins(json.slice(0, 1..
[Next] Dynamic Routes / Router Hook / Catch All
2022. 7. 8. 17:52
프로그래밍/Next
1. Dynamic Routes NextJS는 폴더와 파일명을 이용해 라우팅을 할 수 있다. /movies/all이라는 URL을 만들고 싶다면 movies 폴더를 만들고 그 안에 all.js 파일을 생성하면 된다. 그냥 /movies라고만 하고 싶다면 movies 폴더 안에 index.js 파일을 만들어주면 된다. URL에 변수를 넣고 싶을 때는 대괄호 안에 사용하고자 하는 변수명을 적어서 Dynamic Route를 생성할 수 있다. 만일 page/movies/[id].js 파일을 생성했다면 /movies/1, /movies/abc 등과 같은 경로와 모두 일치한다. router를 콘솔에 찍어보면 query를 찾을 수 있다. query: {id: '1'} query에는 id가 있는데 이 id는 바로 URL..
[Next] Patterns / Fetching Data / Redirect & Rewrite / SSR
2022. 7. 8. 17:50
프로그래밍/Next
1. Patterns Custom App Component를 사용할 때 layout 패턴을 사용할 수 있다. component 폴더 밑에 Layout.js 파일을 만든다. Layout 컴포넌트에는 여러 페이지에서 반복적으로 사용되는 컴포넌트들을 넣을 수 있고, 스타일도 줄 수 있다. children은 리액트가 제공하는 prop으로 하나의 컴포넌트를 또 다른 컴포넌트 안에 넣을 때 사용할 수 있다. import NavBar from "./NavBar"; export default function Layout({ children }) { return ( {children} ); } MyApp에서 fragment를 우리의 Layout component로 바꾼다. Layout에 어떤 것을 넣더라도, Layout..
[Next] CSS Modules / Styled JSX / Custom App
2022. 7. 8. 03:17
프로그래밍/Next
1. CSS Modules 넥스트 어플리케이션에 CSS를 추가하는 방법 중 하나는 modules를 사용하는 것이다. NavBar.module.css .nav { text-decoration: none; } 이름은 상관 없고 중요한 건 .module.css이다. css를 작성하고 이 파일을 사용하고 싶은 곳에 자바스크립트 오브젝트로서 import를 시키면 된다. import styles from "./NavBar.module.css" 모듈이기 때문에 className="nav"가 아니라 className={styles.nav}처럼 작성해줘야 한다. 이게 작동하는 이유는 .module.css 패턴을 사용했기 때문이다. 이 패턴은 css 모듈이라고 불리는데 이건 개발자로 하여금 평범한 css를 사용할 수 있도..
[Next] Framework / Pages / Pre-Rendering / Routing
2022. 7. 8. 01:46
프로그래밍/Next
1. Creating a Project NextJS 프로젝트 최신 버전으로 생성 → npx create-next-app@latest 타입스크립트 사용 → npx create-next-app@latest --typescript 실행 → npm run dev 2. Library vs Framework 라이브러리는 개발자가 사용하고 싶을 때 불러와서 원하는 대로 코드를 작성하는 것이 가능하다. 리액트는 개발자가 원할 때 부르고 원할 때 사용하는 라이브러리이다. 프레임워크에서는 특정한 규칙을 따라서 특정한 걸 해야한다. 규칙을 따랐을 때 모든 게 정상적으로 잘 동작하고 프레임워크도 개발자를 도울 수 있다. 개발자가 규칙을 따라서 코드를 적절한 위치에 잘 작성하면 프레임워크가 그 코드를 호출하여 모든 걸 동작시킨..
[TS] 제네릭 / 유틸리티 타입
2022. 7. 6. 05:16
프로그래밍/TypeScript
1. 제네릭 제네릭을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 할 수 있다. 선언할 때는 타입 파라미터만 적어주고 생성하는 시점에 사용하는 타입을 결정한다. 매개변수의 타입이 바뀌었는데 동일한 함수를 재사용하고 싶다면 함수 오버로드를 사용하거나 유니언 타입을 사용할 수 있다. 다른 타입들도 배열로 만들어서 전달 할 경우 아래와 같아진다. 이럴 때 사용할 수 있는 것이 제네릭이다. 사이의 타입 파라미터 T는 타입을 전달 받아 함수에서 사용할 수 있게 해준다. 함수 호출시 타입을 기입해주지 않아도 타입 스크립트는 전달되는 매개변수를 보고 어떤 타입인지 알고 있다. 혹은 옵션 객체의 모습이 정해져 있다면 아래와 같이 작성할 수 있다. showName 함수는 매개변수를 받아서 그 객체의 na..
[TS] 함수 / 리터럴, 유니온, 교차 타입 / 클래스
2022. 7. 5. 19:57
프로그래밍/TypeScript
· 1. 함수 함수 타입 정의는 다음과 같이 한다. function add(num1: number, num2: number): number { return num1 + num2; } function add(num1: number, num2: number): void { console.log(num1 + num2); } function isAdult(age: number): boolean { return age > 19; } 인터페이스처럼 함수의 매개변수도 옵셔널로 지정할 수 있다. name이 있으면 name을 쓰고 없으면 world를 출력하게 하는 코드다. 하지만 호출할 때 매개변수가 없어서 빨간 줄이 나타났다. name이 없을 때의 코드가 있지만 타입스크립트에서는 보다 명시적으로 알려줘야 한다. 아래와..
[TS] 타입스크립트 사용 이유 / 기본 타입 / 인터페이스
2022. 7. 5. 01:18
프로그래밍/TypeScript
※ 브라우저들은 타입스크립트를 이해하지 못하기 때문에 타입스크립트를 자바스크립트로 변환해서 로드해야 실행 가능 1. 타입스크립트를 사용하는 이유 // 자바스크립트 코드 function add(num1, num2) { console.log(num1 + num2); } add(); add(1); add(1,2); add(3,4,5); add('hello', 'world'); 더보기 NaN NaN 3 7 "helloworld" add(1,2)를 제외하고는 원하는 결과가 나오지 않는다. add()의 경우에는 아무 인수도 전달하지 않았으니까 num1과 num2 모두 undefined가 되었고, undefined끼리 더했으니 NaN이 나온다. 하지만 자바스크립트는 아무런 경고도 주지 않았고, 실수가 분명함에도 심지..
[React] Link와 useNavigate
2022. 6. 23. 14:06
프로그래밍/React
Link import * as React from "react"; import { Link } from "react-router-dom"; function UsersIndexPage({ users }) { return ( Users {users.map((user) => ( {user.name} ))} ); } react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서a 태그로 변환 내부적으로 a 태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 a 태그와 다르게 페이지 자체를 새로고침 하지는 않음 (History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장) 페이지가 새로고침 될 경우 현재 렌더링 되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링 → 컴포..
[React] Styled-components Naming
2022. 6. 12. 03:38
프로그래밍/React
Styled-components란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고 태그나 id, class이름으로 가져와 쓰지 않고 컴포넌트 이름을 쓰듯 스타일을 지정하는 방식 css 파일을 밖에 두지 않고 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어주는 장점이 있음 Styled 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 css를 사용할 수 있음 글 작성 이유 className에 대한 고민이나, BEM 사용법이 맞는지 등.. 고민을 안 하게 되어서 좋았지만 styled-component의 이름을 어..