맨땅에서 프론트엔드

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

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..

요즘 동심에 빠진 것 같아. 유튜브에 이런 플레이리스트가 자꾸 떠,, 프로젝트 진행 중에 좌측 여백 공간에 스크롤에 따라다니는 사이드 바를 넣어야 했다. 좌측 공간에 사이드 바 고정하기 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..