[TIL] 240111

Today

• 천재교육 에듀테크 풀스택4기

  • JS : 데이터 타입 실제로 console.log(typeof 데이터); 찍어보면서 확인하기

  • if 조건문 / for 반목문 실행해보기

    • for로 구구단 만들기 진행 함.
      첫번째 유형 : 각 단별로 박스로 꾸며주기

      let goal = 9;
      document.write(`<h1 class="box" style="text-align: center; width: 200px;margin: 0 auto;">구구단</h1>`);
      document.write(`<div id="container">`)
      for(let i = 2; i <= goal; i++){
      document.write(`<div class="box" style="width: 100%; padding: 20px;box-sizing: border-box;">`);
      document.write(`<h3 style="text-align: center;border-bottom:1px dashed #555;padding-bottom:10px">${i}단</h3><br>`);
      for(let j = 1; j <= goal; j++){
        document.write(`<p style="text-align:center;width: 100%;border-radius: 20px;background: #fff;padding: 10px 15px;box-sizing:border-box;">${i} X ${j} = ${i * j}</p><br>`);
      }
      document.write(`</div>`);
      }
      document.write(`</div>`)
      

      두번째 유형 : 가로로 반복 돌려보기

       let goal = 9;
       document.write(`구구단`);
       document.write(`<br>`);
       document.write(`<hr>`);
       for(let i = 2; i <=5; i++){
           document.write(`${i}단&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`);
       }
       document.write(`<br>`)
       for(let i = 1; i <= 9; i++){
           for(let j = 2; j <= 5; j++) {
               if ((j*i) > 9) {
                   document.write(` ${j} x ${i} = ${j*i} &nbsp;&nbsp;&nbsp;`);
               } else {
                   document.write(` ${j} X ${i} = ${j*i} &nbsp;&nbsp;&nbsp;&nbsp;`);
               }
           }
           document.write(`<br>`)
       }
       document.write(`<br>`)
       document.write(`<br>`)
       for(let i = 6; i <=9; i++){
           document.write(`${i}단&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`);
       }
       document.write(`<br>`)
       for(let i = 1; i <= 9; i++){
           for(let j = 6; j <= 9; j++) {              
               if ((j*i) > 9) {
                   document.write(` ${j} x ${i} = ${j*i} &nbsp;&nbsp;&nbsp`);
               } else if (i == 1 && j % 2 == 0) {
                   document.write(` ${j} x ${i} = ${j*i} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`);
               } else {
                   document.write(` ${j} x ${i} = ${j*i} &nbsp;&nbsp;&nbsp;&nbsp;`);
               }
           }
           document.write(`<br>`)
       }
      
       document.write(`<hr>`);
       let a = [1,2,3,4,5];
       a.forEach((e,idx)=> {
           document.write(`e = ${e} / idx = ${idx}<br>`);
       })

• 코드잇 : JS 프론트 로드맵

  • JS 기본 문법 토픽 수강완료

Review

• JS로 실제 가볍게 반복문을 실습해봤다. 오랜만에 해서 그런지 좀 어색했다. 앞으로 코테 연습하기도 진행해야할지 고민중이다.

TO DO

• 개인 프로젝트 주제 3~5가지 정도 생각하기 - 뭐하지...
• 인프런 JS강의 필요한 부분만 얼른 듣고 리액트로 넘어가기 => 아직도 못하는중...
• 정보처리기사 필기 시험 준비 (원서접수 : 1/23 ~ 1/26 시험일 : 2/15 ~ 3/7)