스터디/한빛-혼공학습단-혼공JS

[혼공js-12기] 6주차 Chapter 06 (08/12 ~ 08/18)

chasing-rainbow 2024. 8. 16. 19:18

혼자 공부하는 자바스크립트

# 진도 기본 숙제(필수) 추가 숙제(선택)
1주차
(7/1 ~ 7/7)
Chapter 01 ~ 02 p. 54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기 Ch.01(01-1) 확인 문제 1번 상세하게 적고 인증하기
2주차
(7/8 ~ 7/14)
Chapter 03 p. 139 의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기 p. 152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡처하기
3주차
(7/15 ~ 7/21)
Chapter 04 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기 p. 173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기
4주차
(7/22 ~ 7/28)
Chapter 05 p. 202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기 p. 240 확인 문제 1번 풀고, 풀이 과정 설명하기
여름방학
(7/29 ~ 8/4)
럭키비키 즐거운 여름방학이잔앙
5주차
(8/5 ~ 8/11)
Chapter 06 객체, 속성, 메소드가 무엇인지 설명하기 p. 288 확인 문제 3번 풀고, 풀이 과정 설명하기
6주차
(8/12 ~ 8/18)
Chapter 07 ~ 08 p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡처하기 p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡처하기

 

드디어 끝이군요...

블로그에 정리한다는게 쉽지는 않았지만..그래도 정리하느라 다시 한번 책을 보게 되니

혼공스는 아주 훌륭한 시스템인거 같습니다.

일요일마다...숙제.숙제~~!!!, 중고딩도 아니고..부담이 되었지만 유익한 시간이 되었던것 같습니다.

욕심같아선 다음기수에 다른과목도 도전을 할까 고민되네요..

아무튼 7월부터 지금까지 수박겉할기 식이라도 2달이 안되어 한권을 끝냈다는 자부심...

보통 책을 사면 필요한 부분만 읽고 넘어가기 일수 였는데 간만에 완주하게 되어 기쁘기도 합니다.

서론은 여기까지...이제 마무리에 들어 갑니다.


  1. 기본숙제 : 
    p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡처하기
    ** 일단 출력이 정상적으로 안되네요..
    책처럼 고양이 이미지가 안나오네요..ㅜㅜ

    https://placekitten.com/ 서버가 다운이라네요..

  2. 추가 숙제:
    p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡처하기

 

 


  • Chapter 07. 문서 객체 모델
    - DOMContentLoaded 이벤트
     HTML 언어에서 요소는 자바스크립트에서는 문서 객체라고 하다.
    따라서 DOMContentLoaded이벤트는 문서객체를 조작하는 이벤트이다.
    이벤트 이름처럼 웹브라이저가 문서 객체를 모두 읽고 나서 실행하는 이벤트이다.

    - 문서 객체 가져오기
     document.head : head의 요소읽기
     document.body : Body의 요소읽기
     document.title : Title의 요소 읽기
     document.querySelector(선택자)
     document.querySelectorAll(선택자)
      ** 선택자는 CSS선택자를 입력한다.
       >> 태그 선택자 : 특정 태그를 가진요소를 출력(태그)
           아이디 선택자 : 특정 id 속성을 가진 요소를 출력(#아이디)
           클래스 선택자 : 특정 class 속성을 가진 요소를 추출(.클래스)
           속성 선택자 : 특정 속성 값을 갖고 있는 요소를 추출([속성=값])
           후손 선택자 : 선택자_A 아래에 있는 선택자_B를 선택(선택자_A 선택자_B)
    - 글자 조작하기
     문서 객체.textContent :입력된 문자열을 그대로 입력
     문서 객체.innerHTML : 입력된 문자열을 HTML 형식으로 입력

    - 속성 조작하기
     문서 객체.setAttribute(속성 이름, 값) : 특정 속성에 값을 지정
     문서 객체.getAttribute(속성이름) : 특정 속성을 추출

    - 스타일 조작하기
     문서 객체의 스타ㅏ일을 조작할 때는 Style 속성을 사용.
     Style속성은 객체이며, 내부에는 속성으로 CSS를 사용해서 지정할 수 있는 스타일들이 있다.

    - 문서 객체 생성하기
     문서객체를 생성하고 싶을 때에는 document.createElement()메소드를 사용한다.
      ex) document.createElement(문서 객체 이름)
     >> 문서 객체를 만들었다고 문서 객체가 배치되는것은 아님,  문서를 어떤 문서 아래에 추가 할지를 지정해줘야 한다. 
      이러한 방식은 프로그래밍에서 트리(Tree)라고 한다. 어떤 문서 객체가 있을 때 위에 있는 것을 부모,
      아래있는것을 자식이라 부른다.
     문서객체에는 appendChild()메소드가 있으며, 이를 왈용하면 어떤 부모 객체 아래에 자식 객체를 추가 할수 있다.
     ex) 부모 객체.appendChild(자식 객체)
     
    - 문서 객체 이동하기
     appendChild()메소드는 문서 객체를 이동할 때도 사용할 수 있다. 문서 객체의 부모는 언제나 하나여야 한다. 따라서 문서 객체를 다른문서 객체에 추가하면 문서 객체가 이동한다.

    - 문서 객체 제거 하기
     문서 객체를 제거할 때는 removeChild()메소드를 사용한다.
     ex) 부모 객체.removeChild(자식 객체) 

    - 이벤트 설정하기
     모든 문서 객체는 생성되거나, 클릭되거나 마우스를 위에 올리거나 할 때 dlqopsxm라는 것이 발생한다. 
     그리고 이 이벤트가 발생할 때 실행할 함수는  addEventListener()메소드를 사용한다.
     ex) 문서 객체.addEventListener(이벤트 이름, 콜백 함수
     
  • Chapter 08. 예외 처리
    - 오류의 종류

     구문 오류 :  프로그램 실행 전에 발생하는 오류
     >구문 오류는 괄호의 짝을 맞추지 않았다든지, 문자열을 열었는데 닫지 않았다든지 할 때 발생하는 오류 이러한 구문     오류가 있으면 웹 브라우져가 코드를 분석 조차 하지 못하므로 실행 되지 않는다.

     예외 또는 런타임 오류 : 프로그램 싱행 중에 발생하는 오류
     > 실행중에 발생하는 오류를 의미하며 메소드를 잘못 입력할 경우 발생하며, 오탈자 수정등을 토앻 간단히 수정 가능하다. 

    - 기본 예외 처리
    조건문을 사용해서 예외가 발생하지 않게 만드는 것을 기본예외 처리라 한다.
    ex) 오류사항

    - 고급 예외 처리
     기본예외 처리 이외 try catch finally 구문을 이용하여 예외처리 하는 방법을 고급 예외 처리라고 한다.
    상기 finally 구문은 예외 상관없이 무조건 실행 된다.

    - 예외 객체
     try catch 구문을 사용할 때 catch의 괄호 안에 입력하는 식별자가 예외 객체이다.
    아무 식별자나 입력해도 괜찮지만, 일반적으로 e나 exception이라는 식별자를 사용합니다.
     예외 객체의 속성
     > name :예외이름
     > message : 예외 메시지

    - 에외 강제 발생
    상황에 따라서 예외를 강제로 발생시킬때 throw 키워드를 사용한다.
     예외를 강제로 발생시키는 이유는 일반적으로 개발할 때는 어떤 사람이 Lodash라이브러리처럼 다양한 기능을 가진 유틸리티 함수(또는 클래스)를 만들고, 다른 사람들이 그러한 라이브러리의 함수(또는 클래스) 를 활용하는 경우, 
    의도하지 않은 형태로 사용하는 것을 방지 하고, 의도한 대로 사용하도록 유도 할 수 있다.

 

여기까지...끝..

 

지난 6주간 자바스크립트를 학습하며....

우연히 웹서핑중..혼공단이란 걸 알게 되었고,

혼자 진도 나가기 힘든데 강제(?)숙제까지 있고, 블로그에 정리도 할 수 있으니
혼자 하는것 보다 진도는 확실히 나가겠구나 싶었습니다. 

그래서 별고민 없이 책구매 후 신청을 했더니 떡~~하니 12기 맴버가 되어 참여하게 되었습니다.

혼자 공부했다면 이만큼 했을까?

혼공족장님의 열성적인 응원에 힘입어 나름 열심히 한다고 했지만 블로그 정리는 쉽지가 않더군요..
다른분들 보니 엄청 정리를 잘하셔서...(부럽기도 하고)..처음엔 부담되 되었습니다.

하지만 어떻게든 해야 했으므로 창피를 무릅쓰고 어찌어찌 왔습니다.

아무튼 혼공단이라는 시스템은 참 좋은 시스템같습니다.

꼭 숙제가 아니더라도 교류할수 있는 창이 있다는것이 장점 같습니다.

 

앞으로도 혼공단의 무한한 발전을 기원하며...다음 기수 분들은 더 많은 참여를 기원합니다.
감사합니다.