전체 글
-
깃허브를 통해 React를 배포해보자git & Github 2023. 3. 10. 23:46
그동안 만들었던 React 프로젝트를 배포해보고 싶었다. https://codingapple.com/unit/react-build-deploy-github-pages/ 만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌 (리액트 강좌 전체 목록) 이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리시는게 아니라 build용 파일 codingapple.com 기본적으로 코딩 애플 님의 방법을 따라하였다. 📌 추가배포하기 추가적으로 github.io 개인페이지 이외에도 React 프로젝트는 계속해서 배포가 가능하다. 1. github 레포 이름은 아무렇게나 해도 되며 레포를 생성한다..
-
javascript JSON 메소드를 알아보자!Javascript/JS 문법 2023. 3. 10. 15:32
📌 JSON.stringify() : 배열이나 객체 값 등 들어온 값들을 모두 문자열 처리합니다. console.log(JSON.stringify({ x: 5, y: 6 })); // "{"x":5,"y":6}" 📌 JSON.parse() : 배열이나 객체 값 등 들어온 값들을 모두 문자열 처리합니다. const json = '{"result":true, "name":"woony"}'; const obj = JSON.parse(json); console.log(obj.result); //true console.log(obj.name); //result
-
ES6 문법 Array 메소드 map, filter, find, reduce 한번에 정리!Javascript/JS 문법 2023. 3. 9. 01:32
🌈 사용되는 때가 오면 차근차근 정리하겠습니다 📌 find 함수 find()메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. 배열 속 값 찾기 const array = [2, 12, 8, 13, 44]; const result = array.find(ele => ele > 4); console.log(result); // 12 배열 속 객체 찾기 const vendingMachine = [ {name: 'coke', quantity: 2}, {name: 'juice', quantity: 0}, {name: 'cider', quantity: 5} ]; const result = vendingMachine.find(beverage => ..
-
useState 바로 뒤에 console.log 를 했더니 이전 값이 나온다.(혹은 비어있다)React/React 2023. 3. 7. 17:12
📌 useState 바로 뒤에 console.log 를 했더니 이전 값이 나온다.(혹은 비어있다) 라는 문제가 생겼다. 코드를 먼저보자 import { useEffect, useState } from "react"; function Todolist() { const [todo, setTodo] = useState(""); const todoHandler = (e: React.FormEvent) => { e.preventDefault(); const todoData = new FormData(e.currentTarget); const newTodo = todoData.get("todo") as string; setTodo(newTodo); console.log(todo) //비어있는 값이 출력된다. e.c..
-
Recoil 로 Global state management 글로벌 상태관리를 해보자!React/Recoil 2023. 3. 6. 18:44
🌈 다크모드와 라이트모드 전환을 위한 state 설정을 위해 recoil을 이용해보자 📌 recoil 설치방법 npm install recoil 📌 atoms.ts import { atom } from "recoil"; export const isDarkAtom = atom({ key: "isDark", default: false, }); 📌 App.tsx useRecoilValue(isDarkAtom) 을 통해 초기값인 false 를 가져올 수 있다. import { isDarkAtom } from "./recoil/atoms"; import {useRecoilValue} from "recoil" ...(중략) function App() { const isDark = useRecoilValue(isDa..
-
React Query 리액트 쿼리 사용법 사용하는 이유React/React Query 2023. 2. 28. 19:46
📌 기존의 코드는 다음과 같다. loading 이라는 값을 통해 데이터가 다 불러와졌는지를 판별한다. 그리고 데이터가 다 불러와졌다면 loading 을 false 값으로 전환하고 데이터를 setCoins 를 통해 coins 에 데이터를 담는다. 이러한 과정은 두개의 useState를 사용하게 만드는 단점이 존재한다. const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { axios .get("https://api.coinpaprika.com/v1/tickers") .then((Response) => { setCoins(Response.data.slice(0, 99)); set..
-
React Outlet 적용하기React/React 2023. 2. 26. 01:19
📌 하나의 컴포넌트에서 2개이상의 탭 컴포넌트를 이용하고 싶다. Router.tsx function Router() { return ( // 아래와 같이 중첩 Route 를 이용하면 된다. /:coinId/price 이런식이다. ); } export default Router; 이후 컴포넌트 내부에서 price 혹은 chart 를 이용하고 싶은 layout 위치에 을 추가하면 된다. 참고자료를 보면 조금 더 쉽게 이해할 수 있다. https://velog.io/@chldmswnl/React-router-Outlet-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8..