리액트 3

[웹 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팀] 1. Create, Read, Update 기능 구현해보기

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

[웹 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)를 연동하는 방식을 게시했습니다. 세팅하는 과..