Frontend 3

[CSS] white-space 속성 변경을 통해 줄바꿈 설정 그대로 유지하기

현재 공모전 작업을 위해 챗봇 프론트를 작업하고 있다.기존의 설정에서는 위와 같이 입력하면,  줄바꿈이 제대로 처리되지 않는다.이때의 css 코드를 한번 살펴보자. .message { display: inline-block; font-family: "Pretendard", sans-serif; margin: 8px 0; padding: 12px 16px; border-radius: 20px; max-width: 80%; word-wrap: break-word; font-size: 14px; line-height: 1.4; text-align: left; width: fit-content;}   이제 속성에 white-space: pre-wrap;  을 추가한다.그러면 기존에 반영되지 ..

Frontend 2024.10.26

React 프로젝트에 PWA 적용하기

AI 관련 공모전에 나가기 위해, 관련한 서비스를 제작하게 되었습니다.백엔드는 Flask로 진행하고, 데이터 팀원들이 데이터 작업을 진행할 동안 개발 파트를 맡은 나는 프론트엔드 작업을 만들어서 진행해야 하는 상황입니다.모바일 앱으로 하면 좋겠지만, 모바일 앱 개발 경험도 없고, 정말 짧은 시간을 준비해야 되는 상황이라 그나마 기존에 조금이라도 써봤던 리액트로 작업을 하게 되었습니다.  PWA란PWA(Progressive Web App)는 웹 기술을 활용해 모바일 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. PWA는 네이티브 앱의 장점인 빠른 속도와 오프라인 사용 기능을 웹 환경에서 구현할 수 있도록 하며, 특히 브라우저를 통해 설치 없이 사용 가능합니다. 이를 통해 앱스토어를 거치지 않고..

Frontend 2024.10.20

[React.js] 입력창 입력 시 Focus가 풀리는 현상 해결하기

이 문제는 사실 단순한 문제입다. 그러나 프로젝트 당시에는 이해하지 못했던 부분이라서 다시는 이런 실수를 하지 않기 위해 적었습니다.  1. 서론SSAFY 첫 번째 프로젝트를 하던 도중, 한 글자 한 글자 입력할 때마다 focus가 풀리는 현상이 발생하였습니다.당시 수많은 챗 지피티와 구글링을 통해서 해결방안을 찾으려고 애썼지만 찾지 못했습니다... 처음에는 다른 (좀 더 친분이 있는) 백엔드 전문 코치님께 여쭤봤는데, 다른 캠퍼스 코치님이다 보니 본인 반 프로젝트를 신경쓰는데 바쁘시기도 했고, 백엔드가 아닌 프론트엔드라 즉각적인 답변이 어려웠습니다.그 때 그래도 이게 focus가 풀리는 현상이구나... 정도는 알려주셨습니다. 감사합니다 그리고 나서도 해결이 되지 않아 프론트 코치님께 여쭤봤습니다.   ..

Frontend 2024.07.22