사담

WIL (4/3 ~ 4/9)

NaDuck 2023. 4. 11. 13:40

어느덧 코드잇 부캠도 4주차를 향해 달려가고 있습니다🔥

하루 하루는 되게 긴 것 같은데 주 단위로 보면 금방 가는 것 같아요😥😥

요즘 날이 우중충☔💧해서 집중력이 물렁~해질 때가 있는데 이럴 때일수록 더 정신 집중하고 공부!!!

 

이번 주에 배운 것들

4월 3일

인터랙티브 자바스크립트

  • getElementById, getElementsByClassName, getElementsByTagName
  • querySelector, querySelectorAll
  • 이벤트 핸들링 & 이벤트 핸들러 함수 등록하기
  • Window 객체
  • 요소 노드 & 텍스트 노드(리프 노드)
  • DOM 트리 노드 이동하기 - children, firstElementChlid, lastElementChild, parentElement, previousElementSibling, nextElementSibling
  • DOM 트리 노드 프로퍼티 - innerHTML, outerHTML, textContent, insertAdjacentHTML
  • 요소 생성 - createElement
  • 요소 삭제 - element.remove
  • 요소 속성 - getAttribute, setAttribute
  • classList - add, remove, toggle, replace, contains, value 등

 

4월 4일

인터랙티브 자바스크립트

  • 비표준 속성 - css [ ] 대괄호 표기로 속성에 접근, date-
  • 이벤트 핸들러 함수 등록 & 삭제 - addEventListener, removeEventListener
  • 마우스 event - mosedown, mouseup, click, dbclick, contextmenu, mouseover, mousemove, mouseout, mouseenter, mouseleave
  • 마우스 event 프로퍼티 - button, clientXY, pageXY, offsetXY, screenXY,altKey, ctrlKey, shiftKey, metaKey, relatedTarget
  • 키보드 event - keypress, keyup, keydown
  • 키보드 event 프로퍼티 - key, code, altKey, ctrlKey, shiftKey, metaKey
  • 포커스 event - focusin, focusout, focus, blur
  • input 입력 event - change, input, select, submit
  • scroll event - scroll
  • 윈도우 창 event - resize
  • Event 객체 - type, target, currentTarget, bubbles 등
  • 이벤트 버블링, 이벤트 위임, stopPropagation
  • 캡쳐링 단계 - target 단계 - 버블링 단계
  • event 기본 동작 막기 - event.preventDefault

 

4월 5일

2주차 Weekly Mission Refactoring

  • font-size: 62.5%와 rem 단위 쓰기
  • flexbox와 grid 적극 활용하기
  • gnb의 sticky position 
  • !important 지양하기
  • id, class 이름 적절히 지정하기 
  • 코드 포맷터 적용하기(prettier)

 

4월 6일

자바스크립트 웹 개발 기본기

  • 클라이언트와 서버 - request & response
  • fetch 함수 - then, catch 메소드
  • arrow function
  • URL의 구성 - host + path + query
  • http, https
  • JSON 데이터 포맷
  • js 객체와 JSON의 차이
  • response.text vs. response.json
  • http 메소드 - GET, POST, PUT, DELETE
  • serialization & deserialization - JSON.stringify, JSON.parse
  • head의 status code(상태 코드)

 

4월 7일 ~ 4월 8일

2주차 Weekly Mission Refactoring

3주차 Weekly Mission 진행 & 완성

 

 

주간 회고

이번주부터 멘토님과 코드 리뷰를 받으면서 개선해나가고 있는데 웬걸.. 고쳐가는거 너무 재밌어요!!!

지금까지 프로젝트를 하면서 대부분 팀원들끼리 해결하는 정도였고, 과거에 멘토님과의 소통이래봤자 조언 받는 정도라 직접적으로 코드 리뷰를 받는 기회가 없었습니다,, 그런데 이번 기회에 멘토님과 소통도 활발해지구 제 코드에 개선할 점을 알 수 있으니 성장이 많이 되는 느낌이더라구요😆😆😆 그리고 개선점을 더 명확히 기억하기 위해서 따로 블로그에 글을 남길 계획입니다🔥 새롭게 불타오르는 느낌!!!

그런데 또 그 점 때문에 이번주는 꽤 힘들었던 것 같아요.. ㅋㅋㅋ 원래도 일주일 계획이 꽉꽉 찼는데 처음 받는 코드 리뷰에 흥분해서 이틀 정도는 온전히 코드 refactoring에 정신을 뺏겼어요 ㅋㅋㅋㅋ 그래서 원래 계획했던 만큼의 공부량에 많이 미치지 못했던..😂

 

그래도 이번주엔 많은 점을 배워서 되게 뜻깊은 주였습니다! 예전에도 js 기초까지 배우고 끝났는데 이제부터 서버 통신에 대한 (아직은 이론이지만) 부분을 알아가니 개발에 한 단계 정진한 것 같습니다💪💪

그래도 다음주는 좀 더 유연하게,, 할려구요 ㅎㅎ..  하나에만 몰두하는 것도 좋지만 일정에 차질이 생기지 않도록 하는 것이 더 중요한 것 같아요😅