본문 바로가기

post

[Flask] Flask 리액트 연동 안녕하세요! 저번 시간에는 인공지능 모델을 만들어 봤는데요. 이번 시간에는 모델을 통해 얻은 데이터를 리액트와 연동시켜보는 시간을 가져보겠습니다. 먼저 Flask는 Python으로 웹 애플리케이션을 개발하기 위한 경량 프레임워크입니다. NodeJS와 같은 서버 역할을 하게 됩니다. 설치를 하기 위해서 VScode에서 서버 디렉토리에서 터미널을 엽니다. pip install Flask 를 입력해서 설치해줍니다. 다음은 중요한 포인트인 CORS설정입니다. 포트가 다를 때 포트 접근을 허용해주는 정책입니다. from flask_cors import CORS from flask import Flask, request, jsonify app = Flask(__name__) CORS(app) 이렇게 코드를 추가하면.. 더보기
[Node.js] 로그인 기능 https://youtu.be/HcAYHUHTNi4?si=_P73OEjAh9ODPZq1 https://youtu.be/yWRj4GxFcr8?si=Qf7vOOcYPnV1p9Mb 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 오늘은 로그인 기능을 구현해 보도록 하겠습니다. 먼저 로그인 Route를 server.js에서 만들어 줍니다. app.post('/login', (req,res)=>{ //로그인 데이터를 가져온다 }) 로그인을 하려면 3가지 단계가 필요합니다. 1. 로그인 하려는 이메일이 데이터베이스에 존재하는지 확인한다. 2. 이메일이 존재한다면 비밀 번호가 맞는 비밀번호인지 확인한다. 3. 비밀 번호가 맞다면 토큰을 생성한다. 먼저 첫 번째 단계부터 구현해 보도록 하겠습니다. Use.. 더보기
[MongoDB] PostMan을 사용해서 회원가입 구현 const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ name:{ type : String, maxlength:50 }, email:{ type : String, trim : true, unique : 1 }, password : { type: String, minlength:5 }, lastname:{ type : String, maxlength:50 }, role:{ type: Number, default : 0 } } ) const User = mongoose.model('User', userSchema) module.exports = {User} 저번 시간에 만들었던 모델을 사용해서 간이 회원가입 기능을 구현해 보도록.. 더보기
[React] API 연동 백엔드를 무작정 코딩하면서 공부해보려고 했는데 엄두가 안나서 기본 개념부터 배워보려고 합니다. 오늘은 API 연동에 대해서 공부해 보려고 하는데 알고 있어야 할 개념이 있습니다. (벨로퍼트님의 강의를 참고하였습니다.) 비동기 처리 함수라는 것이 있는데 비동기라는 말은 작업을 동시에 처리하는 것을 의미합니다. 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다. 비동기 처리는 보통 Promise나 async/await함수를 사용합니다. const myPromise = new Promise((resolve, reject) => { // 구현.. }) Promise함수의 형태입니다. 성공할 때는 resolve를 호출하고 .. 더보기
[React] 리액트로 서버에 데이터 연동하기2 저번 시간에는 express를 이용해서 서버에 데이터를 추가하고 변경하는 것까지 해봤습니다. 이번에는 리액트에서 코드를 짜서 서버에 데이터 요청을 해보겠습니다. (라매개발자님의 강의 영상을 참고하였습니다.) 먼저 create-react-app database를 터미널에 입력해서 작업 폴더를 만들어 줍니다. 그리고 필요없는 css파일들과 logo.svg파일을 지워줍시다. 파일을 지웠으니까 index.js와 app.js의 import문과 내용을 지워줍니다. function App() { return ( Todolist ); } export default App; 임의로 코드를 적고 npm start를 통해서 테스트 해봅시다. 잘 나오네요! 서버에 데이터를 요청하려면 fetch와 axios를 사용해야 합니다... 더보기

티스토리툴바