본문 바로가기
반응형

전체 글130

타입스크립트_기본타입, interface Typescript function showTimes(arr) { arr.forEach(element => { console.log(element) }); } showTimes([1,2,3]) //1, 2, 3 showTimes(1,2,3) //error 발생 Javascript(동적언어): 실행되는 시점 (런타임)에 타입이 결정되고 오류가 있을 시 그때 처리가 가능하다. function showTimes(arr:number[]) { arr.forEach(element => { console.log(element) }); } showTimes([1,2,3]) //1, 2, 3 function showTimes(arr:string[]) { arr.forEach(element => { console.log(.. 2022. 11. 30.
useMemo를 사용해서 최적화하기 const memoStore = useMemo( () => { return }, [placesList] ) useMemo, 값의 재활용을 위해 따로 메모리를 소비해서 저장해 놓는 것을 의미한다. 함수형 컴포넌트가 렌더링이 되면 모든 component의 함수가 호출이 된다. 이때 모든 내부 변수들이 초기화 과정을 거치는데, 렌더링이 될 때마다 모든 컴포넌트가 반복적으로 움직이게 되면 비효율적이고 무거워진다. useMemo의 활용에 대해서 크게 생각이 없었지만, 내가 만들고 있는 플젝안에서도 쓸떼없이 구동되지 않아도 될 컴포넌트들이 많았다. 먼저 StoreList컴포넌트의 경우에는 main컴포넌트 내에서 검색되는 리스트를 Props로 받는다. 검색한 결과 외에는 지속적인 렌더링이 필요가 없기때문에 useMe.. 2022. 11. 22.
하나의 state에 2개의 통신을 하고 싶을때? 구현하고 싶은 기능은, map api를 통해서 장소에 대한 북마크를 했을 때 해당 data에 대한 내용을 출력하는거였다. 문제는 북마크 리스트에 출력이 되는데, 해당 data에 이미지가 없었다. 뭔가.. 디자인적으로 보기에도 이미지가 없어서 뭔가... 뭔가.. 허전하다고 생각했다. 그래서 결국은, 랜덤이미지 api를 별도로 해주기로 했다. 1. 만든 서버에서 북마크 DATA로 setList에 넣어줌 2. unsplash api를 이용해서 random이미지 setMealThumb에 받기 처음 코드는 이랬다. function Bookmark() { const [list, setList] = useState([]) const [mealThumb, setMealThumb] = useState([]) useEff.. 2022. 11. 22.
React 로그인 API _ 2 (서버만) 로그인 기능을 떠나서 에러처리가 굉장히 어렵구나. 디들웨어를 만든 부분을 다시금 정리해보기로 했다. 먼저 서버부분을 확인! [사용자 인증 라이브러리] //authutill.js const jwt = require("jsonwebtoken"); const secretKey = 'marking-access-secret-key' const getToken = (payload, isUnLimit) => { const expiresIn = isUnLimit ? 60 * 60 * 24 * 365 * 100 : 60 * 60 * 24 const token = jwt.sign(payload, secretKey, { expiresIn }) return token } const verify = (token) => { tr.. 2022. 11. 6.
728x90
반응형