프로젝트 개발이 어느 정도 끝나서 내가 빌드 배포를 맡게 되어서 진행하게 되었다. 간단한 프로젝트여서 도커 사용 없이 빌드 배포하는 방법을 선택했고, Maven 프로젝트이며 EC2는 우분투 환경으로 인스턴스를 만들었다. DB는 기존에 EC2 안에 설치해두었기 때문에 따로 할 필요는 없었다. React 애플리케이션을 먼저 빌드하여 Spring Boot의 정적 리소스 폴더에 통합한 후, 단일 JAR 파일로 배포하는 방식을 다룬다. 배포 과정에서 발생할 수 있는 문제점들과 해결 방법도 함께 안내한다. 1. 초기 빌드 및 배포 과정1-1. React 빌드 자동화 설정React 프로젝트에서 빌드 후 자동으로 Spring Boot의 static 폴더로 파일을 복사하도록 설정한다. package.json 파일에 다..

개발을 하다 보면 컴포넌트 간에 데이터를 주고받아야 하는 상황이 자주 발생한다. React에서는 기본적으로 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달한다. 하지만 애플리케이션이 복잡해지면서 여러 레벨을 거쳐 데이터를 전달해야 하는 '프롭 드릴링(Prop Drilling)' 문제가 생기게 된다. 이러한 문제를 해결하기 위해 React에서는 Context API를 제공한다. Context API란?React 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해주는 기능이다. 일반적으로 전역적으로 필요한 데이터(사용자 인증 정보, 테마, 언어 설정 등)를 관리하는 데 유용하다. Context를 사용하면 중간 컴포넌트들을 통해 props를 전달하지 않고도 컴포넌트 트리의 어느 부분에서나 필..

오늘은 웹사이트의 사용자 경험을 개선하기 위한 사이드 네비게이션 컴포넌트를 개발했다. 사용자가 웹페이지를 스크롤할 때 특정 섹션으로 쉽게 이동할 수 있도록 하는 기능이 필요했다. 특히 채용 정보를 보여주는 웹사이트에서 '추천 공고', '인기 공고', '주목받는 공고'와 같은 주요 섹션으로의 빠른 이동을 가능하게 하고, 페이지 상단으로 돌아갈 수 있는 기능도 포함시켰다. 구현 과정 및 코드 설명먼저 필요한 라이브러리와 스타일을 임포트했다. 특히 아이콘은 Lucide React 라이브러리를 사용하여 시각적으로 직관적인 네비게이션을 제공하고자 했다.import React, { useEffect, useState } from "react";import styles from "../../assets/css/m..

공모전 준비를 하면서 오랜만에 프론트 작업을 하게 됐다. 평소에도 프론트 작업할 때는 공통적인 레이아웃 구조나 스타일을 먼저 정해두는 게 중요하다고 생각하는 편이다. 그래서 이번에도 초기 세팅을 각자 맡아서 하기로 했는데... 프론트 세팅을 맡은 팀원이 작업을 잘 안 해서 결국 내가 화면 개발을 하면서 레이아웃 구조까지 손대게 되었다.그 과정에서 라우팅 구조에 대해 고민한 내용과 중첩 라우팅(Outlet) 방식으로 구조를 바꾸게 된 이유를 정리해보려 한다. 팀원이 처음 만들어둔 라우터 구조우선 팀원이 만든 초기 라우터 구조는 아래와 같았다. 최상위 App.js에서 각각의 기능 영역(User, Vendor, Admin)을 별도의 라우트로 분리한 구조였다.// App.jsimport { BrowserRout..

프로젝트를 진행하면서 자연스럽게 소셜 로그인 구현을 맡게 되었다. 처음에는 프론트엔드에서는 소셜 로그인이 비교적 간단하다는 말을 들었지만, 직접 구현해 보니 생각보다 복잡한 과정이 많았다. 특히 OAuth 2.0을 기반으로 한 로그인 프로세스를 처음부터 이해하고, 카카오, 네이버, 구글 등 서로 다른 방식의 API를 다뤄야 한다는 점에서 혼란이 있었다. 처음에는 카카오 로그인이 가장 쉬운 것 같아 이를 먼저 구현하기로 했다. 하지만 카카오 개발자 문서를 읽어보면서도 프론트엔드와 백엔드의 역할이 명확하게 잡히지 않아, 다른 사람들의 블로그와 공식 문서를 참고하며 하나씩 개념을 정리해 나갔다.특히, 소셜 로그인은 인가 코드, 액세스 토큰, 사용자 정보 조회 등의 과정이 단계적으로 이루어지기 때문에 처음에는 ..

여행 일정 수정 시 사용자가 더 편리하게 순서를 변경할 수 있도록 드래그 앤 드롭 기능을 추가했다.  기존에는 체크박스를 이용해 개별 선택하거나 전체 선택 후 삭제하는 방식으로 일정 순서를 조정해야 했다.그러나 삭제 후 다시 추가하는 방식은 번거로웠고, 보다 직관적인 조작을 위해 드래그 앤 드롭과 함께 휴지통 아이콘을 활용한 즉시 삭제 기능을 추가했다. 검색을 통해 react-beautiful-dnd를 알게 되었고, 이를 사용하면 Drag & Drop을 위한 기본 구조를 제공해 복잡한 로직을 간단하게 해결할 수 있었다.드래그 앤 드롭 기능을 직접 구현하려면 마우스 이벤트를 감지하고, 요소를 이동시키며, 데이터 순서를 조정하는 복잡한 로직을 작성해야 한다.이러한 복잡성을 줄이기 위해 react-beauti..

프론트엔드와 백엔드 간 데이터 교환을 위해 FastAPI와 React를 연동해야 했다.사용자는 여행 지역, 날짜, 연령대, 동행 인원, 그리고 여행 목적을 입력한 뒤, '완료' 버튼을 누른다. 그러면 AI 에이전트가 입력된 데이터를 분석하여 최적의 여행 경로를 생성한다. 프론트엔드에서 백엔드로 데이터 전달 및 처리 과정1. React 상태 관리 - 여행 계획 입력 폼이 코드는 React의 useState 훅을 사용하여 여행 계획 입력 폼에서 필요한 상태를 관리하는 부분이다. 사용자가 입력하는 지역, 날짜, 연령대, 목적 등의 정보를 저장하고 조작할 수 있도록 설정되어 있다.지역 리스트(allRegions)는 데이터베이스(DB)에서 가져오며, 사용자가 입력한 값에 따라 필터링된 지역 리스트(filtered..

팀 프로젝트하면서 React에서 화면 퍼블리싱을 하면 꼭 내 화면 css가 망가지는 불편했던점이 있었다.className이나 id에 설정한 이름이 같으면 따로 import를 하지 않았는데도 다른 파일에 전역으로 css가 먹혀서 내 css가 망가져버린다. 그래서 서로 className이나 id에 자기 이름 이니셜을 넣어서 설정하거나 겹치지 않게 아예 길고 복잡하게(?) 설정을 하는 방식으로 진행을 했었다. 나는 이 불편함을 해결할 방법을 찾아본적은 딱히 없고 원래 그런가보다.. 리액트 버그구나.. 하고 넘겼다.이번에 진행하는 프로젝트 팀에서는 팀원 한명이 css를 모듈화하면 겹칠일이 없다고 무언가를 알려주었다.처음에 말로만 설명을 들으니 어떻게 사용하는건지 모르겠어서 팀원에게 작업한 파일을 push 부탁하..

타입스크립트 설치를 끝내고 이제 본격적으로 퍼블리싱 작업에 들어갔다.처음엔 페이지가 많이 안나올거라고 예상했는데 자꾸 이것저것 추가하는 바람에 늘어나버렸다.게다가 팀원중에 리액트를 쓸 줄 아는사람이 나 뿐이었다.그래서 프론트 작업은 나와 리액트를 해보고 싶다는 팀원 한명과 둘이서 진행되었다.. 프로젝트 폴더 구조먼저 프로젝트 폴더 구조를 정리했다.원래는 크게 pages, assets 폴더를 생성하고 안에 각각 하위 폴더를 추가해서 tsx 파일은 pages에 넣고 css 파일은 assets에 넣었는데 팀장이 폴더 구조가 마음에 들지 않았는지  tsx파일과 css 파일을 같이 넣어두는 방식으로 바꿔버렸다.내가 했던 폴더 구조src│├── assets│ └── css│ └── user│ ..

멘토님께서 React 사용하면서 TypeScript를 꼭 사용하라고 하셔서 세팅한 과정을 정리해봤다. 사실 리액트 프로젝트를 생성할때 타입스크립트로 설치해야 더 좋은것 같다.하지만 나는 그 사실을 몰랐다.. 중간에 설치하면 바로 되는줄 알았다....기존 프로젝트에 설치 할 경우 오류가 뜬다고 적혀있던 글들이 많았다. (나도 뜸) 처음에는 이 명령어를 실행했다.npm install --save typescript @types/node @types/react @types/react-dom @types/jest 그리고 설치된 패키지 확인을 위해 다시 확인했다.npm list typescript @types/react @types/react-dom 그런데 확인하는 과정에서 오류가 떴다.C:\Users\dud99..