[WEB] Frontend

프론트 시작

1. MyWEB 폴더에서 myfront 폴더 생성
2. VSCode에서 myfront 오픈
3. HTML, CSS, JS 폴더 생성
4. Live Server사용을 위해

내장 서버사용을 위해 익스텐션 인스톨
서버실행포트 번호 확인
셋팅은 이렇게

css 프로퍼티 순서 정하기

---

JQuery

JS 버전 콜백 함수

$(document).ready(function(){
  $("p").click(function(){ // 클릭이벤트 발생
    $(this).hide(); // this : 이벤트가 발생된 객체
  });
});
p 여러개라면 클릭된 콜백펑션을 봤을 때 p 태그가 this가 된다.

ECMA 버전 콜백 함수 (우리가 써야하는 것)

$('p').click((e) => {
	this // 여기는 window 객체를 말한다
	e.target // ecma에서는 e.target이 이벤트 발생된 객체가 된다.
})

http 프로토콜의 구성방식
get /post 방식의 차이점
rest풀에 대해 말해보시오

렌더링엔진

사파리 자바스크립트 엔진, 크롬에서 쓰는 자바스크립트 엔진 등등 다 다를 수 있다.
이미지출처

렌더링의 종류(브라우저 엔진의 종류)

위키
렌더링엔진이 HTML 문서를 위에서 아래로 왼쪽 오른쪽으로 읽어 가면서 읽은 내용을 트리 자료구조 형태로 렌더링 엔진이 기억을 시키게된다.
그러면서 HTML 문서의 내용을 DOM(객체형태)로 모델링 한다. 자바스크립트 해석기는 이걸 모두 객체형태로 바라보게된다.-> 돔트리
돔트리를 완성하기까지 기다리게되는데 기다리는 역할을 첫줄 JQuery ($(()=>{}) 가 하게된다. 돔트리가 완성이 됐을 때 가장 마지막으로 트리 구조화되는 부분은 html 의...나같은 경우는 div class=pagegroup? 메이비...$.ajax는 비동기 요청이라 요청을 보내놓고 자바스크립트해석기는 다른 JS 코드를 계속 읽으러 간다.
돔처리가 안된걸 click등 함수처리를 하면 안된다.

따라서 돔트리가 완성되어있는 객체를 기준으로 함수 작성
JS코드를 만나면 JS엔진에게 일을 넘긴다.

CORS 에러

CORS 에러는 Back단에서 처리해줘야 한다.