I can do it(Feat. DEV)

이번에 Spring Boot + React + Gradle 프로젝트를 진행하게 되었음. 설명이 잘 되어 있는 블로그를 참고해서 초기 세팅을 하는데 React 정적 파일들 설정을 어떻게 해야 하는지 몰라서 찾아보며 정리함. ※ Spring Boot + React 프로젝트 정적 파일 관련 설정 방법 React와 Spring Boot를 함께 사용하는 경우, React에서 빌드된 정적 파일들을 Spring Boot 애플리케이션과 함께 배포할 때, 일반적으로 Spring Boot의 정적 파일(Static files) 디렉토리에 위치시키는 것이 일반적입니다. 보통 React 프로젝트는 빌드를 진행하면, build 디렉토리에 빌드된 정적 파일들이 생성됩니다. 이후 Spring Boot 프로젝트의 정적 파일 디렉토리(..

Spring Boot + React 프로젝트를 진행하는데 초기 세팅을 끝내서 GitLab(필자의 원격저장소)에 push 진행. ※문제 상황 1. react 파일 경로인 /app 경로의 파일만 git에 add가 안됨. 혹시 몰라서 .gitignore 파일에 찾아봐도 해당사항 없음. 애초에 .gitignore 파일에 있으면 아예 제외되야 하는데 git status를 치면 /app 경로를 관리는 하고 있음. 2. submodule을 추가하라는 git 관련 hint 메세지가 나옴. 3. 원격 저장소에 가면 폴더는 올라갔는데 파일 접근이 안됨. 이유를 몰라서 갓글에 검색해 보니 하위 폴더인 app 경로 안에 .git 파일이 있어서 문제가 됐던 것! 🔔해결방법 1. 하위 폴더안에 .git 폴더 삭제처리 - 필자의 ..

담당자에게서 몇몇 사용자들이 예약 관련 매크로를 사용해 예약을 한다는 항의 전화가 자꾸 와서 자동 입력 방지 라이브러리를 추가하여 매크로를 방지해보려고 함. 여기서 잠깐 Captcha란? ※Captcha란? Completely Automated Public Turing test to tell Computers and Humans Apart의 약자로, 컴퓨터와 사람을 구분 짓기 위한 완전 자동 튜링 테스트라고 함. 찾아보니 Captcha 종류가 여러 개였는데 아마 우리가 가장 잘 알고 있는 게 구글의 reCAPTCHA가 아닐까 싶음. (사실 필자는 이 친구 별로 안 좋아함. 인증 스트레스🤬🤬) 어르신들이 많이 쓰는 예약사이트라 reCAPTCHA를 넣으면 민원이 최소 10배는 늘 것 같아서 제외함. 담당자 ..

시설을 대관해주는 사이트를 개발하여 유지보수를 맡고 있었는데 시설이 사용 중이 아닌데 예약이 되었다는 담당자의 연락을 받음. 사용자 화면에서 예약 1, 예약 2 화면이 있는데 시설이 사용 중이지 않으면 예약 1 화면에서 예약 2 화면으로 넘어가지 못하도록 처리를 했었음(개발 당시). 사용자가 뚫은 건지 오류 때문인지 확실히 알 수 없으나, 재발하면 안되는 상황이기에 처리가 필요했음. 먼저 react를 사용한 뷰단에 처리를 시작할려는데, react는 데이터를 주고받는 게 rest ful API형태라서 jsp 같이 화면에서 화면으로 넘어갈 때 처리를 할 수가 없었음. 고심 끝에 이와 같이 처리하기로 함. 1. 예약 1 화면 > 예약 2 화면으로 넘어갈 때 클릭 이벤트 맨 위에 시설의 사용 유무를 판단하여 처..

앞서 팝업창 띄우기까지 했지만 기능 추가 요청이 들어옴. 바로바로 하루 동안 보지 않기 기능! 개발엔 안 되는 게 없다는 마인드를 가진(x) 가지려고 노력하는 나. 바로 기능 개발 시작. 예전에 만들어봤었던 방식으로 진행하겠음. 코드는 2022.10.06 - [개발자 모드/React] - React 팝업창 띄우기(1) React 팝업창 띄우기(1) 관리자 화면에서 등록한 팝업창을 사용자 화면에서 띄우기 위해 팝업 컴포넌트를 만들어서 작업하던 중 다른 방법이 없을까? 해서 갓글에 검색. 찾아보니 React-Modal이란 라이브러리 발견. 여기서 precious-value.tistory.com 전에 만들어놓은 팝업창 그대로 사용하겠음. 먼저 위 사진처럼 하루 동안 보지 않기 버튼을 추가해줌. //하루동안 보..

관리자 화면에서 등록한 팝업창을 사용자 화면에서 띄우기 위해 팝업 컴포넌트를 만들어서 작업하던 중 다른 방법이 없을까? 해서 갓글에 검색. 찾아보니 React-Modal이란 라이브러리 발견. 여기서 잠깐. ※ Modal 이란? - 특정 이벤트에서 확인하거나 특정 이벤트를 날려주지 않으면 원래 하던 작업을 계속 이어갈 수 없는 새창. - 특정 이벤트에서 새창을 띄웠을 때 원래 하던 작업을 계속 이어갈 수 있게 해놓은 것이 모달리스라는 반대 개념도 있음. 이거다 싶어서 Modal을 사용해서 팝업창을 만드는데 불편하거나 안맞는 점들이 있음. 1. 필자는 원래 쓰던 디자인을 Modal에 맞게 변경해야 함. 2. 팝업이 뜨더라도 원래 하던 작업을 계속 할 수 있도록 하고 싶음. 3. 검증이 필요. 4. 보통 re..

비가 주륵주륵 오는 걸 감상하며 평화롭게 프로젝트 프론트단을 만들던 중 리액트에서 스크립트 기능이 필요해짐. 예를 들어 상단 메뉴에 마우스를 올렸을 때 숨겨진 서브 메뉴를 보여주는 기능, 이런 탭 클릭했을 때 임팩트주는 기능 등등... 동적으로 style 입혀주는데 스크립트로 원래 하던것처럼 document.getElementById(id).style.color = 'red'; 이런 식으로 ID 값을 추적하는 방식으로 할려고 했으나 생각해보니 리액트는 다른 방법이 있을 것 같아서 갓글에 검색. 검색해보니 useState라는 리액트 훅으로 상태를 사용해 동적으로 style을 변경할 수 있다고 함. 위의 공지사항, Q&A 탭을 선택했을 때 style을 변경하는 기능을 만들어 봄. import React, {..

list 화면에서 컴포넌트를 사용해 detail 화면으로 이동하는데 url에 파라미터를 추가하는 방식으로 진행했었음. to={//기존방식 "/list/detail/" + list.id + "?page=" +//파라미터들(검색 조건) currentPage + "&startDay=" + encodeURI(startDay) + "&endDay=" + encodeURI(endDay) } BUT 시각적으로 파라미터를 주렁주렁 달고 있으니 복잡해보이고 URL도 길어지는 등 별로라고 생각됨. 갓글에 검색해 보니 Router Props란 좋은 기능이 있었음. 📢참조 https://velog.io/@sham/Router-Props-link%EB%A1%9C-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94..