[react]springboot + react

* 개인적으로 Spring Legacy Project (sts3) xml 세팅방식이 편하네.

* 개인적 숙제

   1) 서버단 + 화면단 혼자서 개발 할 경우

   1-1) 프로젝트폴더 구조(아래는 화면단소스만 별도의 폴더에 세팅했다)

         어떻게 구조를 잡아야 하는지? (실무에서는 어떻게 잡는지 궁금하네)

         (node_modules, public, package.json 들... 어디에 두나?)

 

   1-2) 서버 (톰켓) start + npm start 방식보다는

      >> npm run build 후 build 된 js 파일이 실행되는걸 보는 방법 찾기

   1-3) react 문법에 익숙져서 react + 모던웹 화면들 개발

 

     

1. 서버단 (Spring)

    1)다운로드설치후 폴더구조

        d:\devweb

         - apache-maven-3.9.1 >> 다운로드버전

         - eclipse(2023-03) >> 다운로드버전

         - jdk-20 >> 다운로드버전

         - workspace >> 폴더생성

    2)maven setting

        D:\devweb\apache-maven-3.9.1\conf\settings.xml 내 설정 변경

          <localRepository>D:/repo_devreact</localRepository>

        >> maven install

    3) eclipse 사용 java버전 17로 세팅 ( 프로젝트 생성후    Project Facets 내 확인 )

    4) sts (sts4) 설치 >> Eclipse Marketplace 에서 검색하여 설치

    5) 프로젝트 생성

       - Spring Start  Project 

          - Maven + War + Java Version(17)

             -Spring Boot DevTools + Spring Configuration Processor + Spring Web

    6) application.properties 수정

        #TOMCAT PORT
        server.port=9080

        #jsp view
        spring.mvc.view.prefix=/WEB-INF/jsp/
        spring.mvc.view.suffix=.jsp

    7) pom.xml 수정 ( jsp 테스트위한)

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>



        >> maven update , maven install



    8) jsp 테스트위한 파일 생성추가

        8-1) 화면단

        webapp 아래에 폴더및 파일추가

          webapp ( 폴더 )

            -WEB-INF ( 폴더 )

              -jsp ( 폴더 )

               -index.jsp (파일)

        8-2-1) 서버단 -scanBasePackages 옵션추가

           (파일경로 : D:\devweb\workspace\webnormal\src\main\java\com\webnormal\web\WebnormalApplication.java)

          *Application java 파일에 @SpringBootApplication(scanBasePackages= {"com.webnormal.*.*"}) 추가

        8-2-2) 서버단 -MainController.java 파일추가

          -D:\devweb\workspace\webnormal\src\main\java\com\webnormal\web\login\MainController.java

          -http://localhost:9080/ or http://localhost:9080/index.do 로 잘 나오는지 확인



            @Controller("mainController")
            public class MainController {
              // http://localhost:9080/ 으로 접속 시
              @RequestMapping("/")
              public String welcome() {
                System.out.println("root start===>");
                return "redirect:index.do";
              }
              @RequestMapping("/index.do")
              public String indexView() {
                System.out.println("index start===>");
                return "index";
              }
            }



2. 화면단(react 개발준비)

    9)nodejs 설치 (검색하여참조) (https://nodejs.org/ko/)
    
      9-1) 설치확인방법 : npm -v (파워셀에서 버전확인)
      

    10)(옵셔널 과정)
    
        10-1)웹서버 만들기(검색하여참조)(d:\work\index.js) (메모장 또는 Visual studio Code)
        
        10-2) 웹서버띄우기 : node index.js (파워셀)
        
        10-3)localhost:3000/ 확인하기 (브라우저)
        
    
    11)create-react-app 설치 (파워셀)
    
       11-2) npm install -g create-react-app ( 또는 npx create-react-app )
       
             [하다가 에러나면 (맥 : 권한문제)
             sudo npm uninstall -g create-react-app 
             sudo npm install -g create-react-app
             ]
             
       11-3) 설치확인방법 : create-react-app -v (파워셀에서 버전확인)
	
    
    12)작업폴더생성
    
        12-1) 탐색기에서 작업폴더(d:\react-app)생성
        
        12-2) 작업폴더로이동 ( d:\react-app )
        
        12-3) project 생성 
        
        12-3-1) npm 활용하여 project 생성
        
            PS d:\react-app> create-react-app .  (쩜(현재경로로) 중요)
            (에러나면:	PS C:\Users\gs> Set-ExecutionPolicy RemoteSigned )
            
        12-3-1) npx 활용하여 project 생성
        
            npx create-react-app my-app (파워셀)(확장자 .js 로 만들어짐)
            or npx create-react-app my-app --template typesript (파워셀) 
            (확장자 .tsx 로 만들어짐,build 해야 .js 생성됨)
            

    13) 작업폴더(d:\react-app) 아래에서 서버기동
    
        npm start  (파워셀)
        or npm run start (파워셀)
        --> 성공하면 브라우저 자동실행됨
        http://localhost:3000 확인하기 (브라우저)
        --> 종료 : ctrl + c

    14) build 는 --> npm run build 명령어로... 결과물 .js 파일 만들어졌는지확인하기
        d:\react-app\build\ 아래에 생성됨 =>배포하기

    15) spring 연결하기

        package.json(D:\react-app\package.json) 파일 수정하기 (Vscode)

        아래코드를 추가한다.

        "proxy": "http://localhost:9080",

    16) spring 에 json return 되는 java 만들어서 http://localhost:3000 에서 호출해보기

        16-1)  App.tsx 수정하기 (Vscode)

              helloString.do 호출해서 화면에 return 값 보여주는 코드 추가

        16-2) 서버단에 아래 java 파일 생성

            @Controller
            public class ReactExamController {
              @RequestMapping("/helloString.do")
              @ResponseBody
              public String helloString(Model model) {
                return "Hello To react view";
              }
            }

        16-3) http://localhost:3000 에서 호출해서 "Hello To react view" 가 잘 나오는지 확인하기