서론
8주차 - Reacct (5/6 - 5/13)
이번 주 회고록을 써보면서 느끼는 것은 개선할 점을 제대로 이행하지 못한 느낌이 들었습니다.
여러모로 반성하는 한 주가 되었습니다.
1. 내용정리
[JavaScript]
DOM(Document Object Model)
- HTMLCollection과 NodeList는 DOM에서 여러 노드를 다룰 때 반환되는 유사 배열 객체 브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료 구조인 DOM을 생성
- 노드(node) : HTML 요소의 어트리뷰트는 어트리뷰트 노드, 콘텐츠 요소는 텍스트 노드로 변환(객체 안의 계층)
- HTML에서
<script>태그는 JavaScript 코드를 실행하거나 외부 JavaScript 파일을 로드하기 위해 사용 - 노드 객체들로 구성 된 트리 자료 구조를 DOM이라 함
- 변수명에 $붙이는건 아무 의미없고 DOM 요소임을 명확히 구분하기 위함
- 노드 이해
1, html의 브라우저 엔진이 태그를 읽음 -> 태그는 각 객체
2, 각 객체마다 계층이 있는데 그게 노드
3, 요소노드와 텍스트노드
4, 그 중 하나 쿼리셀렉터 (한 개만 가져옴)
노드 취득 (get element node)
- document.querySelector : area(첫 번째 노드), .area p(p태그 첫 번째), .noElem(null)(getElementById으로 간단하게 사용가능)
- document.querySelectorAll("ul > li") : ul태그의 자손 li 태그들을 모두 Nodelist로 반환
- getElementsByTagName와 getElementsByClassName는 HTML컬렉션
노드 탐색
- 자식 노드 탐색: document.getElementById("elementId | string"), children, firstElementChild lastElementChild
- 부모 노드 탐색: .parentNode.parentNode.parentElement // HTML (부모 노드 확인하고 반환)
- 형재 노드 탐색: 노드 previousSibling, nextSibling 요소 firstElementChild previousElementSibling
innerHTML
- textContent프로퍼티는 HTML마크업을 무시하고 텍스트만 반환하지만 innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열을 그대로 반환
- 태그 엘리먼트의 값을 읽거나, 변경할 때 innerHTML속성을 사용
- innerHTML += "값추가", innerHTML = "
attributes
- getAttribute/setAttribute 메서드를 사용하면 attributes 프로퍼티를 통하지 않고 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있어 편리
- hasAttribute(attributeName) 메서드를 사용하면 특정 HTML 어트리뷰트가 존재하는지 확인 가능
- removeAttribute(attributeName) 메서드를 사용하면 특정 HTML 어트리뷰 트를 삭제 가능
style
- HTMLElement.prototype.style : getter, setter가 모두 존재하는 프로퍼티로 요소 노드의 인라인 스타일을 취득하거나 변경 가능
- class 어트리뷰트에 대응하는 DOM 프로퍼티는 class가 아니라 className과 classList이다.
화살표 함수
- this를 가지지 않음
- new를 함께 호출할 수 없음
- super를 가지지 않음
- arguments를 가지지 않음
- 나머지 매개변수 (...)
[리액트]
리액트 기초 및 환경세팅
https://nodejs.org/ko node.js 설치
리액트는 사용자 정의 태그를 만드는 기술
- 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 도구와 구조를 제공하는 소프트웨어 프레임워크
- 컴포넌트 (Component) : 특정 기능을 수행하는 독립적인 단위의 요소 ( UI를 구성하는 버튼, 입력 창 등과 같은)
- 렌더링 (Rendering) : 컴포넌트가 변경된 데이터를 기반으로 새롭게 그려지는 것을 의미
- state : 컴포넌트 내부에서 바뀔 수 있는 값 stats는 컴포넌트 내부에서 설정 및 수정 가능
- props : 외부에서 전달되어 읽기만 가능
주요 npm 스크립트
- npx create-react-app . : 리액트 현재 디렉토리에 설치
- npx create-next-app@latest 폴더명 : 디렉토리에 생성
- npm run dev : 개발서버 / 개발 모드로 서버 실행, 파일 변경 감지
- npm run build : 빌드 / 프로덕션 배포를 위한 최적화된 빌드 생성
- npm run start : 시작 /빌드된 애플리케이션 실행 (배포 환경)
- npm run lint : 린트 /ESLint로 코드 품질 검사
2. 마무리
> 아쉬웠던 점
수업시간에 강의가 도통 눈에 들어오지 않았고, 한 개라도 더 배우려고 했으면 좋았을 것 같습니다.
주말에도 책을 접었다 폈다를 반복했었습니다.
> 개선할 점
지난 주와 같이 심플하게 생각하고, 운동량을 늘릴 생각입니다.
> 다음주 계획
프런트엔드 과정 프로젝트도 예정되어 있고, 코딩테스트 & 자격증 시험이 곧 있을 예정입니다.
05/31 : SQLD 자격증 시험
프로젝트와 자격증에 신경 쓸 예정입니다.
김지환