분류 전체보기 78

어드민 로그인 인증 로직을 이해하기

반성하며 시작 : 로그인을 대충 이런 느낌으로 어림짐작 했던 나프론트엔드 개발자나 클라이언트 입장에서의 로그인은 이런 느낌일것입니다.“로그인 요청을 보내면 서버에서 토큰이 온다” → “그 토큰을 저장하고 요청 헤더에 붙인다” → “서버는 그 토큰을 확인하고 권한을 부여한다” 이 3가지 흐름은 명확하게 알고 계십니다. 그러나, 백엔드 코드를 직접 작성하는 백엔드 개발자에서의 시선은 여기서 한단계 더 내려갑니다.“토큰은 누가 어떤 정보로 만들어야하지?”“서버는 토큰을 어떻게 믿지?”“토큰이 만료되면, 왜 RefreshToken이 필요하지?”로그인 성공은 단순하지 않다.로그인 시스템을 구현할때는 보통 두 단계를 고려합니다.먼저 인증(Authentication)을 하겠습니다.“로그인 하려고 하는 너는 도대체 누..

Node.js 백엔드 아키텍쳐 가이드. # 2. Repository

2. Repo: PostRepo.ts (DB 접근 “전담”)레포지토리 계층은 한마디로 “Sequelize 쿼리 모음집”입니다.다시 말하면, 서비스 컨트롤러는 더 이상 PostModel.findAll()같은 야생의 쿼리를 사용하지 않고, PostRepo.create()와 같은 메서드만 호출하면 DB작업이 끝나도록 처리합니다.이렇게 분리해두면, 나중에 DB를 변경해야할 소요가 있거나, 쿼리 최적화를 위해 인덱스를 조정하거나, 캐싱 레이어를 추가하고 싶을때 서비스/컨트롤러 코드는 최대한 손대지 않을 수 있습니다.2-1. create(data, imageUrls) : 게목표: post 하나 만들고, 이미지 URLs도 별도 테이블에 저장.const post = await PostModel.create(data);..

Node.js 백엔드 아키텍쳐 가이드. # 1. Model

본 문서는 공동구매 플랫폼의 백엔드 개발자로 참여하며 학습한 내용을 바탕으로, Node.js(Express) + Sequelize + MySQL을 활용한 백엔드 구조를 체계적으로 정리한 가이드입니다. 단순 구현 방식만을 나열하는 것이 아니라, 실제 개발 과정에서 마주한 문제 상황과 해결 과정, 그리고 그 안에서 얻게 된 인사이트를 함께 기록합니다. 이 문서에서는 Node.js 기반 백엔드를 구성하는 핵심 축인 모델(Model), 레포지토리(Repository), 서비스(Service), 컨트롤러(Controller), 그리고 애플리케이션의 시작점을 담당하는 서버(server.ts) 구조를 중심으로 설명합니다. 각 구성요소가 어떤 역할을 맡고 있으며, 실제 서비스 개발 과정에서 어떻게 유기적으로 연결되는지..

MJS 식단 페이지 리팩토링 기획안

1. 기획 배경 — “하나의 페이지에 모든 걸 넣은 게 문제였다” 처음 식단 페이지를 만들 때는 MVP 수준으로 단일 컴포넌트에모든 로직(데이터 fetch, 상태, 날짜 이동, UI)을 넣어 빠르게 완성했어요. 하지만 그 구조는 다음과 같은 문제를 드러냈습니다. 모바일에서도 데스크톱용 주간 테이블이 그대로 표시되어 가독성이 나쁨브라우저 크기에 따라 한 컴포넌트 안에서 조건문이 난무함React Query / 상태 / 날짜 계산 로직이 뒤섞여 유지보수가 어려움간단한 변경도 “하루 걸리는 구조”가 됨 이 시점에서 UI 관심사와 데이터 로직을 분리하고, 기기별 UX를 맞추자는 기획이 시작됐습니다. 2. 리팩터링 방향성 — “역할 단위로 쪼갠다”우리는 React의 단일 책임 원칙(Single Responsib..

MJS : 학사일정 컴포넌트 및 자유게시판 HOT 게시물 컴포넌트 연동 문서

대상: 신입/합류 개발자목표: 두 위젯을 빠르게 이해하고, 팀의 코드/디자인 규칙에 맞춰 안정적으로 개발·확장할 수 있도록 한다.위젯학사일정 텍스트 전용 패널(달력 그리드 없음)자유게시판 HOT 게시물 리스트(로그인 게이팅)0. 스택 & 전제Next.js/React 18, TypeScript (strict), Tailwind CSS, Zustand(전역 인증), react-icons(아이콘)디자인 토큰: mju-primary, grey-40 등 (Tailwind theme.extend.colors에 등록되어 있어야 함)API 모듈: getAcademicEvents, getBoards (서버 응답이 케이스별로 달라질 수 있음 → 안전 파서 필요)// tailwind.config.{js,ts} 예시expor..

MJS 광고 캐러셀 & 실시간 검색 순위 집계 Component 설계 가이드

1. 광고 캐러셀 (AdCarousel)설계 의도학교/동아리/행사 홍보용 이미지를 자동 순환으로 보여주는 컴포넌트.hover 시 자동 재생을 멈추어 UX를 개선.접근성(aria-label, 버튼 제어) 고려.기술적 포인트상태 관리index: 현재 활성화된 슬라이드 인덱스를 관리.timerRef: setTimeout 관리용 ref, 언마운트 시 clearTimeout 보장.hoverRef: 마우스 오버 여부를 추적하여 autoplay 제어.useMemoslides = images가 주어지면 외부 이미지, 없으면 DEFAULT_IMAGES 사용.useMemo를 사용해 불필요한 재계산 방지. (단, 단순 배열이라 성능상 큰 차이는 없으므로 가독성/안정성을 위해 선택적으로 사용.)타입 지정images 배열은 옵..

MJS 명대뉴스 반응형 구현

대상 코드: NewsCard 컴포넌트 (article, aria-labelledby, aspect-ratio, onError 캐스팅, React.memo)GPT의 흐름을 파악하기 위한 “왜 이렇게 썼는지”를 끝까지 파고드는 설명형 레퍼런스입니다. 시맨틱 태그부터 접근성, 이미지 비율, 이벤트 타입 캐스팅, 메모이제이션까지 한 번에 훑습니다.1) 는 무엇이고, 언제 쓰나?시맨틱 태그(의미 있는 HTML 태그) 중 하나로, 블로그 글/뉴스 카드/피드 아이템처럼 독립적으로 의미가 성립하는 콘텐츠 묶음을 감싸는 데 씁니다.특징문서 내에서 단독 재사용 가능한 콘텐츠 블록.RSS, 북마크, 공유 등 콘텐츠 단위로 식별되길 원하는 영역.내부에 제목()이 있는 것이 일반적.언제 대신 ?이 카드 하나가 하나의 글/뉴스..

MJS 반응형 리빌드 & 방송국 페이지 성능 튜닝

목표 요약모바일: 캐러셀(드래그) 탭 + 상단 여백 축소 + Compact 프로필 + 날씨 비표시데스크탑: 탭 중앙정렬 유지 + Full 프로필 + 날씨 표시 + 방송국 3×3 그리드 고정성능: iframe 즉시로딩 제거(썸네일 → 클릭 시 임베드), 불필요 렌더/네트워크 최소화, LCP/TTI 개선0. 변경 전 주요 Pain Points탭이 모바일에서 줄바꿈/과밀 → 터치 정확도·가독성 저하.Navbar–Header–SearchBar 간격이 모바일에서 과도.Profile/Weather가 모바일에서도 동일 무게로 렌더 → 초기 비용↑.방송국 페이지에서 iframe 다건 즉시 로딩 → 초기 렌더/네트워크 폭증, TTI 지연.데스크탑 초대형 해상도에서 4열까지 늘어나 일관된 3×3 레이아웃 유지 실패.1. ..

MJS _ 명대방송국 연계

1. 페이지네이션 설계안 요구사항 한 페이지에 9개의 데이터를 보여준다.페이지 하단에 점(dot) 형태의 페이지네이션 UI를 표시한다.한 번에 최대 5개의 점만 표시한다.다음/이전 버튼으로 페이지를 이동하면 점이 슬라이드처럼 움직인다.점을 클릭하면 해당 페이지로 이동한다. 2. 기본 프로토타입 구현 초기 구현은 단순하게 현재 페이지 기준으로 start/end 계산 후 점 배열을 만들고,이전/다음 버튼, 점 클릭 시 onChange()로 페이지 변경 요청을 하는 구조였습니다. type Props = { currentPage: number; totalPages: number; onChange: (page: number) => void; window?: number; // 보이는 점 개수};export..

Set 자료구조로 사이드바 UX 개선하기

예전 프로젝트에서 사용자 친화적인 사이드바(Sidebar)를 만들기 위해 다양한 UI/UX 개선을 적용했다. 진행하고 있는 AI TUTOR 프로젝트의 SIDEBAR의 UI/UX에도 개선이 필요했다. 1. Hovering을 하고 있지도 않은데, Hovering 시 바뀌는 스타일이 불필요하게 적용됨 2. toggling 반응속도가 느림 이때 쓸 수 있는 방법은 JavaScript의 Set 자료구조를 활용한 열림/접힘 상태 관리 최적화가 있었다. 이 문서는 해당 리팩토링 과정과 그 이유, 그리고 부수적인 UI 버그 해결 방법까지 총망라한 정리이다.1. 기존 사이드바 상태 관리 방식초기에는 각 폴더의 노트 리스트 열림 여부를 다음과 같이 관리했다:const [isNoteOpen, setIsNoteOpen] =..