카림압둘JAVA (눈이편한 다크모드 블로그)

*fetch 메서드가 리턴하는 Promise

Promise는 비동기 오퍼레이션에서 사용

Javascript는 싱글스레드 환경에서 동작하기때문에

백엔드로 보낸 요청에 응답이 30초가 걸리면 30초동안 아무것도 못하는 상태가 된다.

따라서 자바스크립트 엔진은 스레드 밖에서 이런 오퍼레이션을 실행해준다.

스레드 밖에서 HTTP응답을 처리하려면 여러가지 콜백 함수를 구현해야하는데,

Promise가 이런 콜백지옥을 피할 수 있게 만들어 준다.

Promise의 상태

1. Pending(기다리는 상태)

2. Resolve(주어지는 값으로 수행하는 Promise 객체 반환)

3. Reject(거부하는 Promise객체반환)

Promise의 인스턴스메서드

1. Promise.prototype.then()

2. Promise.prototype.catch()

3. Promise.prototype.finally()

사용예제

let myPromise = new Promise((resolve, reject) => {
	// 비동기 작업이 성공한 경우 reslove()를 호출, 실패시 reject()를 호출한다.
    setTimeout( function() {
    resolve("성공");
    reject(new Error("network Err"));
  }, 300)
})

//위의 결과로 Promise객체를 반환 받을 수 있고(성공이든 실패든)
//그 후 인스턴스 메서드로 예외처리를 정의할 수 있다

myPromise
.then((value)=>{
	console.log(value);
})
.catch((error)=>{
	console.log(error);
})

*CORS는 크로스-오리진 리소스 셰어링 : 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허용해주는 웹 보안 방침

예제코드:

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    private final long MAX_AGE_SECS = 3600;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //경로
        registry.addMapping("/**")
                //Origin
                .allowedOrigins("http://localhost:someport")
                //GET, POST, PUT, PATCH, DELETE, OPTIONS
                .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(MAX_AGE_SECS);
    }
}

*렌더링이 일어나는 순간, 각 컴포넌트의 render()함수를 콜해 DOM트리를 구성하는 과정을 마운팅이라고 한다.

마운팅 과정에서 생성자와 render()함수를 부르는데 마운팅을 마친 후 바로 부르는 함수가

[ componentDidMount ] 

[ componentDidMount ]  함수에 백엔드 API 콜을 구현

*마운팅 되고 난 후 콜을 하는 이유: 컴포넌트의 프로퍼티가 아직 준비되지 않았기 때문

예제코드:

componentDidMount() {
  const requestOptions = {
    method: "GET",
    headers: {"Content-Type": "application/json"},
  };

  fetch("http://localhost:8080/someUrl", requestOptions)
      .then((response) => response.json())
      .then(
          (response) => {
            this.setState({
              items: response.data,
            });
          },
          (error) => {
            this.setState({
              error,
            });
          }
      );
}

1. Node.js 설치

->https://nodejs.org/ko/download/

2. 터미널에서 원하는 디렉토리를 만들고

mkdir /home/user/reactApp
cd /home/user/reactApp

3. npx create-react-app [원하는앱이름] 명령어실행

npx create-react-app new_react_project

*create-react-app 리액트 프로젝트에 유용한 라이브러리

프론트엔드는 사용자 바로 앞에서 사용자와 상호작용하며 애플리케이션 로직을 수행하고 

백엔드 서버로 요청을 요청하는 역할을 한다.

웹서비스에서 프론트엔드란 웹 브라우저를 뜻한다

브라우저는 인터넷을 이용해 서버에 있는 자원을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행시킨다.

Entity

개념 : Entity는 실제 DB테이블과 매핑되는 클래스. 

예제코드:

@Builder
@NoArgsConstructor
@AllArgsConstructor
@Data
@Entity
@Table(name = "A")
public class AEntity {
    @Id
    @GeneratedValue(generator = "system-uuid")
    @GenericGenerator(name = "system-uuid", strategy = "uuid")
    private String id;
    private String userId;
    private String title;
    private boolean done;

}

DTO

개념 : DTO는 계층(Layer)간의 데이터 교환시 사용하는 객체, JSON serialization 같은 직렬화에도 사용됨.

  *DTO -> Entity 로 변환하는 메서드를 포함해두면 좋다.

캡슐화로 DB컬럼을 노출시키지 않을 수 있다.

예제코드:

@NoArgsConstructor
@AllArgsConstructor
@Data
public class ADTO {
    private String id;
    private String title;
    private boolean done;

    public ADTO(final AEntity entity){
        this.id = entity.getId();;
        this.title = entity.getTitle();
        this.done = entity.isDone();
    }

    public static AEntity toEntity(final ADTO dto){
        return AEntity.builder()
                .id(dto.getId())
                .title(dto.getTitle())
                .done(dto.isDone())
                .build();
    }
}

1. 연산에 쓰일 Entity가 null인지, Id등 Entity안의 특정 값이 정상인지 체크하는

Validate 메서드를 만들어서 

CRUD작업 전 검증한다.

쓸데없는 트랜잭션을 최소화하고

에러를 컨트롤하기 수월하다

예제코드:

public List<AEntity> delete(final AEntity entity){
    //유효성 확인
    validate(entity);
    
    //작업
 }

private void validate(final AEntity entity){
    if(entity == null){
        log.warn("Entity cannot be null.");
        throw new RuntimeException("Entity cannot be null.");
    }

    if(entity.getUserId() == null){
        log.warn("Unknown user.");
        throw new RuntimeException("Unknown user");
    }
}

2. 작업 성공 시 DB에서 해당 entity를 조회한 후 리턴처리해두면 편하다.

예제코드:

public List<AEntity> update(final AEntity entity){
    //유효성 확인
    validate(entity);

    final Optional<AEntity> original = repository.findById(entity.getId());

    original.ifPresent(a-> {
        a.setTitle(entity.getTitle());
        a.setDone(entity.isDone());

        repository.save(a);
    });

	//조회후 리턴
    return retrieve(entity.getUserId());
}

개념: null이 올 수 있는 값을 감싸는 Wrapper 클래스 -> Null point Exception 방지

ifPresent() 메서드로 존재한다면 해야할 작업을 정의할 수 있다.

예제코드:

Optional<someEntity> entity = repository.findById("someId");



entity.ifPresent(theEntity -> {

theEntity.setSomething("something")

});