(25)23.10.27[JAVA]톰캣 설정, 폭포수/애자일 [JS]번들러, vscode 설정

DANA·2023년 10월 27일

KDT-구디아카데미

목록 보기

25/56

번들러

번들러는 웹 개발에서 JavaScript, CSS, 이미지 및 기타 파일과 같은 다양한 자산을 단일 또는 여러 개의 최적화된 파일로 묶고 패키징하는 데 사용되는 도구입니다. 번들러의 주요 목표는 HTTP 요청 수를 줄이고 자산 크기를 최적화하여 웹 애플리케이션의 성능과 효율성을 향상시키는 것입니다.

번들러의 주요 특징과 기능

번들 생성
: 번들러는 종종 여러 모듈이나 구성 요소에 분산되어 있는 여러 소스 파일을 가져와 단일 파일 또는 몇 개의 파일로 결합합니다. 이 프로세스는 웹 애플리케이션의 HTTP 요청 수를 줄여 로드 시간을 크게 향상시킬 수 있습니다.

종속성 관리
:최신 웹 애플리케이션은 모듈식 코드를 사용하여 구축되는 경우가 많으며, 애플리케이션의 다양한 부분을 나타내는 다양한 파일이 있습니다. 번들러는 이러한 파일 간의 종속성을 관리하여 종속성이 올바르게 해결되고 최종 번들에 포함되도록 합니다.

코드 변환
: 번들러에는 더 넓은 범위를 위해 최신 버전의 JavaScript(ES6/ESNext)로 작성된 코드를 이전 버전(ES5)으로 변환하는 등 코드 변환 기능이 포함되는 경우가 많습니다.
번들러는 종종 코드 변환과 관련된 기능을 포함하는데, 이는 주로 자바스크립트의 최신 버전(ES6/ESNext)으로 작성된 코드를 보다 넓은 브라우저 호환성을 위해 더 오래된 버전(ES5)으로 변환하는 것입니다.

Parcel

Parcel은 구성이 필요 없는 현대적인 웹 애플리케이션 번들러입니다. Webpack 및 Rollup과 같은 다른 번들러와 마찬가지로 Parcel은 웹 애플리케이션 번들링 및 구축 프로세스를 단순화하도록 설계되었습니다. 그러나 Parcel을 차별화하는 점은 일반적으로 다른 번들러와 관련된 구성 오버헤드를 줄이는 것을 목표로 하는 제로 구성 접근 방식입니다.

https://ko.parceljs.org/

Parcel의 주요 기능

제로 구성: Parcel에는 복잡한 구성 설정이 필요하지 않습니다. 많은 경우 합리적인 기본값으로 프로젝트 자산을 자동으로 감지하고 번들링할 수 있습니다.

내장 자산 지원: Parcel은 JavaScript, CSS, HTML, 이미지 등을 포함하여 즉시 사용 가능한 광범위한 자산을 지원합니다. 종속성을 지능적으로 처리하고 적절하게 묶을 수 있습니다.

핫 모듈 교체(HMR): Parcel에는 핫 모듈 교체에 대한 지원이 내장되어 있어 개발자가 개발 중에 전체 페이지를 새로 고칠 필요 없이 실시간으로 변경 사항을 확인할 수 있습니다.

효율적인 캐싱: Parcel은 캐싱 메커니즘을 활용하여 빌드 성능을 향상시킵니다. 변경된 애플리케이션 부분만 다시 빌드하므로 빌드 시간이 단축됩니다.

번들러와의 관계

Parcel은 본질적으로 번들러 자체입니다. 이는 프로덕션을 위해 웹 애플리케이션 자산을 번들로 묶고 최적화하는 도구 범주에 속합니다. "번들러"라는 용어는 Webpack, Rollup 및 Parcel을 포함한 다양한 도구를 포괄하는 더 넓은 범주입니다.

vscode 작업지시서

1. npm init -y (package.json 생성)
: npm (Node Package Manager)을 사용하여 기본 설정으로 새로운 Node.js 프로젝트를 초기화하는 단축 명령어
(-y 플래그는 "yes"의 약자로, 입력을 요청하지 않고 자동으로 기본 값을 수락)

: npm init -y를 실행하면 npm은 현재 디렉토리에 기본 값으로 package.json 파일을 생성

: package.json 파일은 프로젝트에 관한 메타데이터를 포함하고 있으며, 프로젝트 이름, 버전, 진입점 파일, 의존성 및 기타 구성 설정 등을 기록

<npm init -y를 실행한 후의 package.json 파일의 예시>

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2. npm install nodemon --save-dev
: --save-dev 플래그를 사용하여 package.json 파일의 devDependencies 섹션에 nodemon을 추가

{
  "scripts": {
    "test": "echo \"Hello,Node!\"",
    "app": "nodemon main.js"
  },
<nodemon과 해당 버전 정보 추가>
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

scripts는 키와 값으로 구성되어 있음
실습: npm run test(혹은 npm run app)으로 main.js 요청할 수 있다
devDependencies: 빌드에 필요한 정보들이 json 형식으로 관리되고 있다
npm i --save-dev prettier: devDependencies에 prettier 추가

Spring Boot 애플리케이션 구성을 위해 지원되는 형식에는 XML, properties, YAML(YML)이 있다.
xml → properties → yml 형식으로 변화되고 있는데, 그 중 yml은 반복된 코드가 없어 선호

main.js

"app": "nodemon main.js"
테스트 목적으로 작성할 것을 선등록 해놓음

npm i --save-dev prettier

// Formatting, ESLinting
let i = 1;
i += 2;
i += 3;
i += 5;
console.log(i);

→ [nodemon] 실시간으로 터미널에서 결과 확인 가능

3. vscode 로컬셋팅
1) .vscode 폴더 생성
2) 로컬에서 쓸 수 있는 .vscode > settings.json 추가

// 비주얼 스튜디오의 로컬 셋팅을 모아둔다
{
  "editor.tabSize": 4,
  "editor.lineHeight": 1.6,
  "editor.fontSize": 20, 
  "editor.tokenColorCustomizations": {
    "comments": "#f84807"
  },
  "liveServer.settings.CustomBrowser": "chrome",
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.maxTokenizationLineLength": 2500
  }
}

4. prettier 설정 (선택)

.prettierrc 파일 생성

{
    "semi": true,
    "singleQuote": true
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    live server - 포트번호 5500번
</body>
</html>

live server로 open하면 하단 url로 연결
http://127.0.0.1:5500/index.html

네이버 API 사용법

네이버 개발자센터 - 내 애플리케이션 - API 설정 - 비로그인 오픈 API 서비스 환경: web 설정 - 로컬호스트 추가
https://developers.naver.com/apps/#/myapps/VEWF6N80CcKAYIJQsuYz/config
(이후 '사용API'에서 자유롭게 선택하여 사용 가능)

자바에서 톰캣 서버 설정

window - show view - servers 클릭 - 하단에 servers 탭 열림
servers 탭 우클릭 - new - server - Apache 폴더 - Tomcat v.10.1 Server - Next(완료)
Overview 창이 열림 - Server Options - Publish module contexts to separate XML files 체크(Modules auto reload by default는 체크되어 있음)
Overview - Ports - Tomcat admin port번호를 9001로 변경(비어있는 다른 번호로 써도 상관 없음)
File - New - Dynamic Web Project 생성
: Dynamic Web Project가 보이지 않는다면 Help - Eclipse Marketplace - Eclipse Web Developer Tools를 추가적으로 설치
(Eclipse Enterprise Java and Web Developer Tools 3.31도 설치했음)
project location을 workspace_web으로 설정 - target runtime을 톰캣으로 선택 - 모듈 버전은 6.0(디폴트)
마지막에 Generate web.xml 체크(나중에 JSP/서블릿 연동 위해서) - 추가하지 않더라도 서버 자체는 기동이 되지만, 학습 위해서 옵션 선택
: 이러면 WEB-INF에 web.xml 생성됨
webapp 폴더에 index.jsp 파일 생성(우클릭-NEW에서 jsp 파일 선택)
Window - Web Browser - Chrome으로 선택(개발자 센터나 여러모로 사용이 용이함)
Run As - 1 Run on Server - 톰캣 서버 선택 - 실제 배포할 파일이 configured에 배치되어 있다
path를 매번 적어주지 않아도 될 수 있게 톰캣 설정창에서 Web Modules - edit에서 파일명 지우고 /만 남기기

Spring 프레임워크 라이프 사이클

Spring 프레임워크에서 관리하는 Java 클래스, 서블릿 및 객체의 라이프사이클은 서로 다르지만, Java 기반 애플리케이션 내 구성 요소의 인스턴스화, 초기화 및 소멸을 포함한다는 점에서 서로 관련되어 있다

keyword: 생성 - 활용 - 소멸

1. Java 클래스 라이프사이클
: 클래스가 JVM(Java Virtual Machine) 메모리에 로드된 후 가비지 수집될 때까지 발생하는 일련의 이벤트

세 가지 주요 단계

1. 로딩
: 클래스는 코드에서 또는 다른 클래스에서 처음 참조될 때 메모리에 로드됩니다.
2. 초기화
: 클래스가 로드된 후 초기화됩니다. 정적 변수가 초기화되고 정적 블록이 실행됩니다.
3. 인스턴스화 및 가비지 수집
: 클래스의 개체는 애플리케이션 런타임 중에 인스턴스화되고 사용됩니다. 객체가 더 이상 참조되지 않으면 가비지 수집 대상이 됩니다.

2. 서블릿 라이프 사이클
: 서블릿 - javax.servlet.http.HttpServlet 클래스를 확장하는 Java 클래스

서블릿의 라이프 사이클

1. 로딩 및 인스턴스화
: 서블릿 컨테이너는 애플리케이션이 시작되거나 서블릿이 처음 요청될 때 서블릿을 로드하고 인스턴스화합니다.
2. 초기화
: 초기화 작업을 수행하기 위해 'init()' 메서드가 호출됩니다. 서블릿의 수명 동안 한 번만 호출됩니다.
3. 요청 처리
: 서블릿은 요청 유형에 따라 doGet(), doPost() 등과 같은 특정 메소드에 위임하는 service() 메소드를 실행하여 클라이언트 요청을 처리합니다.
4. 파괴
: destroy() 메소드는 서블릿의 서비스가 중단될 때 호출됩니다. 이를 통해 서블릿이 리소스를 해제할 수 있습니다.

3. Spring 객체 라이프 사이클
: Spring 프레임워크에서 객체(Bean)의 라이프사이클은 Spring IoC(Inversion of Control) 컨테이너에 의해 관리 됨

객체 라이프 사이클 단계

1. 인스턴스화
: Spring 컨테이너는 Bean이 처음 요청되거나 애플리케이션 컨텍스트가 초기화될 때 Bean을 생성하고 인스턴스화합니다.
2. 속성 채우기
: Bean의 종속성과 속성은 생성자 주입 또는 Setter 주입을 통해 주입됩니다.
3. 초기화
: Bean이 InitializingBean 인터페이스를 구현하거나 XML 구성을 통해 초기화 방법을 지정하는 경우

폭포수 모델

소프트웨어 개발생명주기(SDLC; Software Development Life Cycle)에 기반하고 있는 소프트웨어 개발 기법
한 번 떨어지면 거슬러 올라갈 수 없는 폭포수와 같이 소프트웨어 개발도 각 단계를 확실히 매듭짓고 다음 단계로 넘어간다는 의미에서 붙여진 명칭
전통적인 시스템 생명주기 모델로 소프트웨어를 개발할 때 가장 널리 사용된다.

개발 과정
① 프로젝트의 타당성 분석
② 사용자의 기능·성능·신뢰도 등에 대한 요구를 분석
③ 소프트웨어(시스템 아키텍처) 설계
④ 프로그래밍(구현)
⑤ 통합(단위,시스템) 테스트
⑥ 소프트웨어 운용(배포)하고 유지·보수

단점

각 단계가 명확하여 관리가 쉬우나 요구 분석에 상당한 시간이 소요되며, 일단 분석이 끝나면 수정이 어렵다
개발 단계마다 피드백이 발생하므로 순차적인 흐름을 따라가기 어려우며, 규모가 크고 복잡한 시스템에는 적합하지 않다

→ 이러한 단점을 보완하기 위하여 모델을 변형하거나 단계 통합 또는 새로운 단계 추가 등이 시도되고 있다 (ex. 애자일 방법론)

애자일 방법론

‘Agile = 기민한, 날렵한’ 이란 뜻으로 좋은 것을 빠르게 취하고, 낭비 없게 만드는 다양한 방법론을 통칭해 일컫는 말
앞을 예측하며 개발하지 않고, 일정한 주기를 가지고 계속 검토해 나가며 필요할 때마다 요구사항을 더하고 수정하여 커다랗게 살을 붙이면서 개발해 프로세스 모델 방식
미리 정해진 몇 개의 단계에 따라 엄격한 순서대로 이루어지는 일직선의 과정인 폭포수의 프로세스와는 비교가 많이 되는 반대의 개념

애자일 방법론의 진행 과정

계획 → 설계(디자인) → 개발(발전) → 테스트 → 검토(피드백) 순으로 반복적으로 진행

장점

프로젝트 계획에 걸리는 시간을 최소화할 수 있다.
점진적으로 테스트할 수 있어서 버그를 쉽고 빠르게 발견할 수 있다.
계획 혹은 기능에 대한 수정과 변경에 유연하다.
고객 요구사항에 대한 즉각적인 피드백에 유연하며 프로토타입 모델을 빠르게 출시할 수 있다.
빠듯한 기한의 프로젝트를 빠르게 출시할 수 있다.

단점

확정되지 않은 계획 및 요구사항으로 인한 반복적인 유지보수 작업이 많다.
고객의 요구사항 및 계획이 크게 변경되면 모델이 무너질 수 있다.
개인이 아닌 팀이 중심이 되다 보니 공통으로 해야 할 작업이 많을 수 있다. (회의, 로그 등)
반복적인 업무로 속도는 빠를 수 있으나 미흡한 기능들에 대한 대처가 필요하다.
확정되지 않은 계획으로 개발 진행 시 이해하지 못하고 진행하는 부분이 많을 수 있다.

✏️ 번들러, 라이프 사이클, 폭포수 모델, 애자일 등 개념에 대해 잘 알아두자

#구디아카데미 후기 #국비지원 IT개발자취업 #김승수 선생님

DANA

이전 포스트

(24)-23.10.26[JAVA]

다음 포스트