with with

깃허브 페이지에 배포하는 방법과 내가 겪었던 자잘한 버그(?) 상황과 그에 대한 해결법을 소개하고자 한다. 우선 아래의 사진과 같이 깃허브 페이지에 배포하는 방법이다. 그 전에 리액트의 빌드 과정을 간략하게 설명하자면, npm run build 커맨드를 실행시 리액트에서는 react-scripts build 스크립트를 실행한다. 그러면 전에 없던 build라는 폴더가 생기는데, 그 폴더 안에는 우리가 src 폴더 안에서 작업했던 내용이 최적화된 빌드 파일이 들어가게 되고, 그 빌드 파일을 배포하는 것이다. 빌드한 후에는 npm run deploy 커맨드를 실행하게 되면 gh-pages -d build 커맨드가 실행되는데 build 폴더를 gh-pages로 deploy한다는 의미로 생각하면 될 거 같다. ..

react-router-dom (v5.3.0 기준) useLocation hook은 동적인 현 위치의 객체를 반환한다. 무엇보다, useLocation을 사용하는 주된 내용은 페이지 전환시 데이터를 보낼 수 있다는 것이다. 을 보면 state에 객체가 들어가 있는데, 이 객체에 이전 페이지에서 보내고 싶은 데이터를 담아 다음 페이지로 보내면, useLocation을 통해 보낸 데이터를 받을 수 있다. 이 방법을 이용하면, 로딩 중에도 특정 데이터는 사용자에게 보여줄 수 있기 때문에 사용자 경험이 증대된다. 데이터를 보내는 방법은 아래의 코드를 참고하자. // Coins.tsx // Coin.tsx const { state } = useLocation(); Coins.tsx에서 Link to를 통해 sta..

react-router-dom (v5.3.0 기준) useParams hook은 동적으로 움직이는 주소창에 있는 내용중 일부를 반환해준다. 반환하는 내용은 ... 에 있는 params를 반환해준다. 예로 들어 아래의 코드가 있다고 가정해보자. // Router.tsx // Coins.tsx // Coin.tsx const { coinId } = useParams(); Router.tsx에서 Route path의 형식을 /:coinId 라고 지정해줬다. 따라서 Coin.tsx에서 useParams를 이용해 받는 객체에서 키 이름은 coinId가 된다. 또한, Coins.tsx에서 Link to를 통해 코인 아이디 값을 넘겨준다. 만약 넘겨주는 값이 eth-ethereum 이라면, Coin.tsx에서 받는 ..

reart-query 라이브러리에서 제공하는 useQuery hook는 api 호출의 과정을 간략화 해줄 뿐만 아니라, 캐싱을 이용해 api호출의 빈도를 최소화한다. useQuery를 사용하기 이전에 api를 호출하려면 다음과 같이 코드를 작성해야 했다. const [loading, setLoading] = useState(true); const { coinId } = useParams(); const [info, setInfo] = useState(); const [priceInfo, setPriceInfo] = useState(); useEffect(() => { (async () => { const infoData = await ( await fetch(`https://api.coinpaprika...

리엑트를 사용하면 개발자를 위한 여러 라이브러리가 많이 제공되고 있기 때문에 프로젝트를 본격적으로 진행하기 전에 미리 필요한 라이브러리를 설치하여 준비하는 것이 좋다. 아래에는 리엑트 프로젝트 만들 때 기본적으로 세팅하면 편한 라이브러리를 정리한다. 1. 리엑트 프로젝트 생성 리엑트는 다음의 커맨드로 typescript 기반 프로젝트를 생성하는 것이 좋다. npx create-react-app --template typescript ts는 처음 사용하면 미리 지정해줘야 하는게 많아 자칫 귀찮게 생각할 수 있지만, 나중에 자동완성 기능이나, 런타임 이전에 에러를 발견하고 해결할 수 있다는 장점이 더 크기 때문에 사용하는게 좋다. 2. (option) 필요없는 파일 삭제 /src 폴더에 기본적으로 들어있는 ..

매개변수의 타입을 지정할 때 리엑트에서 기본으로 제공하는 타입을 정리합니다. 공부하면서 새롭게 보이는 타입은 지속적으로 추가할 예정입니다. 전체 이벤트 타입은 아래의 공식문서에 나와 있습니다. SyntheticEvent – React A JavaScript library for building user interfaces reactjs.org React.FormEvent import React, { useState } from "react"; function App() { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event;..

React에서 제공하는 useEffect() 함수는 특정 데이터가 변화할 때에만 특정 코드를 실행할 수 있게 해준다. React의 특성상 컴포넌트(함수)내의 일부 데이터가 변화해도 컴포넌트(함수) 전체를 재 실행하여 리턴한다. 그래서 만약에 한 번만 불러와도 될 api의 경우, 사용자가 버튼 몇 번 클릭하면 api가 계속해서 호출되어 쓸데없이 리소스를 잡아먹을 수 있는 상황이 발생할 수 있다는 뜻이다. (rum.. 오타있네요.. run!) 실제로 input에 글자를 치기만 하는데도 Line. 9의 console.log가 계속해서 찍히는 것을 확인할 수 있다. 이런경우를 방지하기 위해 React에서 제시하는 방법은 useEffect이다. useEffect는 반환값은 없지만 두 개의 파라미터를 필요로 한다...

html, css를 공부하자마자 바로 연습할 겸 사이트 하나 만들어봤다. 하지만 만들면서 금세 한계점을 느끼게 된다. 단일 html 사이트 내에서는 어떻게든 만들고 싶은대로 만들 수 있었지만, 여러개의 html 사이트를 만들면 그 사이트 간의 이동이 부드럽지 않을 뿐더러 원하는 효과를 주기 어려웠다. 그렇다고 한 html 파일 안에 모든 코드를 다 넣자니 너무 파일이 커져서 보기에 좋지 않을거 같았다. 그래서 React를 이용해 js 코드로 사이트를 만들어 더욱 유지보수하기 편하고, 분할/정복도 깔끔하게 달성할 수 있도록 사이트를 고쳐보기로 작정했다. 그러기 위해서는 일단 React를 공부해야만 했기에, 바로 시작했다. 그 시작은 우선 React를 설치하는 것! 사실 설치하지 않고도 리엑트를 사용할 수 ..