🧑🏻&zwj;💻시니어개발자🧑🏻&zwj;💻

전체 글

#7. 프론트엔드 화면 개발 2023.03.16
#6. Python으로 API 개발(API Resource선언 및 테스트) 2023.03.11
#6. Python으로 API 개발(데이타베이스 모델 작업) 2023.03.10
#5. Python으로 API 개발(기본환경구성) 2023.03.09
#5. Python으로 API 개발 2023.03.09
#4. 프로젝트 폴더 구조 및 환경설정 2023.03.09
#3. 개발 준비 ( 백엔드와 프론트엔드 관련 툴 설치 ) 2023.03.07
#2. 화면 구성과 DB 및 API 정의 2023.03.06
#1. 개발을 하면서 배우는 React와 Python Flask로 링크서비스 제작 2023.03.06

#7. 프론트엔드 화면 개발

작은미련 2023. 3. 16. 09:38

2023. 3. 16. 09:38

1. React로 화면 개발

자, 이제부터 REACT로 화면을 개발 해보자.

앞에서 사전 준비시 프로젝트 폴더인 linkservice아래에 npx create-react-app 으로 이미 client을 생성했다.

#4. 프로젝트 폴더 구조 및 환경설정

1.1. 프로젝트 폴더 구조 및 환경설정 프로젝트 폴더 구조는 프론트엔드와 백엔드를 나누고자 client / server로 구분 한다. ⎮프로젝트 폴더 : linkserver/ |-------- client ( React 구조) |-------- server ( Python구

firstvalue.tistory.com

1.1. React 기본설정

기본 폴더구조에서 필요 없는 파일을 모두 지운다.

· public 폴더 밑에 index.html을 제외하고 모두 삭제

· src 폴더 밑에 App.js, index.js 을 제외하고 모두 삭제

React 파일 구조를 간단히 설명한다면,

1. index.js

src 폴더에 메인 Script로 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링을 한다.

2. App.js

src 폴더에 컴포넌트를 정의하는 Script이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다.

3. index.html

public 폴더에 있으며, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 렌더링 된 결과가 표시된다.

📌 App.js에서 컴포넌트를 정의하고 -> index.js 에서 ReactDOM.rendor 하고 -> index.html에서 표시된다.

먼저, App.js 을 수정한다.

아래 코드에서 필요 없는 내용 지우고, 다음과 같이 추가 한다.

index.js 에서 reportWebVitals 부분과 import index.css을 주석처리 한다.

📌 참고로, reportWebVitals는 Create React App에서 서드파트 라이브러리로 Index 파일에 써 있는 것처럼

reportWebVitals() 에 console.log을 넣어주면 개발창을 통해 앱의 퍼포먼스 시간들을 분석하여 object형태로

보여준다.

이젠 터미널에서 yarn start을 실행하고, 브라우저에서 접속해보자.

1.2. 디자인 가져오기

디자인까지 하면 1인 개발자로 가장 이상적이만, 그만큼 많은 노력이 필요하다. 나도 디자인 만큼은 많이 배우지 못해서 얕은 지식으로 화면을 만들어 보기로 했다.

디자인이 필요 없는 분들은 디자인 설명부분을 제외하고, 개발부분만 봐도 된다.

우선 Bootstrap 무료 디자인을 가지고 와서 변경해보고자 한다.

디자인 참조 : https://getbootstrap.com/docs/5.3/examples/

우리는 Album화면을 가지고 시작하고자 한다. https://getbootstrap.com/docs/5.3/examples/album/ 접속후 오른쪽 마우스 클릭해서 페이지 소스보기에서 HTML을 복사하여 index.html에 붙여 넣는다.

BootStrap 무료디자인 HTML코드를 index.html에 붙힌다.

Title등 텍스트 부분을 빼거나, 수정하시고, HTML에서 본문에 해당되는 <main></main> 과 <footer></footer> 는 삭제하고 나머지 부분에서 필요한 부분은 추가/수정/삭제해서 초기 화면을 구성해보자

<main></main> 부분이 가장 중요하므로, 소스내 확인하기 바란다.

<!doctype html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1">
  <meta name="description" content="">
  <meta name="generator" content="Hugo 0.88.1">
  <title>링크서비스</title>

  <!-- Bootstrap core CSS -->
  <link href="https://getbootstrap.kr/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="collapse bg-dark" id="navbarHeader">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h4 class="text-white">링크서비스</h4>
            <p class="text-muted">개발은 엄연히 존중 받아야 할 개인의 창작물입니다. 
            </p>
          </div>
        <div class="col-12">
          <h6 class="text-white">Developers</h4>
          <ul class="list-unstyled">
            <li class="text-muted">(주)XXXXXXXX</li>
            <li class="text-muted">사업자번호:XXX-XX-xxxxx</li>
            <li class="text-muted">대표전화:000-1111-2222</li>            
          </ul>
        </div>
      </div>

      </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
      <div class="container">
        <a href="/" class="navbar-brand d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2"
            viewBox="0 0 24 24">
            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
            <circle cx="12" cy="13" r="4" />
          </svg>
          <strong>링크서비스</strong>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
          aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>
  </header>


  <main>
    <!-- 배경이미지 처리 -->
    <section class="container" id="section">
    </section>    

    <div class="album py-4 bg-light" >
      <div class="container" id="root">
            <!--   여기에 본문내용을  처리 -->
      </div>
    </div>
  </main>
  <!-- <footer class="text-muted py-2" id="footer">
  </footer> -->
</body>
</html>

📌 디자인 및 퍼블리싱이 가능하신 분들은 각자 다른 디자인으로 해도 무방하다.

이젠 화면이 잘 출력되는지 확인 한다.

다음편에는 Component제작을 해보자.

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#9. 초화면 디자인 ( CSS 적용 및 화면 Component제작 ) (0)	2023.03.19
#8. 프론트엔드 화면개발 (component 제작) (0)	2023.03.17
#6. Python으로 API 개발(API Resource선언 및 테스트) (0)	2023.03.11
#6. Python으로 API 개발(데이타베이스 모델 작업) (0)	2023.03.10
#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09

#6. Python으로 API 개발(API Resource선언 및 테스트)

작은미련 2023. 3. 11. 14:09

2023. 3. 11. 14:09

#6. Python으로 API 개발(데이타베이스 모델 작업)

#5. Python으로 API 개발(기본환경구성) #5. Python으로 API 개발(기본환경구성) ⌘ server.py ( 위치: linkservice/server/server.py) --------------------------------------------------------------------------------------------------- app.py

firstvalue.tistory.com

이전 포스팅에 데이타베이스 모델링 작업을 했고, 여기서는 server.py에 flask_restful에서 제공되는

API Resource을 추가해 보자.

⌘ server.py ( 위치: linkservice/server/server.py)

----------------------------------------------------------------------------------------------------------

기존 server.py 에 추가해보자.

import socket
from config.create_app import create_app
from flask import Flask
    #flask_restful에서 API와  src 밑에 links.py에 class들을 import 한다.
from flask_restful import Api
from src.links import LinkRegister, LinksAll, LinkSelect, LinkRemove, LinkUpdate
from db_init import db

env = socket.gethostbyname(socket.gethostname())
if 'linkservice.com' in env :
   app = create_app('production')
else:
   app = create_app('development')
# print(app.config)
    # API 선언
api = Api(app)
    #API에 Resource를 추가한다.
api.add_resource(LinkRegister, '/api/link/create')
api.add_resource(LinksAll, '/api/links')
api.add_resource(LinkSelect, '/api/link/select/<int:id>')
api.add_resource(LinkRemove, '/api/link/delete/<int:id>')
api.add_resource(LinkUpdate, '/api/link/update/<int:id>')

if __name__ == "__main__":
# ORM
    db.init_app(app)
    app.run(debug=True, port=5000)

저장 후 이제 실행해서 확인해보자.

⎮실행방법

1. 터미널에서 가상화 실행 ( source ./bin/activate )

2. python3 server.py 실행

3. POSTMAN에서 API 테스트

실행후 POSTMAN에서 테스트를 해보자.

1.1. API 테스트

☑︎ POST /api/link/create - 링크정보 등록

Body에 JSON으로 데이터를 넣고 진행해보자.

message을 정상적으로 return 받는지 확인한다.

☑︎ GET /api/links – 전체 링크정보 조회

☑︎ GET /api/link/select/<int:id> - ID에 해당한 링크정보조회

☑︎ PUT /api/link/update/<int:id> - name을 수정해보자.

☑︎ DELETE /api/link/delete/<int:id> - ID에 해당한 링크정보 삭제

LINKS 테이블에 대한 CRUD API가 완성되었다.

주요 테이블인 LINKS의 CRUD API가 완성되었으므로, 프론트엔드에서 실제 화면을 구현을 해보고, 아직까지 DB및 API설계에 빠진 것은 화면을 개발하면서 추가적으로 제작해 보기로 한다.

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#8. 프론트엔드 화면개발 (component 제작) (0)	2023.03.17
#7. 프론트엔드 화면 개발 (0)	2023.03.16
#6. Python으로 API 개발(데이타베이스 모델 작업) (0)	2023.03.10
#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09
#5. Python으로 API 개발 (0)	2023.03.09

#6. Python으로 API 개발(데이타베이스 모델 작업)

작은미련 2023. 3. 10. 09:53

2023. 3. 10. 09:53

#5. Python으로 API 개발(기본환경구성)

⌘ server.py ( 위치: linkservice/server/server.py) --------------------------------------------------------------------------------------------------- app.py로 보통 명칭 하지만, 여기서는 server.py로 네임을 변경하여 진행한다. 실

firstvalue.tistory.com

Python Flask의 기본환경이 구성되었고, 이젠 데이터베이스 관련 작업을 진행한다.

SQLAlchemy는 Python에서 사용가능한 ORM(Object-Relational Mapping) 이며, 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑(연결)해주는 것을 말한다.

여기서는 Flask에서 확장형태로 SQLALchemy을 지원하는 Flask-SQLALchemy 라이브러리를 사용한다.

⌘ db_init.py ( 위치: linkservice/server/db_init.py)

---------------------------------------------------------------------------------------------------------

db_init.py는 db = SQLAlchemy() 선언을 해주는 공통 모듈로 활용 한다.

from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()

⌘ links_model.py ( 위치: linkservice/server/models/links_model.py)

---------------------------------------------------------------------------------------------------

이제부터 links 테이블에 대한 DB모델을 제작하고, 기본적인 id 값으로 삭제/조회/업데이트 등 필요한 기본 METHOD을 정의한다.

from db_init import db
from sqlalchemy import func

class LinkModel(db.Model):
	# DB 스키마가 기본(public)이 아니면 별도로 선언을 해주면 된다.
    __table_args__ = {'schema': 'aip'}
    
	# 물리 테이블명
    __tablename__ = "links"
    
	# 컬럼 맵핑
    
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100))
    tag = db.Column(db.String(50))
    sort = db.Column(db.Integer)
    imageurl = db.Column(db.Text)
    linkurl = db.Column(db.Text)
    create_date = db.Column(db.Date)
    update_date = db.Column(db.Date)

    def __init__(self, id, name, tag, sort, imageurl, linkurl, create_date,update_date):
        self.id = id
        self.name = name
        self.tag = tag
        self.sort = sort
        self.imageurl = imageurl
        self.linkurl = linkurl
        self.create_date = create_date
        self.update_date = update_date

    def save(links):
        """
        정보 저장    :param 정보 객체
        """
        db.session.merge(links)
        db.session.commit()
        db.session.close()

	# Link정보 저장시 sort 순서의 max값을 구한다. 만약 null이면 0 으로 변경
    # 화면에 출력되는 순서를 변경하기 sort항목이 필요하며, 링크정보 등록시 max값을 저장하기위해서 필요
    
    @classmethod
    def max_sort(self):
      result = db.session.query(func.coalesce(func.max(self.sort), 0)).scalar()

      return result+1

	# 기본적인 조회/삭제/업데이트 코드를 구성한다. ( param : id )
    
    @classmethod
    # id로 조회
    def find_by_id(self, id):
		links= db.session.query(self).filter_by(id=id).first()
        return links

    @classmethod
    # id로 삭제    
    def delete_by_id(self, id):
		try:
        	db.session.query(self).filter_by(id=id).delete(synchronize_session=False)
      	except:
        	db.session.rollback()
      	finally:
        	db.session.commit()
        	db.session.close()

    @classmethod
    # id로 values값을 업데이트
    def update_by_id(self, id, values):
        db.session.query(self).filter_by(id=id).update(values)     
        db.session.commit()   
        db.session.close()     

    def __str__(self):
        return "[" + str(self.__class__) + "]: " + str(self.__dict__)

Links 테이블의 DB모델과 기본 정보 조회/삭제/업데이트 관련 메서드도 제작이 끝났으니,

이젠 API 형태로 제공하고자 Resource를 제작한다.

1.1. Resource 제작

⌘ links.py ( 위치: linkservice/server/src/links.py)

---------------------------------------------------------------------------------------------------

links.py에서 API 호출 시 실행되는 class을 정의해보자.

- class LinkRegister(Resource) : 링크정보를 DB에 등록(Insert) 한다.

- class LinksAll(Resource) : 전체 링크 정보를 조회한다.

- class LinkSelect(Resource) : 선택한 링크정보를 조회한다..

- class LinkRemove(Resource) : 선택한 링크정보를 삭제한다..

- class LinkUpdate(Resource) : 선택한 링크정보를 수정한다..

from db_init import db
from flask_restful import Resource, reqparse
from flask import jsonify, request
from flask_marshmallow import Marshmallow
from models.links_model import LinkModel
from datetime import date as date_function

ma = Marshmallow() #객체를 Python 데이터 유형으로 직렬화

class LinkSchema(ma.SQLAlchemyAutoSchema):
    class Meta:
        model = LinkModel

"""
POST /api/link/create -  등록 resource
"""
class LinkRegister(Resource):
# 입력 파라미터 설정
# DB항목에 맞게 파라메타로 받아 저장한다.
    parser = reqparse.RequestParser()
    parser.add_argument('name',type=str,required=True,help="필수항목입니다.")
    parser.add_argument('tag',type=str)
    parser.add_argument('sort',type=str)     
    parser.add_argument('imageurl',type=str )      
    parser.add_argument('linkurl',type=str )    

    def post(self):
        # Request Parameter를 dictionary 형태로 저장
        data = LinkRegister.parser.parse_args()
        name = data['name']
        tag = data['tag']
        sort = LinkModel.max_sort() #Sort순서를 위한 값으로 입력시 max값을 입력한다.
        imageurl = data['imageurl']
        linkurl = data['linkurl']
        create_date = date_function.today()  #create_date는 datetime으로 저장
        update_date = date_function.today()

        LinkModel.save(LinkModel(None, name, tag, sort, imageurl, linkurl, create_date, update_date))

        return {'message':f'링크 정보가 등록 되었습니다'},201

"""
GET /api/links - 전체 링크정보 조회
"""

class LinksAll(Resource):

    def get(self):
    # 입력 파라미터 설정 - 목록전체 출력으로 파라미터가 없음.
        link = LinkModel.query.order_by(LinkModel.sort).all()
        link_schema = LinkSchema(many=True)
        output = link_schema.dump(link)
        return jsonify({'links' : output})

"""
GET /api/link/select/<int:id> - 링크 정보 조회
"""
class LinkSelect(Resource):

    def get(self,id):
        # 정보 조회
        link = LinkModel.find_by_id(id)
        link_schema = LinkSchema()
        output = link_schema.dump(link)
        return jsonify({'links' : output})

"""
DELETE /api/link/delete/<int:id> - 링크정보삭제
"""
class LinkRemove(Resource):
    def delete(self, id):
        # 정보 삭제 ( links_model의 delete_by_id 메소드 호출 )
        LinkModel.delete_by_id(id)

        return {'message':'정상적으로 삭제 되었습니다.'},201

"""
PUT /api/link/update/<int:id> - 링크 정보 수정
"""
class LinkUpdate(Resource):

    def put(self,id):
        #Request를 json으로 받는다.
        values = request.get_json()
        # 정보 수정 ( links_model의 update_by_id 메소드 호출 )
        LinkModel.update_by_id(id, values)
        return {'message':'정보가 수정 되었습니다.'},201

참고자료 :

Sqlalchemy

ORM Quick Start — SQLAlchemy 2.0 Documentation

ORM Quick Start For new users who want to quickly see what basic ORM use looks like, here’s an abbreviated form of the mappings and examples used in the SQLAlchemy Unified Tutorial. The code here is fully runnable from a clean command line. As the descri

docs.sqlalchemy.org

Flask + marshmallow for beautiful APIs

Flask-Marshmallow: Flask + marshmallow for beautiful APIs — Flask-Marshmallow 0.14.0 documentation

Flask-Marshmallow: Flask + marshmallow for beautiful APIs changelog // github // pypi // issues Flask + marshmallow for beautiful APIs Flask-Marshmallow is a thin integration layer for Flask (a Python web framework) and marshmallow (an object serialization

flask-marshmallow.readthedocs.io

다음 편에는 server.py에 flask_restful에서 제공되는 API Resource을 추가해 보자.

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#7. 프론트엔드 화면 개발 (0)	2023.03.16
#6. Python으로 API 개발(API Resource선언 및 테스트) (0)	2023.03.11
#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09
#5. Python으로 API 개발 (0)	2023.03.09
#4. 프로젝트 폴더 구조 및 환경설정 (0)	2023.03.09

#5. Python으로 API 개발(기본환경구성)

작은미련 2023. 3. 9. 17:10

2023. 3. 9. 17:10

#5. Python으로 API 개발

1. Python으로 API 개발 Python의 Flask을 이용하여 API제작을 해보자. 우선 PostgreSQL에서 DB 설계에 맞게 테이블을 생성한다. (DB생성 방법은 별도 설명하지 않는다.) 1.1. Python Flask API환경 설정 ⌘ config.py (

firstvalue.tistory.com

Flask로 REST API 구현하기

⌘ server.py ( 위치: linkservice/server/server.py)

---------------------------------------------------------------------------------------------------

app.py로 보통 명칭 하지만, 여기서는 server.py로 네임을 변경하여 진행한다.

실제 서버를 실행하는 파일로 python3 server.py로 구동한다.

우선 설정파일들로 잘 되는지 확인해보자.

아래는 host가 라이브 도메인(linkserver.com) 이 아닌 경우, DEV환경으로 인식한다.

import socket
from flask import Flask

env = socket.gethostbyname(socket.gethostname())
if 'linkserver.com' in env :
   app = create_app('production')
   print('운영계 환경입니다.')
else:
    app = create_app('development')
    print(' DEV 환경입니다.')
    
#print(app.config)

if __name__ == "__main__":
app.run(debug=True, port=5000)

위 내용을 모두 저장한 후 터미널을 열어서 python3 server.py을 실행해보자.

⎮실행방법

1. 가상화 환경 시작

2. python3 server.py 실행

위와 같은 오류가 발생할 것이다.

Flask 라이브러리가 없어서 발생한 오류인데, 앞으로 진행시 필요한 라이브러리를 모두 미리 설치해보자

⎮LIBRARY설치

1. pip install flask

2. pip install Flask-RESTful

3. pip install Flask-SQLAlchemy

4. pip install marshmallow-sqlalchemy

5. pip install flask-marshmallow

6. pip install psycopg2

7. pip install pillow

라이브러리를 모두 설치한 후 다시 한번 터미널에서 python3 server.py 을 실행한다.

server.py에 print(app.config) 을 추가하면 환경파일이 잘 적용되었는지 확인이 가능하다.

기본 Python Flask 환경은 구성되었으며, 다음편에는 데이타베이스 모델 작업을 진행한다.

#6. Python으로 API 개발(데이타베이스 모델 작업)

firstvalue.tistory.com

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#6. Python으로 API 개발(API Resource선언 및 테스트) (0)	2023.03.11
#6. Python으로 API 개발(데이타베이스 모델 작업) (0)	2023.03.10
#5. Python으로 API 개발 (0)	2023.03.09
#4. 프로젝트 폴더 구조 및 환경설정 (0)	2023.03.09
#3. 개발 준비 ( 백엔드와 프론트엔드 관련 툴 설치 ) (0)	2023.03.07

#5. Python으로 API 개발

작은미련 2023. 3. 9. 16:54

2023. 3. 9. 16:54

1. Python으로 API 개발

Python의 Flask을 이용하여 API제작을 해보자.

우선 PostgreSQL에서 DB 설계에 맞게 테이블을 생성한다.

(DB생성 방법은 별도 설명하지 않는다.)

1.1. Python Flask API환경 설정

⌘ config.py ( 위치: linkservice/server/config/config.py )

--------------------------------------------------------------------------------------------------

config.py은 개발계(Development)와 운영계(Production) 환경설정을 위한 것으로 서버(server.py) 구동 시 호출한다.

SQLALCHEMY_DATABASE_URI정보를 여러분의 DB정보로 변경하고, 다른 옵션들은 참고하여 필요시 추가/삭제 하면 된다.

이미지 저장 위치설정은 CDN혹은 NAS형태로 제작하고자 별도 폴더로 분리했으며, 링크정보와 이미지 정보 저장은 IMAGE_URL형태로 저장된다.

환경파일 내용은 앞으로 진행하면서 설명될 것이다.

import os
dir = os.path.dirname(os.path.abspath(os.path.dirname(__file__)))

class Development(object):
    DEBUG = True
    FLASK_APP = 'linkservice_dev'
    ENV = 'development'
    
## DB URL FOR DEVELOPMENT
    SQLALCHEMY_DATABASE_URI = 'postgresql://사용자:사용자패스워드@localhost:5432/데이타베이스명'

# 데이터 변경사항에 대해 커밋 전후로 알림 여부
    SQLALCHEMY_TRACK_MODIFICATIONS = True

# Query Debug 여부 및 DB POOL
    SQLALCHEMY_ECHO = True
    SQLALCHEMY_POOL_SIZE = 20
    SQLALCHEMY_POOL_RECYCLE = 3600

#JSON에서 한글 표현을 위해서 반영
    JSON_AS_ASCII = False
    
#이미지 위치 설정
    image_folder = os.path.normpath(os.path.join(dir, os.pardir)) + '/client/public/images/'
    COVER_IMAGE_FORDER = image_folder
    IMAGE_FORDER = image_folder
    IMAGE_URL = 'http://127.0.0.1:3000/images/'

class Production(object):
    DEBUG = False
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    SQLALCHEMY_ECHO = False
    FLASK_APP = 'linkservice'
    ENV = 'production'
    
## DB URL FOR PRODUCTION
    SQLALCHEMY_DATABASE_URI = 'postgresql://사용자:사용자패스워드@localhost:5432/데이타베이스명'

#JSON에서 한글 표현을 위해서 반영
    JSON_AS_ASCII = False    

#이미지 위치 설정
    image_folder = os.path.normpath(os.path.join(dir, os.pardir)) + '/images/'
    COVER_IMAGE_FORDER = image_folder
    IMAGE_FORDER = image_folder 

#운영계 
    IMAGE_URL = 'https://www.linkservice.com/img/'

app_config = {
    'development': Development(),
    'production': Production(),
}

⌘ create_app.py ( 위치: linkservice/server/config/create_app.py)

---------------------------------------------------------------------------------------------------

create_app.py는 환경파일을 읽어 Flask App을 실행한다.

from . import config
from flask import Flask

def create_app(environment):
    # config파일에서 불려오기
    config_map = {
        'development': config.Development(),
        'production': config.Production(),
    }
    config_obj = config_map[environment.lower()]   
    
    app = Flask(__name__)
    app.config.from_object(config_obj)

    return app

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#6. Python으로 API 개발(데이타베이스 모델 작업) (0)	2023.03.10
#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09
#4. 프로젝트 폴더 구조 및 환경설정 (0)	2023.03.09
#3. 개발 준비 ( 백엔드와 프론트엔드 관련 툴 설치 ) (0)	2023.03.07
#2. 화면 구성과 DB 및 API 정의 (0)	2023.03.06

#4. 프로젝트 폴더 구조 및 환경설정

작은미련 2023. 3. 9. 13:38

2023. 3. 9. 13:38

1.1. 프로젝트 폴더 구조 및 환경설정

프로젝트 폴더 구조는 프론트엔드와 백엔드를 나누고자 client / server로 구분 한다.

⎮프로젝트 폴더 : linkserver/

|-------- client ( React 구조)

|-------- server ( Python구조 )

⎮프로젝트 폴더를 만들고 Client 환경과 Server 환경을 구성해 보겠다.

터미널을 열어서,

> mkdir linkservice

> cd linkservice

⎮프로젝트 폴더에서 react 환경으로 client 폴더 생성

> npx create-react-app client

⎮프로젝트 폴더에서 python가상환경으로 server폴더 생성

> python3 -m venv server

⎮프로젝트 폴더인 linkservice 아래에 client와 server환경이 구축되었다.

다음편에는 Python Flask로 API 제작을 해보자.

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09
#5. Python으로 API 개발 (0)	2023.03.09
#3. 개발 준비 ( 백엔드와 프론트엔드 관련 툴 설치 ) (0)	2023.03.07
#2. 화면 구성과 DB 및 API 정의 (0)	2023.03.06
#1. 개발을 하면서 배우는 React와 Python Flask로 링크서비스 제작 (0)	2023.03.06

#3. 개발 준비 ( 백엔드와 프론트엔드 관련 툴 설치 )

작은미련 2023. 3. 7. 10:00

2023. 3. 7. 10:00

1. 개발 준비

1.1. 사전 준비 작업

백엔드(BACK-END) : Python, Flask, SQLAlchemy을 통해 RESTful API제작,

프론트엔드(FRONT-END) : React, Bootstrap, material ui 을 사용하여 page 제작

데이타베이스(DB) : PostgreSQL

1.2. 설치 프로그램

설치방법은 별도 설명하지 않으며, 필요시 검색하시면 많은 자료들이 나와 있다.

👀 백엔드(BACK-END)

· Python3.6.X ( 운영체제에 맞게 설치 )

다운로드 사이트 : https://www.python.org/downloads/

· POSTMAN

다운로드 사이트: https://www.getpostman.com/products

· PostgreSQL 최신버전( 운영체제에 맞게 설치 )

다운로드 사이트: https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

· DBeaver Community 버전( 운영체제에 맞게 설치 )

다운로드 사이트: https://dbeaver.io/download/

 DBeaver는 DB툴이므로 다른 DB툴을 가지고 있으면 별도 설치 안 해도 된다.

👀 프론트엔드(FRONT-END)

· Node.js 와 NPM

다운로드 사이트 : https://nodejs.org/ko/download/

· NPX 설치 : 명령 프롬프트에서 실행> npm install npx -g

· Yarn 설치 : 명령 프롬프트에서 실행> npm install yarn -g

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09
#5. Python으로 API 개발 (0)	2023.03.09
#4. 프로젝트 폴더 구조 및 환경설정 (0)	2023.03.09
#2. 화면 구성과 DB 및 API 정의 (0)	2023.03.06
#1. 개발을 하면서 배우는 React와 Python Flask로 링크서비스 제작 (0)	2023.03.06

#2. 화면 구성과 DB 및 API 정의

작은미련 2023. 3. 6. 19:40

2023. 3. 6. 19:40

1. 기본 설계

간단한 프로그램이지만, 프로젝트 매니저나 기획자처럼, 개발 이전에 어느정도 설계가 되어야 개발의 일관성이 생긴다.

혼자서 프론트엔드와 백엔드 개발을 하게 되어 실제 내용이 어설프더라도 양해해주기 바랍니다.

화면은 디자인이 되었지만, 사실 개발하면서 퍼블리싱을 했고, 그 단계 단계를 앞으로 보여줄 예정이다.

IT기업을 다닐 때는 이 모든 것을 산출물 형태로 파워포인트와 엑셀로 작업을 했지만, 요즘은 스케치(Sketch), 피그마(Figma), XD와 같은 인터페이스 디자인을 위한 협업 웹 애플리케이션 등이 많지만, 기 사용해본 Figma을 통해 간단히 UI설계를 진행 했다. UI부문도 보통 기업에서는 디자인팀에서 제작하여 주기 때문에 개발시에 부담이 덜 할 수 있으나, 디자인이 약한 나는 CSS에서 많은 시간을 허비했다.

여러 사이트의 CSS을 참고하여 나름대로 만든 것으로, 퍼블리싱에 능한 분이라고 나름 수정하셔서 사용해도 무방하다

1.1. DB 설계

UI 설계된 기준으로 DB 설계를 해보자. 또한 기본적인 로그인 처리를 위한 테이블도 구성한다.

1) Link정보를 저장하는 테이블 ( links )

2) 워드 클라우드를 표시하기 위한 테이블( tagcloud )

▷ 워크 클라우드는 별도 구현 안 해도 되며, 향후 필요시 소스만 참고하기 바란다.

3) 일정을 등록( 행사오픈일정 등 )을 위한 테이블 ( plans )

▷ 화면 커버 이미지에 일정이 표시될 예정이다.

4) 로그인을 위한 유저정보 테이블 ( user )

1.2. API정의

각 DB 테이블의 기본 CRUD을 API로 정의하고, 로그인 처리, 회원가입처리, 이미지 처리를 위한 기본 API을 추가했다.

모든 API을 미리 기록해두고 싶지만, 설명을 위해서 여기서 정의되지 않은 API 는 개발 과정에서 추가할 예정입니다.

다음편에 계속........

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09
#5. Python으로 API 개발 (0)	2023.03.09
#4. 프로젝트 폴더 구조 및 환경설정 (0)	2023.03.09
#3. 개발 준비 ( 백엔드와 프론트엔드 관련 툴 설치 ) (0)	2023.03.07
#1. 개발을 하면서 배우는 React와 Python Flask로 링크서비스 제작 (0)	2023.03.06

#1. 개발을 하면서 배우는 React와 Python Flask로 링크서비스 제작

작은미련 2023. 3. 6. 17:38

2023. 3. 6. 17:38

1. 개발 개요

IT기업을 퇴사 후 개발 공부를 시작하면서 어떤 프레임워크/라이브러리를 배울까 고민하면서 예전에 잠깐 공부했던 Angularjs을 다시 해볼까 했으나, 가장 인기 있는 프레임워크/라이브러리를 배우기로 마음 먹으면서React와 Python 개발을 진행했다.

다니던 회사는 JAVA의 위주의 MSA, 자체 프레임워크 솔류션등 사용하여, 최신 프레임워크/라이브러리를 배울 시간도 없었고, 과장급 이후 부터는 개발보다는 BA 역할만 하다 보니, 프레임워크/라이브러리를 새롭게 공부하는것이 어려움이 있었다.

본 내용은 약 2달간 React와 Python을 공부하면서 구축한 내용의 소스를 개발 단계부터 하나하나 따라 할수 있도록 공유하여 많은 분들과 나누고자 한다.

내용을 정리하다보니, 초보 혹은 첫 프로젝트 신입은 어려울 수 있을 것 같다는 생각이 든다.

소스 위주의 내용이므로, 소스내에 주석처리를 했다고 했으나, 많이 부족할 수도 있으며, 기본적인 개념은 알고 있다는 가정하에 진행되므로, 필요시 검색을 통해 추가적으로 공부를 하시는 것을 추천한다.

개발할 때 개념적인 설명만 하는 자료가 많아, 실제 운영되는 참고소스를 찾기가 어려운 경험이 있었고, 이런 경험을 초보 개발자들에게 조금이나마 도움을 주고자 모든 소스를 직접 구현하는것을 따라하면서 개발 경험을 익히기 바라는 마음에 앞으로 계속 여기에 기록을 남기면서 진행할 예정이다.

※ 최종 소스는 마지막 단계 or 중간단계에 git으로 공유할 예정이다.

1.1. 무엇을 만들 것인가?

개발 공부를 시작하면서 무작정 시작하는 것 보다 어떤 것을 만들지 목표를 정해서 공부를 하면 좋을 듯 하다.

요즘은 많은 인플루언스나 유투버 등 크리에이터 분들이 다양한 콘텐츠를 연결해주는 멀티링크 사이트들이 많이 사용한다.

멀티 링크 서비스는 인스타그램, 블로그, 마켓 등 여러가지 링크를 한곳에 등록해서 사용할 수 있다

예) 링크트리(Linktree), 인포크링크(Inpock link), 링크믹스(Link Mix), 리틀리(litt.ly), 링크온(Linkon), 리트링크(Lit.Link) 등등

약 20여개가 존재하는 것으로 알고 있다.

간단한 서비스인 만큼 사업 목적으로 개발이 아니므로, 멀티유저나 멀티컴퍼니 같은 서비스는 제외하고, 기본 기능과 사이트에 운영에 필요한 기능만 골라 링크서비스를 구현해 보고자 한다.

다음편은 간단한 설계를 진행하겠다.

※ 본 포스팅은 계속 수정될 수 있습니다.

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

#5. Python으로 API 개발(기본환경구성) (0)	2023.03.09
#5. Python으로 API 개발 (0)	2023.03.09
#4. 프로젝트 폴더 구조 및 환경설정 (0)	2023.03.09
#3. 개발 준비 ( 백엔드와 프론트엔드 관련 툴 설치 ) (0)	2023.03.07
#2. 화면 구성과 DB 및 API 정의 (0)	2023.03.06

PREV 이전 1 2 3 NEXT 다음

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

전체 글

1.1. React 기본설정

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

1.1. API 테스트

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

Flask로 REST API 구현하기

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

1.1. Python Flask API환경 설정

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

👀 백엔드(BACK-END)

👀 프론트엔드(FRONT-END)

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

1. 기본 설계

1.1. DB 설계

1.2. API정의

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

1. 개발 개요

1.1. 무엇을 만들 것인가?

'React&Python으로 웹개발 > 링크서비스' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역