어제 JS로 한 삽질에 대한 기록
배우고 있는 시기에, 늘 겪는 일 중 하나인 삽질에 대해 설명해보고자 합니다. (Tmi이지만, 제가 겪어보게 되었거든요 하하..)
제 블로그를 처음 오신 분들도 있을 수 있으니깐, 2020-11-05 포스트를 참고해 주시거나
개발하다 보면 이곳을 파야 정답이 나오는데, 다른 곳을 파다 틀리는 경우도 있고 바로 앞에 결과가 있는데 빙 돌아서 다시 온 경우도 있었습니다.
일단 어제의 소스코드를 다시 올리고자 합니다.
1 | // API 불러오기 |
2 | // 실무에선 axios를 많이 사용하지만 fetch로도 충분히 끌어올수 있다. (blog 참고, 조언참고) |
3 | // fetch('url') = 서버에 불러올 자료 끌어오기 |
4 | fetch('https://my-json-server.typicode.com/hackurity01/prgrms-gsmhs-rct-1-week-api/questions/1031') |
5 | .then(function(response){ |
6 | // 서버에서 원초적인 데이터를 가져온다 |
7 | return response.json(); |
8 | }) |
9 | .then(function(myJson_data) { |
10 | // 정리 1 |
11 | // 1차 가공 |
12 | // console.log(myJson_data); |
13 | let Json_data = JSON.stringify(myJson_data); |
14 | |
15 | console.log(Json_data); |
16 | // 정리 2 |
17 | // 서버에서 가져온 데이터를 가공한다 1차가공후 2차가공 |
18 | let Json_parse = JSON.parse(Json_data); |
19 | |
20 | // 정리 3 |
21 | // Mr.blog씨의 날짜와 질문(date, question) 3차가공 |
22 | console.log(Json_parse); |
23 | |
24 | let Blog_date = Json_parse.id; |
25 | let Blog_question = Json_parse.question; |
26 | console.log(Blog_date); |
27 | console.log(Blog_question); |
28 | |
29 | document.getElementById('blog_question').value = "12223"; |
30 | }); |
이러한 소스코드를 쓰게 되었는데, fetch에 대해 정확한 설명을 안 보고… JSON.stringify()를 통해 JSON을 다시 문자 배열로 만들어 버리고 (여기서 이상한 걸 느끼지 못했습니다..) 어코드가 왜 안되는지 생각했습니다.
1 | let Json_data = JSON.stringify(myJson_data); |
문제의 코드 stringify가 어떤건지만 좀더 제대로 찾아볼껄 생각해봅니다.. 제가 더 안찾은게 잘못이지만요. 여기서 좀더 생각하는 능력을 길러야 한다고 생각하게 되었습니다. 어찌어찌해서 찾아서 해봤지만요.
제가 느끼기엔 stringify가 Json이 분리해서 가져온 데이터를 합쳐주는, 존재인거 같습니다.
그리고 난다음 그 문자열을 다시 JSON화 해서 불러오는 JSON.parse를 통해서
1 | let Json_parse = JSON.parse(Json_data); |
다시 Json 화를 시켜주는 코드를 가져와서 데이터를 Json 화했습니다! 엄청 돌아서 왔지만요.
1 | let Blog_date = Json_parse.id; |
2 | let Blog_question = Json_parse.question; |
결국, 처음 function으로 가져오게 된 값에 해당 JSON 데이터가 있는 이름 면을 적어주면 끝나는 일이었지만, 돌고 돌아 정답에 접근을 했습니다.
저도 사실 어떠한 방법으로 접근하면 더 좋을까란 생각으로 코딩을 하다가 이러한 참사가 일어난 거 같습니다.
이 사실을 안 것도, 이 코드가 필요한 친구가 가져와서 어떻게 하면 줄일 수 있을까란 고민 후에 저에게 알려주었습니다. 안 그랬음 오늘도 삽을 팠다가 끝날 수도 있죠,