반응형
목록
리액트 (28)
[꼼꼼한 개발자] 꼼코더
[React] - React에 ‘CKEditor5’ 적용하기(예제코드 포함, CKEditor5 흰색 화면오류 해결, CKEditor5 커스텀 파일 적용 방법, base64 이미지 적용)
💁🏻♂️ 소개 CKEditor5는 텍스트 편집기(블로그 에디터) 라이브러리이다. 텍스트 에디터 중에서도 공식 문서가 잘 정리되어 있어 많이 사용되고 있다. ⚒️ CKEditor 5 종류 종류는 Classic 부터 ~ Super까지 존재한다. 각 빌드 종류에 따라 지원하는 기능들이 다르다.(빌드 별 지원기능) 무료 버전은 아래와 같다. 👉🏻 적용 방법 (3가지) 공식 페이지에서 버전을 선택한 후 적용 방법(3가지)을 선택하여 적용할 수 있다. Zip package 방법은 직접 커스텀하여(플러그인 등) 만들 수도 있다.(진행 방법 하단에 작성) Command line CDN * Zip package 🧑🏻💻 Zip package 방법 적용(커스텀 방식) 공식 빌드 커스텀 페이지 접속 (https://cke..
[React] - useReducer()란 간단하고 쉽게 이해하기(예제코드, useReducer 사용예제)
🧹 쉬운 정리 1. useReducer()는 useState()와 같은 상태 관리, 상태 업데이트 훅(Hook)이다. 2. 변경할 값이 많을 때(상태 업데이트) 즉 상태 관리할 데이터가 많아질 때 사용을 고민해 볼 필요가 있다. 3. 좀 더 구조화된 방식으로 상태를 관리하고 싶을 때 사용할 수 있다. ( 예) "PLUS" 타입 은 무조건 더하기) 4. 선언형태 : const [state, dispatch] = useReducer(reducer, initialState); state : 상태 이름 (컴포넌트에서 사용할 상태) > 빵(재료) 담는 접시 dispatch : 상태(state)를 변경 시 필요한 정보를 전달하는 '함수' > 주문서 reducer : dispatch를 확인해서 state를 변경해 주..
🧹 간단 정리 커스텀 훅이란? 반복되는 로직을 리액트 내장 훅 들을 사용하여 구현한'내가 만든 훅'이라고 생각하면 된다. 쉽게 설명하자면 '반복되는 로직을 분리' 했는데 분리한 로직 속에 리액트 훅이 있다? > '커스텀 훅' 분리한 로직 속에 리액트 훅이 없다? > '(JS) 함수' (자세한 내용은 아래 👀) 💁🏻♂️ 규칙 🎤 이름 규칙 - 커스텀 훅의 이름은 "use"로 시작해야 한다. 예를 들어, useCounter나 useFetchData와 같은 이름. 🥊 내장 훅(Hook) 사용 - 커스텀 훅 내에서 내장 훅(예: useState, useEffect)을 사용. 이렇게 하면 커스텀 훅의 로직을 더욱 강력하게 만들 수 있다. 🎁 상태와 함수 반환 - 커스텀 훅은 상태 값과 해당 상태를 업데이트하는 ..
💁🏻♂️ 소개 프로그래밍 언어를 크게 고급언어와 저급언어 2가지로 분류된다. 2가지의 차이점을 정말 간단하게 알아보자! ⚱️ 고급언어 (High-Level Language) 고급언어는 사람이 이해하기 쉬운 형태로 작성된 프로그래밍 언어이다. 예) C++, Java, Ruby 등 a = 12; b = a; c = a + b; 🥉 저급언어 (Low-Level Language) 저급언어는 컴퓨터가 이해하기 쉬운 형태의 언어이다. 예) 기계어나 어셈블리어 저급언어를 사용하면 하드웨어의 세부 사항을 직접 다룰 수 있어 최적화된 프로그램을 작성할 수 있다. section .data a db 12 ; 변수 a를 12로 초기화 section .bss b resb 1 ; 변수 b를 1바이트 크기로 선언 c resb 1..
🧹 간단 정리 Tuple 타입은 TypeScript에서만 지원하는 데이터 타입이다. Tuple 타입은 배열의 값과 길이를 고정하는 것이라고 생각하면 쉽다! ex) > let person: [string, number, boolean]; 설명 : 길이 3, [문자열, 숫자, 참 거짓]만 올 수 있는 person변수 선언완료! (자세한 내용은 아래참고) 🙋🏻♂️ Tuple 타입 소개 Tuple 타입은 배열의 확장된 형태로, 고정된 길이와 서로 다른 타입의 요소를 갖는다. 각 인덱스에 해당하는 요소에 명시된 타입의 값이 저장되며, 데이터 구조를 명확하게 표현하는 데 사용된다. 👍🏻 Tuple 타입의 장점 Tuple 타입을 사용하면 1. 데이터의 구조와 타입을 동시에 정의하여 코드를 더 명확하게 표현할 수 있..
