react 16

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

[React] 2주차 스터디 - props와 state

React component에서 다루는 data는 props와 state, 이 두 가지로 나뉩니다. props는 부모 component가 자식 component에게 주는 값입니다. 자식 component에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수 없습니다. 반면에 state는 component 내부에서 선언하며, 내부에서 값을 변경할 수 있습니다. +) props("properties"의 줄임말)와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에 차이가 있는 것입니다. props는 함수 매개변수처럼 component에 전달이 되는 반면, state는 함수 내에 선언된 변수처럼 compon..