본문 바로가기

전체

 (94)
Development/Web Open API 사용 시 발생하는 CORS 이슈, 원인과 해결 방법 정리 들어가며 오랜만에 Frontend를 연습할 겸 공공데이터포털 사이트에서 오픈 API를 사용해보았다. 그런데, CORS 이슈가 발생하는 탓에 결국에는 Node.js(express)로 Proxy 서버를 구축하여 개발하였다. 🔗 소스코드 : https://github.com/choewy/medical-maps-api-proxy-ssr CORS CORS(Cross-Origin Resource Sharing)을 해석해보면 교차 출처 리소스 공유라고 하는데, 도대체 이게 무슨 말인지 알 수 없었다. 폭풍 구글링하고, 구글링한 정보를 취합해서 간단하게 설명하자면 다음과 같다. 📌 API 개념 요약 API가 무엇인지 생각하면 CORS를 이해하는데 도움이 될 것이라고 생각한다. API를 간략히 설명하자면 클라이언트와 서..
Development/Web Express + MVC pattern (3) - 회원가입 기능 구현 및 완료 이어가며 지난 글에서는 컨트롤러를 구현부터 모델로 로그인 기능을 구현하는 부분까지 정리하였다. 이번에는 모델로 회원가입 기능 구현과 최종 결과를 정리해보도록 하겠다. 회원가입 기능 구현 🔗 소스코드 : v1.0.7-model2 지난 글의 로그인 기능 구현에 이어서 이번에는 회원가입 기능을 구현해보도록 하겠다. 회원가입 시 기존의 데이터에 새로운 데이터를 추가하되, 아이디가 이미 존재하는 경우에는 회원가입이 진행되지 않도록 해야한다. 모든 사용자 데이터 조회 이를 위해 아래와 같이 코드를 작성하여 기존의 모든 데이터를 불러오도록 하였다. /* ./app/src/models/UserStorage.js */ "use strict"; const fileSystem = require('fs').pr..
Development/Web Express + MVC pattern (2) - Contoller 기능 구현, DB 구축, fetch, Model로 구현한 로그인 처리 이어가며 지난 글에서는 프로젝트 초기 설정부터 View 기능 개발까지 정리해보았다. 이번에는 컨트롤러를 구현하고, 모델로 로그인 기능을 구현하는 부분까지 정리해보도록 하겠다. Controller 구현 🔗 소스코드 : v1.0.4-controller 이전에는 라우터에서 직접 웹 페이지를 렌더링 할 수 있도록 코드를 작성하였는데, 이러한 동작을 컨트롤러를 통해 할 수 있도록 코드를 수정해보겠다. 먼저, 컨트롤러는 두 개의 object로 구성할 건데, 첫 번째는 웹 페이지를 렌더링시켜주는 render, 두 번째는 HTTP 요청에 맞는 로직을 처리하는 process로 구성하겠다. 이를 ./app/src/routes/home/index.controller.js에 작성하면 아래와 같다. /* ./app/src/ro..
Development/Web Express + MVC pattern (1) - 프로젝트 초기 설정, View 기능 개발 들어가며 아키텍처 패턴(Architecture patterns)에는 MVC(Model-View-Controller), MVP(Model-View-Presenter), MTV(Model-Template-view) 등 여러 패턴이 존재한다. 이 중에서 MVC 패턴은 주로 Spring 프레임워크에서 사용되는 것으로 알고 있으나, 필자의 경우 Spring은 고사하고 Java를 다뤄볼 기회가 없었기 때문에 MVC 패턴이 무엇인지에 대해서 항상 궁금했었다. 따라서, MVC 패턴을 적용한 express로 로그인과 회원가입 기능을 간단하게 구현하면서 MVC 패턴이 어떻게 동작하는지 정리해보았다. 🔗 MDN - MVC pattern 🔗 MVC 패턴(written by. bp.chys) 🔗 YouTube - Node.js..
Development/Web Node.js의 라이브러리 http와 express로 구현한 서버와 이 둘의 차이점 들어가며 Node.js로 웹 서버를 구현하기 위한 대표적인 라이브러리는 express이다. Node.js의 내장 라이브러리인 http로도 웹 서버를 구현할 수 있는데, 대부분 express로 웹 서버를 구현한다. http와 express로 서버를 구현해보면서 이 둘의 차이와 왜 express가 사용되는지에 대해서 간단히 정리해보았다. http로 구현한 서버 http는 Node.js의 내장 라이브러리로, 별도로 설치할 필요가 없다. 아래는 http로 구현한 Node.js 서버 코드이며, 먼저 코드를 살펴보자. "use strict"; const http = require('http'); const app = http.createServer((req, res) => { if (req.url =..
Development/Web Docker 이미지 만드는 방법과 DockerFile 기초 내용 들어가며 지난번 내용(Docker 포트포워딩과 드라이브 연결)에 이어서 이번에는 도커 이미지를 만들고, 이를 commit, pull 하는 내용에 대해서 정리하였다. image의 순환 과정 자세한 내용을 살펴보기 전에 먼저 이전에 다룬 내용을 떠올려보자. 아래는 도커 이미지의 순환 과정을 도식화한 그림이다. 그림을 보면, docker hub를 통해 이미지를 다운로드(pull)받고, 이는 각각의 컨테이너에서 실행(run)된다. 각각의 컨테이너는 다시 또 다른 이미지로 재탄생(commit)할 수 있으며, 자신이 재탄생시킨 이미지를 docker hub에 업로드(push)하여 공유할 수 있다. 예를 들어, 서로 다른 ubuntu 컨테이너에 각각 Node.js, Python가 설치된 이미지를 생성하는 과정은 아래 ..
Development/Web Docker 포트포워딩과 드라이브 연결 들어가며 이번에는 도커 컨테이너의 네트워크와 드라이브를 설정하는 방법에 대해서 정리해보았다. 이 글을 이해하려면 웹 서비스의 전체적인 동작 원리, 포트포워딩 등의 사전 지식이 필요하다. 본 개발일지에는 사전 지식에 필요한 내용도 일부 정리해놓았으나, 이해가 되지 않는다면 관련 영상이나 글을 통해 학습하길 바란다. Port Forwarding 일반적인 웹 서버가 동작하는 방식은 아래 그림과 같이 나타낼 수 있다. 위 그림을 설명하자면, 클라이언트가 test.com:80/index.html을 요청하면 서버 PC에 설치된 Apache에 지정된 파일 경로에서 index.html을 찾아 클라이언트에게 보내주는 것이다. 반면, 도커 컨테이너로 동작하는 웹 서버도 위의 그림과 유사하긴 하나, 호스트와 컨테이너 간 포..
Development/회고록 스파르타코딩클럽 내일배움단 완주 후 회고록 들어가며 2019년, 군 전역 이후 한양사이버대학교 컴퓨터공학과로 편입한 동시에 처음 프로그래밍을 접하였다. 2021년 6월까지 직장생활을 해오며, 현재는 컴퓨터공학과를 졸업하였다. 누군가에게는 핑계로 들릴 수 있겠으나, 컴퓨터공학과 관련된 여러 수업을 들었음에도 불구하고, 직장생활과 병행하다보니 할 줄 아는 건 파이썬(특히, PyQt)으로 응용 프로그램을 개발하는 정도의 수준 밖에 되지 않았다. 독학이라고 쓰고, 방황이라고 읽는다 제대로 웹 개발을 공부한 시기는 퇴사하고 난 뒤였다. 정확히 말하자면, 회사에서 내가 개발한 프로그램을 더욱 효율적으로 운영할 수 있는 방법이 없을까 생각하다가 '이걸 웹 사이트로 개발하면 어떨까?'라는 결론에 도달했고, 퇴사하기로 결심한 이후 웹 개발 공부를 ..
Development/Web Container 개념과 Docker 기초 내용 들어가며 웹 서비스를 개발하는 경우에는 서버로 사용할 PC에 Apache, MySQL을 설치해야 하는 것과 같이 어떠한 서비스를 개발하고 운영할 때, 운영체제에 여러 소프트웨어를 설치해야 한다. 해본 사람은 알겠지만, 웹 페이지 구현은 고사하고, 이러한 소프트웨어를 설치하는 과정에서 여러 오류를 마주치다보면, 흥미가 매우 떨어지게 된다. Container 누군가가 웹 서버를 운영하는데 필요한 소프트웨어를 전부 설치한 컴퓨터를 제공해준다면, 단지 개발만 하면 되기 때문에 매우 행복할 것이다. 이를 가능케 하는 방법으로는 대표적으로 가상머신(VM)이 있다. 가상머신에 운영체제와 웹 서비스를 운영하기 위한 소프트웨어를 설치해놓고 이를 이미지 파일로 남겨놓는다고 가정해보자. 그러면 새로운 웹 서비스를 개발할 때..
Development/Web Flask 기초 내용, 그리고 API 와 HTTP 요청 들어가며 지금부터는 로컬 서버에 앞에서 다룬 내용으로 구현한 웹 페이지를 올려보도록 하겠다. 웹 서버를 구현하기 위한 프레임워크로는 대표적으로 Node.js(Express), Flask, Django 등이 있는데, 스파르타코딩클럽에서는 Flask로 웹 서버를 구현하는 방법에 대해서 다루었다. 예제코드 : https://github.com/choewy/sparta-web-basic/tree/master/projects Flask 개요 Flask는 서버를 구동시켜주는 프레임워크이다. 서버를 직접 구현할 수도 있지만, 이는 매우 복잡하기 때문에 대부분 웹 서비스를 개발할 때에는 '누군가 이미 개발해놓은' 프레임워크를 사용한다. 이번에도 마찬가지로 venv에 Flask를 설치할 것이므로, 프로젝트..

티스토리툴바