본문 바로가기

Programming181

Nginx Docker 웹 서버 배포하기 Nginx는 웹 서버 프로그램입니다. 로컬 환경에서 개발을 완료하셨다면 이제 본격적으로 우리가 만든 웹 애플리케이션을 도메인을 붙여 사용자에게 hosting을 해줘야 합니다. 웹 서버에는 크게 Apache와 Nginx가 있는데요, 후발주자임에도 빠르게 점유율을 차지하고 있는 Nginx와 Docker를 사용해서 간단한 웹 애플리케이션을 배포하는 방법을 알아보도록 하겠습니다. Nginx Docker 기본 Nginx와 Docker로 정적 파일을 호스팅하기 위해서는 크게 3가지 파일이 필요합니다. index.html Dockerfile default.conf 우선 HTML 파일을 작성합니다. 저는 아래처럼 간단하게 작성했습니다. Nginx에서 받아온 페이지입니다. Dockerfile을 작성해줍니다. 혹시 Doc.. 2023. 1. 31.
Naver 광고 API 사용법 (Javascript) Naver 광고 API 사용법 블로그 관련 사이트를 제작하면서 키워드 품질 검사를 해야 하는데, 국내에서는 여전히 네이버가 1위를 달리고 있기 때문에 네이버 포털에서 검색량 체크를 해보려고 합니다. 자체적으로 데이터를 수집하기에는 엄두가 안나서 네이버 광고 API를 사용하기로 결정했습니다. 네이버 광고 API 사용법을 정리한 문서가 있지만 샘플 코드로 제공되는게 Java, PHP, C# 3가지 정도가 나와있습니다. 어차피 원리는 동일하니 우리는 Javascript로 키워드 API를 사용해보겠습니다. Naver 광고 API 사용법 사이트 네이버 깃 페이지로 호스팅되어 있는 searchad-apidoc 으로 접속합니다. 개발자들을 위한 문서라고 하기에는 정말 불친절하게 되어 있습니다. searchad-api.. 2023. 1. 26.
CI/CD #5 배포 구성하기 Github Actions EC2 Docker .env 생성하기 [추가자료] 이전글 CI/CD #1 배포 구성하기 Node.js 빌드 CI/CD #2 배포 구성하기 Dockerfile CI/CD #3 배포 구성하기 Github Actions CI/CD #4 배포 구성하기 AWS EC2 [최종] Github Actions 배포 Github Actions를 통해 CI/CD 파이프라인을 구성해서 배포하는 방법까지 알아보았는데요, 추가로 환경변수를 사용해 프로젝트 완성도를 높여보도록 하겠습니다. 실제 프로젝트에서 JWT Token Secret이나 DB URL등은 secret 하게 관리해야 하는 변수들입니다. 따라서 .env 파일을 생성해서 환경변수를 관리하게 됩니다. 하지만 git repository에는 .gitignore에 .env 파일을 추가해서 repo에 업로드하기 때문에 Gith.. 2023. 1. 20.
Docker Hub 사용법 (push pull) Docker Hub 사용법 push pull Docker Hub는 로컬에서 생성한 이미지를 업로드해서 클라우드로 관리할 수 있는 환경입니다. CI/CD 를 구성하실 때 Docker Hub를 통해 코드를 컨테이너 단위로 관리할 수 있습니다. 이번 콘텐츠에서는 Docker Hub를 어떻게 사용하는지 알아보도록 하겠습니다. 기본 프로젝트 구성 아래 명령어로 기본 Node.js 기반 프로젝트를 실행합니다. $ npm init -y 간단한 서버를 구성하기 위해 index.js파일을 생성하고 아래 코드를 입력합니다. 추가적으로 express 모듈을 설치합니다. const express = require('express'); const app = express(); app.get('/', (req, res)=>{ r.. 2023. 1. 19.
React 정적 웹 페이지 배포하기(S3, AWS CodePipeline, 환경변수) React를 통해 멋진 웹 애플리케이션을 만들었다면 많은 사람들이 이용할 수 있도록 배포를 진행해야 할 것입니다. 웹 애플리케이션을 배포하는 방법은 여러가지가 있는데요, 이번 콘텐츠에서는 React를 AWS의 S3 버킷과 CodePipeline 제품을 사용해 CI/CD 를 구성해보도록 하겠습니다. 배포 아키텍처 클라이언트 파트 배포 아키텍처는 다음과 같습니다. 사용자가 웹 사이트에 접속하면 빌드된 React 웹 애플리케이션을 전달받습니다. 우리가 코드를 push 하면 CodePipeline이 작동하면서 Gihub에서 코드를 가져옵니다. 가져온 코드를 CodeBuilder를 통해 build 합니다. build가 완료된 코드는 AWS S3 버킷에 담기게 됩니다. 사용자는 새롭게 배포된 코드를 받아볼 수 있습.. 2023. 1. 19.
HTML5 웹페이지 만들기 #3 CSS3 선택자(seletor) CSS 선택자 우선 CSS 선택자는 HTML로 구성된 문서에서 특정 요소를 선택하는 기능을 가집니다. HTML 요소를 선택해서 스타일을 적용할 수 있습니다. CSS3 에서는 HTML 요소를 앞에 적고 {CSS 블록} 내부에 스타일 세부사항을 기록합니다. HTML 문서에서는 태그 내부에 스타일 태그를 적용할 수 있습니다. 💡 inline style을 사용하면 안되는 이유 CSS를 적용하는 방법은 3가지가 있습니다. 그 중에서 inline 스타일을 최대한 자제해야 하는 이유는 2가지가 있습니다. 1. 유지보수가 힘들어집니다. HTML 태그에 직접적으로 스타일이 적용되어 있기 때문에 스타일이 변경되면 코드별로 찾아서 스타일을 변경해줘야 합니다. 코드 유지보수가 복잡해집니다. 2. 우선순위가 높다 inline .. 2023. 1. 16.
CSSOM 트리 DOM과 무엇이 다른가? 웹이 전달되는 방향 서버로 부터 정적인 html 파일을 전달받은 웹 브라우저는 렌더링을 위해 HTML 파일과 CSS 파일을 파싱하여 하나의 계층 구조를 형성하게 됩니다. 이 때 HTML을 파싱한 모델이 DOM(Document Object Model)이고 CSS를 파싱한 것이 CSSOM(CSS Object Model) 입니다. CSS Object Model은 Javascript에서 CSS를 조작할 수 있는 API입니다. 즉 사용자가 JS를 사용해서 동적으로 CSS 스타일을 동적으로 관리할 수 있게 됩니다. HTML 문서가 계층적으로 작성되어 있기 때문에 HTML에 스타일을 적용하는 CSS 또한 계층 모델을 가지게 됩니다. 즉, CSSOM과 DOM 모두 트리 형태의 계층 구조를 가지지만 CSSOM은 CSS를.. 2023. 1. 16.
HTML5 웹페이지 만들기 #4 CSS3 사용법 CSS3 사용법 HTML 문서에서 CSS를 적용하는 방법은 크게 3가지가 있습니다. ① style 태그 사용 ② inline style 속성 사용 ③ Stylesheet 적용 CSS3 크기 지정 CSS3에서 크기를 지정할 수 있는 방법은 크게 3가지가 있습니다. 단위 설명 % 상대크기(백분율 단위) em 상대크기(배수 단위) - 상위요소의 배수 rem 상대크기(배수 단위) - 루트요소의 배수 px 절대크기(픽셀) vh 브라우저 창 단위 가로 vw 브라우저 창 단위 세로 em : hello world rem : hello world vh vw %, 백분율 단위 첫번째 문장이 100%의 크기가 됩니다. %로 크기를 늘려가면 100%에 비해 백분율 단위로 요소의 크기를 지정할 수 있습니다. Lorem ipsu.. 2023. 1. 13.
HTML5 웹페이지 만들기 #2 용어 정리 HTML5 기본 요소 HTML5는 태그 요소 속성으로 구성됩니다. 태그는 HTML 페이지에서 하나의 객체를 만듭니다. 태그를 통해 하나의 객체가 만들어집니다. 태그 태그는 2 종류가 있습니다. 시작 태그와 끝 태그가 있습니다. 두개의 태그가 하나의 객체를 형성하게 됩니다. 단독으로 사용되는 태그도 있습니다. 크게 HTML5 표기법과 XHTML5 표기접으로 구분됩니다. br, image, em 태그들이 단독으로 사용되는 빈 태그입니다. 속성 태그를 통해서 객체가 생성됩니다. 반면 속성은 생성된 객체에 추가적인 정보를 삽입할 때 사용됩니다. 객체에 적용할 수 있는 속성들은 W3C 재단에서 미리 정해놓고 있습니다. 주석 HTML5에서도 주석을 사용할 수 있습니다. 보통 슬래시(/)가 사용되지만 HTML5에서는.. 2023. 1. 8.
HTML5 웹페이지 만들기 #1 웹의 발전 웹 이란 무엇인가? 팀 버너스리가 창시한 월드 와이드 웹은 인터넷에 접속한 사람들이 정보를 공유하고 저장할 수 있는 공간으로 사용되고 있습니다. 여기서 WWW(월드 와이드 웹)은 인터넷이라는 국제 정보 통신망 인프라 위에서 작동하는 서비스를 의미합니다. 1991년 최초 등장한 WWW은 벌서 30년이 넘는 세월동안 많은 발전을 거듭해오고 있습니다. 최초 인터넷은 러시아의 인공위성 발사에 위협을 느낀 미국이 ARPA 부서를 만들고 핵 무기에 대비해 정보를 안전하게 전송할 수 있는 ARPANET을 개발하기에 이릅니다. 이 후 군사용과 민간용 ARPANET으로 구분되는데, 민간용 네트워크가 현재 인터넷의 모습으로 발전하게 됩니다. 실제로 웹을 개발한 팀 버너스리 또한 유럽 공동 원자핵 연구소에서 근무했었습니다... 2023. 1. 8.
HTML 기초 #1 HTML 이란? HTML(Hypertext Markup Language)는 프로그래밍 언어가 아닌 마크업 언어입니다. 주로 웹 브라우저에서 웹을 구성하는 요소들을 구성하는 전체 틀을 짜는 언어입니다. HTML은 각 태그로 구성되어 있고, 웹의 구조를 언어로 구성할 수 있다는 장점이 있습니다. 예를 들어 웹 사이트에서 하나의 공간을 마련하고 싶다면 태그를 사용할 수 있습니다. HTML 태그 HTML 언어는 시작태그와 끝내그로 구성됩니다. 시작 태그와 닫는 태그를 하나의 세트로 구성됩니다. 하나의 태그를 요소(element)라고 할 수 있습니다. HTML은 프로그래밍 언어가 아니기 때문에 잘못적어도 오류가 나지 않습니다. 웹 브라우저가 어떻게든 HTML을 해석해서 렌더링 해주기 때문입니다. 하지만 여는 태그 뒤에는 항상 닫.. 2023. 1. 6.
AWS 10,000 크레딧 수령하는 방법 AWS 크레딧 받는 방법 창업을 준비하고 있다면, 그 중에서도 온라인 창업을 준비하고 있다면 서버와 프론트를 배포할 서버가 있어야 합니다. 가장 많이 사용하는 IaaS고 AWS에서 초기 창업자라면 크레딧을 수령할 수 있습니다. AWS Activate Program에 참여하시면 됩니다. 총 $10,000 상당의 크레딧을 제공하고 있습니다. 트래픽이 굉장히 많이 몰리는 테크 대기업이 아니라면 이 정도 크레딧을 소진하는데 10년이 넘게 걸릴 수도 있습니다. 초기 서버비 걱정없이 사업을 시작해볼 수 있는 큰 장점이 있습니다. AWS Activate Program 먼저 AWS Activate Program 사이트로 접속합니다. AWS 계정이 없다면 만드세요. 회원가입이 완료되면 2단계로 넘어가서 회사 정보를 기입.. 2023. 1. 5.
Node.js 크롤링 하는 방법 Node.js 환경 기반 크롤링 하는 방법 크롤링은 웹 페이지의 리소스를 긁어와서 데이터를 수집하는 가장 기본 방식입니다. 보통 파이썬을 많이 사용하시는데 Node.js 환경에서도 크롤링이 가능합니다. 여러 사이트에서 정보를 긁어온 다음 새로운 인사이트를 뽑아낼 수 있는 데이터 분석이 가능합니다. 자 우선 기본 모듈을 설치해줍니다. 🌐️ Node.js 환경 크롤링 필요모듈 Cheerio DOM selector 기능을 제공합니다. HTML에서 특정 데이터를 추출합니다. https://www.npmjs.com/package/cheerio Axios 비동기 방식으로 외부 리소스를 요청하는데 사용되는 라이브러리입니다. https://www.npmjs.com/package/axios 크롤링 모듈 설정 페이지 크롤.. 2023. 1. 5.
Web이란 무엇인가? Web 이란? 최초로 웹을 창시한 건 구글이 아닙니다. 영국 출신의 팀 버너스 리 입니다. 그는 www, URL, HTTP등을 통해 웹을 현실화 시켰고, 이 후 구글, 네이버, 페이스북, 카카오 등 다양한 서비스가 나오면서 웹 기반 거대 테크 회사 성장할 수 있었습니다. 팀 버너스 리는 전세계의 망을 하나로 묶어 WWW(월드 와이드 웹)을 고안했고, 웹 내에서 서버와 클라이언트간 통신 프로토콜인 HTTP와 URL을 개발했습니다. 그는 이 공로로 영구에서 기사작위를 수여받았습니다. 전 세계에서 웹을 통해 가장 돈을 많이 벌어들인건 미국이지만 사실 기술의 기반은 영국이라는 점이 아이러니 합니다. 더 충격적인 건 팀 버너스 리가 웹의 사용권을 특허를 내지 않고 무료로 공개한 것입니다. 앞으로 더 자유롭고 풍부.. 2023. 1. 3.
SVG란 무엇인가? CSS 적용하기 SVG란 무엇인가? SVG(Scalable Vector Graphics) 란 2차원 벡터 그래픽을 위한 XML로 구성된 벡터 그래픽 형식의 파일을 의미합니다. SVG 기술 덕분에 우리는 화면 확대를 아무리 해도 깨지지 않는 이미지를 얻을 수 있게 됩니다. 어떻게 이게 가능하냐구요? 다음 그림을 한번 보시면 두 그림의 차이점이 분명하게 보이실 겁니다. 왼쪽을 보시면 그래픽이 정상적으로 출력됩니다. 하지만 오른쪽 빨간색 그림은 그림이 깨져서 보이게 됩니다. SVG를 이해하기 위해서 먼저 아셔야 하는 개념이 바로 벡터와 비트맵입니다. 벡터와 비트맵 비트맵은 그림의 위치를 정확하게 기억하고 있습니다. 따라서 그림이 확대가 되게 되면 해당 위치의 색상을 정확하게 기억하고 있기 때문에 깨져서 보이는 현상이 발생하게.. 2023. 1. 3.

티스토리툴바