JEEGOO의 개발 노트

# 시작 지난 포스팅에 게시판의 BE 설정을 했습니다. 이번 포스팅에서는 FE 설정을 진행합니다. 개인 공부를 기록하는 게 주목적이다 보니 기본적인 부분들의 설명은 생략했습니다. # 준비 위와 같이 파일들을 생성합니다. 각 파일의 역할은 다음과 같습니다. index: 게시판 목록 최상위 컴포넌트 Board: 게시판 목록의 각 로우를 생성하는 컴포넌트 BoardList: 게시판 목록을 생성하는 컴포넌트 BoardDetail: 게시글 상세보기 컴포넌트 BoardWriter: 게시글을 등록, 수정하는 컴포넌트 Queries: 게시판과 관련된 GraphQL 쿼리를 관리하는 컴포넌트 Type: TypeScript의 interface 및 type을 관리하는 컴포넌트 먼저 Route설정을 진행합니다. RouteCom..

# 시작 이번 포스팅에서는 Apollo Client를 이용해 이전에 구축한 서버에서 샘플 데이터를 가져옵니다. 필요한 의존성은 이전 포스팅(https://jee-goo.tistory.com/entry/React-Parcel-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1-FrontEnd-1)에서 전부 설치했기 때문에 바로 시작합니다. # Apollo Client 및 Route 구성 다음 파일들을 생성합니다. src/ApolloClient.tsx import ApolloClient from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from ..

# 시작 [나만의 블로그]의 FrontEnd는 React-Apollo, Hooks, TypeScript를 사용합니다. 전체적인 Css는 Free Template를 사용하며 디테일한 부분만 Styled Components를 이용합니다. Free Template 관련 파일은 Github의 MyBlog/frontEnd/src/static/assets, images 디렉터리에 있습니다. https://github.com/eonnine/MyBlog.git eonnine/MyBlog Spring Boot, Graphql, PostgreSQL, React-Apollo, Parcel - eonnine/MyBlog github.com # 준비 - Visual Studio Code : 개발 IDE - Node.js 설치 ..