🎵이름표를 붙여 내 <태그>에 (2024. 4. 19.)

0. 기본정보

- 학습출처: 스파르타코딩클럽 「웹개발종합반」 (3주차 ~ 4 1/2주차)

- 학습내용: jQuery+Fetch 활용, firebase 개념 및 데이터 넣기 ('데이터 가져오기' 는 다음 강의에😉) 

- 오류내용: 백틱(``) 사이 값 

- 학습일: 2024. 4. 19.

---

1. 배운 내용 요약

오늘은 jQuery와 Fetch에 대해 배웠다. 음.. 많이 배웠지만 정확히 뭘 배웠는지 기억이 안 나서 복습 차원으로 오늘은 간략하게 배운 내용을 정리해보고, 그 다음에 항해 일지를 적어보겠다.

("TIL = 복습"  끄적끄적✍️)

1) jQuery

- 한줄 개념: 자바스크립트 작업을 간소화해 생산성을 향상 시켜주도록 설계된 자바스크립 라이브러리(=남들이 만든 코드 모음)

- 참고 블로그: 제이쿼리 기본 문법, 함수, 메소드가 테이블로 잘 정리되어 있어 좋다
  - url: https://m.blog.naver.com/how1_/222620948292

 

2) Fetch

- 한줄 개념: 인터넷을 통해 데이터를 요청하고 받아오는 과정

- 참고 블로그: (보류) (백엔드 업무에 대한 내용이 많은데, fetch는 백엔드 개발자가 자주 사용하는 건가?)

 

3) Firebase

- 두줄 개념: 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼. 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌.

(출처: 웹개발 종합반 4주차 강의자료)

4) 데이터베이스

- 한줄 개념: 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음

- 목적: 데이터를 잘 찾기 위해 존재

- 종류: 관계형 데이터베이스(SQL)/ 비관계형데이터베이스(NoSQL)

---

2. 오류 내용

오늘은 Fetch 활용 시 백틱(``)에 대한 오류가 있었다.

내가 원하는 것은 현재기온이 20도가 넘으면 '더워요' 20도 넘지 않으면 '추워요'가 자동 반영되게 만들고 싶다. 🔽🔽🔽

그러나 내 결과물은... 🔽🔽🔽

(백틱에 문제가 있는 듯 하다)

            fetch(url).then(res => res.json()).then(data => {
                let temper = data['temp']
                let temper_html = ``;
                    if (temper > 20) {
                        temper_html = `<li><a href="#" class="nav-link px-2 text-white">현재 기온 : <span id="temperature">더워요</span></a></li>`;
                    } else {
                        temper_html = `<li><a href="#" class="nav-link px-2 text-white">현재 기온 : <span id="temperature">추워요</span></a></li>`;
                    }

                $('#temperature').text(temper_html);

---

3. 문제 해결

오류가 났던 코드의 백틱 안 내용을 자세히 보면 내용이 그대로 복붙된 것을 알 수 있다.

(그렇다... 쉽게 가려고 생각없이 복붙만 했던 것이다.)

출력된 오류 화면을 다시 들여다 봤을 때 백틱에 넣은 내용이 그대로 출력된 것을 확인하여 백틱 안에 여러 가지 시도 끝에 백틱의 기능은 백틱 사이의 내용을 그대로 출력한다는 것을 깨달았다.

따라서, 내가 원하는 것(조건에 맞으면 '더워요' 조건에 틀리면 '추워요' 글자 넣기)을 그대로(if문의 결과값에 '더워요' else문의 결과값에 '추워요') 넣었다.

            fetch(url).then(res => res.json()).then(data => {
                let temper = data['temp']
                let temper_html = ``;
                    if (temper > 20) {
                        temper_html = `더워요`;
                    } else {
                        temper_html = `추워요`;
                    }

                $('#temperature').text(temper_html);
            })

 

---

4. 오늘의 회고

- 칭찬: 저녁식사를 친구와 함께 하기 위해 샤워, 머리말리기, 메이크업을 쉬는시간과 점심시간에 하여 시간을 알뜰하게 보냈다.

- 반성: (없음) (굳이 말하라면 평상 시 공부할 때 협업 및 동료들을 위해 단정하게 차려입어야겠다😶‍🌫️)

- 보충: 데일리미션(4/19) 중 '직접 개발해보기' 미션에 대해 설계를 완료했다. 주말 동안 틈틈이 코드를 짜봐야겠다.