이롭게 현명하게

목차 들어가며아토믹 디자인 패턴이란?아토믹 디자인 패턴구조(5단계)아토믹 디자인 패턴의 문제점아토믹 디자인 패턴의 장단점아토믹 디자인 패턴 예시마무리 [들어가며]프론트엔드 멘토링을 하면서 멘토링 프로젝트를 진행하게 되었다.프로젝트를 진행하면서 협업 효율성과 유지보수성을 높이기 위해 디자인 패턴을 도입하게 되었다.컴포넌트 구조를 명확히 정의하고 역할과 복잡도에 따라 체계적으로 분리할 수 있다는 점, 그리고 일관된 UI를 빠르게 구현할 수 있다는 점에서 아토믹 디자인 패턴을 선택하게 되었다. [아토믹 디자인 패턴(Atomic Design Pattern)이란?]프로젝트가 점점 커지면서 유지보수가 어려워지거나 코드가 복잡해지는 경우가 발생하기도 하였다.페이지마다 폰트 크기, 색상, 테두리 스타일, 여백 등 ..

목차개발 환경 구성Express 서버에서 MySQL 연결하기API 서버 만들기React에서 API 호출하기 https://devyihyun.tistory.com/62 [DateBase] MySQL 설치하기MySQL 웹사이트 접속 MySQL :: MySQL Community Downloads The world's most popular open source database Contact MySQL | Login | Register dev.mysql.com MySQL Installer for Windows 클릭 64비트 윈도우지만 32비트 MySQL이 잘 설치되고 실행devyihyun.tistory.com [개발 환경 구성]프론트엔드 : 리액트 18백엔드 : expressDB : MySQLReact 환경..

목차 React 보안 취약점Next.js 보안 취약점Vercel 보안 취약점요약 12월 3일 리액트 공식 블로그에 React Server Component 관련 보안 취약점이 발표되었다.이어 12월 6일에는 Next.js 공식 블로그에서도 관련된 취약점을 공지하였다.두 팀이 비슷한 시기에 공지를 낸 것은 단순한 패치가 아닌 심각한 영향이 있는 취약점이기 때문이다.특히 Next.js는 React Server Component에 의존하는 구조로 React에서 발생한 취약점이 그대로 Next.js에도 영향을 미치는 연관성이 있기 때문이다. https://www.dailysecu.com/news/articleView.html?idxno=203111 [단독] “Log4j 이후 ‘최악의 취약점’ 터졌다”...중..

목차오류 내용원인해결방법 [오류 내용]Route 관련 컴포넌트를 생성하던 중 발생한 경고이다. React Hook useEffect has a missing dependency: 'requireAuth'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps[번역]React Hook useEffect에 종속성이 누락되었습니다: 'requireAuth'. 이를 포함하거나 종속성 배열 .eslintreact-Hooks/everse-deps를 제거하세요 [원인]"use client";import { useAuth } from "@/shared/hooks/useAuth";import React, { useEffect..

목차on과 handle의 차이실제 코드 예시로 이해하기패턴 요약 및 정리마무리 - 팀 컨벤션으로 정착시키기 리액트를 사용하면서 onClick과 handleClick의 이름의 함수나 props를 사용하게 된다.처음에는 '줄 다 클릭 이벤트니까 이 코드에서 뭔지만 알면 되겠지?' 정도로만 생각했다.코드 리뷰를 받으면서 handle과 on의 코드 컨벤션이 있다는 것을 알게 되어 기록을 하게 되었다. [on과 handle의 차이]리액트에서 이벤트 핸들러를 사용할 때 두 가지 경우로 사용한다.on + EventName = 외부로부터 전달받는 이벤트handle + EventName = 내부에서 정의된 구현 함수 props 이름이나 JSX/TSX이벤트 속성을 표현할 때 사용버튼이 클릭되었을 때 실행할 동작을 외부에서..

목차리액트 기본 폴더 및 파일src 내부 폴더 구조[번외] package.json [리액트 기본 폴더 및 파일]프로젝트를 진행하다 보면 관리해야 할 파일들이 늘어난다.파일들을 효율적으로 관리해야 하기 때문에 폴더의 구조를 잘 잡아야 한다. 24년 가지는 CRA를 사용하여 프로젝트를 구성했다.하지만 2025년 2월 14일 리액트 공식 블로그에 CRA 사용을 중단한다는 글이 올라왔다.그래서 vite를 사용하여 리액트 환경을 구성한다. 이 글에서는 타입스크립트를 기준으로 설명하겠습니다.https://devyihyun.tistory.com/230 [React] vite로 리액트 설치하기목차 create-react-app 지원 종료vite를 사용하는 이유vite 시작하기 https://devyihyun.tist..