인프런 커뮤니티 질문&답변

chanho0912님의 프로필 이미지

작성한 질문수

스프링과 JPA 기반 웹 애플리케이션 개발

프론트엔드 라이브러리 설정

윈도우에서 gradle로 빌드하시려는 분께 공유드립니다.

작성

·

1.1K

6

윈도우 환경에서 gradle로 빌드 하시려는 분들을 위해 공유 드립니다.

1. build.gradle

    dependencies {
        ...
        classpath "com.github.node-gradle:gradle-node-plugin:3.1.0"
    }

classpath에 node-gradle 을 추가해 주시고

def preinstalledNodeDistributionDirectory = file("${projectDir}/src/main/resources/static/node")

이거 하나 선언해 주시고

apply plugin: "com.github.node-gradle.node"

위 플러그인 적용해주시면

node {

    version = '11.15.0'  // 제가 사용중인 노드 버전을 적었습니다.

    download = true

    nodeModulesDir = file("${projectDir}/src/main/resources/static")

}





task copyFrontLib(type: Copy) {

    from "${projectDir}/src/main/resources/static"

    into "${projectDir}/build/resources/main/static/."

}

copyFrontLib.dependsOn npmInstall

compileJava.dependsOn copyFrontLib

해당 코드를 추가하여 사용하시면 build시에 프런트 라이브러리들을 빌드에 추가하실 수 있습니다.

2. css 깨짐 현상

본 강의와 같이 부트스트랩을 사용하셔서 동일한 css를 적용시키려면 그냥 install bootstrap으로는 안되는것같습니다. 

버전이 달라서 css 속성명이 달라졌나봐요...

그래서 만약에 build에 정상적으로 라이브러리 추가 되시는데 뷰가 어디가 좀 깨져서 나오시거나 css가 적용이 잘 안되시면

"dependencies": {

  "bootstrap": "^4.4.1",

  "jquery": "^3.4.1"

}

선생님이 강의에서 사용하신 버전으로 명시적으로 바꾸어주셔야 합니다. 

저렇게 적용하면 정상적으로 뷰가 나와요... 많이 해맸네요ㅜㅜ

답변 2

5

맨 위에 공유 해주신거 보고 참고해서 정리한 build.gradle 파일 소스 입니다. 

repositories 에 gradlePluginPortal() 이걸 추가해줘야 합니다.

plugins {
id 'org.springframework.boot' version '2.5.2'
id 'io.spring.dependency-management' version '1.0.11.RELEASE'
id 'java'
id "com.github.node-gradle.node" version "3.1.0"
}

group = 'me.bingbingpa'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
compileOnly {
extendsFrom annotationProcessor
}
}

repositories {
mavenCentral()
gradlePluginPortal()
}

dependencies {
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
implementation 'org.springframework.boot:spring-boot-starter-mail'
implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-validation'
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
runtimeOnly 'com.h2database:h2'
runtimeOnly 'org.postgresql:postgresql'
annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
annotationProcessor 'org.projectlombok:lombok'

// npm
implementation 'com.github.node-gradle:gradle-node-plugin:3.1.0'


testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation 'org.springframework.security:spring-security-test'
}

test {
useJUnitPlatform()
}

node {
version = '16.3.0'
download = true
nodeModulesDir = file("${projectDir}/src/main/resources/static")

}
task copyFrontLib(type: Copy) {
from "${projectDir}/src/main/resources/static"
into "${projectDir}/build/resources/main/static/."
}
copyFrontLib.dependsOn npmInstall
compileJava.dependsOn copyFrontLib

감사합니다.

1

백기선님의 프로필 이미지
백기선
지식공유자

좋은 정보 공유해 주셔서 감사합니다.

parksangdonews님께서 그래들 빌드 설정 파일을 PR을 보내주신것도 깃헙에 있으니 참고하시기 바랍니다.

https://github.com/hackrslab/studyolle/blob/master/_build.gradle_ 

오 저도 됐어요!

처음에 index.html에서 /node_modules로 가져오려는 css가 안 되더라구요. 1.node_modules 폴더는 있지만 node폴더가 없어서 기선님 소스에서 node폴더 복사(이건 중간에 제가 명령어 안 쳐서 빠뜨린 게 있었나 봅니다.)

2.위의 기선님이 제시해주신 PR된 소스링크 가서 가져올 소스 가져오기

3.npm-install한 후 (얘네는 이미 해서 의미 없겠지만 혹시 몰라서) bootstrap, jquery npm 설치

4.SecurityConfig로 가서 node_modules에 대한 필터링 무시하도록 설정 (기선님 강의 자료 소스에 있음)

5.이러고 애플리케이션 실행하니까 됐습니다.