CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘을 만한다. 하지만 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단한다. 그로 인해 정상적으로 데이터를 받을 수 없다.

해결방법

물론 가장 쉬운 해결방법은 서버와 클라이언트가 같은 도메인과 포트를 사용하면 된다... :)

하지만 저는 localhost:3000 에서 react를 실행하였고 localhost:8080에서 spring을 실행하고 있었기 때문에 포트가 달라 CORS가 발생할 수 있는 상황이였다.

허가방법

1. Access-Control-Allow-Origin respose 헤더를 추가 간단하게 모든 클라이언트에 요청에 대한 cross-origin HTTP 요청을 허가하는 헤더를 추가해주면 된다. 하지만 RESTapi의 모든 응답에 일일히 추가하기에는 불편함이 있다.

2. spring의 @CrossOrgin 을 추가하기 @CrossOrgin 어노테이션을 붙여주면 기본적으로 '모든 도메인, 모든 요청방식'에 대해 허용한다는 뜻이다.

마치며

CORS는 웹 개발을 할 때 기본이면서 중요한 이슈이다. 이번에 정리하면서 정확히 왜 발생하였는지 어떤 맥락에서 생긴 이슈인지 알게되면서 더 편하게 개발할 수 있을것 같다.

HTML에서는 DOM 요소에 이름을 달 때는 id를 사용한다. HTML에서 id를 사용하여 DOM에 이름을 다는 것 처럼 리액트 포르젝트 내부에서 DOM에 이름을 다는 방법이 바로 ref 이다.

1. ref는 어떤 상황에서 사용하는지

바로 말 하자면** ref는 DOM을 꼭 직접적으로 건드려야 할 때 사용한다.** 이렇게 말하면 이해하기 어려워서 예제코드를 해보았다. src 밑에 ValidationSample.css와 ValidationSample.js 파일을 만들었다.

ValidationSample.css

.success {
    background-color: lightgreen;
}

.failure {
    background-color: lightcoral;
}

ValidationSample.js

import React, { Component } from 'react';
import './ValidationSample.css';
class ValidationSample extends Component {
    state={
        password : '',
        clicked : false,
        validated : false
    }

    handleChange = (e) => {
        this.setState({
            password: e.target.value
        });
    }

    handleButtonClick= ()=>{
        this.setState({
            clicked : true,
            validated : this.state.password === '0000'
        })
    }
    render() {
        return (
            <div>
                <input
                    type="password"
                    value = {this.state.password}
                    onChange = {this.handleChange}
                    className = {this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
                />
                <button onClick = {this.handleButtonClick}>검증하기</button>
            </div>
        );
    }
}

export default ValidationSample;

input에서는 onChange 이벤트가 발생하면 handleChange를 호출하여 state의 password 값을 업데이트하게 했다. button에서는 onClick 이벤트가 발생하면 handleButtonClick을 호출하여 clicked 값을 참으로 설정했고, validated 값을 검증 결과로 설정했다.

0000을 입력하고 검증하기를 누르면 이런 결과가 나온다.

DOM을 꼭 사용해야 하는 상황은

1. 특정 input에 포커스 주기
2. 스크롤 박스 조작하기
3. Canvas 요소에 그림 그리기 등

이 있다. 이럴 때는 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데, 이를 위해 바로 ref를 사용한다.

2. ref 사용하기

2.1 콜백 함수를 통한 ref 설정

ref를 만드는 가장 기본적인 방법이다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 다음은 사용 예시이다.

<input ref={(ref)=>{this.input=ref}} />

2.2 createRef를 통한 ref 설정

또 다른 방법은 리액트에 내장되어 있는 createRef라는 함수를 사용하는 것이다.

input = React.createRef();

handleFocus() =>{
    this.input.current.focus();
}
render(){
    return(
            <div>
                <input ref={this.input}/>
        </div>
        )
}

나중에 ref를 설정해 준 DOM에 접근할 때는 this.input.current를 조회하면 된다. 콜백함수와 다른 점은 뒷부분에 .current를 넣어 주어야 하는 것이다.

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트 라고 한다.

1. 리액트의 이벤트 시스템

리엑트의 이벤트 시스템은 웹 브라우저의 HTML이벤트와 인터페이스와 동일하기 때문에 사용법이 비슷하다. 하지만 주의해야 할 몇 가지 사항이 있다.

1) 주의 사항

• 이벤트 이름은 카멜 표기법으로 작성한다.
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
• DOM 요소에만 이벤트를 설정할 수 있다.

2. 이벤트 핸들링 과정

1) 컴포넌트 생성하기

src 밑에 EventPractice.js 파일을 다음과 같이 생성한다.

import React, { Component } from 'react';

class EventPractice extends Component {
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
            </div>
        );
    }
}

export default EventPractice;

2) onChange 이벤트 설정

EventPractice.js에 계속하여 작성한다.

import React, { Component } from 'react';

class EventPractice extends Component {
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하세요"
                    onChange={
                        (e)=>{
                            console.log(e.target.value);
                        }
                    }
                    />
            </div>
        );
    }
}

export default EventPractice;

값이 바뀔 때마다 바뀌는 값을 콘솔에 기록한다.

이제 state에 input 값을 담고 버튼을 누르면 값을 공백으로 설정해보겠습니다.

import React, { Component } from 'react';

class EventPractice extends Component {
    state={
        message:''
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하세요"
                    value={this.state.message}
                    onChange={
                        (e)=>{
                            this.setState({
                                message: e.target.value
                            })
                        }
                    }
                    />
                    <button onClick={
                        ()=>{
                            alert(this.state.message);
                            this.setState({
                                message:''
                            });
                        }
                    }>확인</button>
            </div>
        );
    }
}

export default EventPractice;

3) 임의 메서드 만들기

앞에서 살펴본 주의 사항에 "이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. " 라고 했다. 그래서 이벤트를 처리할 때 렌더링을 하는 동시에 함수를 만들어서 전달해 주었습니다. 이번에는 이 방법 대신 함수를 미리 준비하여 전달하는 방식을 해보겠습니다. 성능은 거의 차이가 없지만, 가독성은 훨씬 높습니다.

import React, { Component } from 'react';

class EventPractice extends Component {
    state={
        message:''
    }
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e){
        this.setState({
            message: e.target.value
        })
    }
    handleClick(){
        alert(this.state.message);
        this.setState({
            message:''
        });
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하세요"
                    value={this.state.message}
                    onChange={this.handleChange}
                    />
                    <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventPractice;

컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다.

1. 컴포넌트 구조

컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 다음 코드는 함수형 컴포넌트이다.

import React from 'react';
import './App.css';

function App() {
  const name="리액트";
  return (
    <div className="react">{name}</div>
  );
}

export default App;

다음은 클래스형 컴포넌트이다.

import React, { Component } from 'react';
import './App.css';

class App extends Component{
  render(){
    const name="리액트";
    return <div className="react">{name}</div>
  }
}

export default App;

둘이 구조는 다르지만 역할은 똑같다. 두 구조의 차이점으로는 클래스 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것이다. 또한 render함수가 꼭 있어야한다.

2. props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.

1) props 사용해보기

MyComponent.js 파일을 다음과 같이 새로 만듭니다.

import React from 'react';

const MyComponent = props=>{
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}

export default MyComponent;

App.js도 다음과 같이 수정합니다.

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component{
  render(){
    return <MyComponent name="react"></MyComponent>
  }
}

export default App;

그러면 props.name자리에 react가 들어가 "안녕하세요, 제 이름은 react입니다." 라는 것이 렌더링된 것을 확인할 수 있다.

3. state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 반면에 props는 컴포넌트가 사용 되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다. 리액트에는 두 가지 종류의 state가 존재한다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다.

1) 클래스형 컴포넌트의 state

Counter.js 파일을 src밑에 생성하여 다음과 같이 작성한다.

import React, { Component } from 'react';

class Counter extends Component {

    constructor(props){
        super(props);
        this.state={
            number:0
        };
    }
    render() {
        const {number}=this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button
                    onClick={()=>{
                        this.state({number:number+1});
                    }}
                >
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

constructor는 생성자 메소드이다. 클래스형 컴포넌트에서 생성자를 작성할 때는 반드시 super(props)를 호출해 주어야 한다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준다.

그 다음에는 this.state 값에 초깃값을 설정해 준다.

render 함수에서 setState라는 함수를 사용했는데 이 함수가 state 값을 바꿀 수 있게 해준다. 버튼을 누르면 1씩 잘 올라간다. 또한 state 객체 안에는 여러 값이 있어도 된다.

2) 함수형 컴포넌트에서 useState

src 디렉터리에 Say.js라는 파일을 다음과 같이 작성한다.

import React, {useState} from 'react';

const Say=()=>{
    const[message, setMessage]=useState('');
    const onClickEnter = () => setMessage("안녕하세요!");
    const onClickLeave = () => setMessage("안녕히 가세요!");

    return(
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1>{message}</h1>
        </div>
    );
};
export default Say;

useState 함수의 인자에는 상태의 초깃값을 넣어 준다. 함수를 호출하면 배열이 반환되는데, 첫 번째 원소는 현재 상태이고, 두번째 원소는 상태를 바꾸어 주는 함수이다. 세터 함수라고 부른다. 그리고 Say컴포넌트를 App에서 렌더링해 보고 입장 버튼과 퇴장 버튼을 눌러 본다.

또한 한 컴포넌트에서 useState를 여러번 사용해도 상관없다.

jsx란 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

1. JSX의 장점

1.1 보기 쉽고 익숙하다.

일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교해 봅시다. JSX를 사용하는 편이 더 가독성이 높고 작성하기도 쉽다고 느껴질 것입니다. 결국 HTML 코드를 작성하는 것과 비슷하기 때문일겁니다.

1.2 더욱 높은 활용도

JSX에서는 우리가 알고있는 div나 span같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 컴포넌트도 JSX안에서 작성할 수 있습니다.

2. JSX 문법

2.1 감싸인 요소

App.js를 이렇게 작성해봤다.

import './App.css';

function App() {
  return (
    <h1>리액트 안녕!</h1>
    <h2>잘 부탁해~</h2>
  );
}

export default App;

그러면 오류가 뜨는 것을 확인할 수 있다. 이유는 요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문이다. 이 오류를 다음과 같이 해결할 수 있다.

import './App.css';

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 부탁해~</h2>
    </div>
  );
}

export default App;

2.2 자바스크립트 표현

자바스크립트 문법 또한 표현할 수 있다. JSX 내부에서 코드를 { } 로 감싸면 된다. 자바스크립트 값을 한번 더 렌더링 해보겠습니다.

import React from 'react';
import './App.css';

function App() {
  const myNmae="계홍";
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>난 {myNmae}이야, 잘 부탁해~</h2>
    </div>
  );
}

export default App;

2.3 if문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때에 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.

import React from 'react';
import './App.css';

function App() {
  const name="리액트";
  return (
    <div>
      {name === '리액트'?(
        <h1>리액트입니다.</h1>
      ):(
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}

export default App;

이렇게 코드를 작성하고 저장하면 브라우저에서 '리액트입니다.'라는 문구를 볼 수 있다. 하지만 name값을 다른 값으로 바꾸면 '리액트가 아닙니다'가 나타날 것입니다.

리액트에서 요청을 보내고, 스프링 부트에서 데이터와 함께 리액트로 응답을 보내는 실습을 하려고 합니다.

1. 스프링 부분

연동만 간단하게 확인하기위해 DB연동은 하지 않고, 객체를 하나 만들어서 이것을 DB라고 생각하고 진행하도록 하겠습니다. 다음으로 API를 컨트롤하는 코드입니다. '/api/users'라는 주소로 요청이오면 이를 매핑 받아서 객체를 리액트로 리턴합니다.

2. 리액트 부분

먼저 리액트 프로젝트 폴더에서 npm install axios --save npm install http-proxy-middleware --save

package.json으로 가서 잘 설치됐는지 아래와 같이 확인합니다.

그 다음에 setupProxy.js 파일을 하나 만든 후, 아래와 같이 입력합니다. 다음으로 App.js 파일로 가서 axios로 "http://localhost:8080/api/users"로 요청을 보내도록 코드를 작성합니다.

연동 확인하기

스프링 부트와 리액트 연동의 준비가 완료됐습니다. 스프링 부트 서버와 리액트 서버를 실행시킵니다.

마치며

리액트에서 axios를 활용해 스프링 부트로 요청을 보내고, 스프링 부트에서 요청에 대한 응답한 것을 확인할 수 있습니다.

스프링 공식 문서에서는 Spring Framework를 아래와 같이 설명한다.

Spring Framework는 모든 종류의 배포 플랫폼에서 최신 Java 기반 엔터프라이즈 애플리케이션을 위한 포괄적인 프로그래밍 및 구성 모델을 제공합니다.

Spring의 핵심 요소는 애플리케이션 레벨에서의 인프라 지원입니다. Spring은 특정 배포 환경에 불필요한 연결 없이 팀이 애플리케이션 레벨 비즈니스 로직에 집중할 수 있도록 엔터프라이즈 애플리케이션 plumbing(규약)에 초점을 맞춥니다.

이 말을 쉽게 말하자면 우리가 Spring Framework를 사용하여 기업용 애플리케이션을 보다 쉽게 만들 수 있다는 점이다.

2. Spring Boot

스프링부트 공식 문서에서는 Spring Boot를 아래와 같이 설명한다.

Spring Boot는 단독 실행되는, 상용화 가능한 수준의 스프링 기반 애플리케이션을 쉽게 만들어 낼 수 있습니다. 최소한의 설정으로 스프링 플랫폼과 서드파티 라이브러리들을 사용할 수 있도록 하고 있습니다.

우리는 SpringBoot를 사용하여 Spring기반 애플리케이션을 쉽게 만들 수 있다는 뜻이다.

3. 무엇을 해결하고자 등장했는지

1) Spring Framework

a) Dependency Injection(DI) - 의존성 주입 - 객체 간 결합을 느슨하게 만든다. - 코드 재 사용성 증가 및 단위테스트가 용이 b) 중복된 코드 제거 - 비즈니스 로직에만 집중이 가능하다.

2) Spring Boot

 Spring Framework는 기능이 많은만큼 환경설정 끝내면 반은 끝났다는 말이 있을정도로 환경설정이 복잡하다. 이에 어려움을 느끼는 사용자들을 위해 나온 것이 바로 SpringBoot이다.
 SpringBoot는 이러한 설정의 많은 부분을 자동화 하여 사용자가 편하게 활용할 수 있도록 돕는다. 해결하고자 하는 것 a) Auto Configuration 자동 실행 b) 쉬운 의존성 관리 c) 내장 서버

4. 두 프레임워크의 기능 차이점

1) Spring

POJO 기반의 Enterprise Application 개발을 쉽고 편하게 할 수 있도록 한다.

• Java Application을 개발하는데 필요한 하부구조를 포괄적으로 제공
• Spring이 하부구조를 처리하기 때문에 개발자는 Application개발에 집중 가능
• 동적인 웹 사이트를 개발하기 위한 여러가지 서비스를 제공

  2) Spring Boot

  스프링 부트는 빠른시간에 애플리케이션이 제품이 되도록 하는 것을 목표로 한다.
• Actuator : 애플리케이션을 고수준에서 모니터링하고 추적 할 수 있도록 해준다.
• Embedded Server Interarations : 서버가 애플리케이션에 통합되기 때문에 우리는 서버에 설치되는 별도의 서버를 가질 필요가 없다.

- 마지막으로

Spring과 Spring Boot는 라이브러리가 아니고 프레임워크 이다. 단순히 코드를 제공하는 것이 아니고 프로그래밍 방법을 제공한다. 이렇게 방법을 제공하면 개발자가 그에 맞춰 개발하기 때문에 획일화된 프로그램이 만들어진다고 생각했다. 하지만 이렇게 지원/제공하는 방식으로 개발하지 않는다면 유지보수를 하는데에 어마어마한 비용이 들것이다. 따라서 특정 목적을위한 프로그램을 만드는 데에 있어서 정형화된 방식은 효율성을 극대화 시켜준다. 웹 서비스 구축 경험이 없는 초보자도 Spring Boot를 기반으로 개발한다면 정말 빠르고 간편하게 서비스를 만들어서 배포, 운영까지 할 수 있을 것이다.