flask15 ep 15. 인스타그램 클론코딩 (6) 폴더 구조 리팩토링 이번 시간은 구현에 앞 서 폴더 구조를 조금 고쳐주도록 하겠습니다. 위와 같이 server 파일을 삭제함과 동시에 html 폴더를 assets/ 아래에 만들어 html 파일들을 옮겨주고, server 아래 있던 파일들과 폴더는 frontend 아래로 옮겨줍니다. 파일들이 위치를 이동했음으로 이에 따라 코드도 수정해줍니다. server.js 파일의 6, 14, 18번째 줄을 위와 같이 수정해줍니다. 이 후 nodemon start 로 서버를 실행시켜 잘 작동되는 지 확인 해줍니다! ( 까먹지 말고 백엔드 서버도 켜줍시다.) 댓글 API 구현 먼저 backend/api/resources 폴더에 comment.py 파일을 새로 생성해줍니다. from flask_restful import R.. 2022. 11. 20. ep 14-2. Flask 인스타그램 클론코딩 (5) 이번 시간엔 먼저 프론트단에서 서버를 띄워보도록 하겠습니다. 먼저 frontend 폴더에 server라는 이름의 폴더를 생성해주고, 그 아래 server.js 파일을 생성해줍니다. 그리고 위와 같이 만들어준 server 폴더로 이동해 npm init 명령을 통해 package.json 파일을 생성해줍니다. 필자는 다음과 같이 정보를 입력했습니다. npm install nodemon -global 명령을 입력해 nodemon을 설치해줍니다. nodemon은 server.js 파일의 변화가 생기면 이를 자동 재시작해주는 역할을 수행합니다. 그 후, npm install express 으로 서버를 열 때, 사용하게 될 express도 살처해줍니다. var express = require("express"); .. 2022. 11. 17. ep 13. flask로 instagram Clone 코딩 - 4 (JWT) 지난 시간엔 백엔드에서 회원가입 API까지 구현을 해봤습니다! 이제 회원가입을 했으니 자연스레 로그인도 세트로 생각이 드실 겁니다. 하지만 여기서 우리는 궁금한 점이 있을 것입니다. 바로 회원가입의 경우 우리가 값을 넣고 그 값이 유효한지만 판별하면 끝이지만 로그인은 그렇지 않습니다. 들어온 값이 맞는지 확인을 해주고, 그 값이 일치하다면 단순히 OK가 아닌 "유지"가 되어야 합니다. 이때 우리가 사용해볼 수 있는 것이 JWT 입니다. JWT가 무엇인지 간단하게 설명드리겠습니다. JWT란? 먼저 JWT는 JSON Web Token 의 줄임말 입니다. 사전적인 의미로는 선택적 서명 및 선택적 암호화를 사용하여 데이터를 만들기 위한 인터넷 표준입니다. 아직까지는 이게 무슨 말인지 이해가 잘 안 될 것이고, .. 2022. 11. 6. ep 12. flask로 instagram Clone 코딩 - 3 저번 시간엔 백엔드 작업을 해주고 시간이 좀 지났습니다..! 프로젝트 마감과 시험이 겹쳐서 이제서야 12주차 과제를 하네요 이번 시간엔 프론트엔드 작업을 해줄 것입니다. 먼저 frontend 폴더에서 assets\js\script.js 파일을 작업해줍시다. 다음과 같이 코드를 입력해주면 됩니다. 그리고 확인을 해보면 다음과 같이 에러가 발생하는 것을 확인하실 수 있습니다. CORS에러인데 이를 해결 해주기 위해서는 백엔드에서의 작업을 필요로 합니다. 먼저 백엔드 폴더에서 가상환경을 실행시키고 위와 같은 명령어를 입력해줍니다. 그 후 api\__init__.py 에 CORS 관련 코드를 입력해줍니다. 그리고 다시 백엔드 서버를 켜주고 확인을 해보면 위와 같이 CORS 문제가 해결되고, 콘솔에 찍히는 것을 .. 2022. 11. 1. 이전 1 2 3 4 다음
