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

문제.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': '돈채콩나물밥&양념장',
  '1': '김칫국',
  '2': '장각구이(갈비맛)&카사바칩',
  '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>
        )

코드가 더러워서 죄송합니다

문제는 이렇게 머리굴리면서 해결해내어서 결과적으로

이렇게 나오게 되었습니다...

tmi

전부터 너무 나태해진 느낌이 있어서 하루에 한번씩 글을 쓰려고 하는데 오늘이 처음이라 글이 매끄럽지 않은점 죄송합니다ㅠㅠ

이렇게 오늘도 배운게 많아서 행복할 따름입니다!
긴 글 읽어주셔서 감사합니다