반응형 분류 전체보기130 리액트 공통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. Express 폴더 구조 express는 node.js를 이용해서 서버를 개발할 수 있는 프레임워크이다. 직접 폴더 구조를 구현할수도 있지만 cli명령어들을 제공해준다. global 설치 npm install express-generator -g 제대로 설치되었는지 확인해보기 express -h 만일 파일 실행시 오류가 난다면 express 모듈을 다시 설치해주자 npm install express express 프로젝트 생성 명령어를 통해서 프로젝트를 생성 view 엔진을 'ejs'를 사용하겠다는 의미이고, 맨 마지막은 프로젝트 이름이다. express --view=ejs myapp ejs템플릿 사용을 위해 ejs모듈 설치 npm install ejs [생성된 프로젝트 구조 알아보기] app.js: 생성 후 기본이 되는 파일로.. 2022. 10. 31. React 로그인 API _ 1 (앞서 회원가입 로직을 완료한 상태) * 추가글: 정리를 하다보니까 이해가 조금 더 편한 상태가 되려면 server부터 참고해주세요. 먼저 클라이언트 //[client] signin.jsx const onValue = (data) => { axios.post('http://localhost:3000/auth/login', { email: data.email, pw: data.pw }).then(res => { localStorage.setItem('토큰', res.data.userToken) // header에 토큰 넣는 로직 setInterceptor(res.data.userToken) history('/main') }) } // 헤더에 토큰을 넣어줌 import axios from 'axios'; e.. 2022. 10. 31. 이전 1 ··· 20 21 22 23 24 25 26 ··· 33 다음 728x90 반응형
