코치코치 (6) 썸네일형 리스트형 white-space: pre-line 스타일 추가로 줄바꿈 인식 백엔드에서 메시지를 전달받는 경우 엔터처리가 되지 않아서 프론트엔드에서 엔터처리를 해야 했습니다.느낌표(!)와 마침표(.)를 인식하여 줄바꿈 처리를 진행해보도록 합시다. 목차1. 정규식 적용2. white-space: pre-line3. 결과4. 추후 개선 방향 1. 정규식 적용message 에서 느낌표(!)와 마침표(.)를 찾고, 그 뒤의 공백을 찾고 줄바꿈(\n)으로 대체하는 코드입니다. const formattedMessage = message.replace(/([!.])\s*/g, "$1\n"); 2. white-space: pre-line줄바꿈이 삽입된다고 해서 바로 html에 적용되는 것은 아닙니다.white-space pre-line을 추가하여 줄바꿈 문자(\n)가 실제로 적용되게 했습니다... 코치 폴더 구조 리팩토링 (Feat. cursor ai) 코치코치가 드디어 완성되어 해커톤에서 상을 받게 되었습니다.대회는 마무리가 되었지만 코드의 품질을 더 높여보고자 클로드 AI를 사용해 리팩토링을 진행하였습니다.🧾 목차1. 폴더 구조의 문제점2. 해결 방법3. 과정에서의 클로드 문제점1. 폴더 구조의 문제점이전 코치 폴더의 문제점은 다음과 같습니다.1. 단일/다중 코치로 나눠지지 않았다.2. 기능별로 나눠지지 않았다.즉 코치 관련된 모든 파일이 하나의 coach 폴더에 있었습니다.2. 해결 방법클로드 AI를 이용하여 분리하였을 때 다음과 같이 추천을 받았습니다.src/components/coach/├── list/ # 코치 목록 관련│ ├── CoachList.tsx # 코치 목록 컨테이너│.. 주소로 장소 표시하기 (Feat. Kakao Maps API) 도로명 주소를 카카오 지도에 마커 표시하기 위해 "주소로 장소 표시하기" 기능을 사용하였습니다.KaKao Maps API(주소로 장소 표시하기)🧾 목차1. 과정2. 결과화면3. 전체 코드4. 트러블 슈팅1. 과정 1. 카카오 지도 스크립트 로드2. 주소로 장소 표시하기 (libraries=services)3. 타입 지정 1-1. 카카오 지도 스크립트 로드카카오 맵은 카카오 지도에 사용되는 기능들 (= 기초 설정) 파일을 이미 만들어 놓고 우리는 그것을 로드하여 사용하면 됩니다.이걸 v3 스크립트라고 합니다.v3 스크립트를 동적으로 로드하기위해 사용한다.스크립트의 로딩이 끝나기 전에 v3의 객체에 접근하려고 하면 에러가 발생하기 때문에로딩이 끝나는 시점에 콜백을 통해 객체에 접근할 수 있도록 해 준다... 검색 시 새로고침 제거 (react-hook-form) react-hook-form의 handleSubmit으로 제출 시 새로고침을 하지 않는 장점이 있습니다.e.preventDefault() 기능을 자체적으로 지원한다고 보면 됩니다.이 기능을 활용하여 검색창을 만들어보았습니다! 목차1. UI2. 구현 (react-hook-form의 handleSubmit 활용)3. 결과화면4. 개발 과정에서 발생한 문제1. UI 2. 구현위와 같은 검색창을 만들기 위해 다음과 같이 필요합니다.- input 태그- svg 아이콘 1 => 제출(엔터 눌렀을 때도 동작)- svg 아이콘 2 => 빈 값으로 제출이 3개의 태그를 크게 감쌀 form 태그가 필요합니다. import SvgIcon from "@/components/Icon/SvgIcon";import useQuery.. 정보구조도(IA) 정보구조도 (IA, Information Architecture)는 페이지의 구조를 한장에 나타낸 그림입니다.또한 Depth는 페이지에 도달하기 까지의 단계(깊이)를 의미합니다. 이번에 공모전에 제출할 기획서가 필요한데, 심사원분들에게 IA를 보여주면 좋을거 같아 작성하게 되었습니다. 구조1. 스플래시 화면 > 로그인/회원가입 > 홈으로 진행된다는 것을 표현하였습니다. 특히 저희 서비스는 웹이지만 모바일을 생각하고 만들었기 때문에 로그인 후 이용할 수 있는 서비스로 기획되어있습니다. 2. 홈, 코치 리스트 등 주요 페이지를 1 Depth로 두었습니다. 또한 각 페이지의 UI 컴포넌트 혹은 기능을 2 Depth로 두었습니다.코치 상세 페이지의 상세 정보, 자기소개, 활동 센터 지도, 리뷰 등은 UI 컴포넌.. SVG 공통 컴포넌트 사용하기 하나의 SVG 파일로 색상, 사이즈를 변경하여 사용하기 위하여 공통 컴포넌트를 생성하였습니다.우선 vite-plugin-svgr을 설치해야합니다. [설치하는 법]https://hazzuu.tistory.com/entry/vite-plugin-svgr%EB%A1%9C-%EC%95%84%EC%9D%B4%EC%BD%98-%ED%99%94%EB%A9%B4%EC%97%90-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0 vite-plugin-svgr은 svg 파일을 컴포넌트로 만들어주는 플러그인입니다.따라서 사용할 때도 컴포넌트 파일 임포트하는 것처럼 가져오면 되는데 주의할 점은 ?react를 붙여서 가져와야됨! svg 파일을 하나 저장합니다.변경하고자 하는 속성을 current로 변경합니다... 이전 1 다음
