목록프론트엔드/React JS (4)

Timpossible history

[React JS] React-quill로 코드 블럭 에디터 설정하기(feat. highlight.js)

커뮤니티 웹사이트나 블로그 형식을 담은 웹사이트를 만들다보면, WYSIWYG(What You See Is What You Get), 텍스트 에디터를 만들 때가 있는데, 이 포스트에서는 그 중 코드 블럭을 생성하는 에디터를 구현해보고 highlight.js를 이용해서 코드를 구분지어주는 작업을 해보도록 하려고한다. 1.프로젝트 설치 npm i react-quill highlight 먼저 필요한 패키지들을 설치해준다. 2. 프로젝트 구현 코드 설정 "use client"; import React, { useState } from "react"; import styles from "./editor.module.css"; import ReactQuill from "react-quill"; import "reac..
프론트엔드/React JS 2024. 2. 16. 19:22
[React JS] React context API로 state 전역적으로 관리하기

React Context API는 React 애플리케이션에서 전역 상태를 효과적으로 관리할 수 있는 강력한 도구이다. 전역적으로 state를 관리한다는 측면에서 react-redux와 같지 않냐 생각할 수 있지만 차이점은 있다. React Context API와 Redux의 차이점 1. 용도 React Context API 주로 컴포넌트 간의 상태를 효율적으로 전달하고 관리하기 위한 도구. 상태 관리의 범위가 상대적으로 작은 경우에 적합. Redux 상태 관리 라이브러리로서, 큰 규모의 애플리케이션에서 상태를 효과적으로 관리하고 전역 상태를 중앙에서 제어하기 위한 도구. 상태 관리의 범위가 크거나 복잡한 애플리케이션에서 적합. 2. 구조 React Context API React에 내장된 API로, 컴포..
프론트엔드/React JS 2024. 1. 6. 19:21
인스타그램 API 이용하여 피드 긁어오기

이번에는 인스타그램 API를 이용해서 사용자의 정보나 게시글을 가져와보자. 먼저 인스타그램 API를 살펴보기 위해 개발자 웹사이트에 들어가본다. 인스타그램은 Meta가 인수하였으니 Meta for developers로 들어가면 된다. Meta의 개발자 문서들은 친절하지 않기로 유명하다지만, 정말 집중해서 따라가보면 되는 걸보니 츤데레인 것 같다. Meta for developers - 인스타그램 기본 디스플레이 API(일반 사용자를 위한 api라고 한다) (참고로 비지니스 계정을 위한 api는 인스타그램 그래프 API이다) 인스타그램 기본 디스플레이(표시) API로 할 수 있는 것 Instagram 사용자로부터 Instagram 사용자 액세스 토큰 및 권한 가져오기 Instagram 사용자의 프로필 가져..
프론트엔드/React JS 2024. 1. 2. 14:06
[React JS] React-quill로 WYSIWYG 구현하는 중에 format과 blot 커스터마이징

React-quill로 Text editor 구현 중 기존 module을 이용 시 느꼈던 한계 그에 따른 해결책(Quill.import 메소드 사용) 응용 사례 주의 사항 1. React-quill로 Text editor 구현 중 기존 module을 이용 시 느꼈던 한계 이를 해결하기 위해 image icon 클릭 시 실행되는 코드 구현 const formats = [ "font", "size", "bold", "italic", "underline", "strike", "align", "blockquote", "list", "bullet", "indent", "background", "color", "link", "image", "width", "classify", "video", ]; const Edi..
프론트엔드/React JS 2023. 12. 30. 14:37
이전 Prev 1 Next 다음