728x90 웹16 [Docker]Travis CI, EB를 이용한 배포 Travis CI Travis CI는 연동된 repository에 push가 발생하면 자동으로 해당 어플리케이션을 빌드, 테스트, 배포해준다. 그러기 위해서는 travis CI에서 어플리케이션이 있는 repository를 연동해줘야 한다. 처음 travis CI에 가입 시 깃헙 계정과 연동해서 로그인해줘야 하고, 아무 플랜도 없을 때는 빌드가 불가능하므로 기본 크레딧이 제공되는 Free plan을 선택해서 카드를 등록해줘야 한다. travis CI로 자동 배포를 하기 위해서는 .travis.yml 파일이 어플리케이션 루트 디렉터리에 있어야 한다. sudo: required language: generic services: - docker before_install: - echo "test start" -.. 2023. 7. 25. [Docker]개발 환경 vs. 운영 환경 개발 환경 vs. 운영 환경 앱을 dockerizing할 때 실제 앱에 담길 Dockerfile과 개발환경에서 쓰이는 Dockerfile.dev 를 별개로 작성한다. 이는 volume을 이용해서 개발 환경에서 불필요한 종속성 설치를 최소화하기 위함이다. # Dockerfile.dev FROM node:alpine WORKDIR /usr/src/app COPY package.json ./ RUN npm install COPY ./ ./ CMD ["npm", "run", "start"] COPY package.json을 RUN 이전에 배치함으로써 불필요한 종속성 설치를 생략했다. 이 때, 일반적인 docker build ./ 명령을 실행하면 Dockerfile을 자동으로 인식하지 못해 오류가 발생하므로 do.. 2023. 7. 24. [Docker]COPY, Volume, Compose FROM node:10 COPY ./ ./ RUN npm install CMD ["node", "server.js"] node.js 어플리케이션을 담은 컨테이너를 실행하기 위해 docker 이미지 파일을 생성한다. COPY ./ ./ 는 현재 디렉토리 내에 있는 모든 파일들을 스냅샷으로 해당 컨테이너에 추가한다. 이런 식으로 스냅샷을 추가해주지 않으면 컨테이너 run에 필요한 파일들이 없어 오류가 뜬다. 빌드 후 컨테이너를 실행했을 때 server.js에 명시된 포트번호(8080)로 접속해보면 접속이 되지 않는다. 이는 로컬 환경에서의 포트번호와 컨테이너의 포트번호가 다른 개념이기 때문이다. 따라서 로컬 환경에서의 포트를 컨테이너의 포트에 연결해서 run 명령어를 실행해줘야 한다. docker run -.. 2023. 7. 23. [Docker]이미지 Docker 이미지 구조 이미지는 시작시 실행될 명령어+파일 스냅샷이 존재한다 시작시 실행될 명령어 외에 다른 명령어를 이용할 수 있음 docker run alpine ls 시작시 실행될 명령어를 무시하고 ls라는 명령어를 사용 가능 But, 명령어를 실행 가능하게 하는 파일이 이미지의 스냅샷 내에 없다면 에러가 발생 실행 중인 컨테이너 보기(ps) docker ps ps 명령어를 통해 실행 중인 컨테이너들을 확인할 수 있다 CONTAINER ID, IMAGE, COMMAND, CREATED, STATUS, PORTS, NAMES docker ps --format 'table{{.Names}}\ttable{{.Image}}' Names와 Image만을 조회하는 옵션을 --format을 통해 설정해줌 do.. 2023. 7. 23. [Docker]기본 개념 도커를 쓰는 이유? 프로그램 실행에 필요한 환경을 통일하기 위해 컨테이너란? 코드, 종속성 등을 패키지화해서 프로그램이 어디서나 안정적으로 빠르게 실행될 수 있도록 하는 소프트웨어 단위. 컨테이너화된 소프트웨어는 인프라에 관계없이 항상 동일하게 실행되고 어떤 개발과 스테이징의 차이에서도 균일한 작동이 보장된다. 도커 이미지(컨테이너 이미지)란? 코드, 런타임, 라이브러리 등 프로그램을 실행하는 데 필요한 모든 것을 포함하는 소프트웨어 패키지. 컨테이너는 이미지의 인스턴스라고 볼 수 있다. 도커 vs VM VM은 서버를 논리적으로 분할해서 독립적으로 이용 가능한 가상 환경의 서버 하이퍼바이저는 호스트 시스템에서 여러 게스트OS를 이용할 수 있도록 하드웨어 가상화, VM 모니터링 등을 담당하는 중간 관리 소.. 2023. 7. 21. [Spring]Application Layer 퀴즈를 CRUD하고 문제를 풀 수 있는 어플리케이션 레이어를 구현한다. //QuizForm package com.example.quiz.form; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import javax.validation.constraints.NotBlank; @Data @NoArgsConstructor @AllArgsConstructor public class QuizForm { private Integer id; @NotBlank private String question; private Boolean answer; @NotBlank private String author; pr.. 2023. 5. 16. [Spring]Service 비즈니스 로직을 처리하는 서비스 컴포넌트 구현 // QuizService package com.example.quiz.service; import com.example.quiz.entity.Quiz; import java.util.Optional; public interface QuizService { Iterable selectAll(); Optional selectOneRandomQuiz(); Boolean checkQuiz(Integer id, Boolean myAnswer); void insertQuiz(Quiz quiz); void updateQuiz(Quiz quiz); void deleteQuizById(Integer id); } package com.example.quiz.service; .. 2023. 5. 15. [Spring]Application-CRUD 퀴즈 애플리케이션을 만들 때 레이어를 3개로 나누어 개발. 애플리케이션 레이어: 클라의 요청을 제어하고 도메인 레이어를 사용해 애플리케이션 제어 Controller: 요청을 처리에 매핑, 결과를 뷰에 넘김. 주요 처리는 도메인 레이어의 서비스를 호출 Form: 화면의 폼을 표현, 화면의 입력값을 컨트롤러에 넘기고 컨트롤러에서 화면을 출력할 때도 사용. View: 화면 표시 도메인 레이어: 도메인 객체에 대해 애플리케이션 서비스 처리 실행 Domain Object: 서비스 처리에 필요한 자원(Entity 등) Service: 애플리케이션의 서비스 처리 Repository: 인터페이스. 데이터베이스의 데이터 조작 내용 정의 인프라스트럭쳐 레이어: 도메인 객체에 대해 CRUD 조작을 통해 데이터의 영속화 담당.. 2023. 5. 12. [Spring]Request Parameter/Validation Request Parameter request parameter로 속성을 담아서 /confirm url로 전송. 입력 부분을 Form으로 대체 가능 package com.example.demo.controller; import com.example.demo.form.Form; import org.springframework.format.annotation.DateTimeFormat; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind... 2023. 5. 11. [Spring]Thymeleaf 문법, Layout Thymeleaf 문법 package com.example.demo.controller; import com.example.demo.entity.Member; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @Controller public class ThymeleafController { @GetMapping("show.. 2023. 5. 10. [Vue]Vue 기초/CLI/Component Vue.js Web App: 웹 브라우저에 실행되는 어플리케이션 소프트웨어 SPA(Single Page Application): 서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식, CSR 방식으로 요청을 처리 CSR(Client Side Rendering): 각 요청에 대한 댕응을 JS를 사용해 필요한 부분만 다시 렌더링. 필요한 페이지를 서버에 AJAX로 요청하고 서버는 화면을 그리기 위해 필요한 데이터를 JSON 방식으로 전달. 이후 JSON 데이터를 JS로 처리해서 DOM 트리에 반영 MVVM Pattern: 소프트웨어 아키텍처 패턴의 일종. GUI(View)의 개발을 BE(Model)로부터 분리시켜 Vie가 특정한 모델 플랫폼에 종속되지 않도록 함 Vue instance el: .. 2023. 5. 9. [Spring]JDBC/MVC Model JDBC ORM: Object/RDB Maper, 애플리케이션의 객체와 RDB의 데이터 매핑 스프링 데이터의 메서드를 상속해 사용 가능 application.properties에서 스프링 부트 프로젝트 환경 설정 // application.properties spring.datasource.driver-class0name=org.postgresql.Driver spring.datasource.url=jdbc:postgresql://localhost:5432/postgres spring.datasource.username=qwer spring.datasource.password=qwer 엔터티 생성 // ㅡ package entity; import lombok.AllArgsConstructor; impor.. 2023. 5. 9. [Spring]DI/AOP 인터페이스 클래스에 포함하는 메서드의 구체적인 내용을 작성하지 않고 상수와 메서드 타입만 정의한 것. 다른 클래스에서 구현하는 것을 전제로 만들어짐 의존성 주입(DI) 의존하는 부분을 외부에서 주입하는 것(Dependency Injection) '사용하는 객체' 클래스에서 '사용되는 객체' 클래스에 의존하거나 인터페이스에 의존할 수 있음. 스프링에서는 DI 컨테이너가 임의의 클래스를 인스턴스로 생성해 클래스에 주입 인터페이스를 이용해 의존성을 만듦 - 인스턴스를 명시적으로 생성(new)하지 않음 - 어노테이션을 클래스에 부여 - 스프링이 인스턴스 생성(시작 시 모든 패키지를 스캔하는 컴포넌트 스캔을 통해) - 인스턴스를 이용하는 곳에 어노테이션 부여(@Autowired) 인스턴스 생성 어노테이션: @Co.. 2023. 5. 4. [JavaScript]DOM, Event, 비동기 처리 JavaScript Browser APIs 웹 브라우저에 내장된 API, Javascript를 이용해 Browser API 사용 가능 DOM 문서 객체 모델(Document Object Model) 문서의 구조화된 표현을 제공, html 문서를 구조화해서 각 요소를 객체로 취급 window: DOM을 표현하는 창, 각 탭 document: 브라우저가 불러온 웹페이지 //요소 선택 document.querySelector(요소) document.querySelectorAll(요소) //태그 생성 document.createElement(tagName) //Node객체와 컨텐츠 표현 htmlElement.innerText //Node를 다른 Node의 자식으로 삽입 및 삭제 parentNode.appendC.. 2023. 4. 25. [JavaScript] 기본 개념 JavaScript 웹 페이지에서 이벤트 발생 시 동작을 제어하는 데에 사용 웹 브라우저: URL을 통해 web을 탐색, html/css/javascript를 이해한 뒤 해석해서 사용자에게 하나의 화면으로 보여줌 Javascript engine: javascript를 해석, 각 브라우저마다 자체 엔진 보유 변수, 식별자 camelCase: 변수, 객체, 함수 PascalCase: 클래스, 생성자 SNAKE_CASE: 상수 //camelCase let variableName const userInfo function getName //PascalCase class UserInfo function User //SNAKE_CASE const API_KEY const NUMBERS 변수 선언 키워드 let: 블.. 2023. 4. 25. [Django]개발환경 구축 & CRUD 구현 가상환경 및 파이썬 개발환경 구축 $ python -m venv venv $ source venv/Scripts/activate $ pip install django==3.2.18 $ django-admin startproject pjt $ cd pjt $ python [manage.py]() startapp app settings.py에서 INSTALLED_APPS에 app 추가 pjt 폴더에 templates 폴더 생성(base.html 보관) bootstrap cdn 가져온 후 body에 block태그 삽입 {% block content %} {% endblock content %} settings.py에서 base.html 호출 경로 설정 TEMPLATES = [ { 'BACKEND': 'djan.. 2023. 3. 23. 이전 1 다음 728x90
