🐫 snake_case 응답 데이터를 camelCase로 변환하기 이전에 백엔드(Python)에서 프론트엔드(React)로 보내는 응답을 받았을 때, snake_case로 작성되어 있어서 프론트엔드 코드와 key가 맞지 않는 문제가 있었다. 그래서 camelcase-keys 라이브러리를 사용했다. 이번에는 파라미터에 값을 넣고 보내려고 하니까 400번대가 뜨는 거 아닌가..?! 확인해보니 파라미터명이 맞지 않았다.생각해 보니 내 코드는 camelCase로 작성되어 있어서 요청할 때도 snake_case로 바꿔서 보내야 하는 것이었다.. 당연한데 저땐 생각 못했당 ㅠ 그래서 찾아보니 snakecase-keys 라이브러리도 있었다!! (앗싸) 🐍 snakecase-keysyarn, npmyarn add ..

여태까지 백엔드는 Spring(Java), 프론트엔드는 React(JavaScript/TypeScript)를 사용해서 둘 다 camelCase를 썼었다.그래서 이런 상황을 겪을 일이 없었는데, 이번에는 백엔드에서 파이썬을 사용하고 있어 이런 문제를 겪었다. 파이썬에서는 snake_case를 주로 사용해서 백엔드에서 응답으로 오는 데이터의 key가 snake_case로 작성되어 있었다.프론트엔드에서는 camelCase로 작성하고 있어서 어떻게 해야 하나 싶었는데 이를 변환해 주는 라이브러리를 찾았다. 🐫 camelcase-keysyarn, npmyarn add camelcase-keys위 패키지를 설치해서 사용하면 된다.우리 프로젝트의 경우, 모든 응답의 데이터 key를 snake_case에서 camel..

1️⃣ React Quill 사용하기React Quill은 리액트의 텍스트 에디터 라이브러리 중 하나이다.위지위그(WYSIWYG, What you see is what you get)라고도 하는데, "보는 대로 얻는다"라는 뜻이다.즉, 사용자가 텍스트 에디터에서 작성하며 보여지는 그대로 출력물에서 나타나도록 한다. 📍  패키지 설치yarn add react-quill 📍 기본 코드import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css';interface TextEditorProps { value: string; onChange: (value: string) => void;}const TextEditor = ({val..