1. 멘션

문제

1. 사용자가 “@”를 입력했을 때 멘션할 수 있는 사용자를 검색하는 모달창이 뜨도록 구현하기
2. 사용자가 멘션을 위해 “@”를 사용했는지 아니면 문자로 사용하는지 파악하기
3. “@”를 지우거나 사용자를 선택한 경우 모달창 닫기
4. 사용자를 선택한 경우 해당 사용자의 닉네임을 “@”와 함께 나타내기
5. 모달창의 사용자를 방향키와 스페이스바로 사용자 선택할 수 있도록 구현하기

해결 방법

1. 멘션 모달 표시
   • ****input의 value를 추적하여 마지막 문자가 "@"인지 확인하고, "@"를 감지하면 멘션 모달의 상태를 true로 변경하여 멘션 모달 컴포넌트가 나타나도록 구현했다.
2. "@" 감지 조건
   • "@" 이전 문자가 공백이거나 첫 글자인 경우에만 멘션 모달을 열도록 조건을 설정하였습니다. "@"를 사용할 때 이전 문자가 공백이 아닌 경우에는 return 처리를 통해 모달이 열리지 않도록 하여, 문장 내에서 "@"를 문자로 사용할 수 있도록 했다.
3. 모달 닫기 처리
   • useEffect 훅에서 input의 value를 의존성 배열로 등록하여, 사용자가 공백을 입력하거나 value.includes("@")가 false인 경우 모달의 상태를 false로 변경해 모달 창을 닫았다.
4. 멘션 사용자 선택
   • **@”**를 입력했을 때 커서의 위치를 state로 저장하고, 멘션 모달에서 사용자가 선택되면 newValue = **value**.**substring**(0, 저장한 커서 위치) + 선택된 사용자 이름 + " "로 새 값을 만들어 value에 저장한다.
5. 모달 내 사용자 선택
   • 방향키를 통한 선택:
     • 선택된 인덱스를 selectedIndex 상태로 관리하며, 해당 인덱스의 항목에 "selected" 클래스를 적용해 시각적으로 강조한다.
     • useEffect 훅 내의 키보드 이벤트 감지 함수에서 ArrowUp과 ArrowDown 키를 감지하여 setSelectedIndex를 통해 현재 선택된 사용자의 인덱스를 변경한다.
     • scrollIntoView 메서드를 이용해 선택된 인덱스가 항상 모달창 중앙에 위치하도록 조정한다.
   • 스페이스바를 통한 선택:
     • handleKeyDown 함수에서 스페이스바 (" ")를 감지하여 사용자가 현재 선택된 항목을 선택할 수 있도록 구현했다.
     • 스페이스바가 눌리면 현재 선택된 사용자의 userName을 onMentionClick 함수에 전달하여 멘션을 추가한다.

결과

실제 구현한 화면

실제 구현한 화면

⬆️코드 보러 가기

2. 이미지 미리보기 및 삭제

문제

1. 게시물에 등록할 이미지를 선택시 화면에서 미리 보기 구현
2. 여러개의 이미지 등록했을 때 특정 이미지 삭제하기
3. 여러개의 이미지 등록했을 때 스와이프를 통해 여러 이미지 볼 수 있도록 구현

해결 방법

1. 빠르고 간편한 미리보기 제공
   • URL.createObjectURL() 메서드를 사용하여 사용자가 선택한 이미지의 미리보기를 위한 임시 URL을 생성하고, 이를 화면에 렌더링하여 즉시 미리보기를 제공한다.
   • 서버로 전송할 이미지 데이터와 사용자에게 미리보기를 제공할 이미지 URL을 별도의 상태로 관리하여, 데이터와 미리보기 정보를 효율적으로 분리한다.
2. 특정 이미지 삭제하기
   • 이미지의 id를 이용하여 해당 인덱스를 제거한 새로운 배열을 생성하고, 이를 상태로 업데이트하여 선택된 이미지가 화면에서 제거되도록 구현한다.
3. 스와이프를 통해 여러 이미지 보기
   • Swiper 라이브러리를 활용하여 여러 이미지를 스와이프하여 볼 수 있는 기능을 구현하여, 사용자에게 직관적인 이미지 탐색 경험을 제공한다.

결과

20240914-0626-19.4722945.mp4

⬆️코드 보러 가기

3. 사용자 검색 최적화

문제

• 사용자를 검색할 때 input의 value가 변경될 때마다 서버에 요청을 보내는 기능을 구현했지만, 매번 요청을 보내는 것은 너무 많은 서버 요청을 유발하고, 서버 응답 시간 지연으로 인해 입력 값과 화면에 렌더링되는 결과 간에 불일치하는 문제가 발생했다.

해결 방법

• 디바운스(debounce) 기술을 적용하여 사용자가 입력을 0.5초 이상 멈춘 경우에만 서버에 요청을 보내도록 구현했습니다. 이를 위해 useEffect 훅에 사용자 입력 값을 의존성 배열로 설정하고, setTimeout 메서드를 사용하여 입력이 없던 시간이 0.5초가 넘었을 때만 서버 요청 함수를 실행하도록 구현했다. 사용자가 입력을 0.5초 이내에 변경할 경우, 클린업 함수가 기존의 타이머를 제거하고 새로운 타이머를 설정하여 서버 요청을 지연시킨다.