시작하며...모달창이 열렸을 때 아래 방식으로 스크롤을 없앨 수 있다.document.body.style.overflow = 'hidden';  그런데 나는 원래 스크롤이 있던 화면에 모달이 열렸다고 스크롤이 사라지고 모달이 닫히면 다시 생기는 게 먼가 살짝 불편했다. 😅그래서 다른 방법으로 해결해 보았다! 기존 모달과 스크롤기존에는 모달창이 열려있으면 스크롤을 마음대로 움직일 수 있는 상황이었다.  스크롤 방지위에 말했다시피 useEffect 를 사용하여 열렸을 때 아래 코드를 적용해서 해결할 수 있다.document.body.style.overflow = 'hidden'; 전역 스타일 수정그런데 다른 방법 찾아보았다!바로 전역 스타일에서 아래 코드를 추가하면 된다. 그러면 페이지 높이가 고정되어 스..

시작하며...이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다. 1. 템플릿 만들기가장 먼저 깃허브 이슈와 Pull Requset 템플릿을 만들었다.만드는 방법은 아래 링크에서 확인할 수 있다. https://jjang-j.tistory.com/79 [GitHub] 깃허브 이슈(issue) & PR(Pull Request) 템플릿 만들기☘️ 시작하기 앞서 깃허브로 협업을 하기 위해서 이슈와 PR 이 필요하다. ☘️ 이슈 템플릿 만들기 1. 레포지토리의 Settings 창에 들어온다. 이슈를 생성할 레포지토리의 오른쪽에 있는 Settings 를jjang-j.tistory.com 이슈 템플릿은 위에 있는 내용 그대로 사용하였고, PR 템플릿은 ..

시작하며...나는 Framer Motion 중독자다... 애니메이션을 통해 사용자의 경험성을 늘릴 수 있고 라이브러리를 사용하여 간편하게 애니메이션을 구현할 수 있기 때문이다. Framer Motion 짱!! 🙌 그런데 Next.js 에서 화면 전환 애니메이션을 적용하면서 React 와는 조금 달라 글을 작성하게 되었다. 이전에 Framer Motion 에 관한 내용을 쓴 적이 있다. https://jjang-j.tistory.com/95 [React] Framer motion 애니메이션 적용 - 버튼, 모달, 스크롤, 화면전환시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하..

시작하며...메뉴바나 드롭다운의 외부영역을 클릭했을 때 닫히는 걸 구현하는 게 어려운 작업은 아닌데 이걸 구현하면서 삽질이 좀 많았다🥲 그래서 외부 영역 클릭 시 닫히는 로직에 대하여 자세히 정리해보려고 한다. 처음 구현한 방식Modal 처럼 닫히도록 구현처음에 구현한 방식은 모달(Modal)처럼 닫히도록 구현하였다. 메뉴바 뒷배경 전체화면으로 만든 후, 그 위에 메뉴바를 만드는 방식이다.const UserMenu = ({ isOpen, onClose, className }: UserMenuProps) => { const menuRef = useRef(null); const handleClickOutside = (e: MouseEvent) => { if (menuRef.current) { ..

시작하며... 인프런에서 진행하는 인프콘(INFCON) 2024가 8월 2일 코엑스 그랜드볼룸&아셈볼룸 에서 열린다고 한다!!!7월 8일 23시 59분까지 신청을 받으니깐 지금 당장 신청하기!!!! GO GO!! https://www.inflearn.com/conf/infcon-2024/ 인프콘 2024 - INFCON 2024인프런이 만드는 IT인의 축제, 인프콘에 초대합니다www.inflearn.com 작년 인프콘작년 완전 초짜 개발자 지망생이었던 나... 인프런에서 컨퍼런스가 열린다고 하길래 보자마자 신청했었고 초심자의 행운인지 운이 좋게 당첨이 되었었다...(정말 감사합니다! 좋은 경험이었습니다.🍀👍 )아는 사람도 없이 혼자 쭈뻣쭈뻣 가서 미리 듣고 싶었던 강의를 미리 정하고 시간에 맞게 강의..

시작하며...현재 프로젝트에서 내가 게시물 등록하기 페이지를 맡게 되어 React Quill 라는 에디터 라이브러리를 사용하여 구현하였다.이미지를 삽입하면 아래처럼 화면에 꽉 차게 된다. 그래서 실제 게시물을 작성하는 페이지처럼 마우스를 사용하여 사진의 크기를 마음대로 조절할 수 있으면 좋을 거 같다고 생각을 했다.  @xeger/quill-image-actions 사용React Quill 에서 이미지를 다룰 수 있는 quill-image 라는 모듈을 사용하였다. 해당 모듈을 통해 이미지의 사이즈와 정렬 위치를 조절할 수 있다. https://github.com/xeger/quill-image GitHub - xeger/quill-image: Delightful editing of rich-text im..

시작하며...현재 프로젝트의 상태 관리 라이브러리로 Zustand 를 사용하기로 했다.사용하기 간편한 상태 관리 라이브러리 중에서 꾸준히 업데이트되면서 다운로드 수가 많은 Zustand 를 선택하게 되었다.  내용이 좀 빈약하지만 블로그에 간단하게 Zustand 를 사용하는 방법에 대해 글을 작성했었다.https://jjang-j.tistory.com/57 [React] Zustand 상태 관리 라이브러리 사용 방법시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경jjang-j.tistory.com persist 사용하게 된 이유아래 코드와 같이..

발생한 문제검색어를 입력하고 검색 버튼이나 엔터를 눌렀을 때 검색이 되는 기능을 구현하고 있다. 위에 코드를 실행해 보니 엔터를 눌렀을 때 값이 두 번 찍히는 현상을 발견하게 되었다. (검색 버튼 눌렀을 땐 한 번) 그래서 혹시 reactStricMode 때문일 수도 있어 주석처리 했는데도 변함이 없었다. (참고로 Next.js 임)  문제 이유구글링을 통해 이러한 문제가 발생한 이유를 살펴보니 바로 한글 때문이였다.영어와 숫자와 달리 한글은 자음과 모음을 조합해서 만드는 언어라서 조합 중인 문자를 처리하는 과정에서 keydown 이 두 번이나 발생하는 것이라고 한다. 그래서 문자가 조합 중이면 keydown 이벤트가 발생하지 않도록 처리해야 한다. 문제 해결문제를 해결하기 위해 다음과 같이 절차를 진행..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) package.json 생성하기create-next-app 없이 next.js 프로젝트를 만들기 위해 먼저 package.json 을 만들어야 한다.먼저 npm init 를 입력해서 package.json 을 생성한다. react, react-dom, next 설치그 다음으로 Next.js 프로젝트를 실행하는데 필요한 핵심 라이브러리인 react, react-dom, next 를 설치한다. devDependencies 에 필요한 패키지 설치typescript 와, 타입스크립트 타입 지원에 필요한 @types/react, @types/react-dom, @types/node 그리고 ESLint 에 필요한 eslint, eslin..

시작하며...팀 프로젝트를 하다 보면 커밋 메시지 컨벤션을 정하게 된다.그런데 이렇게 규칙을 정했음에도 실수로 커밋 메시지를 잘못 작성하거나 지키지 않는 경우도 발생하게 된다. 😭 그래서 이러한 커밋 컨벤션을 지키지 않았을 때 커밋이 되지 않도록 commitlint 를 설정할 수 있다. commitlint 설정하기husky 설치하기husky 는 Git 이벤트가 발생할 때 자동으로 실행되는 스크립트로 커밋을 만들기 전에 특정 작업을 수행하거나 푸시하기 전에 작업을 할 수 있도록 도와준다. 그래서 먼저 husky 를 설치한다. npm install husky --save-devnpx husky install commit-msg 파일 작성husky 를 설치하면 프로젝트에 .husky 라는 폴더가 생기게 된다..