FE

Todo app

chrome 확장 프로그램 react developer tools 넘나 좋군 리액트 개발팀 분들아... 고맙다 ... useCallback 리액트 렌더링 성능을 위해 제공되는 훅. 컴포넌트가 렌더링 될 때마다 함수를 생성해서 자식 컴포넌트의 속성으로 넘겨준다. on~~함수 값이 매번 다르게 되어 매번 렌더링이 되는데, 재 렌더링을 방지하기 위해 사용함. 첫번째 파라미터 - 기존함수두번째 파라미터 - []배열 *두번째 파라미터 배열 값에 함수가 재생성할 기준을 할당. if 다른 변수를 참조하게 된다면 그 변수들을 두번째 파라미터 배열값으로 넣어줌. => 해당 함수는 파라미터가 바뀔 때만 재 생성하게 됨. 데이터 렌더링 , 최적화 하나 항목 업데이트 렌더링 시간 너무 김. *느려지는 원인 분석 todo1 체..

Sass / styled-components

src/SassCom.scss //훨씬 더 쉬운 sass //변수 사용하기 $red: #FF0000; $orange: #FF5E00; $yellow:#FFE400; //@mixin - 스타일 정의 // @mixin 믹스인 이름 { // //CSS 스타일 내용 // } // //@include - 믹스인 호출 // @include 믹스인 이름 //class 대신 mixin 사용하면 재사용을 줄일 수 있고 더 편함. @mixin square($size){ $calculated: 32px * $size; width: $calculated; height: $calculated; } // Components: anything reusable such as buttons, navbars, cards etc. .Sa..

[REACT Movie App part-two] React-router / react-router-dom

Movie.js //Movie component는 이 properties를 다 부모 component로부터 받아옴. function Movie({coverImg, title, summary, genres}){ return( {title} {summary} {genres.map((g) => ( {g} ))} ); } export default Movie; App.js import { useEffect, useState } from "react"; import axios from "axios"; import Movie from "./Movie"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = ..

[REACT Movie App part-one] fetch / async / await / axios / Cannot read properties of undefined (reading 'map') 오류

fetch 확인 movies data -> jason.data.movies .then((json) => console.log(json.data.movies)); 원하는 정보 확인 useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year") .then((response) => response.json()) .then((json) => { setMovies(json.data.movies); setLoading(false); }); }, []) 요즘 더 자주 쓰는 방법! async() & await const getMovies = async() => { const response = await f..

[REACT] Axios

AJAX: JS의 라이브러리 중 하나, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 한 데이터 로드 -> 즉, JS를 통해서 서버에 데이터 요청 fetch와 axios의 차이점 Fetch()는 body 프로퍼티를 사용하고,axios는 data 프로퍼티를 사용한다. Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어간다. Fetch에서 body부분은 stringify()로 되어진다. Axios? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리. *백엔드와 프론트엔드 통신을 쉽게하기 위해 AJAX도 더불어 사용하기도 함. 사용법 운영..

[REACT] "Coin Tracker" fetch / useEffect / map / api data

useEffect(() => { //패치해온 것 네트워크에서 확인 가능 //response로부터 json 추출 why? json안에 코인 데이터 있음. fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => console.log(json)); }, []); //코드 한번만 동작 패치해 온 것은 네트워크 창에서 확인 가능함 json 안에 있는 데이터 사용 -> response로부터 json을 추출해야함 데이터를 컴포넌트에서 보여주는 방법 -> data를 state에 넣으면 됨 . const [coins, setCoins] = useState([]); .then((json) => { ..