미녀비

자 저번시간에는 간단하게 화면을 구성해봤는데요

제 첫번째 기능은 검색창에 이름을 입력하면 해당 캐릭터의 스펙을 요약해서 화면에서 보여주도록 하고싶습니다.

그래서 오늘 할것은 인풋창에 입력한 캐릭터명 값을 서버로 전송하는 이벤트를 만들어서 서버에서 데이터를 전달받고 출력하는 과정까지 해보겠습니다.

import React, { useState } from 'react';

function getUser(characterName) {
  fetch("http://127.0.0.1:8080/loa",{
    method: 'POST',
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(characterName),
  })
}

function App() {
  const [inputValue, setInputValue] = useState('');
  const handleClick = () => {
    getUser(inputValue)
  }
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };


  return (
      <div className="App">
        <header className="top-header">
          <div className="container">
            <a className="logo-home" href="http://localhost:3000">민엽 군장검사</a>
            <input className="search-cha" placeholder="캐릭터 명을 입력하세요" value={inputValue} onChange={handleChange} onKeyPress={handleClick}></input>
            <button className="chbutton" onClick={handleClick} >조회</button>
          </div>

먼저 상단에 import로 useState 라는것을 해줄텐데요 이는 리액트가 제공하는 별도의 공간에 변수를 저장해서 사용할 수 있는것으로 사용하게 되면 컴포넌트의 값, 컴포넌트의 값을 변경하는 것 이렇게 두가지를 배열의 요소로 제공한다고 합니다. 이 setState를 사용하게되면 state값을 화면에 다시 렌더링 해주는 기능을 가지고 있다고 해요! 그래서 자주 변경이 예상되는 값이나 사용하는 값에 적용해주면 좋습니다.

자 그래서 조회 버튼을 클릭했을떄와 엔터키를 통해 입력하는 경우에 handleClick 이라는 이벤트가 실행될 수 있도록 하여 최종적으로는 상단의 getUser() 함수가 실행되도록 합니다. 

서버로 데이터를 전송하는것은 fetch를 통해 사용했구요 아직 리턴값은 받지 않은상태로 단방향 데이터 전송만 목표로 하고있어 완성은 다음에 해보겠습니다. 전송하고자 하는 서버 url을 입력해주고 이제 서버에서도 해당 값을 받아줄 수 있도록 세팅해야겠죠?

컨트롤러를 하나 생성해줬구요 우리가 fetch에서 작성한대로 post매핑의 메소드를 생성해주고 JSON 형태의 값을 받을 수 있도록 RequestBody를 추가해줍니다. 이렇게 간단하게 콘솔창에 전달받은 이름을 출력하는 메소드를 만들어봤구요 한번 테스트 해봐야겠죠?

자 데이터를 입력하고 조회버튼을 눌렀는데 위와같은 에러가 발생했습니다.

뭔고 하고 봤는데 CORS에러가 발생했네요 CORS에러는 간단하게 자원의 출처를 비교하는 보안 규칙 입니다. 

localhost:3000 에서 전송한 데이터를 localhost:8080에서 받으려니 두개의 포트가 달라 동일한 출처가 아니기에 발생한 오류 입니다. 오류를 해결하기 위해 서버에서 CORS 요청을 허용해주도록 하겠습니다.

Configuration 파일을 하나 생성 해줬구요 localhost:3000의 요청에 대해  Access-Control-Allow-Origin 설정을 허용해줘서 정상적으로 값이 전달될 수 있도록 해줬습니다.

다시 테스트를 해봅시다! 이렇게 정상적으로 콘솔창에 우리가 전달한 값이 출력되는것을 확인할 수 있습니다.

자 오늘은 클라이언트에서 전달한 값을 서버에서 받고 출력하는것을 해봤습니다.

이제 다시 데이터를 전송하기 위해 서버에서 값을 처리해주는 과정을 가져야겠죠? 로스트아크의 API를 활용하여 캐릭터의 정보를 얻는것을 다음시간에 해보겠습니다.

감사합니다.

엽바!

안녕하세요 이제 리액트를 사용해서 화면을 만들어 보겠습니다.
다들 하는 쇼핑몰 페이지, 블로그 같은거는 재미가 없을거같아서 만드는김에 내가 만들고 싶은거를 만들어보자고 생각했고, 저는 '로스트아크' 라는 게임을 취미로 하고있습니다. 그래서 게임 안에서 소위 '군장검사'를 좀 더 간편하게 할 수 있는 사이트를 만들어보고 싶어서 한 번 시작해보겠습니다!

프론트엔드는 잘 모르는 부분이라 공부하면서 해보도록 합시다!

리액트 시작

우선 시작해볼텐데요 터미널에서 npm start 명령어로 리액트를 실행시켜줍니다.

사진의 App.js가 우리가 사용하게 될 메인 페이지 인데요 기존 자바스크립트를 사용하신 분들은 이거 HTML 만들고 거기다가 js 적용하는거 아니야?? 라고 하실 수 있는데 리액트를 실행하면 보이는 오른쪽 사진과 같은 화면이 우리가 보는 index.html 파일입니다.

이 index.html은 public 폴더에 들어가시면 확인하실 수 있습니다.

index.html에 들어오시면 하단 body 부분에 <div id="root">가 보이실텐데요 

src 경로의 index.js 파일에서 root에 우리가 만든 App.js 파일을 렌더링 해주는 방식으로 사용한답니다.

그래서 우리는 앞으로 App.js 파일을 메인 HTML 파일처럼 생각하고 작업해주면 됩니다!

다시 App.js로 돌아와서 기본적인 UI를 구성해볼텐데요 기존에 있던 내용들은 전부 지워주고 일단 생각나는것들을 만들어봤습니다. CSS도 간단하게 적용하겠습니다.

리액트의 장점인데요 변경사항이 있을 때 프로젝트를 재실행 하지 않아도 저장만 하면 알아서 페이지가 리로딩 돼 변경사항을 바로바로 확인해 볼 수 있답니다.

굉장히 어떤 사이트가 떠오르실텐데요... 정말 저의 비루한 상상력으로 새로운걸 창작하지 못했습니다 ㅜㅜ 죄송합니다 꼭 저만 사용할것이구요... 흑흑.. 죄송합니다.

일단 오늘은 기본 화면만 만들어봤는데요 다음 내용은 서버와 연동해가면서 필요한것을 만들어보도록 하겠습니다.

감사합니다!!

엽바!

안녕하세요 제가 해보려고 하는거는 스프링 부트와 리액트를 이용해서 제가 즐겨하는 취미인 '로스트아크' 라는 게임에서 사용할 수 있는 '군장검사' 프로젝트를 해보려고 합니다. 

아래는 로스트아크를 플레이 하며 공대장이 보게되는 파티 신청 화면입니다.

로스트아크에는 레이드별로 원활한 클리어를 위한 스펙이 존재합니다. 하지만 공대장 입장에서는 이 화면을 보고 알 수 있는 정보는 캐릭터의 아이템 레벨, 캐릭터레벨 2가지 입니다. 

하지만 저 2개의 정보 말고도 초월,엘릭서,각인,보석 외에도 원정대,카드 등 정말 많은 스펙확인 수단이 있는데요 이것을 확인하려면 오른쪽의 상세보기를 누르고 아래의 캐릭터 정보창에서 확인이 가능합니다

하지만 여기서도 각각의 탭마다 들어가서 확인을 해야하고 추가피해 정보같은경우는 또 아래의 상세정보를 눌러 확인해야합니다. 상세보기에 상세보기.... 그래서 이 과정을 좀 더 간편하게 만들 수 있도록 캐릭터의 스펙정보를 요약해서 보여줄 수 있는 사이트를 만들어 보려고 합니다.

시작해보겠습니다.

감사합니다! 엽바!