반응형 분류 전체보기144 하나의 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. 리액트 공통API 분리시키기 vocabulary 어플리케이션 만들었을 때 여러 컴포넌트에서 통신을 해야하는 로직이 공통이여서 커스텀 훅을 이용해서 useFetch를 만들었었다. //DayList.jsx function DayList() { const [dayList, setDayList] = useState([]) useEffect(() => { fetch('http://localhost:3003/days') .then(res => { return res.json() }).then(data => setDayList(data)) }, []) ... 요런식으롱? useEffect에 렌더링이 될 때마다 fetch를 했다. days안에 있는 data를 응답받아서 setDayList에 넣었다. [공통으로 만든 useFetch] //useFe.. 2022. 11. 4. callback, promise, async/await callback 콜백함수는 다른 코드의 인자로 넘겨주는 함수이다. js에서는 나중에 실행하는 함수이기에 콜백함수라고 불린다. 1) 다른 함수의 인자로 넘길 수 있고 2) 리턴 값으로 함수를 쓸 수 있고 3) 변수에 함수를 넣을 수도 있다. 그래서 js에서는 함수를 일급객체라고 한다. 콜백을 받는 함수가 어떻게 동작하느냐에 따라서 동기적, 비동기적일 수 도 있다. 콜백은 나중에 실행하라고 인자를 다른 함수에게 넘겨주고 제어권도 함께 위임한다. 그래서 콜백을 받은 함수는 역할에 따라 받은 콜백을 실행한다. 콜백을 큐에 넣는지 바로 콜 스택에서 실행하는 역할인지에 따라 동기인지 비동기인지 구별이 된다. [콜백은 '함수'이다.] 콜백함수는 함수이기 때문에 콜백함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는.. 2022. 11. 3. 이전 1 ··· 23 24 25 26 27 28 29 ··· 36 다음 728x90 반응형