자투리 시간에 만드는 개인 포토폴리오 프로젝트! vo1 : 무료 Boot 다운받아서 파일 로드와 파일 설정하기!

인턴을 하면서 코딩을 자주 하는중인데

 

개인 피시로 데이터 파씽을 하고 있을 때 남는 시간에 회사 웹페이지 개발을 하자니....

 

뭔가 내 맘에 안들고 그냥 쉬고 싶은데 쉬기도 뭐해서..ㅎㅎ

 

개인 포토폴리오를 제작해보려구요! 

 

음... 쉽지 않은 선택이지만 일단은 틈틈히 진행해보겠습니다!

 

틈틈히 대략적인 설계도를 작성도 해줍니다 ㅎㅎ

 

사실 설계도라고 하기도 뭐한게.... 

 

무료 BootStrap에 제공되는 폼을 따라한 것도 많아서 ㅎㅎ 

 

나중에 차츰차츰 수정할 예정입니다. 

 

무료 BootStrap 사이트는 워낙 많지만 그 중에 추천을 해드리자면?!?

 

bootstrapmade.com/

Free Bootstrap Themes and Website Templates | BootstrapMade

대략적으로 깔끔한 디자인을 가지고 있습니다.

 

모두들 아는 것처럼!

 

BootStrap을 이용하더라도 기본적으로 코드를 읽을 줄 모르면 수정이 불가능하다는 점!

 

그래서 BootStrap을 사용하기 위해서는 대략적인 CSS 구성이 어떻게 되는지

 

JS파일에 대해서 대략적으로 흐름을 아는 것이 좋습니다.

 

즉! 프론트 부분에 지식이 있다면 수월하게 작업이 가능합니다.

 

나중에는 자신의 입맛대로 디자인을 바꿔야 하기 때문이죠! 

 

 

제가 다운을 받은 무료 파일인데 

 

파일마다 구성은 다릅니다.

 

여기 파일의 Main은 index.html 파일인데요 

 

이걸 실행시켜보면?!?

 

진짜 디자인이 미쳤다 ㄷㄷ

 

무료 디자인을 아주 대박인 걸 사용하게 되다니 엄청 좋습니다.

 

대략적인 디자인을 이제 제 스타일대로 변경해보도록 하죠!

 

먼저 저는 Spring boot로 프로젝트를 만들었습니다 ㅎ

 

먼저 resources 부분을 보면!

static 아래에 css부터 js파일까지 폴더로 경로를 지정해줬습니다.

 

Spring mvc를 자주 쓰다보면 spring boot에서 실수하는 것 중 한가지는 바로 경로문제입니다.

 

리소스 파일의 경우 기본적으로 spring boot에서 경로가 지정이 되어있는데 

 

5가지인가 4가지로 기억하고 있으나 

 

자세하게 기억이 안나서 패스...

 

무튼 static/** 도 한가지의 방법이라는 점!

 

그렇다고 무조건 기본 경로에 맞출 필요는 없지만 수정하는게 까다롭기 때문에 기본에 따르는 것을 추천드립니다!

 

그리고 application.properties를 수정해야 하는데 

 

정적 경로를 지정해줘야 합니다! 

 

이렇게 지정해주면 손쉽게 Clear!

 

이제는 jsp를 제작하기 위한 경로를 만들어볼께요! 

 

워터마크를 추가하니 잘 안보이네요 

 

대략적인 설명을 드리자면 jsp파일은 결국 view 아래에 있어야 하기에 

 

이렇게 경로를 설정해줬습니다. 

 

main과 footer폴더에 들어있는 파일들을 제외하고는 아까 봤던 bootstrap에 있는 파일들과 동일하게 제작해줍니다.

 

footer를 만들어 준 이유는 나중에 설명을 드릴께요! 

 

쉽게 말하면 우리가 사용하는 css나 js파일을 다른 파일로 만든 후 그 파일만 호출해오는 방식으로 만들었어요! 

 

이유는?

 

한 파일에 코드량을 최소화 하기 위해서! 

 

이렇게 하면 나중에 오류가 난 부분을 더 빠르게 찾을 수 있겠죠?

 

이렇게 경로와 파일들을 생성한 후 application.properties를 수정해줍니다.

 

2개를 추가하면 됩니다.

 

쉽게 보면 경로를 지정해주고 해당 경로에 jsp파일을 호출해와라~ 라고 이해하면 쉽습니다.

 

이렇게 지정해주면 나중에 controller에서도 /index.jsp -> /index 의 형태로 알아보기 쉽게 제작이 가능하죠 ㅎ

 

대망의 pom.xml을 설명드리기 전에 

 

spring boot는 참 좋은것 중 하나를 말씀드리자면?!

 

New -> Spring Starter Project를 클릭하고 

 

첫 페이지를 자신이 원하는 방식으로 작성해주면 됩니다!

 

그리고 Next를 누르면!

 

현재의 페이지가 나오는데 

 

여기서 자신이 원하는 Frequently를 클릭해주면?

 

저절로 pom.xml에 적용되는 신기한 Magic이 펼쳐집니다 ㅎㅎ

 

실수로 만들 때 클릭을 못하고 넘겼다고 하더라도 걱정하지 않으셔도 됩니다!

 

mvnrepository.com

Maven Repository: Search/Browse/Explore

메이븐 사이트에 들어가서 자신이 원하는 라이브러리를 추가해주면 됩니다!

 

제 pom.xml을 예시로 보여드면!

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.11.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.heejea.simple</groupId>
	<artifactId>simplePro</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>simplePro</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>


		<!-- 추가 pom -->
		<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.apache.tomcat.embed/tomcat-embed-jasper -->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl -->
		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-mapper-asl</artifactId>
			<version>1.9.13</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

기본으로 설정했던 내용들에 자신이 원하는 라이브러리를 추가해주면 끝!

 

이번 포스팅에서는 기본 설정으로 포스팅을 남겼는데 

 

다음 포스팅에서는 프론트 부분을 수정하는 걸 적어보겠습니다!