DAY07 : WIL [1주차]

1st WEEK I LEARNED

▶ WEEK'S WORK :

1. 로그인 페이지

   • 간단해보이는 한 페이지를 위해 생각보다 많은 게 필요했다. 글씨체부터, 사진 위치, 여백 등..

   • CLASS = "이름"를 만들어 그룹화하고, 사이에 .이름 { 내용 }을 작성하여 그 그룹에게만 설정을 부여하는 방법을 알게 됐는데, 어떤 부분에 어떤 설정을 줄 지 정해서 작성하는 과정이 재미있었다.

2. 미세먼지 실시간 업데이트
   • 개인적으로 많이 막혔던 파트ㅠㅠ
   • 업데이트 버튼 누를 때마다 데이터가 추가되지 않고 새로고침 돼서 뜨게 하는 부분을 생각해야 한다는 점에 놀랐다.
   • 알면 알 수록 섬세한 코딩... 정말 하나하나 떠먹여 줘야 하는 아기 같군. 그래도 주는대로 다 먹고 정직하게 그 만큼의 결과물을 출력해주니 얼마나 기특하니. 가성비는 최고인 것이다.
   • 미세먼지가 70 이상이면 붉은 글씨로 뜨게 하는 부분이 혼자 하려니 계속 틀리고 어려웠다. TEMP_HTML 작성하는 부분은 항상 헷갈리는 게 생기는 것 같다. 익숙해질 필요가 있음!

.bad {
color: red;
font-weight: bold;
}

let temp_html = ''
	if (gu_mise > 70) {
	temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
	} else {
		temp_html = `<li>${gu_name} : ${gu_mise}</li>`
		}
$('#names-q1').append(temp_html);

3. 랜덤 고양이 사진 API를 이용하기
   • 이 작업물에 대해서는 할 말이 많다. 완성하고도 무려 20분 동안이나 다음 강의로 넘어갈 수 없었기 때문이다. 만든 것 중에 가장 만족도가 높았던 작업물이다. 버튼만 누르면 고양이 사진을 랜덤으로 볼 수 있다니, 이런 완벽한 건 누가 생각해낸 거지? 분명 보다 많은 고양이 사진을 보고 싶었던 사람이었을 게 분명하다. 고양이는 나를 폭력적으로 만든다. 백마흔여덟번째 키보드가 다 부서졌어 광과아앙!!!
   • 
   • 이번은 GET을 사용한 작업이었다.
     사실 AJAX 코드가 알듯 말듯 어렵다. FUNCTION 코드 짜는 부분에서 계속 막힌다. 이것도 그저 이 상황엔 이 코드, 저 상황엔 저 코드, 이런식으로 통째로 외워야 하는 걸까? 자기 전에 유튜브로 AJAX 좀 검색해서 이것저것 봐봐야겠다. 뭘 알아두면 좋을지 감이 잡히면 좋을 텐데.

	function q1() {
    		$.ajax({
	        	type: "GET",
			url: "https://api.thecatapi.com/v1/images/search",
			data: {},
	                success: function (response) {
	                    let imgurl = response[0]['url']
	                    $('#img-cat').attr('src', imgurl)
                }
            })
        }

	<button onclick="q1()">고양이를 보자</button>
    	<div>
        	<img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    	</div>

4. JQUERY + JAVASCRIPT

   • 구현테스트 다음으로 '내게 한 주간 뭘 배웠던가 내가 배우긴 한 건가' 하는 생각을 들게 해준 작업물들... 후

• 아무것도 안 썼을 때 '입력하세요!' 하는 명령 창은 띄울 수 있는데 기껏 입력했더니 내용을 띄우지 못하는 명령성애자 1번.
  $('#').val(); 이거 쓸 때 # 좀 빼먹지 말자!

            let txt = $('#input-q1').val();
            if (txt == '') {
                alert('입력하세요!');
            } else {
                alert(txt);
            }
        }

• 뭔가 어렴풋 .split 이 코드를 썼던 건 같은데... 하는 아련한 추억 회상만 들게 해준 첫사랑st 2번.
  txt.includes('@')랑 .split 에서 [0]이 첫번째 순서라는 거 잊지 말기.
  그리고 () {} [] 이 괄호들 구분하는 게 아직 헷갈린다. 아무래도 문법들을 따로 공부하는 게 필요할 것 같다.

         let txt = $('#input-q2').val();
         if (txt.includes('@')) {
             let domain = txt.split('@')[1].split('.')[0];
             alert(domain);
         } else {
             alert('이메일이 아닙니다.');
         }
     }

• 이름을 부르지 못하는 홍길동과 그렇다고 지워내지도 못하는 질척임 최고 3번.
  <li>${txt}</li> 이것! 이게 그렇게 안 써졌다.
  그리고 $('') 뒤에 붙는 .___() 이 명령어(?)들. 완전히 외국어 공부하는 기분이랑 다를 게 없다. 나는 외국어 공부하는 거 좋아했으니까, 이것도 금방 습득할 수 있을 거다! ㅠㅠㅠ그래야 되는데!!!

    function q3() {
            let txt = $('#input-q3').val();
            let temp_html = `<li>${txt}</li>`;

            $('#names-q3').append(temp_html);
        }

        function q3_remove() {
            $('#names-q3').empty();
        }

▼ NEXT WEEK PLAN :

• 5주차 완강
• 1주차 구현테스트 복습
• 웹 프로그래밍 기초 강의 복습
  - AJAX와 JQUERY 문법 공부 필요
  • 괄호 () {} [] 구분하기

▼ THIS WEEK'S MEMO :

• 첫 주는 이것 저것을 핑계로 강의 진도가 뒤처졌다. 조급하게 가느라 남는 것 없이 진도만 끝내도 안 되지만, 느리다 못해 따라잡지 못하는 건 더 안 된다. 개인 작업이 아니라 팀 작업임을 잊지 말자.
• 연휴가 끝나자 마자 웹 프로그래밍 팀 프로젝트가 있다. 걸림돌 되지 않게 진짜 복습 열심히 해가자!!!
  
  
• 형설지공(螢雪之功) : 형 설마 지금까지 공부하는거야? 동생한테 이 말 듣는 게 이번주 목표.