JavaScript (7) 썸네일형 리스트형 [React] 리뷰 별점 기능 구현하기 리뷰 작성 페이지를 구현할 때 빠질 수 없는 별점 기능을 간단하게 만들어보려 한다.React + Styled-component + 아이콘 라이브러리(React Icons)를 사용하여 구현해 보자 1. Icon + CSS 생성기능을 구현하기 전 별 모양의 Icon이 필요하기에 Icon 생성을 먼저 해보겠다.우선 별 모양의 Icon 생성을 위해 React에서 사용 가능한 아이콘 라이브러리 중 하나인 React Icons를 설치해 준다.npm install react-icons 설치 후 React Icons 홈페이지에서 자신이 원하는 Icon을 찾아준다.https://react-icons.github.io/react-icons/ React Icons react-icons.github.io 별 .. [React] 웹 에디터 React-Quill 사용하기 (2) 관련 포스팅 2024.06.16 - [React] - [React] 웹 에디터 React-Quill 사용하기 (1) [React] 웹 에디터 React-Quill 사용하기 (1)게시글 작성 기능을 구현할 때 그냥 글 작성 기능만 만들면 무언가 심심해 보인다. 폰트 색 변경, 크기 조정, 이미지 추가 등의 기능을 사용할 수 있는 웹 에디터 기능이 있다면 글 작성 페이지의rlawo32.tistory.com 이전 글에서 React-Quill에 대한 전반적인 사용법을 알아보고 구현해 보았다. 이번엔 이미지 적용에 대해 상세하게 구현해보고자 한다.글을 작성할 때 이미지를 함께 사용하면 html 태그로 생성이 되고 저장이 될 것이다. 그러나 이렇게 작성한 글을 DB에 저장하고 불러오면 이미지는 보이지 않을 것이.. [React] 웹 에디터 React-Quill 사용하기 (1) 게시글 작성 기능을 구현할 때 그냥 글 작성 기능만 만들면 무언가 심심해 보인다. 폰트 색 변경, 크기 조정, 이미지 추가 등의 기능을 사용할 수 있는 웹 에디터 기능이 있다면 글 작성 페이지의 퀄리티를 높일 수 있을 것이다. 여러 무료 웹 에디터 라이브러리 중 React-Quill을 사용하여 웹 에디터 기능을 구현해 보자 1. React-Quill 적용npm install react-quill // reactEditor.tsx'use client';import ReactQuill from "react-quill";import 'react-quill/dist/quill.snow.css';const ReactEditor = () => { return ( .. [React] CORS 오류 해결하기 React를 접하면 흔히 나오는 장면인 CORS 오류.. 누구나 보게 되는 장면이라 생각된다. 클라이언트인 React는 기본적으로 locathost:3000이고 보통 서버단은 localhost:8080으로 사용하게 될 것이다.이렇게 Origin이 다르다 보니 해당 오류가 발생하는 것이다. 해당 문제에 대해 좀 더 알아보자. 1. SOP 란?우선 CORS를 알기전 SOP 개념에 대해 알아야 한다.SOP(Same Origin Policy) 이란 '동일 출처 정책' 이라고 하며, 다른 Origin에서 리소스를 가지고 오거나 보내는 등 상호작용 하는 것을 제한하는 보안 방식이다. 즉, 웹 브라우저에서 보안을 강화하기 위해 동일한 Origin에서만 리소스를 주고받도록 하는 정책이다. 여기서 Origin(출.. [JavaScript] 키보드 이벤트 키보드 이벤트는 3가지로 keyup, keydown, keypress가 있다. 여기서 keypress는 keydown과 유사하게 동작하며, 현재는 deprecated되어 사용을 권장하지 않기에 keypress는 keydown으로 대체하여 사용하면된다. 1. 동작 방식- keyup키보드를 누르고 땠을 때 실행, 키보드를 계속 꾹 누르면 실행되지 않음 - keydown키보드를 눌렀을 때 바로 실행, 키보드를 계속 꾹 누르면 계속 실행됨 - keypresskeydown과 동작방식이 유사하나 Ctrl, Alt, Tab, Shift, Caps Lock 키들은 인식 못함 2. 구현 방법JS에선 input에 넣어서 사용하기 보단 addEventListener를 사용하는걸 추천한다.// JavaScri.. [React] Swiper 사용하기 한 화면에 여러 정보를 보여주고 동적이고 질 좋은 페이지를 만들고자 할 때 캐러셀, 슬라이드 쇼는 개인적인 생각으로 빠질 수가 없다 생각한다. 당장 네이버 홈페이지만 가봐도 여러 개의 캐러셀을 통해 한 화면에서 많은 정보를 보여주고 다양한 컨텐츠를 담아내기에 프로젝트를 만들 때 사용하면 정말 좋은 요소이다. CSS와 JS를 응용해서 만들어 낼 수도 있지만 난이도가 꽤 높고 번거롭다. 보다 쉽게 슬라이드 쇼, 캐러셀을 만들어내기 위해서 Swiper라는 라이브러리를 통해 원하는 대로 Custom 하여 사용해 보자 1. Swiper 란?모바일 및 PC에서 구현하기 쉽고 사용하기 적합한 라이브러리이다.간단한 HTML, CSS, JS 코드를 통해 반응형 슬라이더, 캐러셀 등을 만들어낼 수 있으며, 기본 디자인에.. [React] Jotai로 상태 전역으로 관리하기 간단한 사이드 프로젝트를 진행하면서 기존에 사용하던 Zustand 말고 새로운 상태 관리 도구를 사용하고 싶은 생각이 들게 되어 Redux, Recoil, Jotai 중에서 고민을 하다 Jotai를 채택하고 진행하기로 하였다. 1. Jotai를 선택한 이유이유를 설명하기 전 Jotai 특징과 장단점에 대해 간략하게 알아보자. Jotai는 일본어로 '상태'라는 뜻이다. Recoil에 영감을 받아 만들어졌다고 하며, Recoil과 유사하게 아토믹(Atomic) 모델과 함께 bottom-up 방식으로 접근한다. 이러한 방식은 작은 아톰들을 차곡차곡 쌓아 큰 형태로 만들어 나가는 느낌으로 이러한 bottom-up 방식은 성능이 중요한 앱에서 많이 사용이 된다.Jotai는 매우 작은 번들 크기로 돌아가기에 부담 .. 이전 1 다음
