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

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..

현재 작업 중인 프로젝트에서는 Next14와 module css를 조합하여 쓰고 있다. Next는 tailwind와 잘 맞다고 하기에 중간에 마이그레이션하려 했는데 생각보다 진척이 늦어져서, 일단 기능 구현을 우선으로 두고 있다. 다만 CSS 변수의 자동 완성이 되지 않는 문제가 가장 해결이 시급해졌다. 📍문제는 무엇?가령 CSS 변수들을 styles 폴더 내부 foundations 폴더에 하단과 같이 css 파일로 저장했다고 치자./*colors.css*/:root { --transparent: transparent; --current: currentColor; --inherit: inherit; --c-white: #ffffff; --c-gray-300: #d7dce5; --c-black..

프로젝트가 진행되면서 다음과 같이 생긴 버블 공통 컴포넌트를 구현할 일이 생겼다. 일단은... 공통 컴포넌트이기 때문에, 해당 버블은 여러 페이지에서 쓰일 것이다. 그러니 최대한 다른 곳에 재사용 가능하도록 생각하며 구현하기로 하였다.  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라는 키로 들어온 값을 세션 스토리지 쪽으로 넘겨서 저장하는 순서였다. 스토리지로 잘 들어오는 것까지 확인하고 다른 작업..

41강. 함수에 주소 전달(2)  42강. 함수에 주소 전달(3)배열을 이용한 전달. 43강. 함수가 주소를 리턴  44강. 함수에 주소 전달   45강. 함수에 주소 전달(5)  46강. 함수에 주소 전달  47강. 함수에 주소 전달  48강. 함수에 주소 전달 malloc 으로 그 수만큼 공간을 확보한다. 3을 받은 경우 3을 확보.   49강. Static 변수(1)static 변수 : 단 한번만 초기화하고, 그 이후엔 전역 변수처럼 프로그램 종료까지 메모리 공간에 존재하는 변수.초기값은 자동으로 0.  50강. Static 변수(2)

🚩31-34강. 포인터 배열포인터 배열: 배열의 요소가 포인터(메모리주소)로 이루어진 것. 그 배열의 각각의 것들이 주소값을 갖고 있다. 💡기존까지 사용하던 배열과 포인터:char a[3] = {'a', 'b', 'c'} a는 100번지를 갖게 된다. %s는 주솟값. //abc문자열을 포인터 형태로 저장하는 경우. char *str = "Hello";str은 메모리의 주솟값이니까 100번지가 str에 갖게 된다. printf("%sWn", str); //Hello  💡포인터 배열char *student[3] = {"aaa", "bbb", "ccc"};student는 100번지를 저장하고 각각의 3개의 칸에는 주소값이 들어간다. 즉 각각의 칸에 20, 30, 40 주소값이 들어간다. 20번지에 aaa..