목차 - 클릭하면 이동합니다.
웹 사이트 만들기 프로젝트
지금까지는 파이썬을 이용해서 비트코인 자동매매하는 프로그램을 만들어서 서버에서 실행하는 방법에 대해서 살펴 보았는데요. 지금까지 진행했던 내용은 프로그램 내부에 매수/매도 조건들이 걸려 있어 프로그램이 수행되는 도중에 조건을 변경하기가 어려워 조금 불편했었습니다.
이에 새로운 버전으로 좀 더 편리하고 구조화 된 프로그램을 만들 계획을 가지고 있는데요. 새로운 버전에서는 프로퍼티나 각종 지표를 계산하는 부분을 더 구조화하고 모듈화하여 사용하고 싶은 곳에서 더 편리하게 가져다 쓸 수 있도록 하고 매수/매도 조건과 같은 변수들을 프로그램 종료 없이 실시간으로 수정할 수 있도록 만들어볼 예정입니다.
그렇게 하기 위해 실시간으로 프로그램을 더 편하게 컨트롤하거나 필요한 정보들을 더 편리하고 직관적으로 관리할 수 있는 웹사이트도 함께 개발을 진행해 보려고 합니다.
웹 사이트를 만들려면
일반적으로 웹 사이트를 만들려면 세가지 분야에서 개발을 해야 해야 하는데요. 각각 어떤 부분을 담당하고 있는지 간단하게 살펴보겠습니다.
프론트엔드(Front-End)
프론트엔드는 말 그대로 앞단에서 사용자가 직접 보고 사용하는 부분을 개발하는 것으로 크롬과 같은 웹 브라우저를 통해 데이터를 확인하고 버튼등을 통해 동작을 요청하는 기능을 가진 부분을 말합니다.
업비트를 예를 들면 우리가 업비트 웹사이트에 접속하면 보이는 화면이 바로 프론트엔드라고 생각하시면 됩니다. 시세를 확인하고 보유하고 있는 자산과 평가 금액등을 확인할 수 있는 화면과 매수/매도 등을 처리할 수 있는 버튼을 가지고 있는 화면 모두 프론트엔드 입니다.
백엔드(Back-End)
백엔드는 사용자가 볼 수 없는 뒷단에서 수행되는 프로그램을 말하는데요. 주로 프론트엔드에서 요청하는 내용을 서버에서 처리하고 결과를 다시 프론트엔드로 보내주는 역할을 하게 됩니다.
업비트를 다시 예로 들면 우리가 업비트 화면에서 도지코인 100개를 선택하고 매수 버튼을 클릭하게 되면 해당 요청을 서버로 전달하게 되고 서버는 여러가지 조건들을 체크하고 매수 처리를 진행한 후 성공이나 실패의 결과를 돌려주게 됩니다.
이렇게 보이지 않는 곳에서 클라이언트의 요청을 처리하는 부분을 백엔드라고 하며 우리가 호출하는 업비트 API들이 백엔드의 대표적인 예라고 할 수 있습니다.
데이터베이스(DB)
데이터베이스는 저장 공간으로 주로 백엔드와 연결되어 있으면서 백엔드 프로그램에서 처리하는 데이터를 저장하는 역할을 합니다.
무엇을 사용하나요?
앞에서 설명드린바와 같이 우리는 프론트엔드, 백엔드, 그리고 데이터베이스를 모두 활용하여 웹사이트를 만들어 볼 예정인데요. 참고로 이 세가지를 모두 사용하는 사람을 풀스택 개발자라고 부릅니다. 우리는 앞으로 풀스택 개발자가 되어 비트코인 자동매매 관련 웹사이트를 만들어 볼 예정이며 각각 아래의 언어나 툴을 사용하여 개발을 진행해 보려고 합니다.
프론트엔드 - NextJS
전통적인 웹 사이트들은 보통 HTML과 JavaScript와 같은 언어를 이용해서 프론트엔드를 개발했었는데요. 요즘은 React와 같은 편리한 기술이 더 많이 사용되고 있는 추세입니다.
NextJS는 리액트(React)를 기반으로 한 프론트엔드 개발을 더 쉽게 할 수 있도록 도와주는 프레임워크 입니다. 기본적인 리액트에 비해 프로젝트의 구조를 잡기 더 수월하고 편리한 부가적인 기능들이 미리 만들어져 있어 별도로 구현하지 않아도 가져다 사용하면 되기 때문에 프론트엔드 개발을 더 수월하게 해 주는 도구라고 할 수 있습니다.
리액트를 기반으로한 프론트엔드에서 사용할 수 있는 프레임워크들이 많이 있지만 리액트에서 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)을 모두 편리하게 사용할 수 있는 장점이 있어서 NextJS를 사용하려고 합니다.
CSR과 SSR에 대해서는 프로젝트를 진행하면서 자세히 알아보도록 하겠습니다. NextJS에 대해서는 아래 공식 홈페이지에서 더욱 자세히 확인해 보실 수 있습니다.
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
nextjs.org
백엔드 - NestJS
서버 프로그램은 주로 Java나 C를 이용해서 개발을 하게 되는데요. 꼭 그럴 필요는 없습니다. 예전에는 JavaScript가 프론트엔드 개발의 전유물이었지만 NodeJS라는 것을 이용하면 JavaScript를 이용한 서버 사이드 개발을 할 수 있습니다.
이렇게 하는 경우의 장점은 프론트엔드와 백엔드의 언어가 같기 때문에 Java나 C와 같이 다른 형식의 언어를 별도로 배우지 않아도 JavaScript만 알고 있으면 프론트엔드와 백엔드를 모두 개발할 수 있게 되는 큰 장점을 누릴 수 있습니다.
프론트엔드와 마찬가지로 백엔드도 프레임워크를 사용하면 구조를 잡아 개발을 하기 편리한데요. 많은 프레임워크 중에 우리는 NestJS라는 프레임워크를 통해 백엔드 개발을 진행할 예정입니다.
NestJS는 Java의 Spring Framework와 비슷하게 MVC(모델, 뷰, 컨트롤러) 구조의 백엔드 개발을 편하게 할수 있는 프레임워크입니다. MVC에 대해서도 앞으로 프로젝트를 진행하면서 더 자세히 설명 드릴 수 있도록 하겠습니다.
NestJS에 대한 설명은 아래 공식 홈페이지에서 자세히 확인해 보실 수 있습니다.
Documentation | NestJS - A progressive Node.js framework
Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac
docs.nestjs.com
데이터베이스 - PostgreSQL
데이터베이스는 PostgreSQL을 사용할 예정인데요. 안정성과 성능이 보장되지만 무료로 사용할 수 있다는 장점이 있는 관계형 데이터베이스입니다.
데이터베이스 관련한 내용은 과거 포스팅을 참고하시면 왜 PostgreSQL을 선택했는지 참고하실 수 있습니다.
2022.02.04 - [코딩스토리/개발관련] - 데이터베이스 비교 - 오라클, MySQL(MariaDB), PostgreSQL
데이터베이스 비교 - 오라클, MySQL(MariaDB), PostgreSQL
Tech&Fin에서는 현재 파이썬을 이용하여 비트코인 자동매매 프로그램을 개발하는 과정을 포스팅하고 있는데요. 과정을 진행하면서 웹소켓 데이터를 데이터베이스에 저장하여 활용하는 포스팅도
technfin.tistory.com
마치며
앞으로 진행할 프로젝트를 통해 비트코인 자동매매 프로그램을 컨트롤하고 내가 보고 싶은 데이터로 꾸민 나만의 웹사이트를 만들어 볼 예정인데요.
현재 여러가지 프로젝트를 동시에 진행하고 있고 여유 시간이 많지 않아 비록 포스팅을 자주 하고 있지는 못하지만 시작한 내용을 꾸준히 포스팅하여 꼭 마무리 지어 볼 예정입니다.
많은 관심과 의견 부탁 드리겠습니다. 블로그를 구독해 주시면 소식을 조금 더 빨리 받아보실 수 있으니 참고 부탁 드리겠습니다.
감사합니다.
'프로젝트 > 웹 사이트 만들기' 카테고리의 다른 글
| 백엔드 개발 - NestJS 리소스 자동 생성하기 (3) | 2022.06.08 |
|---|---|
| 로컬PC 작업환경 만들기 - RemoteFTP 서버 연결 (0) | 2022.06.04 |
| 백엔드 프로그램 만들기 - NestJS (0) | 2022.06.03 |
| 리눅스 서버에 NodeJS 설치하기 (0) | 2022.06.02 |
