Python&React 웹서비스
1.#1. React와 Python 웹서비스 배우기
개발 공부를 시작하면서 무작정 시작하는 것 보다 어떤 것을 만들지 목표를 정해서 공부를 하면 좋을 듯 하다.요즘은 많은 인플루언스나 유투버 등 크리에이터 분들이 다양한 콘텐츠를 연결해주는 멀티링크 사이트들이 많이 사용한다.멀티 링크 서비스는 인스타그램, 블로그, 마켓
2.#2. 링크서비스 DB와 API 정의
테이블정의 ● GET /api/links - 전체링크정보조회 ● POST /api/link/create - 링크정보생성 ● DELETE /api/link/delete/<int:id> - 링크정보삭제 ● PUT /api/link/update/&
3.#3. 프로젝트 폴더 구조 및 환경설정
⎮프로젝트 폴더 : linkserver/ |-------- client ( React 구조) |-------- server ( Python구조 )mkdir linkservicecd linkservicenpx create-react-app clientpy
4.#4. 데이타베이스 모델작업 및 Resource 제작
SQLAlchemy는 Python에서 사용가능한 ORM(Object-Relational Mapping) 이며,객체와 관계형 데이터베이스의 데이터를 자동으로 매핑(연결)해주는 것을 말한다.여기서는 Flask에서 확장형태로 SQLALchemy을 지원하는 Flask-SQLA
5.#5. Flask-Restful 을 이용하여 API 호출
저장 후 이제 실행해서 확인해보자.⎮실행방법터미널에서 가상화 실행 ( source ./bin/activate )python3 server.py 실행POSTMAN에서 API 테스트message을 정상적으로 return받으면 된다.LINKS 테이블에 대한 CRUD API가
6.#6. React 화면 개발
앞에서 사전준비시 프로젝트 폴더인 linkservice아래에 npx create-react-app 으로 이미 client을 생성했다.기본 폴더구조에서 필요 없는 파일을 모두 지운다.• public 폴더 밑에 index.html을 제외하고 모두 삭제• src 폴더 밑에
7.#7. 링크서비스 React Componet 제작
컴포넌트는 크게 3가지로 구분하여 작성했다.1\. API URL을 관리하는 api.config.js2\. AXIOS로 API을 호출하여 리턴 받는 service.js3\. service을 받아 화면에 출력해주는 컴포넌트들디렉토리는 src 밑에 /component 에 /