합니다, 개발공부📝 합니다, 개발공부📝

ec2에 서버 배포하고 나서 실행하고 나니 프로젝트는 정상적으로 실행되는 것 같은데, 화면에 Invalid host header 오류가 발생하며 화면 표시가 되지 않았다. 검색해보니 webpack-dev-server 2.4.4 에서부터 host check 기능을 넣어 해당문제가 되는 것을 알게 되었고 그러다 다음의 글을 보고 문제를 해결할 수 있었다! https://bytrustu.tistory.com/73 Invalid host header 오류 Invalid host header 오류 토이프로젝트를 하면서 Nodejs + React 로 프로젝트를 하였습니다. 로컬환경에서는 문제가 되질 않았지만 AWS-EC2에서 프로젝트를 실행해서 주소로 들어가면 "Invalid host header" 라.. bytr..

어느정도 리팩토링을 마치고 ec2로 배포하려고하니 계속해서 문제가 발생한다.😖 중간중간 계속해서 실행해보고 미션 공부하면서 프로젝트에 바로바로 적용하도록 수정했으면 이리 고생하지 않았을텐데 증말 〰️ 프론트엔드와 백엔드를 각각 ec2 서버를 생성하고 리버스 프록시를 생성하고 실행하려고하니 prefix로 분리해서 요청을 보내고 싶은데,,, 원래 개발할때부터 prefix를 정해놓고 했어야했는데,,, 실행하려고 보니 이 간단한 분리도 안되어있다. (머리짚🤦‍♀️) 그래서 한번에 적용하려고 방법을 찾게 되었다. Springboot server.servlet.contextPath=/api Springboot에서 api prefix를 적용하는 방법은 Controller에서 @RequestMapping을 이용하여 적..

웹 앱에 대한 서버와 프론트엔드 (rest api로 프록시를 설정해서 연결 완료) 개발을 완료했다면, 이제 데이터 베이스와 함께 앱 배포를 해야한다. (여기서 거진 5일을 소비했다...^^) 개발 겨우 다해놨는데 외않되,,,?ㅎ 이러한 사태를 방지하기 위해서 꼭 애초에 프로젝트 구성을 잘 짜는 것이 중요하다. 프로젝트를 프론트엔드, 백엔드 따로따로 모두 완성해서 다른 포트에 실행하는 상태라면 다음의 순서대로 배포해보자. frontend를 backend 폴더 안으로 옮겨주기 이 프론트엔드를 백엔드로 옮겨주기란 것은 다음과 같이 인텔리제이로 완성된 백엔드앱 안에 프론트 엔드를 넣어주는 것이다. 📦APP ├── 🗂backend │ ├── src ├── 🗂frontend 처음의 이러한 구조에서 📦APP ├── ..

로그인 창에서 많이 볼 수 있는 소셜로그인 기능을 만들어보자. (spring-react에 이어 두번째 소셜 로그인!) 여기서는 카카오에서 code부분을 access_token으로 생각해서 굉장히 헤메였다...세상에나 마상에나 이런짓을...😵‍💫 (결국 code로 다시 access_token 받아와서 잘 해결했음!) REST API Node js에서 소셜로그인을 구현해내는 방법에는 sdk를 이용한 방법도 존재하지만 Rest api를 통해서 구현하기로 했다. (백엔드에서 받아서 받은 토큰으로 사용자 정보를 처리할 수 있게) 리액트에서 모든과정은 authorization_code를 받고 나서 access_token을 받아오도록 하고 싶었으나 frontend에서 토큰을 가져오려 시도하면 네이버는 cors오류가 ..

로그인 창에서 많이 볼 수 있는 소셜로그인 기능을 만들어보자. 여기서 인증이 완료된 후 생성한 토큰을 어떻게 프론트엔드로 다시 보낼까에 대한 부분이 어려웠다 😵‍💫 (결론은 쿠키를 통해서 확인된 uri에 생성된 토큰 붙인 새로운 uri 생성하고 다시 보내기...!) 구글 프로젝트 계정 만들기 https://console.cloud.google.com/apis Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 먼저 홈페이지에 들어가서 로그인을 해준 후 , API 및 서비스 항목으로 들어간다. 적용할 프로젝트를 생성해준다. OAuth 동의화면으로 가서 앱 정보를 입력해준다. ..

리액트에서 onClick 이벤트를 발생시키는데 infinite loop에러가 발생하였다. React Infinite Loop Error onClick={handleOnClick(데이터)} 리액트에서 발생하는 이 무한루프 에러는 onClick 이벤트 렌더링시에 state를 상태를 변경시키는 함수가 있다면 리렌더링이 계속 발생하면서 발생하게 된다. 해결방안 onClick={()=>handleOnClick(데이터)} 다음과 같이 화살표 함수형으로 변경해주면 오류가 해결된다. (참고한 사이트) https://born-dev.tistory.com/4 [React] Too many re-renders. React limits the number of renders to prevent an infinite loop...

spring에서 파일업로드 기능을 실행해보자. 파일을 저장하기 위해서는 spring프로젝트 내부에 파일저장 폴더가 위치해야 한다. File Upload Utils 먼저 파일을 업로드하는 util코드를 작성해준다. saveFile을 이용해서 파일폴더가 존재하지 않으면 폴더를 만들어주고 파일을 저장한다. cleanDir는 프로필이미지를 저장하는 경우에 아이디를 이용한 폴더안에 이미 파일이 존재하면 기존파일을 삭제한 후에 새로 파일을 저장해준다. import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.io.InputStream; import java.nio.file.Files; import ja..

nodejs에서 socketio를 이용해서 클라이언트와 서버의 채팅을 구현한다면, spring에는 stompjs가 존재한다. STOMP stomp는 websocket와 같이 양방향(클라이언트-서버)네트워크 프로토콜로 HTTP에서 모델링되는 프레임기반의 프로토콜이다. spring에서 stomp를 사용한다면, spring websocket 어플리케이션은 Stomp Broker로 작동하게 된다. websocket에서는 text나 binary데이터를 전송하면서 추가적인 정보(예를들면, 어디로 route하고 어떻게 처리할지)의 부재로 추가코드작성이 불가피해진다. 이를 해결하기위한 서브프로토콜이 stomp이다. stomp덕분에 CONNECT, SUBSCRIBE, UNSUBSCRIBE, ACK, SEND와 같은 웹소..