Java

[NextJS/Ts] 카카오 지도 띄우기

👻 서론 부동산 마켓을 사이드 프로젝트로 생성하다가, 해당 매물의 위치를 띄워줘야 하는 일이 생겼다. 오픈 API를 사용해서 지도 띄우는 것은 처음이라 해당 부분을 기록해 둔다. ※ 사용 프레임워크, 라이브러리, 언어이다. NextJS TypeScript TailwindCss ▶ Next.js에서는 external synchronous scripts are forbidden 에러가 발생하여 해결방법이 포스팅을 참고해 기록한다. 🍁 사용 방법 1. 지도를 담을 div 생성 ( ../components/Map.tsx ) interface MapProps { latitude: number; longitude: number; } function Map({ latitude, longitude }: MapProps..

2022. 11. 16. 10:47

Java

[React] .env 환경 구분 (prod / dev / local)

개요 서비스를 운영하다 보면 운영, 개발, 로컬에 세팅을 다르게 해주어야 할 경우가 많다. 만약 하나의 properties를 사용하게 되면 현재 서버에 해당하는 properties로 직접 개발자가 매번 변경해야 한다. 이럴 경우 properties의 수정 누락으로 에러가 발생하는 경우가 빈번하다. env 파일 사용 방법 🎃 파일의 내용 REACT_APP_SERVICE_VERSION=1.8.7 REACT_APP_SERVICE_TYPE=S REACT_APP_API_URL=https://api.staging.myservice.com 변수명의 생성은 무조건 REACT_APP_ 으로 시작해야 합니다. 🎃 JSX 소스코드 사용법 v.{process.env.REACT_APP_SERVICE_VERSION} {proce..

2022. 10. 21. 16:21

Java

[Spring] Profiles - 환경 구분(dev / prod / local)

✔ 개요 서비스를 운영하다 보면 운영, 개발, 로컬에 세팅을 다르게 해주어야 할 경우가 많다. 만약 하나의 properties를 사용하게 되면 현재 서버에 해당하는 properties로 직접 개발자가 매번 변경해야 한다. 이럴 경우 properties의 수정 누락으로 에러가 발생하는 경우가 빈번하다. 또한 환경변수 변경은 Git을 통한 형상관리도 할 수 없다는 단점도 존재한다. 그래서 스프링 프로젝트를 개발할 때는 환경변수를 사용하기보다 스프링의 프로파일(Profile) 기능을 사용하는 것이 좋다. 따라서 명시적으로 런타임 환경을 구분할 수 있는 Spring Boot Profiles를 사용한다. 런타임 환경을 구분할 수 있는 Profiles를 제공한다. Activated 된 profile에 따라서 자동적..

2022. 10. 21. 15:48

Java

[Nginx] 설치 및 url 서버 이미지 생성

서론 이미지를 API 서버에 저장을 하고, 해당 이미지를 다른 서버에서 표출시키는 API를 java & spring boot로 개발했다. 그리고 해당 JAR 파일을 리눅스 백그라운드에서 nohup java -jar 명령어로 배포했다. 그런데 여기서 문제가 발생했다. 이미지를 해당 API 서버의 특정 경로에 저장을 시켰는데, URL로 다른 서버에서 불러오려고 하니 불러올 수가 없었다. 이처럼 프로젝트를 진행하다 보면 이미지 서버를 사용하는 경우가 많다. 파일을 해당 이미지 서버에서 다운로드하여서 보여주는 것보다, 이미지 서버에 있는 그 자체의 URL을 통해서 불러오는 것이 효율 적이다. NGINX를 설치하고 웹서버로 올리고 몇 가지의 설정만 해주면 해결되었다. Nginx란? Nginx는 경량 웹 서버입니다..

2022. 10. 21. 11:12

Java

[React] react.js 어플리캐이션 404 not found 에러 (Nginx 서버)

🌻 개요 개발 환경에서 react 애플리케이션의 테스트를 끝내고, Nginx 서버에 업로드를 하였다. 응용 프로그램이 잘 동작하고 있어 데이터베이스에 저장이 되는 등 모든 것이 잘 작동하였다. 하지만 다른 페이지로 넘어가면서 새로 고침이 되는 순간 404 not found 에러가 발생했다. window.location.reload()를 쓴 부분에서 모두 404 not found 에러가 발생하는 것이었다. 로컬과 개발 환경에서 테스트를 진행했을 때는, 아무런 문제가 없었기에 당황스러웠다. 다행히도 해당 에러에 대한 해결방안을 찾아서 아래에 한글로 번역해 둔다. 404 error? 404는 http 프로토콜의 코드입니다. http 프로토콜이란 웹을 구성하는 일종의 규약이라고 보면 된다. 404 not fou..

2022. 10. 20. 09:15

Java

[Spring] Front에서 보낸 데이터를 서버에서 받는 몇 가지 방법

서버와의 연동 작업을 진행하면서, 제일 중요하다고 생각하는 건 데이터를 어떤 식으로 주고받을지가 제일 중요하다고 생각한다 1. 배열 전송하기 Clinet Method : POST Content-type : application/x-www-form-urlencoded; charset=UTF-8 $.ajax({ url: "/test", dataType: "json", contentType: "application/x-www-form-urlencoded; charset=UTF-8", type: "post", data: {ids : [1,2,3]}, success: function (res) { }, error: function (request, status, error) { } }); Server @PostM..

2022. 9. 27. 15:08