2021-02-25 리액트 공부

포코드·2021년 2월 25일

Year 2021

목록 보기

1/8

프로젝트중 마주친 문제들....

문제.1

미리 만들어 놓은 REST API에 요청을 보내려고 하는데 브라우저에서 CORS문제를 띄우며 막는다....

이 문제를 해결하기위해 React에 Express서버를 연동하기로 했는데, 새로 배울게 많았다...
원래 쓰던 컴포넌트가 함수형이라서 componentDidMount함수도 사용할 수 없길래 컴포넌트 자체를 클래스형으로 바꿔주는 작업을 해주었다.

그렇게 클래스형으로 바꿔주니 생기는 여러 문제를 또 해결한 뒤 컴포넌트에 api로 받아온 데이터를 저장할 state를 만들어준 뒤 componentDidMount를 사용하니 똑같이 CORS를 띄워서 더 구글링해보니 Express서버에 CORS모듈을 쓰면 해결이 된다고 한다길래 CORS를 사용해주니 CORS문제는 해결이 되었다.

npm install cors --save

app.use(cors());

문제.2

CORS문제를 해결하면 끝날줄 알았지만, CORS뒤에 다른 문제들이 더욱 많이 숨어있었다...
그 문제는 api에서 받아온 json data를 어떻게 웹에 띄울것인지 생각을 안했다는 것이다.

{
  '0': '돈채콩나물밥&amp;양념장',
  '1': '김칫국',
  '2': '장각구이(갈비맛)&amp;카사바칩',
  '3': '열무무침',
  '4': '배추김치'
}

data가 이런모양이라 이 문제는 처음부터 끝까지 돌리는 함수를 만들어서 해결해주었다.

function printAll(meal, length) {
let value = "오늘의 급식은"
for (let index = 0; index < length; index++) {
value = value + ${meal[index]};
value = value.replace("amp;", "");
}
console.log(value)
return value
}

// 생략
return (
            <div>
                <header>
                    <div class="menu">
                        <div class="logo">$$</div>
                        <div class="menu-all"><Link to="#">온도</Link></div>
                        <div class="menu-all"><Link to="#">미세먼지</Link></div>
                        <div class="menu-all"><Link to="#">급식</Link></div>
                    </div>
                </header>
                <article>
                    <div class="temperature"></div>
                    <div class="finedust"></div>
                    <div class="cafeteria">
                        <p>{meal ? printAll(meal, Object.keys(meal).length) : "로딩중..."}</p> // 이 부분이 함수 사용
                    </div>
                </article>
            </div>
        )