Development/Web (19) 썸네일형 리스트형 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/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를 설치할 것이므로, 프로젝트.. Development/Web Bundle 개념과 WebPack 사용 방법 들어가며 웹 페이지는 html, css, js, 이미지 파일과 같은 다양하고 많은 파일로 구성되어 있다. 이렇게 개발된 웹 페이지를 로딩하면 웹 페이지를 구성하는 파일들이 다운로드되는 것을 확인할 수 있다. 이와 같은 방법으로 웹 서버를 운영하면, 사용자 요청 수 증가에 따른 많은 비용이 발생, 성능 저하 등과 같은 문제가 발생할 수 있다. 이와 같은 문제를 해결하기 위해 등장한 개념이 Bundler이며, 단어의 의미 그대로 여러 파일을 묶어주는 개념이라고 할 수 있다. Bundler에 해당하는 도구로는 대표적으로 WebPack, Broserify, Parcel이 있는데, 이중에서 대중적으로 사용되는 WebPack에 대해서 공부한 내용을 정리해보았다. 예제코드 : https://github.com/cho.. Development/Web JavaScript와 JQuery, 그리고 Ajax 들어가며 2주차 강의에서는 jQuery와 Ajax에 대해서 다루는데, 여기부터 내가 이 교육 과정을 신청하게 된 이유가 드러난다. 나는 jQuery나 Ajax 요청을 배우지 않고, HTML, CSS, Javascript만 간단히 공부하고 바로 React로 넘어왔기 때문에 jQuery나 Ajax에 대해서는 지식이 부족하다. React로 개발할 때에는 axios를 사용하여 API를 요청하였는데, 기본적으로 Ajax에 대해서는 알고 있어야 할 것만 같은 찜찜함이 늘 가시지 않았다(jQuery나 Ajax도 혼자서 공부하기에 어렵지 않은 부분이지만, 혼자서 스파게티식 교육을 하기 보다는 커리큘럼이 있는 교육을 받고 싶었다). jQuery + Javascript 연습 Q1. 빈칸 체크 함수 만들기 ❓ 문제 버튼을 .. Development/Web HTML + CSS 자주 등장하는 질문 정리 들어가며 작년 여름, 퇴사한 이후 처음으로 웹 개발의 매력에 빠져 혼자서 꾸준히 공부해온 탓에 지금은 Node.js를 사용한 API 서버 개발, React로 간단한 웹 사이트 개발은 가능한 수준이라고 생각은 되나, 제대로 된 기초가 없어서 그런지 매번 개발 과정이 순조롭지 않다고 생각하여 웹 개발 기초 교육를 통해 기초를 쌓아가자는 의미에서 스파르타코딩클럽 내일배움단의 '웹개발 종합반'을 신청하였다. 1주차 내용은 정말 기초적인 HTML, CSS, JavaScript에 대해 다루기 때문에 기초 개념 설명은 기록하지 않고, 슬랙(slack) 질문 채널에 자주 올라온 질문 중에서 중요하다고 생각하는 내용을 선택하여 스스로 답해보는 형식으로 정리해보겠다. CSS 선택자의 우선순위를 결정하는 명시.. Development/Web React 개발 환경 구축 및 GitHub Pages 배포 방법 들어가며 리액트(React)는 페이스북에서 효율적인 UI를 만들기 위해 개발한 Javascript 기반의 라이브러리이다. 웹 페이지는 많고 복잡한 HTML 태그로 구성되어 있는데, React는 이와 같이 복잡한 HTML 구조를 별도의 컴포넌트(Component)로 구분하여 코드 가독성, 재사용성, 유지보수성을 높여줌으로써 효율적인 웹 개발 환경을 제공해준다. 프로젝트 생성 리액트는 create-react-app이라는 라이브러리를 통해서 새로운 앱을 생성할 수 있다. 공식문서에 따르면, npm이 아닌 npx 이용을 권장하고 있는데, npm은 로컬에 라이브러리를 설치하는 반면, npx는 라이브러리를 임시로 설치하여 단 한 번만 실행시키고 바로 삭제하는 일회성 모듈이므로 npx를 이용하면 저장공간 낭비를 줄일.. 이전 1 2 다음