🌈 [Section4] 14. [Solo Project] To-Do App

📕 오늘 배운 내용!

• To-Do App 만들기
• Tomcat 설치 후 수동배포
• Ngrok 사용

---

😜 실습

🎄 To-Do App 만들기

• 내가 만든 To-Do App

✔ 기능 요구사항

• Create

  • 할 일 목록을 등록할 수 있어야 함

• Read

  • 등록된 전체 할 일 목록을 조회할 수 있어야 함
  • 등록되어있는 할 일의 특정 id를 입력하여 조회할 수 있어야 함

• Update

  • 이미 한 일에는 완료 표시를 할 수 있어야 함
  • 할 일의 내용을 수정할 수 있어야 함

• Delete

  • 등록된 전체 할 일을 삭제할 수 있어야 함
  • 등록되어있는 할 일의 특정 id를 입력하여 삭제할 수 있어야 함

✔ 결과

먼저 프로젝트를 돌리고

Postman으로 요청을 두가지 보낸 후에

h2 데이터베이스에서 확인하면 잘 들어가있는 것을 볼 수 있고

웹 상으로도 그 정보가 잘 전달되어 들어간 것을 볼 수 있다 !!

여기서 todo를 완료함으로 체크하게 되면

다시 h2 데이터베이스에서 해당 todo의 상태가 TRUE로 바뀌어 있는 것을 확인할 수 있다 !!

Controller 테스트 코드도 모두 완료 !

===============================================================

✔ Tomcat을 이용하여 웹 애플리케이션 실행

1. JRE 설치 후, 환경변수 설정

2. 톰캣 공식 사이트에서 설치
   ( 나는 c드라이브에 설치함 ! )

   • bin
     ➜ 톰캣의 실행 / 종료가 가능한 스크립트 파일이 들어있음
   • conf
     ➜ 서버 설정 파일 들어있음
   • webapps
     ➜ 톰캣 위에서 실행할 웹 애플리케이션의 기본 저장 경로
     ➜ .war 파일을 이 곳에 이동시키거나, 설정파일에서 경로를 변경하여 실행 가능

3. 설치하고 cmd 터미널에서 startup.bat 명령어로 tomcat을 실행시킨 후,
   localhost:8080으로 들어가면 아래와 같이 tomcat 화면을 볼 수 있음 !

( 그리고 일단 .\shutdown.bat 명령어로 tomcat 종료하고 )

4. 프로젝트의 build.gradle의 plugins 부분에 아래 설정 추가 후 refresh

   plugins {
   	...
   	id 'war' // 추가
   }

5. ~~Application 파일에 extends SpringBootServletInitializer 해주고
   config를 Override 해주기

@SpringBootApplication
public class Todo1Application extends SpringBootServletInitializer {

	public static void main(String[] args) {
		SpringApplication.run(Todo1Application.class, args);
	}

	@Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { // (2)
		return builder.sources(Todo1Application.class);
        // return되는 값의 클래스 이름 == 내 ~~Application 클래스 이름임
	}
}

6. 프로젝트 빌드 후, 프로젝트 파일 내의 build/libs 폴더에 들어가면 .war 로 생성된 build 파일이 있음!

7. 해당 파일을 tomcat이 설치된 경로의 webapps 폴더 내로 가져옴

8. war 파일의 이름이 ROOT인 경우 별도의 변경 없이 실행 가능한데,
   우리는 다르기 때문에 conf/server.xml 파일에 추가 설정 추가
   ( + tomcat 실행 포트도 8090으로 변경해주기 ( 프로젝트랑 포트가 같으니까 ))

...
<Connector port="8090" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />
// 포트 변경
...
<Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">
        <Context path="/" docBase="todo1-0.0.1-SNAPSHOT"  reloadable="false" > </Context>
  // docBase 부분은 내 .war 파일 명
        ⠀
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
</Host>
...

9. 이렇게 설정하고 나면 webapps 폴더 내에 내 .war 파일을 압축해제하여
   아래처럼 동일한 이름의 디렉토리가 구성됨

10. 다시 tomcat 실행 후, http://localhost:8090으로 접속하면
    webapps 디렉토리에 옮겨놓은 .war 파일이 실행되었음을 확인 가능 !!
    

( 나타난 화면이 에러같이 생겼지만, 내가 따로 페이지에 나타날 것들을 안정해줬기 때문 ! )

=======================================================================

✔ Ngrok을 이용해 로컬에서 서버 실행하기

✏️ Ngrok

• 네트워크 설정을 하지 않아도 방화벽을 넘어 외부에서 로컬 환경에 접근할 수 있게 해주는 터널링 프로그램
  ⠀
• 무료 플랜의 경우 연결 세션이 약 2시간가량 유지됨
  ( AuthToken 등록시 시간 제한 없이 사용 가능 )
  ➜ 개발 목적으로 임시 도메인을 발급받아 테스팅하기에 유용
  ⠀
• 개발 영역이 나누어져있는 환경에서 통신테스트 할 때 유용하게 사용
  ⠀
  👉 프로젝트 때 다른 사람이 임시 도메인으로 내 로컬 환경에 접속하여 통신 테스트를 해볼 수 있음 !
  ⠀
  [참고] https://ngrok.com/docs/secure-tunnels#what-are-ngrok-secure-tunnels

1. 공식 홈페이지에서 ngrok 설치 !

2. 압축 해제 후에 ngrok.exe 실행

3. ngrok http 8080 하면 아래와 같이 Forwarding 부분에 가상 주소가 만들어진 것을 확인할 수 있음
   

4. 이후 postman에서 해당 주소로 여러 명령을 내려줄 수 있음 ! ㅎㅎ
   ( 인터넷으로 주소를 치고 들어가도 가능 ! )
   

5. 그리고 ngrok 터미널을 보면 내가 보낸 요청들의 상태 결과가 어떻게 나타났는지 확인 가능
   

💥 ngrok 사용 시 CORS 에러

➜ ngrok 이용해서 내 프로젝트를 웹에서 띄우고 post 요청을 했는데 CORS 에러가 났다 !
흠 나는 분명 @CrossOrigin 애너테이션도 넣고 WebConfig 클래스도 생성했는데 정말 이상한 일이었다..!!
⠀

💡 해결 방법 )

➜ 홈페이지 로그인해서 토큰을 발급 받고,
ngrok config add-authtoken 내토큰 명령어로 토큰을 추가해준 후에,
ngrok http --host-header=rewrite 8080 이 명령어로 8080 포트의 가상 서버 주소 받기 !
이 후 나오는 주소로 들어가면 CORS 에러가 나지 않고 요청/응답이 잘 온다.
대충 ngrok가 요청을 대신 받는데 막아서 이런 에러가 발생하는 것이라고 한다 !

---

💡 프로젝트 내 파일들 설명

• .gradle
  ➜ gradle 이 사용하는 폴더
  ➜ task 로 생성된 파일이 저장됨
  ➜ 개발자가 편집하는 경우는 거의 없음

• .idea
  ➜ 로컬 IntelliJ IDE 구성이 포함된 폴더

• gradle
  ➜ gradle 이 사용하는 폴더
  ➜ gradle 환경을 정리한 wrapper 파일이 저장되어 있음

• src
  ➜ 프로젝트 폴더로 각종 소스코드와 리소스 파일이 들어가 있음

• main
  ➜ java 소스 코드가 들어 있음

• test
  ➜ test 파일이 들어 있음

• .gitignore
  ➜ git 이 무시할 파일들을 명시한 것

• build.gradle
  ➜ gradle 의 빌드 설정 파일
  ➜ groovy 언어로 작성되어 있음
  ➜ 여기에 dependency 명시

• gradlew
  ➜ gradle 의 명령 파일 ( macOS / Linux 용 )

• gradle.bat
  ➜ gradle 의 명령 파일 ( windows 용 )

• setting.gradle
  ➜ 프로젝트 설정 정보 파일

---

🌈 느낀점

이번에는 내가 직접 To-Do App을 처음부터 끝(아마도 끝 ㅠ)까지 만들어봤는데
사실 처음에는 이걸 어케해.. 이렇게 생각했었는데
생각보다 지금까지 배운 것들을 써먹으니까 이렇게 하는 거구나 ~ 하는 감이 잡혔다 !!
그래서 물론 아예 안보고 내 생각대로만 한 건 아니지만
그래도 어떻게 해야한다는 감을 잡았다!!
사실 이게 postman / h2 / 웹 상에서는 요청 응답이 잘 오긴 하는데
아직까지는 h2의 데이터가 웹 상으로 들어갔을 때 남아있지 않고, 웹 상에서 추가를 해도 h2에 들어가지를 않아서 더 리팩토링 할 것이다 ㅠㅜ