React

리액트로 웹 개발을 하기 위해 프로젝트를 생성하고 초기 세팅을 진행해야 한다. 아마 개발이 처음인 경우에는 어디에서부터 어떻게 진행해야 할지 몰라 막막할 수 있는데, 이런 분들에게 조금이나마 도움이 되고자 예전에 진행했던 프로젝트의 초기 세팅 방식을 공유하려고 한다.해

리액트 프로젝트에서 페이지 간 이동 시 기존 페이지의 스크롤 위치 그대로 이동하게 되는 문제가 발생하게 된다. 해당 문제는 Ract Router의 기본 동작이 브라우저의 기본 동작과 충돌하기 때문에 발생하게 되는데, ScrollToTop 컴포넌트를 만들어 main.js

리액트 프로젝트에서 게시글 작성 기능을 위해 마크다운을 출력해야 하는 경우가 있다. 마크다운 기능은 자체적으로 구현하기에 상당히 난이도 있기 때문에, 외부 라이브러리를 사용하여 구현하는 방법을 추천한다. 오늘은 여러 라이브러리 중 react-markdown을 사용하여

React에서 상태 관리를 할 때 가장 대표적으로 사용하는 것은 useState이다. 하지만 여러 컴포넌트에서 동일한 상태를 공유해야 하는 경우, props로 상태를 계속 내려주는 과정이 복잡해질 수 있다.이러한 경우에는 전역 상태 관리 라이브러리를 사용하는 것이 효율

웹에서 텍스트 길이가 컨테이너 너비를 초과할 경우, 레이아웃이 깨지거나 불필요한 스크롤이 발생하는 등 UI가 비정상적으로 보일 수 있다.이러한 문제는 CSS의 text-overflow: ellipsis 속성을 사용하여 말줄임(...) 처리로 해결할 수 있다.한 줄 텍스

메인 페이지에 배너를 구현하려고 했지만, 처음에는 정적인 이미지나 콘텐츠만 표시되는 상태였다.슬라이드 배너를 직접 구현하려면 다음과 같은 기능들을 추가해야 한다.터치 및 드래그 이벤트 처리자동 슬라이드 기능페이지네이션 표시무한 반복 슬라이드브라우저 호환성 대응이러한 기

단순히 input type="file"만 사용하여 파일 업로드 기능을 구현하는 것은 사용자 경험 측면에서 한계가 있다. 파일을 선택할 수는 있지만, 어떤 이미지가 업로드되었는지 바로 확인할 수 없고 잘못된 파일을 선택한 경우에 대한 처리도 별도로 필요하기 때문이다.이를

단순한 상태 전달은 props로도 충분히 해결할 수 있지만,컴포넌트의 깊이가 깊어질수록 상태를 전달하는 구조가 점점 복잡해진다.특히 여러 컴포넌트에서 동일한 상태를 공유해야 하는 경우,props drilling 방식은 유지보수와 가독성 측면에서 한계가 있다.기존의 Re

단일 해상도를 기준으로 UI를 구성하면, 화면 크기가 달라질 경우 레이아웃이 깨지거나 비율이 어색해지는 문제가 발생한다.특히 모바일, 태블릿, 데스크탑 환경을 모두 고려해야 하는 웹 서비스에서는각 디바이스에 맞는 반응형 처리가 필수적인데,이러한 문제를 해결하기 위해 r

위치 기반 기능을 구현하기 위해서는 외부 지도 API 연동이 필수적인 경우가 많은데, 이번 프로젝트에서는 지도 기능 구현을 위해 네이버 지도 API를 연동하였다. 우리나라에서 많이 사용하는 지도 서비스 중 하나인 네이버 지도를 활용했고, react-naver-maps

프론트엔드 개발에서 API 연동은 필수적인 작업이다.하지만 API 문서를 제대로 확인하지 않은 상태에서 개발을 진행하면 요청 형식이나 응답 데이터 구조를 정확히 파악하기 어려운 경우가 많다.특히 백엔드와 협업하는 과정에서는 엔드포인트나 파라미터가 변경되기도 하고, 요청

React 프로젝트를 Netlify에 배포한 뒤 정상적으로 화면 이동은 되지만,특정 페이지에서 새로고침을 하면 404 에러가 발생하는 문제가 있었다.예를 들어 아래와 같은 URL에 직접 접속하거나 새로고침을 하면https://my-site.netlify.app

프로젝트에서 지도 기능을 구현하기 위해 지도 API를 연동해야 했다. 초기에는 네이버 지도 API를 사용했지만, 지도 스타일 커스터마이징이나 라이브러리 활용 측면에서 제한되는 부분이 있었다. 반면 Google Maps API는 React에서 사용할 수 있는 라이브러

서비스를 운영하기 위해서는 사용자 인증 기능이 필요하다.이번 프로젝트에서는 회원가입과 로그인을 구현하면서 입력값 검증, API 요청, 토큰 저장, 로그인 상태 관리까지 함께 처리하였다.특히 사용자가 잘못된 형식의 데이터를 입력한 상태로 서버에 요청을 보내지 않도록 re