본문 바로가기

분류 전체보기370

프로그래머스 자전거 공장 문제 Javascript 프로그래머스 자전거 공장 문제 Algorithm 프로그래머스 자전거 공장 문제는 스택을 이용해서 풀어낼 수 있다. 기간별로 다른 누진세가 적용되기 때문에 최대한 저렴한 가격으로 자전거를 생산하기 위해서는 최대한 앞쪽에 물량을 몰아서 생산기간 동안 최대한 적은 숫자의 자전거를 매월 생산하도록 하는 것이 관건이다. 총 3단계로 나누어 알고리즘을 설계할 수 있다. 1. 얼마까지 자전거를 생산해야 한다라는 개념을 향후 몇개월 동안 얼마만큼의 자전거를 생산해야 되는지 order 배열을 재배치한다. 2. 새롭게 정의된 주문서에서 월별 생산량을 비교해서 뒷쪽에 물량이 몰려있는 경우 앞으로 추가하면서 물량을 조절할 수 있다. 3. 생산해야 하는 물량과 기간을 고려해서 최종 생산비를 뽑아낸다. 프로그래머스 자전거 공장 .. 2023. 4. 6.
프로그래머스 체육복 Greedy 탐욕법 문제 Javascript 프로그래머스 체육복 문제 프로그래머스 체육복 문제는 탐욕법으로 풀어보는 것이다. 탐욕법 알고리즘은 각 단계에서 최적이라고 고려되는 것을 선택하는 것을 반복하는 방법이다. 현재 선택이 마지막까지 적용되는 경우 탐욕법으로 문제를 풀어볼 수 있다. 체육복 문제에서는 앞에있는 학생이 체육복을 빌려줄수도 있고, 뒤에 있는 학생이 빌려줄수도 있다. 따라서 가장 우선해서 옷을 빌려줄 순서를 정해야 한다. 먼저 옷을 잃어버린 학생과 빌려줄수 있는 학생 배열을 생성하고, 학생순서대로 스캔해나가면서 옷을 빌려줄 관계를 설정해주면 된다. 프로그래머스 체육복 자바스크립트 배열이 생성된 후로 옷을 잃어버린 학생들의 배열을 순회하면서 옷을 빌려줄 수 있는 경우(Math.abs(r-l) === 1) count를 증가하면서 최종적으.. 2023. 4. 5.
프로그래머스 완주하지 못한 선수 해시 맵 사용 풀이 파이썬 프로그래머스 완주하지 못한 선수 해시 맵 사용 파이썬 완주하지 못한 선수 문제는 인자로 participant와 completion이 주어집니다. 참가자 중 단 한명의 선수만 완주하지 못하는데요, 완주하지 못한 선수를 찾아내야 합니다. 문제 제약 조건은 다음과 같습니다. 참여선수는 1 ~ 10,000명 participant - competion = 1 참가자 이름은 알파벳 20자 이하 참가자 중 동명이인 존재할 수 있음 문제의 핵심은 동명이인이 있다는 점입니다. 단순하게 문자열만 비교해서 문제를 풀 수 없습니다. 해시 맵 사용 파이썬 이 문제가 요구하는 핵심 개념은 해시 맵입니다. key ~ value로 이루어진 자료구조를 통해서 선수들의 이름과 완주 여부를 체크해주어야 합니다. 문제에서 요구하는 hash.. 2023. 3. 22.
Github CLI Install Ubuntu 22.04 1. 터미널 실행 아래 코드 입력. 터미널에 Github CLi install type -p curl >/dev/null || sudo apt install curl -y curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \ && sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg \ && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archi.. 2023. 2. 9.
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.
맥북프로 14 M2 모델 드디어 출시 ! 맥북프로 14 M2 드디어 출시 아마도 많은 분들이 기다리셨을 애플 맥북프로 14인치 M2가 드디어 출시되었습니다. 애플 제품의 비수기 중의 비수기인 1월달에 공개된게 이례적이지만 아무튼 나왔습니다. M1를 탑재한 맥북프로 14보다는 높은 성능에 오래가는 배터리를 장착하고 등장했습니다. 당연한 소리죠? 외관을 봤을 때는 전작에 비해 달라진 점이 없습니다. 높은 성능을 탑재한 칩을 넣었고, RAM 지원이 늘고, 배터리가 조금더 늘었다 정도 입니다. 애플은 기존 인텔 기반 맥북에 비해 최대 6배 가까운 성능을 보인다고 합니다. 14인치 맥북프로 M2 기본 사향부터 M2 Pro 칩을 탑재하고 출시되었습니다. 기본 제품이 10코어 16코어 GPU를 탑재하고 있습니다. M2 Max 칩을 탑재한 구성은 12코어, .. 2023. 1. 18.
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.

티스토리툴바