목록2024/08 (25)
한바다
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bXxoJA/btsJmuJxP5U/VY0ckbb5CQGl86u14zaDoK/img.png)
☑️ 금일은 자바와 리액트를 합쳐주는 작업을 진행하였다! 우선 npm run build가 무엇인지 알아본다: npm run build는 애플리케이션을 배포할 준비가 된 최적화된 상태로 패키징하는 명령어이다. 이 과정에서 코드 압축, 모듈 번들링, 환경 설정 등을 통해 최종적으로 배포 가능한 파일을 생성하여 개발 중인 소스 코드를 실제 서비스에 적합한 형태로 변환한다. ✔️ 리액트에 npm run build 실행 시킨다. 성공시 build파일이 생성된다자바 - gradlew build리액트 - npm run build- build 라는 파일을 타서 jar 파일을 생성 react도 합쳐서 jar로 실행할 수 있도록 만들어줘야 함 [에러상황]npm run build 작성시 아래와 같은 에러가 발생하였다!..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/belWL7/btsJjWf04O8/LsBqdjTzBkjNZKPDZCLxvk/img.png)
☑️ AWS EC2(아마존 클라우드 컴퓨팅 서비스)aws에서 회원가입을 진행후 아래와 같은 화면이 나왔다.그리고 나서 AWS EC2(Elastic Computer Cloud)서비스로 들어갔다.EC2는 AWS에서 제공하는 클라우드컴퓨팅 서비스다. 컴퓨터를 빌릴 수 있는 서비스로 집에서 컴퓨터를 사용하듯이,EC2를 통해 인터넷으로 컴퓨터를 빌려서 사용할 수 있다. 인터넷만 있으면 어디서든 접속 할 수 있다.인터넷을 통해 컴퓨터를 빌려 쓸 수 있는 서비스!! AWS EC2를 사용하기 위해 해당페이지에서 왼쪽 메뉴> 인스턴스>인스턴스 시작을 클릭한다.인스턴스 : 크라우드의 가상서버인스턴스 시작을 투르고 아래의 페이지로 이동이 된다!- pem(프라이빗 키파일형식,안전) / ppk - 키페어 생성- 보안그룹생성 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/pM0Gx/btsJjUnSQGv/b4kFCwCW0uaOglwoWKuFKK/img.png)
☑️ 깃 브랜치 복사하는 방법git clone --branch (브랜치명) 깃 주소(예시)git clone --branch jin https://github.com/kimjinwoo23/Final.git또한 기존에 다운받은 파일 중에 Final이라는 폴더가 있으면 안된다!!☑️ 다운받은 폴더를 이클립스에 런치를 할때 아래와 같은 에러가 뜰 때가 있다!▶ 위와 같을 경우 메타데이타를 삭제 해주면 된다!메타데이터는 워크스페이스를 구성할 때 생성됨으로 삭제해도 크게 상관이 없다. ☑️다운받은 폴더를 리액트에서 설치시 우선 모듈이 다운되어 있는지 확인 후 없을 시 npm i를 시작한다!
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bKamrl/btsJjpOIXyb/Yy7vCqWQWQ6foBWlRahKJK/img.png)
❇ 스프링부트 자바 jar로 배포하기이클립스 전산을 열어 스프링부트를 실행시킨 후(백앤드 실행) 프론트앤드 (리액트)를 실행하여localhost로 접속하였는데 스프링부트자바를 jar로 배포시 이클립스 전산을 키지 않고cmd창에서 실행 시킬 수 있다. ✓ 우선 위와 같은 작업을 진행하기 위해 첫번째로 해당폴더 경로 build.gradle이 있는 위치에서 cmd 창을 열어준다✓ 백엔드 자바 배포cmd 창에 gradle build 입력후 엔터를 친다!C:\Users\user1\Spring-React-Workspace\JPA_chicken>gradlew build[ gradlew build 입력시 나온 에러내용]Starting a Gradle Daemon, 5 incompatible and 1 stopped D..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bKxijj/btsJgxA9311/SBzUIEyFm0K2KUIKymNZik/img.png)
☑️ 리액트 로고 변경리액트 로고 변경은 public > index.html에서 진행한다[변경전 화면] [변경전 코드]public > index.html React -> 이 부분에 로고를 실시간으로 변경하기 위해서png파일을 ico로 변경한다!! 파일을 변환해주는 사이트는 아래 두곳이 있다!https://convertio.co/kr/png-ico/ PNG ICO 변환 (온라인 무료) — Convertiopng 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.convertio.cohttps://cloudconvert.com/png-to-ico PNG to ICO | CloudConvertCompress Mer..
☑️WebConfig란?WebConfig파일은 웹 구성에 대해 지정하는 내용이 담겨 있는 설정 파일이다.스프링부트에서는 WebMvcConfigurer 인터페이스를 구현하여 WebConfig 파일을 작성한다.'WebConfig'클래스는 보통 '@Configuration'어노테이션을 사용하여 설정 클래스임을 명시한다.import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpubl..