Next.js 를 사용하여 작업하였으므로 자연스럽게 vercel 을 통해 배포했다.vercel 내에서 도메인을 연결했으며 github repository 와 연결하여 자동 배포 CI/CD 를 구축했다.이번 프로젝트를 통해서... 정말 많은 것들을 배울 수 있었다... (ㅋㅋ ㅠ)일단 백엔드와 프론트엔드를 완전 분리하여 프론트엔드만 작업하려고 하니 적응하는 데 시간이 걸렸다.평소에는 백엔드까지 함께 작업했으므로 문제 원인을 찾기 쉬웠는데 스웨거를 통해서 엔드포인트를 파악하고...spring security 같은 권한 문제는 어떻게 찾아야 할지 정말 막막하기도 했다.내가 프론트엔드만을 지망하는 것이 아니고 풀스택을 지망하고 있기 때문에이 다음에는 전처럼 백엔드, 프론트엔드를 모두 직접 구현하는 프로젝트를 진..

관리자 페이지에서는 모각존, 모각챌, 뱃지, 고민 상담 게시판을 관리할 수 있다. 관리자 페이지는 크게 복잡한 것 없이 반환된 리스트 출력, 그리고 일부 추가 기능만 구현했다.챌린지의 경우 '공식 챌린지' 기능을 위해 관리자가 챌린지를 생성할 수 있다.그리고 뱃지 관리에서는 뱃지를 추가할 수 있는데, 여기서 뱃지의 조건을 설정하면 유저가 조건을 충족할 경우 자동으로 부여된다.예를 들어 성공 횟수 3으로 생성할 경우, 유저가 챌린지를 세 번 정상적으로 완수할 경우 해당 유저에게 해당 뱃지가 부여되는 식이다. 관리자 페이지는 이벤트가 많고 유저 페이지처럼 성능이 크게 중요하지 않을 것이라고 판단되어 전부 client component 로 작성했다.그리고 모든 페이지에 표가 필요하므로, 공통 componen..

모각 프로젝트에서는 카카오 소셜 로그인과 네이버 소셜 로그인을 지원한다. 관리자 및 테스트 로그인을 제외하고는 소셜 로그인으로만 회원가입 및 로그인이 가능하다.이전 프로젝트에서 구현했던 로그인과 가장 다른 점은 next 의 서버사이드에서 처리했다는 것! "use client";import SubTitle from "@/app/components/shared/sub-title";import kakaoLogin from "./kakao_login.png";import naverLogin from "./naver_login.png";import Link from "next/link";import { useEffect } from "react";import { useRouter, useSearchParams ..

말 못할 고민을 익명으로 털어놓을 수 있는 게시판으로, 글을 작성할 때 시간을 지정하여 해당 시간이 경과하면 자동으로 삭제된다. 친구들에게 말 못할 고민을 털어놓자는 콘셉트로 추가된 페이지다.비밀일기장 같은 느낌을 위한 일러스트 이미지를 메인에 삽입했다.일러스트디자인은 디자이너 지인이 도와주었습니다 https://www.youtube.com/@티거-r9c 고민을 작성하는 시점에 시간을 지정할 수 있으며, 기본 시간은 24시간이다.작성을 완료하면 해당 작성글로 바로 redirect 되고, 삭제까지 남은 시간이 실시간으로 줄어들게 설정했다.첫 번째 댓글은 서버가 반환한 '모각봇' 의 AI 위로 답변이다. "use client";import { useEffect, useState } from "react"..

모각챌은 여러 명이 하나의 미션을 인증하는 공간이다.챌린지 기간 동안 탈락하지 않고 완수하게 되면, 성공 뱃지를 부여받는다. 모각챌 메인은 challenge-search-card.tsx 로 별개 작성하였고, 챌린지 상태 (진행 전, 진행 중, 종료) 및 공식 챌린지 여부로 필터링 가능하며최신순과 참가자순으로 정렬할 수 있다."use client";import { useEffect, useState } from "react";import SearchCardView from "@/app/components/shared/search-card-view";import { ChallengeMainProps, ChallengeSearchCardProps, ChallengeStatusType,} from "@/t..

모각존은 여러 명이 함께 공부할 수 있는 공간으로, 상태 변경을 통해 해당 유저의 공부 여부를 알 수 있다.입/퇴장과 상태 변경, 채팅까지 모두 실시간으로 반영되어야 하므로 웹소켓을 사용했다.export async function generateMetadata({ params,}: { params: Promise;}) { const { id } = await params; const jwt = await getJwtFromServerCookie(); const data = await ZoneDetail(id, jwt); return { title: `모각 | ${data.name}`, description: `${data.name} 모각존에서 함께 공부해요.`, };} MetaDa..

첫 진입시 출력되는 홈 화면으로, 모바일 대응 반응형도 구현했다."모여서 각자 공부하기" 라는 콘셉트를 보여 줄 수 있는 이미지를 위해 다양한 공부 및 작업하는 캐릭터를 삽입했다.캐릭터 디자인은 디자이너 지인이 도와주었습니다 https://www.youtube.com/@티거-r9c Next.js 의 장점, 서버 사이드 렌더링을 최대한 살리기 위해 메인은 당연히 server component 여야 한다고 생각했다.그렇지만 모각존과 모각챌은 참여자가 많은 순으로 소개하는 기능이므로실시간까지는 아니더라도 길지 않은 텀으로 업데이트되어야 할 것 같아 revalidate 를 10분으로 설정했다. export async function MainZoneChallenge() { const res = await fet..

프로젝트 주제"모여서 각자 공부하기" 라는 주제로, 함께 공부하거나 챌린지를 통해 서로 교류할 수 있는 서비스입니다.비밀 게시판에 작성한 고민은 설정한 시간이 지나면 자동으로 삭제되어, 부담없이 고민을 나눌 수 있습니다. 프로젝트 기간2025년 4월 6일 ~ 7월 28일 프로젝트 인원 및 역할2인 (백엔드 1명, 프론트엔드 1명) 프론트엔드 사용 기술React, TypeScript, Next.js, Vercel, Zustand, Tailwind CSS, Figma 와이어프레임 2025년 7월 31일 기준, 아래 링크로 접속 가능합니다.www.mogak.kr

세 줄 요약!1. 클라이언트 컴포넌트인데 인식을 못 하는 것 같은 오류가 뜸2. Recoil 과 Next.js 의 충돌3. Recoil 대신 Zustand 사용 상황평소에 사용했던 것처럼 recoil 라이브러리를 Install 하고 useRecoilState 사용했는데,서버 컴포넌트에서 hook을 사용했을 때 뜨는 오류가 출력됨환경: Next.js 15 + React 19 시도use client 지시자를 빼먹었는가?-> 첫 줄에 잘 넣어 둠 Root Layout에 Provider를 추가하지 않았는가?-> 추가함 결론Recoil 사용을 중단하고 Zustand를 사용함 이유일단 Next.js로 프로젝트를 진행하는 것 자체가 처음이었으므로 아무 생각 없이 install 하고 적용했는데, Next.js의 가장 ..

1. 커스텀 훅 (Custom Hook)React의 Hook을 조합해서 만든 함수 useState, useEffect 같은 기존 hook을 활용해 공통 로직을 재사용할 수 있게 도와준다.단순한 함수처럼 사용되어 JSX를 리턴하지 않는다. 2. HOC (Higher-Order Component, 고차 컴포넌트)컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴하는 함수 컴포넌트를 감싸서 기능을 추가하는 데 쓰인다.클래스형 컴포넌트에서 주로 사용되었으며, 최근에는 커스텀 훅이 더 많이 사용되는 추세다. 그럼 상황에 따라서 어떤 걸 선택해야 할까?API 데이터 패칭매번 useEffect, fetch 코드를 복사/붙여넣기 하는 건 비효율적이므로 커스텀 훅으로 로직을 분리하는 것이 유리하다. 로딩과 같은 공통 UI..