멀티모듈이란?

하나의 프로젝트를 여러개의 독립적인 모듈로 분리하여 구성하는 방식으로 여러 모듈간 의존성 관리를 할 수 있다.

Ex)

login 모듈(로그인 관련 api)은 auth와 common 모듈을 포함한다. 

board 모듈(게시판 관련 api)은 auth와 common 모듈을 포함한다.

auth 모듈(authentication 관련 설정) Oautn, jwt 관련 라이브러리를 포함한다.

위와같이 모듈을 분리함으로써 auth가 필요 없는 모듈은 auth를 가져가지 않고 추후 다수의 개발자가 개발 시 보다 용이한 버전관리를 할 수 있다.

프로젝트 우클릭 -> New -> Module

module-common, module-normal-board, modue-main 추가

기존의 src 제거

ps . 모듈 이름 오타남.

  modue-noraml-board -> module-normal-baord

settings.gradle(intelij에서 자동으로 작성해줌)

rootProject.name = 'portfolio_was'
include 'module-common'
include 'modue-normal-board'
include 'module-main'

build.gradle(프로젝트 최상위)

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.2.5'
	id 'io.spring.dependency-management' version '1.1.4'
}



java {
	sourceCompatibility = '17'
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}


// 모든 모듈에 적용되는 사항
subprojects {
	apply plugin: "org.springframework.boot"
	apply plugin: "io.spring.dependency-management"
	apply plugin: "java"

	group = 'com.portfolio'
	version = '0.0.1-SNAPSHOT'
    
    // 라이브러리 및 프레임워크 저장소
	repositories {
		mavenCentral()
	}

	configurations {
		compileOnly {
        	// 롬복 관련 설정
			extendsFrom annotationProcessor
		}
	}

	dependencies {
		implementation 'org.springframework.boot:spring-boot-starter-web'
		compileOnly 'org.projectlombok:lombok'
		developmentOnly 'org.springframework.boot:spring-boot-devtools'
		annotationProcessor 'org.projectlombok:lombok'
		testImplementation 'org.springframework.boot:spring-boot-starter-test'
		
        // OpenAPI의 swager 기능 사용하기 위해
		implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.5.0'
	}

	tasks.named('test') {
		useJUnitPlatform()
	}


}

module-normal-board의 build.gradle

// 빌드 시 bootJar로 생성하지않음
bootJar { enabled = false }
// 다른 모듈의 라이브러리 형태가 될 것이기 때문에 jar 형태로 진행
jar { enabled = true }

dependencies {
	// common 모듈에 의존
    implementation project(":module-common")
}

module-common의 build.gradle

bootJar { enabled = false }
jar { enabled = true }

dependencies {

}

module-main의 build.gradle

dependencies {
    // 이미 board에 포함된 의존성임으로 추가하지 않음
//    implementation project(":module-common")
    implementation project(":module-normal-board")
}

module-main 의 main 함수 추가

PortfolioWasApplication.java

package com.portfoio;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication(scanBasePackages = "com.portfoio")
public class PortfolioWasApplication {
    public static void main(String[] args) {

        SpringApplication.run(PortfolioWasApplication.class, args);
    }
}

구동 확인

모듈 의존성 적용 확인

module-common에 TestController.java 추가

OpenAPI 접속

• http://localhost:8080/swagger-ui/index.html

main 모듈에 없는 Controller 적용 확인

https://github.com/Kmmanki/portfolio_was

2부 React 아키택쳐

리액트 교과서 Chapter12(Webpack)

Webpack의 역할

자바스크립트를 작성을 하다보면 많은 js 파일을 생성하게 된다.
이러한 js 파일들을 적은 수의 js로 합쳐주며 이를 통해 js 요청의 횟수를 줄여준다.

또한 A.jsx와 B.jsx가 모두 Multiutil이라는 유틸리티 모듈을 사용 할 경우 중복하여 요청을 할 수 있다. 이러한 상황에서 Webpack의 도움을 받을 수 있다.

Webpack은 의존성을 분석하여 다음과 같은 작업을 진행한다.

• 모든 의존 모듈을 올바른 순서로 불러오도록 한다.
• 모든 의존 모듈을 한 번ㅆ기만 불러오도록 한다.
• 자바스크립트 파일이 가능한 적은 파일로 묶여지도록 한다.(이를 정적자원이라고 부른다.)

그 외에도

• JS, Jade, CoffeScript 파일을 js파일로 변환한다.
• ES6 미지원 브라우저를 대응하기 위해 ES6+ 코드를 ES5 코드로 변환한다.
• 스프라이트 이미지를 하나의 PNG 파일이나 JPG 파일 또는 인라인 데이터 URI 이미지로 최적화 한다.
• npm 의존 모듈을 관리하고 번들링하여 일일이 인터넷에서 내려받거나 HTML의 script 태그를 추가하지 않아도 사용할 수 있도록 한다.
• 핫 모듈 대체를 적용한다(?)
• 개발용 웹 서버를 실행한다.

Webpack의 적용

• Webpack: 번들로 도구
• 로더: 스타일, CSS, 핫 모듈 대체, Babel, JSX 전처리기(style-loader, css-loader, react-hot-loader, babel-loader, babel-core, babel-preset-react)
• Webpack 개발 서버: Express 기반의 서버로 HMR 기능을 사용할 수 있다.

$ npm init -y
$ npm i -D babel-loader css-loader react-hot-loader webpack webpack-dev-server html-webpack-plugin react-dom react babel/preset-react @babel/plugin-syntax-jsx babel/syntax-dynamic-import --force
$ npm install -D @webpack-cli/generators
$ npx webpack init --force

barbelrc

{
  "plugins": [],
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ]
}

js의 로드는 dom 이후에

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="./main.js" crossorigin></script>
</html>

$ npm run serve

https://github.com/Kmmanki/react_note/tree/master/chapter12

Spring Boot 프로젝트 생성

Spring Boot initializr 를 사용하여 스프링 부트 프로젝트를 생성 후 IDE에서 열어보기

https://start.spring.io/

java, Spring Boot 버전에 맞게 설정 후 사용할 디펜던시 추가

• Lombok: Getter, Setter 등 어노테이션 사용을 위해 추가
• Spring Web: Spring의 MVC 패턴을 사용하기 위해 추가
• Spring Boot Dev Tools: 소스 변경시 재기동 등 다양한 개발 편의를 위해 추가

프로젝트 실행

생성한 프로젝트를 VSCode에서 open 후  실행 확인

Swagger 라이브러리 추가

https://mvnrepository.com/artifact/org.springdoc/springdoc-openapi-starter-webmvc-ui/2.5.0

Swagger를 사용하기위한 springdoc 라이브러리 추가

 ps. Spring Boot 3.x 이상부터는 openAPI Starter WebMVC UI로 적용해야한다.

maven repository에서 springdoc을 찾아서 gradle 클릭 후 카피

build.gradle에 추가

접속

테스트 컨트롤러 및 openAPI 설정 

SwaggerConfig.java

package com.portfolio.portfolio_was.config;

import org.springdoc.core.models.GroupedOpenApi;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * SwaggerConfig
 */
@Configuration
public class SwaggerConfig {

  
  @Bean
  public GroupedOpenApi api() {
    String[] paths = {"/**"};
    // String[] pakcagesToScan = {"com.portfolio.portfolio_was"};
    return GroupedOpenApi.builder().group("springdoc-openapi")
    .pathsToMatch(paths)
    // .packagesToScan(pakcagesToScan)
    .build();
  }
}

TestController.java

package com.portfolio.portfolio_was.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;


@RequestMapping("/test")
@RestController
public class TestController {
 
  @GetMapping("/api1")
  @Tag(name = "test api")
  @Operation(summary = "test")
  public String test22() {
    return "test";
  }
}

https://github.com/Kmmanki/portfolio_was

포트폴리오를 작성하는 이유

최근 이직을 위해 이력서를 작성하는데 자꾸 서류에서 탈락하고 있다.

포트폴리오가 없기 때문일까? 라는 생각에 포트폴리오를 작성하고자 한다.

포트폴리오는 WAS와 WEB으로 구성할 예정이다.

면접관이 보았을 때 가독성이 좋도록 작성을 하고 JAVA Doc과 같은 주석을 자세히 달고자 노력이 필요할 듯 하다.

메인 포지션은 Backend 이기 때문에 WAS 부터 구성을 하며 sweager를 통해 ui를 대채하며 진행하고 WAS가 어느정도 틀이 잡히면 WEB을 작성할 예정

WAS 정보(중간 중간 추가 및 변경 가능)

• Java 17
• Spring Boot 3.2.5

WAS 기타 라이브러리

• swagger
• JPA

기타 

• Mysql

WEB 정보 (미정

• React ?, Vue?