[Let's TIL✍️] 코딩 18 : 2 Week _ 오류해결 & 스터디

실습하면서 겪은 오류를 스터디를 통해 해결해보았다.

 

여기서 click 함수가 작동하지 않아서,  실제로 코드를 다 작성하고 나서도 제대로 실행되지 않는 문제가 발생했다.

 

 

개발자 도구에서 이 오류에 대한 상세 내용을 볼 수 있었는데,

그 이유는 간단하게 함수의 정의와 호출을 잘 몰랐기 때문이었다. 

​

 

문제 원인

 

function clickpost(postid){

let id = $(this).attr("id");        > 이 부분이 우선 여기 있으면 안 된다고 한다. (문제의 원인)

let url = "https://jsonplaceholder.typicode.com/posts/" + postid;

---

해결하기

function clickpost(postid){                  > 선언하는 function 이고, 이러한 선언은 밑의 호출과 순서가 바뀌어도 된다고 한다.

                                                                            혹은 아예 script 부분이 body쪽으로 내려가도, 작동이 된다.

let url = "https://jsonplaceholder.typicode.com/posts/" + postid;

 

$.get(url).then(function (data) {

​

$("#exampleModalLabel").text(data.title);         > .text함수 사용했고, id값인 #exampleModalLabel 을 가져왔는데,

$("#modalContent").text(data.body);                  여기서는 class가 하나씩이므로 class를 가져와도 된다.

$("#exampleModal").modal("show");  > bootstrap의 modal의 methods 방식을 사용했다. 이렇게 .modal 모달함수를 사용

});

}

$(document).ready(function (){ > 원하는 내용이 아래쪽에 있어 document가 ready될때 clickpost를 써서 호출해달라는 의미

$(".list-group-item").click(function () {             > 이 function은 선언과는 다르게 쓰인 것이다.

let id = $(this).attr("id");> 이 부분은 내려왔다. this부분이 가리키는 곳은 그 윗줄의 $(".list-group-item")을 가리키기 때문이다.

clickpost(id);

 

실습 재시작 

1) id를 설정 (li에)

 

id 설정의 경우에도, 꼭 li에 있는 class만 가져와서 할 수 있는지 궁금했다.

= 결론은 가능하다. 다른 class 예를 들면 ul에다가 id를 지정하고 class 속성값을 가져오는 것도 된다.
but , 좀더 명확한 위치가 li라서 여기(li)에 지정하는 것이다.

 

​

2) 다음에 document를 먼저 만들어서 감싸주기

​

3) click 이벤트 만들고 id 속성값 가져오기

​

4) get 함수 사용하기

​

5) modal 가져오기 (이때 아래 버튼 삭제)

 

6) close > 확인으로 버튼 이름 변경

​

드디어 뜬다 MODAL!

​

완료해서 너무 신난다... 😂😂

​

​

그 이후에 스터디를 하면서 처음 코드가 왜 잘못되었는지와,

script를 위 아래로 옮겨도 가능하다는 것,

document를 써서 감싸줬는데 이 부분도 script를 아래로 내리면 없어도 된다는 것까지

아주 꿀팁이 가득한 스터디였다.

​

---

 

 

 조교님과 Q&A 세션

 

1) id와 class는 단수, 복수로 가져온다는 차이가 있다.

(= id는 유일하므로 단수이다.)

​

2) let url 에 const를 쓰는게 맞다. (추후 바뀌지 않으므로0)

- let보다는 거의 const를 쓴다고 한다. (100중 95)

​

3) 브라우저 렌더링 엔진이 하는 일들 (역할)

https://d2.naver.com/helloworld/59361

​

4) css에서도 작은 수는 연산이 가능하다 (꿀팁)

- css에서 연산할 때는 calc()라는 함수를 쓰면 된다.

​

​

그리고 조장님의 꿀팁

- ctrl K, F하면 자동 개행이 된다. (가져온 코드들을 예쁘게 정렬해줌)

- 초기화면에 ! , tab(enter)하면 기본 태그들이 자동완성

- freecodecamp (영어 사이트지만, 유용하게 쓸 수 있다.)

​

 

​

---

오늘의 소감 ✍️

​

오늘은 엊그제와 그 전날들보다 좀 더 좋은 날이었다.

이해의 퍼센테이지가 20-30에서 거의 80까지 올라온 날이었기 때문이면서, 과제 제출을 한 날이기 때문이다. 

​

그리고 오늘 질문과 스터디를 통해서 어느 부분이 잘못된 건지,

또 코드 리뷰를 통해서 처음 만들었던 코드의 어느 부분이 잘못되었고

function 함수 둘이 어떻게 다른지,

정의와 호출의 차이 그리고 변수를 부르는 순서에 대해서 뭔가 딱딱 설명을 받으니까 너무 좋았다.

​

모르는 부분을 통해서 이해한다는게 뭔지 알게된 것이 좋았고,

강의도 좋은데, 스터디가 좋은 것도 코딩18의 큰 장점으로 느껴졌다. 

모르던 부분을 질문하고 알아가서 그런지 이해가 훨씬 잘되는 기분이다. so good 💪