백오피스에서 기존 HTML 렌더링 방식에서 react-quill 텍스트 에디터 도입 과정에서 마주한 예상치 못한 문제들과 해결 과정을 공유한다. 텍스트 에디터 도입 배경현재 백오피스에서는 서버에서 HTML 태그를 함께 내려주는 화면이 존재했다. 기존 방식은 조회 시에는 프론트에서 HTML을 렌더링하지만, 수정 시에는 HTML 태그가 그대로 노출된 상태로 편집해야 하는 불편함이 있었다.해당 공통 컴포넌트는 다른 곳에서도 사용되고 있었는데, 조회 후 수정하는 방식이 아닌 새로 작성하는 템플릿에 대해서 텍스트 에디터가 필요하다는 니즈가 생겼다. 기본 기능들만 필요했고, 개발자가 사용하기 편리한 rich text editor 중 하나인 react-quill을 도입하게 되었다. 첫 번째 이슈: "들여쓰기가 안되었..

회사에서 개인의 기술 성장을 위하여 3주에 1번씩 사내 기술 세션 발표가 열리는데, 비록 2주차였지만 더욱 몰두하고자 자원하여 발표한 사내 기술 세션 발표 내용입니다.최근에 회사에서 새로운 기능을 개발하면서, 자연스럽게 react-hook-form을 처음 접하게 되었습니다. 처음엔 단순히 폼 상태를 다루기 위한 도구 정도로 생각했지만, 실제로 기능을 만들다 보니 생각보다 많은 개념들이 녹아 있었고, 특히 "렌더링 최적화" 관점에서 매우 중요한 포인트들이 존재한다는 걸 알게 되었습니다. 이 최적화를 진행한 배경이 기능은 고객에게 직접적으로 맞닿는 인터페이스가 아니었기 때문에 백오피스 성능이 상대적으로 중요하지는 않았습니다. 하지만 react-hook-form 라이브러리를 사용하면서 고객의 데이터를 입력한 ..

개발 인턴 3개월 차, 4년 전부터 이어오던 프로젝트를 담당하면서 처음 하는 것들이 많았다.이번에 보안 검사를 진행하던 중, axios에서 취약점 점수가 7.5로 나타났고, 그 결과 취약점 개선을 담당하게 되었다. 해당 라이브러리의 버전 업그레이드를 진행하면서 발생한 여러 문제를 해결해야 했고, 이번 기회에 보안 관련 개념을 새롭게 학습할 수 있었다.CVSS (Common Vulnerability Scoring System) 란?- 보안 취약점의 심각도를 정량적으로 측정하고, 0.0~10.0 사이의 점수를 부여하는 시스템 점수 범위 심각도 예시 0.0 없음 (None) 취약점 영향 없음 0.1~3.9 낮음 (Low) 미미한 영향 4.0~6.9 보통 (Medium) 조치 필요하지만 긴..

개발인턴 1주차 React, TypeScript로 프로젝트를 진행하고 있다.S3는 이전에 토이 프로젝트에 적용한 경험이 있는데, 정리를 안해놔서 그런지 구글링을 해야 했다.다음에는 더 잘 적용할 수 있게, [AWS S3로 프론트엔드 배포] 한 과정을 정리하고자 작성한다.AWS 접속 후 로그인을 하고, S3 메뉴로 접속한다.  1. S3 버킷 생성 [버킷 만들기] 버튼을 누르고 나서 버킷 이름을 입력한다. 나는 엑세스 차단 설정을 제외하고 나머지 항목 다 default 값으로 설정하였다.나중에 필요한 부분은 편집하여 수정하면 되기에.. 2. permission 설정 권한 칸에 접속한다. 추후 별도로 필요한 것들만 설정해두면 된다. 버킷 정책 칸에서 [편집] 버튼을 누른다. [정책 생성기] 버튼을 누른다. ..