Group Study (2020-2021)/ReactJS + Spring Boot ToyProject 10

[웹1팀] [React] Link를 통해 props를 전달하는 방법

게시판의 Update 기능을 구현하던 도중, 수정 버튼을 누르면 게시글 수정 페이지로 이동하면서 작성 폼에 내가 수정하려는 글이 입력되어 있었으면 좋겠다는 생각이 들었다. 그러면 어떻게 내가 수정하려는 글의 정보를 수정 페이지에 전달할 수 있을까 고민하다가 두가지 방법을 생각해냈다. 첫번째 방법은 수정 페이지에서 API 요청을 보내는 것이고, 두번째는 어떻게 어떻게 props로 전달하는 방법이다. 첫번째 방법은 되게 비효율적이라고 생각해서 두번째 방법으로 구현하기로 결정했다. 수정 위처럼 Link 안에 props로 전달하면 /update/:id에 프롭스가 전달될 줄 알고 이렇게 작성했는데, this.props.info로 체크해보니 아무것도 받아와지지 않았다. 그래서 찾아보니, Link를 통해 데이터를 전..

[웹 3팀] 4. 회원가입/로그인 구현을 위한 trouble shooting

앞선 [웹3팀]의 포스팅처럼 글을 MySQL, Mybatis, AWS RDS를 이용하여 데이터베이스에 저장했다. 글 뿐만 아니라, 회원 또한 데이터베이스에 연결하여 어떤 사람이 어떤 글을 썼는지 데이터베이스의 두 테이블을 연결(Join)하고자 했다. 이번 포스팅에서는 기술적인 부분 뿐만 아니라 어떤 오류가 발생해서 어떻게 해결했는지 경험을 바탕으로 작성하도록 하겠다. (코드는 깃헙에서 확인할 수 있으므로) (Join이란, 데이터베이스에서 두개이상의 테이블이나 데이터베이스를 연결하여 데이터베이스를 연결하는 것을 의미한다.) 1. Spring Security 1-1. Spring에서 기본적으로 제공하는 로그인 폼이 멋져서 이걸 사용해야겠다고 생각을 했다. Spring Security를 이용하면 다양한 장점이..

[웹 3팀] 3. 리액트 구글 웹 폰트, 조건부 렌더링 / 웹 3팀 프로젝트의 페이지 구성(리액트 라우터)

리액트에 구글 웹 폰트 적용하기 1. 아래 사이트에서 사용하고 싶은 폰트를 고른다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 글꼴 선택 - Select this style - Selected family - @import 3. 리액트에 적용하기 페이지 상단에 보여지는 header.js의 제목, 메뉴 이름에 폰트를 적용하려고 한다. import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import './header.c..

[웹 3팀] 2. Delete 기능을 구현해보면서 고민한 지점(Class Component vs Functional Component + Hook)

Delete 기능을 처음 구현하려고 했을 때는 Detail 페이지를 만들기 전이어서 아래와 같이 삭제 버튼을 만들어주었다. 다른 분들의 작업을 이어서 구현하게 되었는데, pull부터 받고 했어야 하는데 업데이트 사항이 없다고 착각하고 구현을 시작했다. 처음에는 Class Component로 작성되어 있었고, 나에게도 Class Component가 익숙했기 때문에 그렇게 작성을 하고 merge를 시도했는데, pull을 받으라는 메시지가 떴다. pull을 받고 나니, 여기저기서 conflict가 발생했지만 가장 큰 차이점은 코드가 Functional Component와 Hook을 사용하여 작성되어 있었다. 그렇다면 형태를 하나로 통일을 해야하는데, 어떤 차이가 있는지, 어떤 형태로 통일할지 잘 모르겠어서 찾..

[웹 3팀] 1. Create, Read, Update 기능 구현해보기

리액트 스프링 연동도 됐고, DB도 구축이 되었다면 이제 본격적으로 게시판을 만들어보자! (참고로 우리 팀은 AWS를 이용한 mySQL을 사용했다) congsong.tistory.com/15?category=749196 백엔드에 관련해서는 저 곳에서 도움을 정말 많이 받았다. 거의 코드를 가져다 쓰는 식으로 만들어서ㅋㅋㅋ 다만 저기서는 리액트를 사용하지 않았기에 여기서는 Axios 및 fetch를 이용해서 어떻게 프론트엔드를 만들었는지를 작성할 예정이다! 1. Create 먼저 리액트 프로젝트 src 폴더 내부에 page 폴더를 만든다. 이번 프로젝트에서 화면을 구성하는 컴포넌트들은 다 저기다가 만들어놨다. 첫번째로 만들어 볼 페이지는 글쓰기 페이지! page 폴더에 write.js 파일을 만들고 다음과..

[웹 2팀] 4. mysql - spring boot 연동 및 오류 모음

마지막 블로그 글에는 mysql - spring boot의 데이터를 연동하는 방법과 프로젝트를 진행하면서 발생했던 오류들의 해결 방법에 대해 적어보도록 하겠습니다. 해당 연동 과정은 https://www.youtube.com/watch?v=k5KnAhkRzh4&list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr&index=3를 참고하였습니다. 1. mysql - spring boot 연동 방법 1) mysql connector dependency 추가 Spring Initializer로 프로젝트를 만들 예정이면 처음에 만들 때 의존성 중 mysql connector을 추가해 주면 됩니다. 본래 있는 프로젝트에 의존성을 추가할 경우에는, build.gradle에 해당 의존성을 추가해 줍..

[웹 2팀] 3. axios와 CORS를 이용한 react-spring boot 연동 방법

기존 react는 3000 포트, 스프링부트는 8080 포트를 이용한다. 이 방법은 react의 포트로 연동가능하도록 하는 방법이다. 이 방법은 connecting react with spring boot사이트를 참조하여서 작성되었다. 1. react 설정 1) 해당 프로젝트에 axios 설치 npm install axios --save --save/-S 옵션은 외부 모듈을 이용할 때 모듈을 추가한 프로젝트의 package.json에 의존성을 자동으로 추가해 준다. 현재는 이 옵션이 없어도 의존성이 자동으로 추가되어서 현재는 --save 옵션을 dependency에 어떻게 저장할 것인지를 지정하는 목적으로 사용한다. package.json에서 위와 같이 axios 의존성이 추가되어 있으면 된다. 2) a..

[웹 2팀] 2. 웹 토이프로젝트에서 사용한 어노테이션 의미 알기

웹 토이프로젝트의 Backe-end 코드를 되짚으며 Annotation과 의미를 정리하려고 한다. 본 토이프로젝트는 ReactJS + Spring Boot + MySQL을 사용하여 CRUD를 구현하였다. 참고한 튜토리얼은 다음과 같다. www.youtube.com/playlist?list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr ReactJS + Spring Boot CRUD Full Stack Application This course designed for beginners to learn how to develop a full-stack CRUD application using React as frontend and spring boot as backend. www.youtub..

[웹 2팀] 1. 웹-토이프로젝트 시작하기(ReactJS + Spring Boot, 워크벤치 사용법)

1. 연동 참고 자료 ReactJS와 Spring Boot를 사용하여 프로젝트를 시작할 때 참고했던 동영상, 블로그와 추천 자료를 정리했다. 본격적인 프로젝트를 시작하기 전, 모두 리액트와 스프링부트에 대한 경험이 적어 둘을 같이 사용해보고 연동하는 것을 먼저 시도했다. 그 때 참고했던 자료들을 공유하려고 한다. hjjooace.tistory.com/entry/React-Spring-Gradle-Project-%EC%97%B0%EB%8F%99?category=0 React + SpringBoot (Gradle) 손쉽게 연동하기 Environment OS : Windows 10 Intellij IDEA React와 SpringBoot(Gradle project)를 연동하는 방식을 게시했습니다. 세팅하는 과..

[웹 1팀] 1. React + Spring Boot (Gradle) 연동하기

Front-end: Create React App Back-end : Spring Boot 각각의 장점을 최대한 활용하기 위해 분리해서 작업하는 방법 React + SpringBoot (Gradle) 손쉽게 연동하기 연동을 위해 이 블로그 글대로 진행하였습니다. 1. SpringBoot 생성 Spring io를 이용해 스프링 부트 생성 Intellij에서 Project Type을 Gradle로 변경 2. ReactApp 1단계에서 만든 SpringProjectName/src/main/ 경로로 접근 create-react-app [PROJECT NAME] 명령어 실행 cd [PROJECT NAME] 실행 npm start 실행 새 터미널 창 열고 작업하던 경로로 이동 npm install 실행 npm ru..