코로 넘어져도 헤딩만 하면 그만

팀 내에서 대용량 텍스트 문서를 검수해야 하는 상황이 있었다.코드로 정리한 데이터를 수정해야 했는데, 이미 한번 자동 분류를 했으니 이제 틀린 데이터를 수동(...)체크해야 했다. 말이 쉽지... 눈으로 보면서 비교하고 오탈자 찾아 검수하는 게 쉬운 일이 아니다. 오탈자 수정은 그렇다 치고, 공백에 사용된 게 탭인지 스페이스인지 몇백 줄을 일일이 구분해야 했는데... 눈이 빠지지 않으면 이상한 상황이었다.일단 메모장보다는 VS code가 낫다. 스페이스는 점으로, 탭은 화살표로 구분된다. 그런데... 너무 작아서 잘 보이지 않고 모니터 속 세상으로 머리를 집어 넣는 꼴이 되었다. 💡확장 프로그램 만들기참다 참다 미쳐버리기 전에 확장 프로그램을 하나 빨리 만들어서 적용하기로 했다. 사실 확장 프로그램..

제작 중인 클라우드에 올려둔 파일을 다시 다운로드 했을 때 1KB의 파일만 받아지고, 내용은 보이지 않는 문제가 발생했다.기존까지는 원본대로 다운로드 되었는데 코드를 대거 정리하면서 한 번 꼬인 것 같다. 다운 받은 모든 파일이 1KB인 것을 볼 수 있다.원본 사진 파일은 403KB 정도로, 확실하게 다른 파일을 받고 있다. txt로 바꿔 확인해보니 아래와 같은 메세지가 뜬다. {"detail":"Authentication credentials were not provided."} 서버에서 인증 관련 오류가 생겼을 거라는 판단 하에, download 관련 기능이 구현된 액션 코드를 열어 보았다. 💡fetch를 axios.get 형식으로 변경 fetch(response.data.downl..

기존까지는 도커를 사용하여 해당 프로젝트를 빌드하기 위해 아래와 같은 명령어를 사용하고 있었다.docker-compose -f docker-compose.dev.yml up --build 기존 이미지가 있어도 새 코드가 바로 반영될 수 있도록, 이미지를 최신 코드로 강제 빌드한 뒤 컨테이너를 실행한다.(--build) 도커를 굳이 쓰지 않던 토이 플젝과 다르게 세이브 할 때마다 바로 내용이 반영되지 않는 건 아쉽다. 빌드에 시간이 좀 오래 걸리기도 하고.....  어쨌든 ... 핵심은, 단순한 css만 고친 뒤에도 화면에 반영된 걸 보고 싶다면 매번 저 긴 명령어를 터미널에 입력해야 한다는 것이다. 두 달간 해오긴 했는데 더이상 속이 터져 못 버티겠다 싶어 아예 VScode 설정을 손보기로 했다. 분명히..

문제: 그니까 왜 새로고침 할 때마다 툴바가 자꾸 혼자 깜빡이는 거냐고.늦게 나타나는 ui 요소의 깜빡임은 사용자의 눈을 피로하게 만든다.대체 어떤 개발자나 사용자가 깜빡임 심한 화면을 갖고 싶겠느냐마는...  어쨌든 끔찍하게 못생긴 기본 폰트와 html 구조가 나오다가 3초 뒤 좀 있어 보이는(?) 화면으로 마법처럼 교체되는 경험을 누구나 한번쯤 해봤을 것이다. 전문 용어로는 flash of unstyled content, FOUC라고 부르는데, 쉽게 말해서 외부의 CSS가 불러오기 전 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이라고 한다.주로 폰트 같은 곳에서 찾아보기 쉽고, 여간 거슬리는 일이 아닐 수 없다.  안그래도 못생긴 툴바가 계속 깜빡거리니까 심각한 상태가 되었다. 내 정서적으..

회사에서 받은 코드를 리펙토링 하기 위해 뜯다가 콘솔 창에서 생소한 경고를 마주쳤다.  Warning: MyComponent: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.   💡defaultProps가 무엇이고, 관련 에러는 왜 발생할까?기존까지 defaultProps는 React 컴포넌트, 특히 클래스형 컴포넌트에서 props의 기본값을 설정하는 방법이었다. 그러나 React 17 이후로 함수형 컴포넌트가 보편화되면서 더 이상 defaultProps가 권장되지 않았고, 대신 ES6의 기본 매개변수 방식을 ..

언젠가부터 콘솔에 도통 알 수 없는 에러 하나가 괴롭히고 있었으니...... 500번대 에러가 갑자기 뜰 게 뭐란 말인가? 심지어 개발 환경에서 구현할 때에는 문제 없어서 흐린 눈 하고 끝까지 미룬 에러였다.일단 다행이긴 한데... 다른 기능들이 완성되고 나니, 이대로 에러를 안고 메인에 합치기도 양심이 찔리는지라.최종 에러 수거에 나섰다. 초반에 어디서 문제가 생기는지 알 수가 없어서 한창 삽질을 했다. 결국 페이지를 기본 세팅으로 돌려두고 기능을 하나씩 추가하는 과정에서 문제가 maxLengthModule(저번에 직접 세팅해서 넣은 quill 최대 글자수 제한하는 모듈)에서 발생하는 것을 알게 되었다. Next는 React와 달리 SSR로 동작하는 구간이 있는데 여기서 뭔가..... 문제가 생겨서 5..

React Quill을 사용하면서 텍스트 수를 1500자까지만 받아야 되는 조건이 붙었다.input 라면 아래처럼 maxLength를 사용해서 처리하면 되는데... ...   이상하게도 React Quill에는 maxLength가 존재하지 않아 당혹스러웠다. 텍스트 에디터인데 글자 수 max 조건을 거는 게 이렇게 어려워서야. 가장 자주 쓰는 기능이 아닌가? (아직도 왜 maxLength가 없는지 모르겠다.) 하지만 서치를 해도 간단하게 해결하는 방법은 찾을 수 없었고... 공식 문서에서도 찾지 못한 것인지 없는 것인지... 어쩔 수 없이 아래와 같이 삽질을 시작했다.  1. onChange의 함수로 통제 시도... but...처음에는 별 생각 없이 onChange를 통해 텍스트를 MAX_TEX..

현재 프로젝트에서 React Quill new를 다루는 과정에서 에디터를 만지면서 만난 에러들을 해결하는 포스팅이다.react-quill-new를 쓰기로 선택한 이유는 특정 이벤트에 대한 지원이 중단 되면서 기본 react quill에서는 아래와 같은 경고 표시가 떴기 때문이다. 지원 중단 부분만 개선되고 지금까지는 기존 quill과 크게 다르지 않은 것 같다.react-quill.js?v=d23b9689:5562 [Deprecation] Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired. See https..

기본으로 제공된 quill 팔레트 개수를 수정하고 싶을 경우, 아래와 같은 방법을 사용한다.  📍사용자에게 제공하는 색상 개수 수정quill에서 color을 쓰면 위와 같이 꽤 많은 색상 항목을 보여준다.그러나 너무 많은 선택지가 불편하다면 아래와 같이 지정 색상을 커스텀 가능하다.import { Quill } from 'react-quill-new'; //react-quill을 쓰는 대신 new를 쓰고 있다.//원하는 색상만 선택const customColors = [ '#000000', // Black '#FF0000', // Red '#00FF00', // Green '#0000FF', // Blue '#FFFF00', // Yellow '#FFA500', // Orange '#800..

프로젝트가 진행되면서 다음과 같이 생긴 버블 공통 컴포넌트를 구현할 일이 생겼다. 일단은... 공통 컴포넌트이기 때문에, 해당 버블은 여러 페이지에서 쓰일 것이다. 그러니 최대한 다른 곳에 재사용 가능하도록 생각하며 구현하기로 하였다.  interface BubbleProps { text: string; type: "topLeft" | "topRight" | "bottomLeft" | "bottomRight"; //props를 적극 활용하여 재사용성을 높임.}const Bubble = ({ text, type }: BubbleProps) => { return ( {text} );};export default Bubble; props로 text(버블 내부에 들어갈 텍스트 내용)와 type(..

🤔 useSearchParams 쓰니까 빌드가 안 된다고?- app 라우터, Next14 사용 중 - 소셜 로그인 기능을 구현하면서 useSearchParams를 쓸 일이 있었다. 유저가 로그인 성공한 뒤 사전에 정한 페이지로 redirect 되면 해당 페이지의 url로 들어온 인가 코드를 받아올 수 있다. 해당 인가 코드를 다시 백엔드로 넘겨 우리 프로젝트에서만 사용하는 토큰을 만들어서 받는 흐름의 로직이다. 이때 useSearchParams를 쓰면 쿼리 스트링으로 들어온 데이터를 쉽게 추출해서 사용할 수 있었다. 해당 훅을 사용하면 현재 url의 쿼리 스트링을 가져오는데, code라는 키로 들어온 값을 세션 스토리지 쪽으로 넘겨서 저장하는 순서였다. 스토리지로 잘 들어오는 것까지 확인하고 다른 작업..