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 파일을 생성한 뒤 여기에 옮겨주세요...

# 시작 저번 포스팅에서 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 위 링크에서 ..