준비하는 개발자

마지막으로 해당 게시글 삭제에 대해 알아보겠다. [Service] - Jpa에서 기본 제공하는 deleteById 메소드 사용. 메소드명이 직관적이라 알기 쉽게 사용 할 수 있다. [Controller] - @DeleteMapping 어노테이션을 사용한다. 이 역시 직관적인 이름의 어노테이션이라 쉽다. - read랑 마찬가지로 @PathVariable을 통해 boardNo를 파라미터의 이름으로 설정하여 값을 받도록 한다.

게시글 읽기 까지 작성 후 이젠 게시글 읽기에서 글을 수정할 수 있도록 해보겠다. [Service] - register에서 사용한 save를 그대로 사용한다. - save는 새로운 정보를 저장하는 역할만 있는 것이 아니고 기존 정보를 수정하여 다시 저장하는 기능도 있다 [Controller] - 수정하기 위해 @PutMapping 어노테이션 사용 - read에서처럼 @PathVariable을 통해 파라미터를 받도록 하여 해당 게시글에 대한 수정을 할 수 있도록 한다. - @RequestBody는 http요청의 body부분을 java 객체로 받을 수 있게 해주는 어노테이션. 주로 Json을 받을 때 활용 - 생성한 java 객체(domain)를 파라미터를 담을 변수로 적어주면 json 데이터로 날아온 파라..

게시글 목록까지 완성하였고 이제 게시글 작성 후 게시글의 상세내용을 볼 수 있는 게시글 읽기(read)를 구현하려고 한다. domain / Repository는 변동 사항이 없어 생략하기로 한다. 앞에 register나 list에서 확인하면 좋을 것 같다. [Service] - Jpa 기본 제공 메서드인 findById를 사용하여 Entity id(게시글 번호)를 선택하여 읽을 수 있도록 구현 [Controller] - @PathVariable은 컨트롤러에서 파라미터를 받는 방법 중 하나 현재 path에 "read/{id}"로 설정되어 있음 - {}를 활용해 변수처럼 적어준 뒤 @PathVariable 어노테이션 뒤에 {}안에 적은 변수 명을 name 속성의 값으로 넣는다(id) 그 후 long id처럼..

앞서 게시판 Register를 완성했다. 이제 게시판 목록을 볼 수 있는 list를 제작하려고 한다. domain은 따로 만질 부분이 없기 때문에 Repository부터 살펴 볼 것이다. [Repository] - JpaRepository를 사용 할 것이기 때문에 따로 커스텀 할 게 없어 아래와 같이 두고 바로 서비스로 넘어 갈 것이다. - 대부분 기본적인 CRUD는 JpaRepository를 사용하기에 서비스의 로직과 컨트롤러만 작성하면 부담은 없을 것이다. [JpaRepository] - CRUD를 위한 공통 인터페이스 제공 - Repository 개발 시 인터페이스만 작성하면 실행 시점에 Spring 데이터 JPA가 구현 객체를 동적으로 생성해서 주입 - 인터페이스만 작성해도 개발을 할 수 있도록 ..

[useEffect] - useEffect를 사용하면 컴포넌트를 화면에 그린 후 실행될 함수를 정의 [사용방법] - useEffect는 2개의 매개변수를 가지는데 첫 번째는 컴포넌트 레이아웃 배치와 화면 그리기가 끝난 후 실행될 함수, 두 번째는 의존성 배열 - 첫 번째 인자의 내부는 effect 함수, 첫 번째 인자가 반환하는 함수는 clean-up 함수라고 부른다. - useEffect는 첫 번째 인자로 주어진 함수를 실행하기 전에 의존성 배열의 원소가 변경됐는지 확인 - 비교는 useState와 동일하게 Object.is 메소드를 사용하고 만약 하나도 변경되지 않았으면 렌더링 시점에선 useEffect를 실행하지 않음 - 하지만 의존성 배열의 원소가 하나라도 변경됐으면 useEffect를 실행 - ..

useState의 첫번째 매개변수로 state의 초기값을 설정한다. 그리고 컴포넌트 상태를 바꾸고 싶을 때마다 setState 함수의 첫번째 매개변수로 바꿔줄 값을 넘겨주면 다음 렌더링 시 새로운 상태가 컴포넌트에 반영된다. setState의 첫번째 매개변수로 함수를 넘겨주면 그 함수는 이전 상태를 매개변수로 해서 새로운 상태를 반환하는 형태여야 한다. 정리하면 아래와 같다. 초기값이 상태에 반영된다. 변경할 값을 setState 함수의 인수로 넘겨준다. 새로운 값이 상태에 반영된다. [상태(state) 업데이트 과정] useState가 반환하는 함수(setState)를 호출하면 상태를 업데이트할 수 있다. 하지만 setState 함수를 호출한다고 해서 상태가 바로 변경되는 것은 아니다. setState..

- React는 버전 16.8부터 컴포넌트 상태와 컴포넌트 생명주기를 관리 할 수 있는 API인 Hook을 제공 - Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트처럼 컴포넌트 내부에 상태를 저장 할 수 있고 컴포넌트 생명주기에 관여 할 수 있음. - React Hooks는 기존 클래스 컴포넌트만 가지고 있던 여러 기능을 지원하기 때문에 함수 컴포넌트를 클래스 컴포넌트 처럼 사용 - React에선 컴포넌트 상태를 관리할 수 있는 useState와 컴포넌트 생어주기에 개입할 수 있는 useEffect, 컴포넌트 간의 전역 상태를 관리하는 useContext 함수를 제공 - 추가 Hook엔 상태 업데이트 로직을 reducer 함수에 따로 분리 할 수 있는 useReducer, 컴포넌트나 HTML 엘리먼트..

1. Props - 상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터 - React의 Data flow는 단방향 형식으로 부모에서 자식으로 이동 - props에 있는 데이터들은 수정이 불가능, 오직 안에 있는 값을 꺼내서 사용(읽기전용) 위의 코드를 보면 element에 Welcome을 담고 있음. Welcome은 부모인 element에 있는 Sara를 props에 담아 내려받고 사용하고 있습니다. 2. States - 컴포넌트가 독립적으로 갖는 상태 , 객체의 형태로 컴포넌트 안에서만 제어되어 보관 및 관리 됨. - state는 class component만 가질 수 있음 , stateful component - 함수형 컴포넌트는 stateless component임 3. Life Cycle 생명주기 ..

DOM의 정의는 문서의 구성요소들을 객체로 구조한 것 React는 UI 라이브러리이며 React DOM은 웹 사이트에 출력 즉, render를 도와주는 모델이다. Virtual DOM은 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓은 것이다. 즉 DOM을 직접 수정하지 않고 중간단계 Virtual DOM을 거치게 하는 것이다. 프로세스는 Virtual DOM에 변경 내역을 모아 실제 DOM과 변경된 부분이 어딘지 차이를 판단하고 변경된 부분만 변경해 그에 따른 렌더링을 한번만 하는 것이다. 이는 브라우저의 DOM 자체내의 리소스를 사용하지 않고도 효율적으로 DOM을 갱신할 수 있게 해준다.

- 컴포넌트(Component)는 템플릿 이상의 기능을 수행 데이터를 UI로 만들어주는 기능, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타내는 변화된 작업들을 수행 - 기본적인 홈페이지 구조는 헤더/ 바디 / 푸터로 나뉘어 있다. 헤더와 푸터에는 사이트에서 제공하는 기본 내용 포함, 바디의 내용이 바뀌는 게 지금까지 많이 개발되어온 구조 -> 하나의 홈페이지로 완성 - 여기서 컴포넌트란 기능을 단위별로 캡슐화한 단위를 말함. 헤더, 바디, 푸터 모두 컴포넌트의 조각이라고 말할 수 있음. - 이들의 특징은 재 사용과 확장할 수 있어야 함. 그렇게 만들어진 조각들이 모여 홈페이지를 만듬. 컴포넌트는 '부분'이며 이것은 즉 '전체' 중 한 '부분'으로써 재사용이 가능한 조각이다. 이것은 즉 UI를 구성..