개발자일지

React + Vite 프로젝트에서 Tiptap을 사용할 때, 에디터에서는 내용이 잘 보이지만 View 화면(즉, 저장된 내용을 출력하는 화면)에서는 HTML 마크업이 그대로 출력되는 경우가 있다. 이러한 현상은 여러 가지 원인으로 발생할 수 있으며, 대표적인 원인은 다음과 같다. 대표적인 원인HTML 문자열을 텍스트처럼 출력하는 경우 dangerouslySetInnerHTML을 사용하지 않고 문자열을 그대로 렌더링하면 HTML 태그가 일반 텍스트로 출력된다. 에디터에서 HTML이 아닌 JSON 형식으로 저장된 경우 editor.getHTML()이 아닌 editor.getJSON() 등의 메서드로 저장한 경우, View에서 HTML로 올바르게 변환되지 않아 렌더링이 되지 않는다. 스타일(CSS)이 적용되..

웹 애플리케이션에서 게시글 작성 기능은 빠질 수 없는 요소이다.Markdown 기반이든, WYSIWYG 기반이든 리치 텍스트 에디터를 어떻게 구현하느냐에 따라 사용자의 경험이 크게 달라진다. Tiptap으로 에디터를 구현한 이유React Quill, Toast UI Editor 같은 에디터도 있지만 나중에 기능이 확장될 것을 생각하면 커스터마이징 자유도가 높은 Tiptap이 더 유리할 것 같았다. Tiptap의 장점ProseMirror 기반: 구조적으로 매우 강력하고 유연함모듈화된 확장 시스템: 필요한 기능만 골라서 사용 가능함Markdown + WYSIWYG 느낌의 편집기 구성 가능함\React 지원이 훌륭함tiptap의 경우 초기 설정은 조금 필요하다는 장점이 있지만, 확장도가 높다. 그리고 @tip..

자바스크립트는 기본적으로 싱글 스레드(한 번에 하나의 작업만 처리) 언어이다. 따라서 코드가 실행되는 동안 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기, 타이머 등)을 순서대로 처리하게 되면, 사용자는 앱이 멈춘 것처럼 느끼게 된다. 이러한 문제를 해결하기 위해 비동기 처리가 필요하다. 비동기 처리는 오래 걸리는 작업을 나중에 처리하고, 그동안 다른 작업을 먼저 진행할 수 있도록 도와주는 방식이다. 이를 통해 프로그램이 멈추지 않고 효율적으로 실행되며, 사용자 경험을 향상시킬 수 있다. 자바스크립트는 이러한 비동기 처리를 위해 콜백 함수, Promise, async/await 등의 방법을 제공한다. 이러한 비동기 처리 방식 덕분에 자바스크립트는 싱글 스레드 환경에서도 빠르고 유연하게 다양한 작업..

JSON에 대해서데이터를 키-값 쌍으로 표현하는 사람과 기계 모두 쉽게 읽고 쓸 수 있는 가볍고 표준화된 데이터 형식 JSON은 JavaScript Object Notation의 약자로, 직역하면 "자바스크립트 객체 표기법"이라는 뜻이다. 이는 데이터를 표현하고 교환하기 위해 널리 사용되는 텍스트 기반의 데이터 포맷으로, 사람도 읽을 수 있고 기계도 쉽게 처리할 수 있도록 고안되었다. 기본적으로 JSON은 자바스크립트에서 사용하는 객체(Object)의 구조를 따릅니다. 즉, 중괄호 {}를 사용해 데이터를 감싸고, 그 안에 "key": value 형태로 데이터를 나열한다. 이때 key는 문자열이며, value는 문자열, 숫자, 배열, 또 다른 객체 등 다양한 형태가 올 수 있다.예를 들어 아래와 같은 자바..

TypeScript는 정적 타입 언어로, 변수나 함수의 타입을 명확하게 지정함으로써 코드의 안정성과 유지보수성을 높이는 것이 핵심이다. 하지만 현실적인 개발 환경에서는 언제나 타입을 미리 알 수 있는 건 아니다. 외부 데이터나 유동적인 값들을 다루다 보면, 모든 값을 정확하게 정의하기 어려운 경우가 생기게 된다. any, unknown, union 이 세 가지는 모두 "값의 타입이 명확하지 않거나, 여러 가지가 가능할 때" 사용한다. 예를 들어 사용자 입력, API 응답, 외부 라이브러리 사용 시 타입이 명확하지 않으면 오류 없이 다루기 위해 필요하다.// 예시: API에서 응답받은 데이터const data: any = fetchSomething(); 또한 사용자가 입력한 값이 숫자일 수도 있고 문자열..

Interface란TypeScript에서 객체의 구조(모양, 타입)을 정의하는 문법이다.JavaScript는 타입이 없는 언어지만, TypeScript는 타입을 명확히 지정해줘서 코드의 안정성과 자동완성 기능을 높일 수 있다.interface는 "이 객체는 이런 속성들을 가지고 있어!" 라고 미리 약속하는 것이다.interface User { id: number; name: string; email?: string; // 선택 속성}위 인터페이스를 바탕으로 객체를 만들면 아래와 같다.const user: User = { id: 1, name: "jhon" // email은 없어도 OK}; Interface를 사용하는 이유코드 자동완성 기능이 좋아진다interface를 사용하면 코드 작성 시..

react-hook-formreact-hook-form은 React에서 폼을 간단하고 효율적으로 관리할 수 있게 도와주는 라이브러리로, 최소한의 리렌더링으로 빠른 성능을 제공하며, 입력값 등록(register), 검증(validate), 상태 추적(watch), 제출 처리(handleSubmit) 등을 쉽게 구현할 수 있다. 기존의 복잡한 폼 상태 관리 방식보다 코드량이 적고 직관적이며, 유효성 검사 라이브러리와도 쉽게 연동할 수 있어 유지보수가 편리한 것이 특징이다. useForm폼 전반을 관리하는 핵심 훅 기능: 등록, 제출, 초기값, 에러 상태 관리 등const { register, handleSubmit, formState: { errors } } = useForm(); useFormContex..

함수(Function)React 프로젝트에서 const로 함수(컴포넌트 포함)를 만드는 문법은 화살표 함수(arrow function)를 사용하는 방식이다.함수는 보통 컴포넌트 내부에서 만든다. 공통으로 여러 컴포넌트에서 쓰는 경우는 별도 파일에 빼서 import 한다. useEffect 안에서도 함수는 만들 수 있다. useEffect 안에서 const 함수를 선언하고 바로 실행하면 된다.용도문법일반 함수const fn = () => {}파라미터 있을 때const fn = (x) => x * 2리액트 컴포넌트const Component = () => ...리액트 컴포넌트(props 받기)const Component = ({ prop }) => {...}이벤트 핸들러const handleClick = (..

React.FC는 Functional Component의 타입, FC는 FunctionComponent의 줄임말! React.FC는 React의 함수형 컴포넌트(Function Component)에 타입을 지정하는 데 사용하는 TypeScript 제네릭 타입이다. 이를 사용하면 컴포넌트가 받을 props 타입을 명시할 수 있고, 자동으로 children prop도 포함된다. 예를 들어 const MyComponent: React.FC = ({ name }) => { ... }처럼 작성하면 MyComponent가 name이라는 prop과 children을 받을 수 있음을 타입스크립트가 인식한다. 다만 최근에는 children 자동 포함이 API 명확성을 해치고, 반환 타입(JSX.Element)은 Typ..

Alias 이해하기"Alias(별칭)"라는 용어는 일반적으로 모듈 임포트 시 경로를 짧게 쓰기 위해 사용하는 별칭 설정을 의미한다. 주로 Webpack, Vite, Create React App 등에서 설정하여 코드의 가독성과 유지보수성을 높이는데 사용된다. 개발을 하다 보면 ../../../components/Button 처럼 경로가 길어지는 경우가 있는데 alias를 사용하면 @components/Button 처럼 경로를 간단하게 쓸 수 있다는 장점이 있다. alias는 경로가 길어지거나 프로젝트 구조가 깊어질 때 유용하고 리팩토링 시 경로 변경을 쉽게 처리할 수 있다. alias 사용 방법은 빌드 도구에 따라 사용법이 다르다. Webpack 사용 시// webpack.config.jsconst..