JEEGOO의 개발 노트

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

# 시작 지난 포스팅까지 기본적인 애플리케이션 구성을 마쳤습니다. 이번 포스팅의 주제는 웹 개발의 기본 중 기본인 게시판입니다. 간단하게 구현할 계획이며 먼저 Back End 세팅을 진행합니다. # 준비 @Lombok 사용을 위한 세팅 VS Code의 확장 프로그램( Ctrl + Shift + X )에서 `Lombok Annotations Support for VS Code`을 설치합니다. @GraphQL 스키마 파일을 병합하기 위한 세팅 src/main/resources/static/graphql/schema.graphqls 파일에 현재 샘플 Schema가 있습니다. src/main/resources/static/graphql/sample/sample.graphql 파일을 생성한 뒤 여기에 옮겨주세요...

# 시작 [나만의 블로그]에서는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)을 적절히 섞어서 사용할 계획입니다. 검색에 노출되어야 하는 화면만 SSR을 수행하고 나머지는 CSR을 적용하게 됩니다. `이번 포스팅에서는 Nashorn을 이용한 SSR을 적용합니다.` 였으면 좋겠지만... TypeScript, Apollo에는 처음 적용해보는데 이런저런 에러가 계속 납니다. 하나씩 해결하다 보니 제법 시간이 오래 소요되어 차차 해결해야겠습니다. 일단 현재 구조에서의 SSR 구현에 관해서만 간단하게 포스팅하겠습니다. 참고로 Nashorn은 jdk11부터 deprecated 되었습니다. # 개념 @CSR (Client SIde Rendering) 클라이언트에서 ..

# 시작 이번 포스팅에서는 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 설치 ..

# 시작 저번 포스팅에서 Spring Boot에 GraphQL 연동을 마쳤습니다. 다만 GraphqlAPI.java에 DataFetcher를 등록하는 방식이 영 마음에 들지 않습니다. 쿼리 하나 추가하면 GraphqlAPI.java에도 DI 추가하고... DataFetcher 추가하고... 그래서 이번 포스팅에서는 어노테이션과 리플렉션을 이용하여 애플리케이션이 시작될 때 DataFetcher가 등록되도록 해보겠습니다. # 어노테이션 생성 com/graphql/blog/util/annotation디렉터리를 생성하고 아래 파일들을 생성합니다. GqlDataFetcher.java package com.hello.graphql.util.graphql; import java.lang.annotation.Eleme..

# 시작 지난 포스팅에서 SpringBoot를 세팅하고 PostgreSQL도 연동했습니다. 이제 GraphQL API를 적용합니다. # 준비 - GraphQL for VSCode : VS Code 확장 프로그램 마켓 플레이스 ( Ctrl + Shift + X )에서 설치 - PlayGround : https://github.com/prisma/graphql-playground/releases prisma/graphql-playground 🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration) - prisma/graphql-playground github.com 위 링크에서 ..

# PostgreSQL 설치 https://www.enterprisedb.com/downloads/postgres-postgresql-downloads PostgreSQL Database Download | EnterpriseDB PostgreSQL Database Download www.enterprisedb.com 상단 링크로 가서 자신의 운영체제에 맞는 installer를 다운로드한 뒤 설치합니다. 설치 도중에 입력하는 password는 꼭 기억해놓도록 하고 나머진 다음만 누르면서 설치하면 됩니다. # DATABASE 생성 및 사용자 생성 시작 메뉴에서 psql을 찾아 실행합니다. 위 사진의 '사용자의 암호'에 설치할 때 설정한 password를 입력하면 됩니다. ※PostgreSQL은 기본적으로 ..