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 설치 ..

[React, Graphql, Apollo] 그동안 여러 기술들을 공부해오면서 가장 마음에 들었던 것들이다. React는 이미 대세인 프런트엔드 라이브러리. GraphQL은 페이스북에서 만든 질의 언어. Apollo는 클라이언트 측에서 GraphQL 서버와 데이터 통신을 도와주는 질의 라이브러리. 특히 GraphQL은 질의라는 사용법이 흥미로웠고 토이 프로젝트를 통해 실제로 사용해보니 더욱 마음에 들었다. 그래서 위 기술들을 기반으로 새로운 프로젝트를 진행해보려 한다. # GraphQL의 특징 @EndPoint에 고민할 필요가 없다 대표적인 예로 기존에 흔히 사용되던 RESTful API 방식은 Resource에 EndPoint를 부여한 뒤 각 EndPoint는 매칭되는 Resource만 관리하자는 방법..