🧑🏻‍💻시니어개발자🧑🏻‍💻

그동안 17편을 거쳐서 웹 개발 React&Python으로 웹개발(링크서비스)를 개발 했으며, 

혼자 프론트/백엔드를 하다 보면 복잡함을 느끼며, 수정작업이 이루어지면 백엔드와 프론트엔드 여러 소스들을 거쳐서 관련 내용을 반영해야 하는 어려움이 있을 수 있다. 하지만, 반복적인 개발 과정을 통해서 여러분의 실력을 높일 수 있을 것이다.

최대한 STEP BY STEP로 소스를 추가하면서 설명하려고 노력했으나,

더 복잡해 졌는지 알 수 없지만, 일단 차근차근 따라해보면 좋을 듯 하다.

또한 본 소스를 공개하면서 여러분과 함께 WIN-WIN이 될 수 있을 거라고 믿으며, 수정과 발전을 해 가면서 여러분들 만의 레퍼런스 소스가 되길 바란다.

누구나 개발할 수 있는 소스이며, 단지 한번도 전체적인 개발 경험을 못한분들을 위한 것이므로, 완벽한 소스 내용이 아님을 다시 한번 말씀드리며, 제 1편을 마치고자 한다.

 링크서비스 git : https://github.com/firstvalue1/LINKSERVICE.git

보시다 수정이나, 의견 있으시면 git에 남겨주시기 바랍니다.

다음은 링크서비스를 기본으로 추가적인 기능들을 계속 게시 할 예정입니다.

#8. 프론트엔드 화면개발 (component 제작)

데이터까지 출력되는 것을 확인했으니, 이젠 디자인을 해보자.

⌘ links.css ( 위치: linkservice/client/src/css/links.css)

⌘ links.jsx ( 위치: linkservice/client/src/component/links.jsx)

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

CSS을 위한 폴더를 만들고 links.css파일을 생성한다.

모든 CSS는 links.css에 넣어두었다.

link.css에 우선 link-container와 link-wrapper영역을 만들어주고,

.link-container {
    margin-bottom: 6px;
    cursor: move;
}
.link-wrapper {
    padding: 12px;
box-shadow: 0em 0em 0.1em #000000;
    border-radius: 10px;
}

link-show 영역에는 link image와 link name이 보여주도록 한다.

.link-show {
    display: flex;
    align-items: center;
}
.link-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.link-title {
    flex-direction: column;
    margin-left: 10px;
min-width: 200px;
    width: 70%;
    font-weight: 600;
}

⌘ links.jsx에서 CSS을 import하고 CSS들을 적용해본다.

⎮결과화면

링크정보를 여러 개 등록해서 확인해 본다.

JSON 데이터 중 활용하지 않는 항목을 추가적으로 화면에 적용해보자.

⎮링크정보 걸기

link-show 부분에 onClick이벤트를 추가한다.

이젠 클릭하면 linkurl항목의 정보에 따라 페이지 이동이 된다.

⎮태그정보 표시

link-wrapper 부분에 tag 표시를 해보자.

태그는 여러 개가 있을 수 있으나, 여기서는 최대 3개까지만 입력이 가능(화면 제약사항) 하고,

태그의 구분자는 / 로 해서 구분한다. (예,  태그1/태그2/태그3 )

태그의 내용을 표시해준다.

태그 관련 css을 추가한다

.tag-container {
    display: flex;
    flex-wrap: nowrap;
}
.tag-row {
    flex-basis: 90px;
}
.tag-button {   
    flex-basis: 21%;
    height: 20px;
    border-radius: 6px;
    margin-right: 15px;
    text-align: center;
    font-size: 4px;
    color: rgb(218, 213, 213);
}
.tag-blue {
    background-color: rgb(82, 65, 234); 
}

마지막 태그는 제주도/귤/할인 여러 개로 되어 있기 때문에 분할을 해야 한다.

그리고 여러 개 태그도 각각 색상을 다르게 버튼을 만들어 보자.

tag button 색상을 다르게 하기 위해서 classList에 다른 색상을 담아 적용해보자.

참고로, 조금 다른 방식으로child component인 TagList(Props)을 만들어 렌더링을 하는 방식도 있다.

위 소스에서 누락된 게 하나 있다.

바로 tag 값이 없을 경우도 빈 항목에 tag-orange css가 적용되어 버린다.

그래서 tag값이 있을 경우만 렌더링 되도록 조건을 하나 더 줘서 해결한다.

!tag 을 or 조건으로 추가한다.

!tag || tag.split('/').map( (tag, index)=>

물론 child function인 TagList(Props)을 안하고,

LinkMain()에서 바로 렌더링을 해도 무방한다. 아래 같은 식으로 해도 결과는 같으니 소스 참고만 하길 바란다.

개발 소스 방식은 여러가지 방식이다. 뭐가 옳다, 그르다 을 판단하는 것은 맞지 않다. 단, 좀더 가독성과 Performance, 유지보수 등을 고려하여 회사기준 혹은 개발자들과 협업해서 코딩 기준에 맞춰서 개발하면 된다.

이젠, 색상관련 css를 추가하자.

.tag-orange {
    background-color: rgb(200, 173, 108);
}
.tag-grin {
    background-color: rgb(18, 161, 139); 
}

실제 복잡하다고 볼 수 있지만, 전체적으로 포맷만 이해한다면 다른 사이트를 구축하는데 많은 도움이 될 것으로 생각된다.

하지만, 여러가지 기능을 추가하면서 어려웠던 기억이 있어서 이제부터

TO-DO 리스트를 만들어 하나씩 완성해보자.

( 화면설계를 다시 한번 참고하길 바란다.)

다음편에는 링크서비스의 등록화면을 제작해보자.

#5. Python으로 API 개발

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 개발(데이타베이스 모델 작업)

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

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여개가 존재하는 것으로 알고 있다.

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

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

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