오늘 목표
- 수업 전 7시 기상 후 운동(O)
- 수업 내용 모르는 거 및 공부내용 정리(O)
- 프로젝트 진행 해보기(O)
배운내용
현업 개발자분의 말씀!..
위에 FE 트렌드 사이트는 가끔식 보면서 좋은 기술들과 요즘은 어떤 기술을 선호하는지 알 수 있는 좋은 사이트들 같다...
리액트
리액트의 동작 방식
어떤 데이터가 변하면 기존의 뷰를 날리고 새롭게 생성
Render()함수를 통해 컴포넌트가 어떻게 생겻는지 정의.
렌더링작업 끝나면 HTML 마크업 만들고 DOM에 주입 후 사용자화면에 나타나도록 동작한다. Render()함수가 새로운 데이터를 지닌 뷰와 이전 뷰를 비교하여 업데이트함.
DOM
Dom 자체는 빠른데 레이아웃 구성 및 CSS 연산 과정이 오래걸리는 것.
Dom의 성능저하 해결하기 위해 Virtual Dom 등장
1.데이터를 업데이트하면 전체UI를 Virtual Dom에 리렌더링
2.이전 virtualDom과 현재 내용과 비교
3.바뀐 부분만 실제 Dom에 적용
리액트의 장점
지속적으로 데이터가 변화하는 대규모 어플리케이션에 구축하기 적합
다른사람들이 만들어 둔 라이브러리 가져와 취향대로 사용가능.
프레임워크
정해진 규칙 안에서 코드를 작성해야함
프로그램의 흐름을 프레임워크가 제어(주도권이 프레임워크에게 있음)
라이브러리
특정 기능을 수행하는 도구 (원하는 부분에 직접 호출사용)
프로그램의 흐름을 개발자가 제어(주도권이 개발자에게 있음)
vscode 기본(?) 플러그인
Eslint
reactjs code snippets
charalampos karypidis
prettier - code formatter
korean languege
pritter
format on save 체크
리액트 리액트 기본구조 생성
파일 생성후 rsc
DOM이란??
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 JavaScript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다.
document
document는 Dom 트리의 최상위 객체로 브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다.
document 객체의 역할
- 메소드로 Dom 객체 검색
- 메소드로 새로운 Dom 객체 생성
- 메소드로 HTML 문서 제어
HTML 요소 접근
- getElementById() : id 명으로 첫번째 객체 리턴
- getElementsByTagName() : 특정 태그를 가진 모든 태그 리턴
- getElementByClassName() : 특정 클래스명을 가진 모든 태그 리턴
- querySelector() : 문서 내 선택된 첫번쨰 요소 리턴
- querySelectorAll() : 문서 내 선택된 모든 요소 리턴
- parentElement() : 부모 노드 탐색
- firstChild() : 직계 자식 중 첫번째 노드
- lastChild() : 직계 자식 중 마지막 노드
element
Element 객체는 html파일에 작성한 열린태그부터 닫힌 태그까지 전체 내용을 값으로 가지고 있다. 위에 보여준 HTML 요소 접근을 활용해 우리는 Dom에서 Element를 얻을 수 있다.
Dom 조작하기
InnerHTML
InnerHtml을 이용하면 요소의 내용을 바꿀 수 있습니다.
여기서 상위 태그의 내용을 변경하면 자식 요소의 내용도 다 바뀐다는 점을
알아둬야 합니다.
style
접근한 요소의 style.backgroundColor = "black"
이런 식으로 접근해 요소의 style을 변경 가능함.
createElement 와 appendChild
const li = document.createElement('li');
const container = document.querySelector('.container');
container.appendChild(li);위에 코드는 createElement로 li태그를 생성하고 container라는 id를 가지고 있는 요소를 불러와 appendChild를 이용해 자식 요소로 추가를 해주는 코드입니다.
Attribute
- getAttribute(attribute) : attribute의 값을 불러옴.
- setAttribute(attribute,value) : attribute의 값을 설정
- .attributes : 속성들을 모아서 배열로 반환
classList
클래스명을 조정할 수 있다.
classList 메서드
- add('a') : a클래스 추가
- remove('a') : a클래스 삭제
- contains('a') : a클래스를 가지고 있는지 확인 bool값
- replace('a','b') : a클래스가 있으면 b로 바꾸기
- toggle('a') : a클래스가 있으면 삭제 없으면 추가
DOMContentLoaded 와 onload
아직 문서가 로드되지 않은 시점에 이벤트 혹은 요소를 변경시키면 오류가 난다 그런 점을 해결하기 위해서 DOMContentLoaded 와 onload를 사용한다. 이 두개는 비슷한 경우에 사용하지만 조금은 다르다 DOMContentLoaded은 DOM 트리를 완성하는 즉시 실행시키고
onload는 문서의 모든 콘텐츠가 로드 되었을 때 실행시킨다.
Scroll
ScrollTO()
window.scrollTo(x,y) :x,y값으로 이동
ScrollBy()
window.scrollBy(x,y) : 현재 위치에서 x,y값 만큼 이동
ScrollIntoView()
document.queryselector('box').scrollIntoView({
behavior: "smooth"
block: "center"
})box 요소를 찾아 부드럽게 박스의 중앙을 향해 이동시킴
behavior: auto(기본값),smooth
block:top(기본값),center,bottom
