Next js 로컬스토리지 활용해 새로고침 시에도 데이터 유지

🎯 목표 현재 새로고침 시 사이드바의 useState가 초기화되고 있습니다. 로컬 스토리지를 활용해 액티브 (활성화 상태)가 새로고침 시에도 선택되었던 값으로 활성화되게 해보겠습니다.로컬 스토리지란 브라우저에 반영구적으로 유지되는 저장소입니다. 웹사이트를 꺼도 만료되지 않는 특성이 있어 새로고침시에도 유지되어야 하는 값을 저장하는 데 활용됩니다.유사한 기능을 수행하는 Redux 라이브러리도 있었지만, state변경에 따른 재렌더링 기능을 기대하지 않아 배재했습니다. (사실 사용해 본적없음) 그럼 기본 메서드 부터 살펴보겠습니다.📃진행 순서로컬 스토리지의 기본 API새로고침 시 저장된 데이터로 액티브 활성화시키기컴포넌트 렌더링 시 저장된 값 가져와서 활성화 시키기키 값 조건 여부에 따라 데이터 가져오..

• format_list_bulleted react
• · 2025. 5. 22.
• textsms

Next js Grid 시스템 만들기

🎯 목표 레이아웃을 행과 12개의 열을 기준으로 관리하는 걸 그리드 시스템이라합니다. Next.js, React에서 사용할 수 있는 보편적인 라이브러리로는 MUI 그리드가 있으며, 전용 컴포넌트인 를 사용하여 구현할 수 있습니다. 해당 라이브러리에서 모듈 형태로 불러와 쉽게 사용할 수도 있습니다만, 필수적으로 열 크기 속성을 지정해야하고, 값을따라야 한다는 점에서 확장성에 제약이 있습니다.따라서 그리드 시스템의 원칙만 참고해. 필요한 기능만 직접 구현해보겠습니다. 컴포넌트 활용 시 더 큰 인식 용이성과 사용성을 확보하는 것이 목표입니다.💻컴포넌트 설계Row, Col 컴포넌트 두 개를 생성하겠습니다. Row 컴포넌트는 필수 부모 컴포넌트입니다. Grid layout을 가지며 grid-template-c..

• format_list_bulleted react
• · 2025. 5. 17.
• textsms

Next js useRef 이용해 아코디언 애니메이션 구현

🎯 목표아코디언이 스르륵 열리는 애니메이션을 구현해보겠습니다. 현재 액티브 클래스 유무에 따라 display : none, block을 CSS로 제어하고 있으나, 트랜지션이 적용되고 있지 않습니다. 그 이유는 css의 트랜지션은 고정적인 값 예 ) em, px등 에 반응하기 때문입니다.자바스크립트 기능을 이용해 scrollHeight값을 계산해 할당함으로써 이를 구현할 수 있습니다. 현재 환경인 리액트에서는 useRef라는 문법을 사용해 구현합니다.📃진행 순서useRef란?아코디언 적용💻useRef란?저장공간, 주로 DOM에 접근하기 위해 사용되는 React Hook입니다.자바스크립트에서 querySelector 메서드를 사용하듯 React에서 DOM을 직접 선택해야 하는 상황에 사용할 수 있습니다..

• format_list_bulleted react
• · 2025. 5. 12.
• textsms

Next js Eslint import 구문 규칙 삽입

🎯 목표프로젝트를 진행하며 import 구문의 양이 많아졌습니다. 점점 코드는 지저분해지고 모듈간의 관계 파악에 어려움을 겪고 있었습니다. 이를 해결하기 위해 Eslint-plugin-import을 사용해보겠습니다. 해당 라이브러리는 자바스크립트 프로젝트에서 모듈과 import 문과 관련된 다양한 규칙을 검사하는 플러그인입니다. 규칙은 EsLint에서 추천하는 기본 규칙 집합들을 적용할수도 있고, 사용자 개인에 맞춰 규칙을 커스텀해서 적용할 수도 있습니다. import/export 구문의 코드 가독성과 전체적인 생산성을 높여보겠습니다.📃진행 순서eslint-plugin-import 설치 및 적용eslint 자동화 💻eslint-plugin-import 설치npm i -D eslint-plugin-i..

• format_list_bulleted react
• · 2025. 5. 11.
• textsms

React 버튼 컴포넌트 만들어보기

🎯 목표 버튼은 웹 전반적으로 사용자와 상호작용하는 요소입니다. 크기,색상, 비활성화 등 다양한 상태값에 따라 변형되어야합니다.확장성 있는 컴포넌트의 기본 조건을 학습하는데에 있어 간단하며 와닿는 예제라 생각합니다. 기능을 확장해가며 개발해보겠습니다.📃진행 순서버튼의 Variation기본 스타일링Props 버튼의 Variation 변형될 수 있는 속성을 상세히 정의해보겠습니다.크기 (size)넓이 (width)비활성화 (disabled)클릭 이벤트 (onClick)배경 색상 (background color)버튼 컴포넌트 제작기본형부터 제작을 해봤습니다. 비활성화 속성 제어와 텍스트 노드를 받아 button 태그를 출력합니다.function Button({ disabled, children }) { ..

• format_list_bulleted react
• · 2025. 5. 10.
• textsms

Next js css module 시스템

🎯 목표 프로젝트 스타일 시스템이 emotion에서 css module로 변경되었습니다. 리소스를 잃는 건 아쉽지만 좋은 선택이라고생각합니다. nextjs에서는 SSR을 기반으로 두고 있습니다. 런타임에 실행되는 CSS-IN-JS보단 빌드 과정에서 실행되는 일반 css 시스템이 하이드레이션 오류를 미연에 방지하기 좋기 때문입니다.css module 정의를 알아본 후 clsx 라이브러리를 사용해 다중 클래스를 설정해보겠습니다..📃진행 순서css-module다중 클래스 설정하기 css module 시스템의 단점clsx 라이브러리 활용💻CSS module리액트 프로젝트의 규모가 커질수록 외부 css를 불러들여 사용하는 것은 스타일 중복과 유지보수의 어려움을 줄 수 있습니다. 그래서 고안된 CSS modu..

• format_list_bulleted react
• · 2025. 5. 6.
• textsms