오늘도 맑음

백엔드에서 메시지를 전달받는 경우 엔터처리가 되지 않아서 프론트엔드에서 엔터처리를 해야 했습니다.느낌표(!)와 마침표(.)를 인식하여 줄바꿈 처리를 진행해보도록 합시다. 목차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)가 실제로 적용되게 했습니다...

코치코치가 드디어 완성되어 해커톤에서 상을 받게 되었습니다.대회는 마무리가 되었지만 코드의 품질을 더 높여보고자 클로드 AI를 사용해 리팩토링을 진행하였습니다.🧾 목차1. 폴더 구조의 문제점2. 해결 방법3. 과정에서의 클로드 문제점1. 폴더 구조의 문제점이전 코치 폴더의 문제점은 다음과 같습니다.1. 단일/다중 코치로 나눠지지 않았다.2. 기능별로 나눠지지 않았다.즉 코치 관련된 모든 파일이 하나의 coach 폴더에 있었습니다.2. 해결 방법클로드 AI를 이용하여 분리하였을 때 다음과 같이 추천을 받았습니다.src/components/coach/├── list/ # 코치 목록 관련│ ├── CoachList.tsx # 코치 목록 컨테이너│..

흔히들 개발 시스템을 구성할 때 3계층형을 사용하게 됩니다. 프레젠테이션, 애플리케이션, 데이터 계층을 의미하는 데, 각각을 살펴보겠습니다. 🧾 목차1. 3계층 개념2. 정적 콘텐츠 Vs 동적 콘텐츠3. 그림으로 살펴보는 시스템 구성도 예제4. NGINX1. 3계층 개념 (3-tier)1-1. 프레젠테이션 계층- 사용자가 마주하는 UI를 제공- 정적 컨텐츠(Html, Css, Javascript)를 NGINX를 통해 제공 1-2. 애플리케이션 계층- 비지니스 로직 수행- 동적 컨텐츠를 제공- 자신이 계산할 수 있는지, 아니면 DB 접속이 필요한지를 판단하여 DB 서버로 요청 전달 1-3. 데이터 계층- 데이터베이스, 파일 저장소- 애플리케이션의 요청을 받아 데이터 입출력 수행 2. 정적 콘텐츠 Vs 동..

도로명 주소를 카카오 지도에 마커 표시하기 위해 "주소로 장소 표시하기" 기능을 사용하였습니다.KaKao Maps API(주소로 장소 표시하기)🧾 목차1. 과정2. 결과화면3. 전체 코드4. 트러블 슈팅1. 과정  1. 카카오 지도 스크립트 로드2. 주소로 장소 표시하기 (libraries=services)3. 타입 지정 1-1. 카카오 지도 스크립트 로드카카오 맵은 카카오 지도에 사용되는 기능들 (= 기초 설정) 파일을 이미 만들어 놓고 우리는 그것을 로드하여 사용하면 됩니다.이걸 v3 스크립트라고 합니다.v3 스크립트를 동적으로 로드하기위해 사용한다.스크립트의 로딩이 끝나기 전에 v3의 객체에 접근하려고 하면 에러가 발생하기 때문에로딩이 끝나는 시점에 콜백을 통해 객체에 접근할 수 있도록 해 준다...

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..