맨땅에서 프론트엔드

[React] 텍스트 에디터 제작기 2 (Tiptap에 다양한 로직 결합하기)

Tiptap 텍스트 에디터 개발 코드와 배포 링크는 아래에서 확인할 수 있습니다.배포 링크: https://text-editor.bio/Github 코드: https://github.com/jaqwe2301/text-editor 이전 포스팅에 이어서 아래 세 가지에 관하여 이야기해보고자 한다. 라이브러리 없이 텍스트 에디터를 구현하는 것을 포기한 이유Tiptap 라이브러리 간단 소개이전에 만든 로직을 어떻게 Tiptap과 결합하였을까 라이브러리 없이 텍스트 에디터를 구현하는 것을 포기한 이유 텍스트 에디터 구현하면서 어려움도 있었지만, 완성까지는 어떻게든 갈 수 있겠다는 생각도 들었다. 하지만, 구현 범위와 리스크를 생각했을 때 ‘라이브러리 없이 끝까지 가는 건 무리’라는 결론에 도달했다. 1. 끝 없이..

[React] 텍스트 에디터 제작기 1 (DOM을 이용한 에디터 직접 제작)

평일 내내 배가 아파서 병원을 갔더니 "응급실 가야겠는데요?"...?병원 간 당일에 바로 수술을 하였다..해야 할 일이 산더미인데 회복과 함께 일주일이 날아갔다.건강하게 지내는 게 참 중요한 것 같다. 다들 건강한 날들 보내길! 이번 글에서는 직접 텍스트 에디터를 구현하면서 겪은 시행착오, 그리고 다음 글에서 다룰 Tiptap 라이브러리 사용기의 배경까지 정리해 보려고 한다. 이전 포스팅과 같은 외주사에서 블로그와 비슷한 텍스트 에디터 개발을 부탁하셨다.전달받은 디자인을 기반으로 하되, 각각의 텍스트 스타일 기능들은 네이버 블로그를 참고하여 만들면 좋겠다고 하셨다.텍스트 에디터 라이브러리를 살펴보고, 네이버 블로그를 간단히 훑어보았다. 텍스트 에디터 라이브러리를 찾아보자 이번 개발에서 중요한..

드디어 졸업을 했다..! 취업은 언제,,? ㅎ.. 프로젝트를 진행 중에 손쉽게 날짜를 선택할 수 있도록 캘린더(달력)를 구현하려고 하였다. 캘린더를 사용하는 일은 많으니까 라이브러리를 여러 가지 찾아보았으나... 구현에 있어 몇 가지 불편함이 있었다. 라이브러리를 왜 쓰지 않으셨습니까?! 1. 커스터마이징 등의 사용법에 대한 설명이 부족하다. 관련된 설명이 부족하다! 물론 나의 문해력이 부족해서 그럴 수도 있지만,, 다른 라이브러리에 비해 설명이 부족하다고 생각한다. 어떠한 기능을 사용하고 싶을 때 찾기가 굉장히 힘들었다. 2. 프로젝트가 무거워지는 걸 원치 않는다. 라이브러리를 추가할 수록 프로젝트의 무게가 점점 무거워지는 걸 원치 않는다. 최종적으로 해당 브라우저를 열 때 성능 저하가 생길 수 있기 ..

2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) 2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 1 (JWT에 관하여) [JWT] 로그인 세션 관리하기1 (JWT에 관하여) 오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루 mini-frontend.tistory.com 이번에는 실제 코드를 통해 로그인 세션에서 토큰이 어떻게 하면 처리되는지 알아보자. 토큰이 만료 등의 토큰 처리는 Axios 인터셉터(Intercep..

2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 1 (JWT에 관하여) [JWT] 로그인 세션 관리하기1 (JWT에 관하여) 오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루,,, (사진은 축구하고 있는 나) 오늘은 프론트엔드를 개발하면서 로그인 세션을 어떻게 관리하였는지 작성 mini-frontend.tistory.com 이전 글에서 JWT에 대해 알아보았다. 그렇다면 프론트엔드에서 JWT가 어떻게 쓰이는지 한 번 알아보자. 1. JWT 보관 방법 JWT 토큰을 서버로 부터 발급받는다면 브라우저 등에 보관해야 한다. 프론트엔드를 개발할 때 JWT 토큰을 보관하는 방법을 다음과 같다. 1) Local Storage 브라우저를 닫아도..

요즘 동심에 빠진 것 같아. 유튜브에 이런 플레이리스트가 자꾸 떠,, 프로젝트 진행 중에 좌측 여백 공간에 스크롤에 따라다니는 사이드 바를 넣어야 했다. 좌측 공간에 사이드 바 고정하기 position: fixed; left: 20px; /* 왼쪽 여백 */ top: 50%; transform: translateY(-50%); top: 50% - top 속성은 부모 요소에 대한 요소의 상대적 위치를 지정. - 요소의 상단이 부모 컨테이너의 높이의 50% 지점에 위치하도록 함. - 즉, 요소는 부모 컨테이너의 상단에서부터 시작하여 중간 지점까지 배치된다. transform: translateY(-50%); - transform 속성은 요소를 변형시키는 데 사용되며, translateY는 요소를 수직 방향으..

React 애플리케이션을 개발하다 보면, 다른 페이지로 네비게이션을 하면서 특정 데이터를 전달할 필요가 종종 있다. 이를 위해 useNavigate와 useLocation 이라는 두 React Router Hook을 사용할 수 있다. 01. useNavigate useNavigate Hook은 페이지를 다른 경로로 이동시키는 함수를 제공한다. 이 Hook의 장점은 단순히 페이지를 이동시키는 것뿐만 아니라, 이동할 때 추가적인 상태(state) 또는 데이터를 전달할 수 있다는 점이다. useNavigate의 형태 navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) useNavigate 사용법 먼저, react-router-dom 패키지를 설치해야 한다. npm in..