TIL: 복습 또 복습

✔️ 학습 범위

• 웹개발 종합반 1-2주차
• 코드잇 프로그래밍과 데이터 in JavaScript

 

📄 오늘 공부한 내용

● display: flex

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

개념을 공부한지 꽤 되었고 몇 번 사용해보기도 했는데도 매번 검색하게 되는 display: flex .

위 4가지는 세트로 많이 쓰이니 외워두면 좋을 것 같다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

 

● 웹개발 종합반: 작동원리

01 fetch()로 서버에서 데이터 받아오기

<script>
    function q1() {
	  //fetch("url")로 정보 받아오기
      fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
        let rows = data['RealtimeCityAir']['row'] //데이터 위치
        $('#names-q1').empty()
        
        //forEach()로 데이터를 하나씩 꺼내오기 >> 그 중 필요한 데이터는 식별자 지정
        rows.forEach((a) => {
          let gu_name = a['MSRSTE_NM']
          let gu_mise = a['IDEX_MVL']
          
          // temp_html은 if문으로 데이터를 결정
          let temp_html = ``
          if (gu_mise > 40) {
            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
          } else {
            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
          }
          
          //#names-q1에 결정된 temp_html을 붙여주기
          $('#names-q1').append(temp_html)
        })
      })
    }
  </script>

 

 

☁️ 노트

필수트랙 기간이 시작되었다. 웹개발 종합반 강의는 이미 완강했지만, 여기서 입학시험 문제가 출제된다고 하고 아직 혼자서 만들 정도는 아니라서 복습이 필요하다고 생각했다. CSS 트랙도 있었지만 웹개발 종합반 강의를 선택하게 된 이유이다. 2주차까지는 내용이 많지 않으니 위에 적은 부분만 잘 숙지해두면 되겠다. 복습이라 크게 어려운 부분은 없었다.

코드잇 강의에서는 Math 객체에 대해 배웠는데, 이부분도 어렵지는 않지만 아직 외우지는 못한 부분으로 자주 봐둬야겠다.

3일 전부터 아침에는 운동, 오후에는 공부한다는 이유로 하루를 길게 살았더니 낮잠을 자게 되었고 그래서 패턴이 깨졌다. 다시 계획 잘 세우고 체력관리도 해야겠다.