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

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

최근 react-icons 패키지를 5.5.0 버전으로 업그레이드한 후, 아이콘을 JSX 컴포넌트로 사용할 때 문제가 발생했다.예를 들어, MdOutlineSaveAlt 아이콘을 사용하려고 하면 다음과 같은 TypeScript 오류가 나타났다. 이 문제를 해결하기 위해 react-icons를 이전 버전인 5.4.0으로 다운그레이드하는 방법도 있었지만, 나는 lucide-react 라이브러리로 전환하기로 결정했다. lucide-react는 Feather Icons의 포크로, 더 많은 아이콘과 다양한 스타일을 지원하며, 사용법이 직관적이고 추가적인 기능이 포함되어 있다. lucide-react를 사용하려면 다음과 같이 설치할 수 있다.npm install lucide-react 설치 후, 필요한 아이콘을 다..

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

HTML과 CSS 작업을 하다 보면, 원하는 디자인처럼 잘 되지 않을 때가 정말 많다.혼자서 화면 퍼블리싱과 이벤트 작동 코드를 개발하던 중, fixed 속성을 사용하면서 그 익숙한 좌절감이 다시 찾아왔다.알고 보니, 제가 fixed 속성에 대해 잘못 이해하고 있었던 게 문제였다. fixed는 position 속성 중 하나다. position이란?요소의 위치를 지정하는 방법을 정의하며, 다른 요소나 부모, 뷰포트와의 관계를 설정한다.  position 속성의 종류1. static(기본값)요소가 문서 흐름에 따라 배치된다.부모 요소나 다른 요소에 종속되지 않으며, 위치 조정 속성(top, left 등)을 사용할 수 없다.2. relative요소가 문서 흐름 내에서 본래 위치를 유지하면서 top, right..

REST(Representational State Transfer)란?웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처 스타일이다. HTTP 프로토콜을 기반으로 자원을 정의하고 이를 처리하는 구조로 설계되며, 자원(Resource)의 상태(Representation)를 클라이언트와 서버 간에 주고받는다. 특징 자원(Resource):  관리 대상인 데이터나 소프트웨어다. (예를 들어, 학생 정보가 자원이면 'students'가 이를 표현한다.)표현(Representation): 자원의 상태를 JSON, XML 등으로 전달한다.HTTP Method 활용: CRUD 작업을 POST, GET, PUT, DELETE 등의 HTTP 메서드로 수행한다.URI(Uniform Resource Identif..

팀 프로젝트하면서 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..

프로젝트를 새로 시작하면서 프론트는 리액트로 결정됐다.그래서 한달만에 다시 리액트 프로젝트 생성하였는데 npx create-react-app 명령어를 실행하니 오류가 발생했다.Installing template dependencies using npm...npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: culand@0.1.0npm ERR! Found: react@19.0.0npm ERR! node_modules/reactnpm ERR! react@"^19.0.0" from the root projectnpm ERR!npm ERR! Could not resolv..