목록전체 글 (133)
코로 넘어져도 헤딩만 하면 그만

팀 내에서 대용량 텍스트 문서를 검수해야 하는 상황이 있었다.코드로 정리한 데이터를 수정해야 했는데, 이미 한번 자동 분류를 했으니 이제 틀린 데이터를 수동(...)체크해야 했다. 말이 쉽지... 눈으로 보면서 비교하고 오탈자 찾아 검수하는 게 쉬운 일이 아니다. 오탈자 수정은 그렇다 치고, 공백에 사용된 게 탭인지 스페이스인지 몇백 줄을 일일이 구분해야 했는데... 눈이 빠지지 않으면 이상한 상황이었다.일단 메모장보다는 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 설정을 손보기로 했다. 분명히..
😢갑자기 화면 가득 떠오른 Replace ␍⏎ Replace ·fetchSearchData with ␍⏎··fetchSearchData 어제까지만 해도 멀쩡하던 프로젝트에......갑자기 열자마자 모든 파일에서 노란 줄이 뻑뻑 그이면서 위와 유사한 Replace 에러들을 가득 띄우기 시작했다.VScode 업데이트 하라고 해서 냉큼 했더니 그런가...? eslint 설정은 전혀 건드리지 않았는데... 어쨌든 기능을 수정하려면 당장 이 VScode의 에러를 해결해야 한다!!! 우선 Replace␍⏎ 라는 키워드로 유사한 문제를 겪은 글을 찾아보았다. Prettier ask me to replace ⏎↹↹ with ·I have no clue what's going on, I cloned a git..

문제: 그니까 왜 새로고침 할 때마다 툴바가 자꾸 혼자 깜빡이는 거냐고.늦게 나타나는 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..