과제 - 소통게시판 프로젝트 - 1

개발 환경

인텔리 j

스프링 부트 - 메이븐 

maria db

jdk 11

jpa

react

프로젝트 생성

• https://start.spring.io/ 에 접속 후
• snapshot 없는 버전 설치
  • 3 이상 부터는 jdk 17 사용
  • 11을 사용하므로 2.x.x 버전 중 snapshot 없는 최신 버전 체크
• project - maven
• 의존성 추가
  • Lombok
  • Spring Web
  • Spring Data JPA
  • MySQL Driver
  • Maria Driver
• GENERATE 클릭
• 부족한 의존성은 추후 주입

DB 연결

• java -> resources -> application.properties 에

server.port=9090  ( 포트 번호 설정 ) 

spring.datasource.url=jdbc:mysql://localhost:3306/스케마명 ?useSSL=false&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username= 디비 아이디 
spring.datasource.password= 디비 비밀번호
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# mysql 사용
spring.jpa.database=mysql
# 콘솔에 sql 출력 여부
spring.jpa.show-sql=true     


spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect

#해당 데이터베이스를 근거로 서버 시작시에 DDL(Data Definition Language)을 생성하여 DB에 적용한다
spring.jpa.generate-ddl=true
#쿼리 생성?
spring.jpa.hibernate.ddl-auto=create

스프링부트 프로젝트 구조

• 컨트롤러 : @Controller (프레젠테이션 레이어, 웹 요청과 응답을 처리)
• 로직 처리 : @Service (서비스 레이어, 내부에서 자바 로직을 처리)
• 외부 I/O 처리 : @Repository (퍼시스턴스 레이어, DB나 파일 같은 외부 I/O 작업을 처리 )

Controller 란

Service 란

--------------- 23-6-24 --------------

리액트, node.js 설치

• https://ramspark.tistory.com/137 여기 참고

인텔리 j 내 리액트 app 설치

• 인텔리제이 j 터미널에서 작업
  • 프로젝트가 설치 된 경로에서 cd src/main 해준다. --- 최종 설치 경로 프로젝트폴더/src/main
  • npm install -g create-react-app
• 설정한 폴더 명으로 폴더 생성 ( frontend ) 폴더
• 터미널에 npm install axios --save
• npm install react-router-dom --save
• npm install http-proxy-middleware --save
• 설치 후 npm start

------- 23-6-25----------

추가

• cmd 에서 yarn install react-bootstrap bootstrap
• yarn add bootstrap
• yarn add reactstrap

스프링부트 리액트 연동하기

<!--            리액트 스프링부트 연결하기 위한 -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.10.3</version>
                <configuration>
                    <workingDirectory></workingDirectory> // 리액트 프로젝트 경로로 맞춰야함 
                    <installDirectory>target</installDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v18.16.0</nodeVersion>   // 본인 버전하고 맞춰야 함 
                            <npmVersion>9.5.1</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy-resources</id>
                        <phase>process-classes</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${basedir}/target/classes/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory></directory>  // 중요부분 리액트 프로젝트 경로로 맞춰야함 
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

• 설정 후 추가
• package.json 에 proxy 부분을 포트랑 맞춰준다.

  "proxy": "http://localhost:9090",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• 인텔리제이는 우측 maven 탭에서 install을 누른다
• 9090 으로 리액트랑 제대로 연결 하려면 build 파일 안에 있는 것들을 static 경로로 이동해줘야 함
• \target\classes\static 경로 기억!!