프로그래밍/웹 개발46 [Axios/Fetch] 함수 내에서 AJAX 요청으로 받은 데이터를 리턴하기? 프로젝트 진행 중 함수 내에서 AJAX 요청을 주고 받고, 해당 데이터를 return하려고 했으나 실패했다. 문제 상황 및 원인 - 상황 : 함수 내에서 AJAX 요청으로 받은 데이터를 return 하려고 했으나 실패 - 원인 : AJAX를 통해 데이터를 받기 전에 이미 return문이 실행됨 (return 문 실행 이후 비동기 처리가 이루어짐) const testHandler = () => { let testData = [] axios.get( // return 문 실행 이후 비동기 처리 진행 `http://localhost:5000/career/${jobSeekerId}`, {withCredentials: true} ) .then((res)=>{ testData=[...res.data.data] }).. 2021. 11. 9. [React] 이벤트 함수에 매개변수 전달 (에러핸들링) 이벤트 함수에 매개변수를 전달하는 경우, 이를 return문에 전달하는 과정에서 에러가 발생했다. 문제 상황 1. return문에서 onClick 키워드로 이벤트 함수를 전달했으나, 매개변수가 전달되지 않음 2. 매개변수 및 클릭이벤트와 상관없이 이벤트 함수가 실행됨 export default function CompanyMyPage () { const [jobList, setJobList] = useState('') // Job 정보가 담기는 배열 // job 엘리먼트 삭제 핸들러 const DeleteJob = (jobId) => { axios.delete(`http://localhost:5000/job/${jobId}`, {withCredentials: true}) .then(res=>{ setEv.. 2021. 11. 1. [React] 함수 내 setState 사용 시, state 변경 순서와 타이밍 (에러핸들링) 프로젝트를 진행 중 요일(day)을 체크박스로 선택하여 state에 담는 기능을 구현했다. 이벤트함수 내에서 setState를 사용했다. 그러나 여기서 state가 변경되는 시점을 이해하지 못하여 에러가 발생했다. 문제 상황 1. 이벤트 함수 내에서 setState를 사용했으나, 다음 줄에서 여전히 state가 변경되지 않음 2. 이벤트 함수 내에서 또 다른 이벤트 함수를 사용했으나, 마찬가지로 변경전인 state를 사용하여 연산함 3. 코드 - return 문은 생략 - 수요일~일요일 정보를 담는 state와 함수는 생략 - 클릭이벤트를 통해 monHandler와 tueHandler가 먼저 실행됨 export default function CompanyMyPage () { // 체크박스에서 선택된 요일.. 2021. 11. 1. [이벤트 함수] button 태그와 onClick/onSubmit (에러핸들링) 프로젝트 중 에러는 아니지만 원하는 기능이 구현되지 않았다. 태그에 onSubmit 속성을 onClick으로 변경하자 문제가 해결되었다. 문제상황 및 해결방안 - 문제상황 : 태그에 onSubmit 속성을 활용하여 이벤트 핸들러를 할당하자, 동작이 안됨 - 해결방안 : onSubmit 속성을 onClick으로 변경 // create 요청을 위한 이벤트 핸들러 코드 const addToDoListHandler = (e) => { e.preventDefault(); let data = { userId: userId, list: ToDoList, startTime: ToDoStartTime, endTime: ToDoEndTime, theme: TodoTheme, date: date, }; axios .post.. 2021. 10. 18. [Axios] get 요청 시 Query Params 보내기 (에러핸들링) 프로젝트 중 axios를 통해 get 요청 시 에러가 발생했다. request body로 데이터를 보냈더니 에러가 발생하여, Query Params 를 통해 데이터를 전송하여 문제를 해결했다. Error 세부사항 - 상황 : 클라이언트에서 서버에 get 요청을 하며 request body에 userId 정보를 전달 - 에러 : 서버에서 request body 에 있는 userId 정보를 받지 못함 (request.body는 undefined) - UnhandledPromiseRejectionWarning: Error: WHERE parameter "userId" has invalid "undefined" value // 클라이언트 app.js에서 get 요청 코드 const ToDoListHandler .. 2021. 10. 7. [node.js + React] 쿠키와 토큰을 활용해 로그인 기능 구현 코드스테이츠에서 토큰 인증을 통해 로그인 기능을 구현하는 과제를 마쳤다. 진행 과정 및 코드는 다음과 같다. 1. 클라이언트 Login 페이지 : userId, password 입력 후 로그인 시도 (post 요청) 2. 서버의 login 컨트롤러 : request body로 받은 userId, password 와 일치하는 유저 조회 - 해당 유저가 없으면 실패 응답 보내기 - 해당 유저가 있으면 refreshToken을 생성하여 cookie로 전달하고, accessToken을 생성하여 body data로 전달 3. 클라이언트의 Login 페이지 : 서버의 성공 응답 받기 - 로그인 상태를 true로 바꾸기 - 서버에서 받은 AccessToken을 상태로 저장하기 4. 클라이언트의 app.js : log.. 2021. 9. 11. [node.js + React] 쿠키와 세션을 활용해 로그인 기능 구현 코드스테이츠에서 세션 인증을 통해 로그인 기능을 구현하는 과제를 마쳤다. 진행 과정 및 코드는 다음과 같다. 1. 클라이언트의 login 페이지 : username, password 입력 후 로그인 시도 (post 요청) 2. 서버의 login 컨트롤러 : request body의 userId와 password 가 일치하는 유저 조회 - 해당 유저가 없으면 실패 응답 보내기 - 해당 유저가 있으면 Session에 userId 를 저장하고, 성공 응답 보내기 3. 클라이언트의 Login 페이지 : 서버의 성공 응답 받기 - login 상태 변경 : 로그인에 성공했으므로 login 상태를 true로 바꾸기 - 서버로 해당 유저의 정보를 요청하기 (get 요청) 4. 서버의 userinfo 컨트롤러 : 요청의.. 2021. 9. 10. [Node.js] Sequelize로 MVC 디자인 패턴 만들기 코드스테이츠의 과제로 Sequelize를 통해 서버와 데이터베이스를 연결해보았다. Sequelize와 같은 ORM을 사용하면 JavaScript 문법만으로 DB에 접근이 가능하다. 또한 모델을 쉽게 생성할 수 있으며, 마이그레이션으로 DB의 버전 관리가 가능해진다. Sequelize를 통해 DB와 서버를 연결하고, 모델과 컨트롤러를 만드는 과정은 다음과 같다. 1. Sequelize 설치 및 부트스트랩 진행하기 2. Sequelize로 모델을 생성하고, 마이그레이션으로 DB와 연결하기 3. express 문법으로 라우팅을 통해 end point와 연결하기 4. get, post, redirect에 해당하는 컨트롤러 구축하기 5. association을 통한 join 테이블 생성하기 Sequelize 설치.. 2021. 9. 3. 이전 1 2 3 4 5 6 다음 반응형