프론트엔드 데브코스 5기 TIL 61 - Felog(velog) 프로젝트

김영현·2023년 12월 21일

국비지원교육 코딩부트캠프 프로그래머스 데브코스 프론트엔드 데브코스

TIL

목록 보기

70/132

기획,모델링(스토리 기반)

뭘 구현해야하는가? => 스토리에 초점을 맞춘다.

사용자 스토리

사용자가 서비스를 어떻게 이용할까 예측해봄(스토리)

비인증 사용자는 글 작성을 위해 가입 후 글 작성
=> 도메인을 뽑아낼 수 있다. 사용자, 글...
=> 기능을 뽑아낼 수 있다. 회원가입, 글 작성, 글 목록, 삭제 등...
=> 디자인, 페이지도 뽑아낼 수 있다. 회원가입 페이지, 메인 페이지, 글 목록 페이지, 작성 페이지 등...

더 자세히 가보면..

비인증 사용자는 felog서비스에 가입후 글 작성
최신소식 알기위해 글 목록 확인
인증된 사용자는 글 삭제, 수정
비인증 사용자는 글 읽음
비인증 사용자는 댓글 남기기위해 가입후 댓글 작성
인증된 사용자는 내 소개 추가위해 프로필 정보 수정
인증된 사용자는 댓글에 오타발견하여 수정... 등

그럴듯한 스토리를 만들어 기능을 뽑아낸다.
뽑아낸 기능은 다음과 같다

로그인과 회원가입
유저 정보 수정
글 CRUD
댓글 CRUD

기능에서 도메인을 발견할 수도 있다.

사용자
글
댓글

도메인에서 필요한 요소를 정의(모델링) 할수있다.

사용자 => id, email, name, password, description...
글 => id, title, content....
댓글 => 글과 같다

이제 개발 프로세스를 진행한다.
모델링 => 백엔드 => 프론트엔드 => 배포

백엔드 구축(strapi, graphql)

nextJs에러 reateContext only works in Client Components

https://vercel.com/guides/react-context-state-management-nextjs#rendering-third-party-context-providers-in-server-components

//provider.tsx

"use client"; //React쪽 기능 사용할때 선언해주어야함. provider는 모두 클라이언트 기능이니까..모아서 선언.

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { CoProvider } from "@co-design/core";
import { ReactNode } from "react";

interface ProvidersProps {
  children: ReactNode;
}
const client = new ApolloClient({
  uri: "http://localhost:1337/graphql",
  cache: new InMemoryCache(),
});

export function Providers({ children }: ProvidersProps) {
  return (
    <ApolloProvider client={client}>
      <CoProvider withGlobalStyles withNormalizeCSS>
        {children}
      </CoProvider>
    </ApolloProvider>
  );
}


//app/page.tsx

"use client"; //co-design도 마찬가지로 React관련 기능이다.

import { Button } from "@co-design/core";

export default function Home() {
  return (
    <div>
      <Button>버튼</Button>
    </div>
  );
}