본문 바로가기

Development

 (46)
Development/Web API는 무엇인가? REST API는 또 무엇인가? 1분 요약 들어가며 REST를 설명하기 전에 API는 무엇인지에 대해서 간략하게 짚고 넘어가보자. API란? API(Applictaion Programming Interface)는 프로그램 간 통신 규약으로, 서버와 클라이언트가 소통하기 위해 정해놓은 규칙이라고 할 수 있다. # 요청 : GET /api/movies # 의미 : "서버야 나한테 영화목록 데이터를 좀 넘겨주련?" API의 역할은 다음과 같이 크게 3가지로 분류할 수 있다. 서버와 데이터베이스의 소통창구 : 서비스를 운영할 때 고객들이 데이터베이스에 직접적으로 접근하지 못하도록 해야한다. 클라이언트가 API를 통해 서버에게 데이터를 요청하면, 서버는 데이터베이스에 접근하여 클라이언트가 요청한 데이터를 가져오고, 이를 클라이언트에게 전송해준다. 애플리케..
Development/회고록 항해99 Chapter #1 - 1조 S.A(Starting Assignment) 개요 프로젝트 프로젝트명 : Hello Word 내용 : 코딩도 중요하지만, 개발자의 문서는 대부분 영어로 되어 있기에 영어 공부도 빠뜨릴 수 없다. 따라서, 간단하게 영어 단어를 암기할 수 있는 나만의 단어장개발을 프로젝트 주제로 선정하였다. 목표 기본적인 웹개발 지식을 갖춘다(좁은 범위의 주제로 선정). 팀으로 하나되어 서비스를 완성하는 경험을 쌓는다. jinja2 템플릿 엔진을 이용한 서버사이드 렌더링을 구현하고, 장점을 파악한다. JWT 인증 방식으로 로그인 기능을 구현하고, 세션/쿠키 방식과의 차이점 및 장단점을 파악한다. 팀원 최원영(팀장) : https://github.com/choewy 하상우 : https://github.com/voyager16 홍승민 : https://github.co..
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)으로 응용 프로그램을 개발하는 정도의 수준 밖에 되지 않았다. 독학이라고 쓰고, 방황이라고 읽는다 제대로 웹 개발을 공부한 시기는 퇴사하고 난 뒤였다. 정확히 말하자면, 회사에서 내가 개발한 프로그램을 더욱 효율적으로 운영할 수 있는 방법이 없을까 생각하다가 '이걸 웹 사이트로 개발하면 어떨까?'라는 결론에 도달했고, 퇴사하기로 결심한 이후 웹 개발 공부를 ..

티스토리툴바