[TIL_영화사이트개발_트러블슈팅(2)] 1/9 API로 받아온 데이터 카드로 화면에 띄우기
API로 데이터는 잘 받아왔다. 그럼 이걸 화면에 어떻게 띄울까 그게 오늘의 가장 큰 문제이다
- 우선, 그리드를 만들었다. 그럼 이제 각 칸에 데이터를 넣어줘야 하는데,,
html코드에 js데이터를 넣는 방법을 아직 잘 모르겠다
- 이렇게 일단 로렘으로 채워놨는데 내가 하고싶은건
- js에서 받아온 데이터 값을 넣기
- 반복문 돌면서 넣어주기
- 이미지도 같이 넣기
- 먼저 html코드에 js데이터 넣는 것부터 다시 봐야 할 것 같다
- 일단 값을 변수로 옮겨줬다 그래야 사용하기가 편할 것 같았다
- js로 html에 값 넣기를 찾아봤다
- innerHTML에서 에러가 났다 이게 아닌가,,?
에러의 원인은 js파일을 불러오는 코드를 head에 적어줬기 때문인데, body바로 위로 순서를 바꿔줬다.
이 부분은 module화로 뭔가 해결할 수 있다고 했는데 지금 그것까지 찾아볼 여유가 없기 때문에 일단 순서만 바꿨다.
- 이제 저 에러는 안 뜨는데 에러 내용이 바꼈다
왜 값이 null인걸까 innerHTML로 하는게 아닌가보다 했는데 그냥 저스트 내가 문제였다
id의 이름이 달랐던 것,,,,,,,,,,,,,,,
- id 이름 제대로 적어주니 정상적으로 값이 들어간 것을 확인할 수 있었다
- 근데 문제는 forEach를 썼는데 하나만 나오는 것
아무래도 새로운 셀을 생성해주는 방향으로 가야 할 것 같은 느낌이다 - 라고 1시간 전에는 생각했다. 다시 생각을 해보니
그리드가 적용된 div안에 들어가는 값은 전부 그리드 안에 들어가니까 카드를 만드는 코드만 이 안에 들어가면 될 것 같다.로 바꼈다 - 그럼 이제 카드를 만들어서 화면에 띄워보는 것부터 해야겠다
카드를 만드는 중 만난 에러
append가 안 먹히나 생각했는데 $에서 에러가 났다
느낌상 $가 제이쿼리 문법은 아닌가 생각이 든다
나의 예상이 맞았다 안됐다
다시,,시작한다,,,,
어떻게 돌아가는지 문법을 잘 모르는 상태에서 코드를 가져오다보니
내가 짠 코드임에도 내가 이해하지 못하는 웃기지만 슬픈 현실을 마주했다
어제 값 가져오는 코드 작성한거 빼고는 전부 지웠다,,,,
자, 앞으로는
1. 구조를 먼저 짜고 코드를 작성하자
2. 각 역할마다 함수로 나누자
ex) 값 가져오는 함수, 값을 가공하는 함수, 가공한 값을 보내는 함수
나는 애매하게 반쯤 걸쳐져있는 함수들을 작성했고 한 함수 안에 2가지 작업을 하는 함수도 있었다.
그렇게 되니까 하나가 안되면 잘 되는 하나도 의심하게 되는 일이 생겼다
함수를 역할별로 나눈다면 코드의 가독성도 좋아지고 문제가 생겼을 때 고치기도 쉬울 것이다
사실 함수 나누기를 잘 하지 않았어서 정말정말정말 어렵지만 노력해야지!!!