본문 바로가기

react9

파일 업로드, 다운로드, 이미지 미리보기 구현(Spring boot With React) 들어가기  Spring boot로 프로젝트  도중 채팅방을 구현하면서 채팅 내용뿐만 아니라 파일을 업로드, 다운로드할 수 있도록 추가하려고 한다. 그러기 위해선 파일을 업로드 후 서버에서 파일을 보관하고, 다운로드 기능을 학습해야 한다. 이 글에선 간단한 프로젝트로 파일 업로드, 다운로드 기능을 Spring boot, React로 구현하는 과정을 담았다.HTTP를 통한 파일 업로드, 다운로드를 구현하였다. 업로드할 때는 MultiPartFile로 파일을 받고, 다운로드 시에는 byte[]와 같은 형태로 파일을 반환하도록 하였다.(또 다른 방법으로는 ResponseEntity가 있다고 하지만 이 글에서는 사용하지 않았다.)  java 17, spring boot는 3.2.3를 사용하였고 데이터베이스는 h2.. 2024. 5. 30.
Spring boot with React: STOMP를 통해 채팅 시스템을 구현해보자(With Mysql, MongoDB)(2) 들어가기  이 글은 https://khdscor.tistory.com/121에서 이어진다. 여기선 의존성, Config 파일 등 세부적인 파일을 다루지 않고 바로 비즈니스 로직을 작성한 과정을 담았다. 이에 대해 궁금한 것은 이전 글을 참고하길 바란다.이 글에선 Mysql과 MongoDB과 함께 Spring boot와 React 연동 및 STOMP를 통한 간단한 채팅 시스템을 구현하는 과정을 작성하였다. 참고로 Spring boot 버전은 '3.2.5'이다.구현한 내용은 크게 3가지로 아래와 같다.1. 채팅방 리스트 조회, 새 채팅방 생성 2. 채팅방 별 이전에 작성한 채팅 리스트 조회3. 메시지 전송Mysql에는 채팅방 테이블만, MongoDB에는 채팅 내용 컬렉션만을 생성할 것이다.서번 단(Sprin.. 2024. 5. 17.
Spring boot with React: STOMP를 통해 채팅 시스템을 구현해보자(With Mysql, MongoDB)(1) 들어가기  Spring boot로 채팅방을 구현하는 프로젝트를 진행하려고 한다. 채팅방은 실시간으로 채팅 내용을 저장할 수 있게 데이터베이스에 저장하도록 생각하였다. 하지만 채팅내용이 보내질 때마다 데이터베이스에 저장을 하는 비용이 발생한다. 이를 위한 해결 방법으로는 메모리에 채팅 내용을 저장해 두고 스케줄링하여 일정 주기마다 데이터베이스에 Bulk Insert 하는 방식, RDB보다 데이터 접근 비용이 적은 NoSQL을 사용하는 방식 등이 있다.나는 두번째 방법을 선택하여 NoSQL 중 MongoDB를 사용하기로 하였다.처음 프로젝트 설정부터 연동 및 React 부분까지 두 개의 글로 나눠서 작성할 것이다.이 글에선 데이터베이스 연동 없이 Spring boot와 React 연동 및 STOMP를 통한 .. 2024. 5. 13.
Docker compose를 통한 Nginx, Spring boot, React, Mysql 연동 및 배포 서론 최근 프로젝트에서 도커를 통해 Spring boot와 React 프로젝트를 진행하면서 리버스 프록시 역할을 수행하는 Nginx를 같이 실행해 보았다. 추가로 Mysql까지 실행하며 모든 컨테이너는 Docker compose에 의해 실행될 수 있도록 구현하였다. Spring boot는 비즈니스 로직을 처리하며 Mysql과 연동하여 데이터를 저장, 처리, 조회하는 기능을 담당한다. React는 사용자와 상호작용하는 부분으로 Nginx 서버를 통해 구동되며, Nginx 서버는 사용자 요청을 url에 따라 Spring boot로 보낼지, React로 보낼지 정하는 리버스 프록시 역할을 수행한다. 이 글에서는 docker-compose를 통해 각 서비스를 배포한 과정을 기록한 것이다. 본론 우선 실행을 위한.. 2024. 4. 7.
docker compose를 통해 배포해보자(springboot, react, redis) 들어가기 프로젝트를 진행하면서 실제 서비스를 위해 반드시 필요한 과정이 배포이다. 배포하는 과정을 통해 다른 사람들이 서비스에 접근할 수가 있다. 나는 프로젝트를 배포한 경험이 여러 번 있지만 그때마다 aws 인스턴스를 새로 만들어서 사용했었다. 그리고 새 인스턴스마다 환경 설정을 하고 필요한 것들을 설치하고 shell 명령어를 입력하는 등 성가신 과정들을 밟았었다. 그리고 로컬 서버에서 동작하던 것이 배포 서버에서는 동작을 못하는 등 배포 서버에 추가적인 설정을 해줬어야 했다.하지만 도커(docker)를 사용한다면 복잡한 환경설정을 하지 않아도 된다. 미리 만들어 놓은 이미지들을 컨테이너로서 실행하기만 하면 된다. 그리고 도커 컴포즈를 사용하면 다중 컨테이너(다중 서비스)를 하나의 파일로 한번에한 번에.. 2023. 11. 17.
Springboot With React: 커서 기반 페이징 기법을 통한 댓글 무한 스크롤 구현 들어가기 현재 진행 중인 프로젝트에서는 하나의 게시글에 있는 댓글을 조회할 때, 프론트 단에서 백엔드 단으로 요청을 할 때, 모든 댓글을 한꺼번에 가져오고 있다. 여기서 문제가 하나 있다면, 매우 많은 댓글이 넘어오게 된다면 DB 내에 매우 많은 '랜덤 액세스'가 일어나게 되어 성능적으로 좋지가 않다. 그렇기에 많이 페이징 방식을 사용해서 일부의 데이터를 조금씩 가져와야 한다. 페이징 방식하면 떠오르는 것은 페이지 번호가 있고 원하는 번호를 누르면 해당 번호의 페이지로 넘어가는 방식과 무한 스크롤 방식이 있다. 진행 중인 프로젝트는 모바일 화면에 맞춰서 개발을 하고 있기에 모바일 UI 에 더 익숙한 무한 스크롤 방식으로 댓글 페이징을 진행하고자 한다. 프로젝트에서는 Springboot, Mybatis, .. 2023. 10. 19.
React: react-router-dom:v6에서 경로 설정 및 PathVariable(경로 변수) 가져오기 과거 프로젝트를 진행할 때 react-router-dom을 v5를 주로 사용했었다.하지만 새로운 프로젝트에서 버전을 따로 등록하지 않고 설치 시 v6으로 설치되어 v5와 다른 부분들 때문에 시간을 뺐긴 경험이 있다.간단하게 경로 설정, PathVarible(경로 변수)를 어떻게 가져오는지 비교해보자. 우선 v5에서다. // App.jsimport React from 'react';import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';import Home from './Home';import Profile from './Profile';function App() { return ( .. 2023. 6. 10.
Jenkins를 활용한 React, Springboot CI,CD 구현(2) 들어가기 이 글은 Jenkins를 활용하여 React, Sprongboot를 배포하는 CI, CD를 구현하는 과정을 작성한 글이며, CD에 중점을 두어 작성하였다. 이전 내용은 아래의 주소를 참고하길 바란다. https://khdscor.tistory.com/67 aws jenkins(docker)를 활용한 react, springboot CI,CD 구현(1) 팀 프로젝트를 진행하다가 개발회사에 다니시는 분께서 개발 회사에서는 본격적으로 개발하기 전에 테스트 서버라는 것을 만들어서 디자이너, 기획 등 다같이 프로젝트 현황을 볼 수 있도록 한 khdscor.tistory.com Jenkins를 통한 CD 1. Jenkins 설정 이전 글까지 자동 빌드를 구현하였다. 이제 남은 것은 자동 배포이다. reac.. 2023. 1. 21.
Jenkins를 활용한 React, Springboot CI,CD 구현(1) 들어가기 팀 프로젝트를 진행하다가 개발회사에 다니시는 분으로부터 들은 얘기가 있다. 회사에서는 본격적으로 개발하기 전에 테스트 서버라는 것을 만들어서 디자이너, 기획 등 다같이 프로젝트 현황을 볼 수 있도록 한다고 하셨다. 확실히 다른 사람들도 모두 개발 현황을 볼 수 있어야 한다고 생각을 하기에 앞으로는 차후를 위해 프로젝트마다 테스트 서버를 항상 구현할 생각이다. 그리고 이를 위해서는 CI,CD 가 이뤄져있어야 편하게 진행을 할 수 있다고 생각한다. 이 글은 인터넷을 찾아보며 CI,CD 구현을 하고 내 생각에 맞춰 작성한 글이다. CI, CD에 대한 개념이 궁금하다면 https://seosh817.tistory.com/104 를 참고하길 바란다. [CI/CD] CI/CD란? - 지속적 통합(Conti.. 2023. 1. 18.

티스토리툴바