식별자 명명규칙
식별자의 첫글자는 알파벳으로 시작해야된다 (대소)
허용되는것 _ , $는 허용
두번째부터는 숫자허용
spa 많이 물어봄 - > 자기들이 이걸로 개발할것이기 때문에
Angular , react , vue -> 프레임워크
html이 한개다 (페이지가 여러개라도) js파일도 한개일수도 , 여러개일수도 있다(웹팩으로 쪼갬)
css는 우선순위가 다르다 (css 파서 우선권문제)
angular -> css 스코프 주기가능
spa에서 css는 하나일 수 도있지만, 여러개로 나누는게 좋은것이다 (컴포넌트별로)
html을 땡겨오면 여러가지가 있다(css, 폰트, 스크립트) -> 모든리소스 한번에 다운받는다
->첫페이지 로딩이 느린 단점이있다
->네이티브 앱과 유사한 경험을 갖고 있다 (깜빡거리지 않는다)
웹은 원래 문서를 주고 받는 용도 였다
html을 바라볼때는 프론트엔드 개발자의 시선에서 바라본다
a태그에 href 속성에 걸어놓은게 주소창에 반영이 되어 화면이 전환된다(기본동작)
html이 새로 랜더링 된다.
ajax는 필요한 부분만 바꾼다 \- 화면 전환이 이뤄지지 않는다
퍼블리셔 - 웹페이지 개발자 - 웹 어플리케이션
왜 웹사이트는 가로로 안보고 세로로 보게했을까?
사람이 시선이 좌상단부터 시작 z자로 살펴보는 경향이 있다
css나 자바스크립트는 바로 지우진 않고, 캐쉬에 일부분 저장해둔다
-SEO 이슈가 발생한다(단점)
-서버사이드 랜더링을 해야 해결할 수 있음
-angular universial
모든 프로그램 아키텍쳐에는 은탄환이 없다
= 모든것을 만족시키는 혁신적인 방법은 없다
우리가 바닐라 스크립트로 라우팅을 만드는것은 힘들다 -바닐라로 하면 바보다
만들어진거나 잘쓰면 된다
웹페이지 vs 웹어플리케이션
단순히 주는 정보 : 웹페이지
무언가 데이터를 입력하고, 저장하고 등등 '일'을 하면 에플리케이션
웹페이지에선, 검색이슈가 생기면 치명타다
'삼성전자 ~~부' 에서 쓰는 어플리케이션은 검색이슈가 되면 문제다 (우리부서만 쓰는데)
->seo가 필요한 웹어플리케이션은 ssr (서버사이드랜더링)
웹 어플리케이션에서 라우팅은 화면 이동을 뜻한다
seo이슈 말고, history문제도 발생한다
브라우저가 화면 전환하는 경우 3가지
-
브라우저의 주소창에 URL을 입력하면 해당 페이지로 이동한다.
-
웹페이지의 링크를 클릭하면 해당 페이지로 이동한다.
-
브라우저의 뒤로가기 또는 앞으로가기 버튼을 클릭하면 사용자가 방문한 웹페이지의 기록(history)의 뒤 또는 앞으로 이동한다.
앵귤러 3.4 PJAX 방식지원
SEO방식에서 많이 링크된 순, strong등은 강하게 처리
-> seo를 고려해서 페이지를 만들면 좋다
**DOMcontentLoaded**
->돔이 이루어진다음에 뭔가 해야될때
load -> 모든리소스가 로드되면
전통적 링크 방식
href="/" 리로드, 이 페이지가 온 곳
검색엔진에 많이 검색되기 위해 고유한 url을 갖고 있다
-구현하기 편하다
-seo 문제없음
-history문제없음
-화면 깜박거림
-자원리소스 많이 필요
-불필요한것까지 페인팅
AJAX 방식
-깜빡임없다
-자원리소스 많이필요x
-불필요한것은 페인팅하지 않는다
-구현하기 어렵다(전통적 링크방식에 비해)
-히스토리 x
-seo x
-리로드하면 홈으로 간다 (재요청하면 계속 홈으로감)
Hash 방식
uri에서, 해쉬가 바뀌어도 '페이지'내에서만 이동하기 때문에 인위적인 주소를 만든다
(routes[hash] || routes.otherwise)(); 앞에가 있으면 바로 출력(뒤보지도 않음) 없으면, 뒤 바로호출
-리로드 해도 현재 페이지가 다시 로딩된다
-seo 문제 x
-히스토리도 문제x
-url에 #이 들어가야된다 (보기 안좋다)
-hashchange 해쉬가 바뀔때마다
PJAX 방식
정확히는 pushstate 방식
최신브라우저에서만 동작한다
생긴방식이 restapi랑 비슷해서 리로드시 restapi처럼 동작한다 - 서버에서 대응을 해준다(백엔드의 협력이 필요하다) - 배보다 배꼽이 더 커진다 - 페이지가 100개면 100개의 대응이 필요
구분History 관리SEO 대응사용자 경험서버 렌더링구현 난이도IE 대응
| 전통적 링크 방식 | ◯ | ◯ | ✗ | ◯ | 간단 | |
| AJAX 방식 | ✗ | ✗ | ◯ | ✗ | 보통 | 7이상 |
| Hash 방식 | ◯ | ✗ | ◯ | ✗ | 보통 | 8이상 |
| PJAX 방식 | ◯ | ◯ | ◯ | △ | 복잡 | 10이상 |
어떨때, 서버에 요청이 가는가?를 알아야한다
ㅡㅡㅡㅡㅡㅡㅡ클로저
클로저를 왜하지?
'상태'를 안전하게 유지하기 위해서
안전하게 라는 말은 ? 캡슐화 / 정보은닉
상태를 유지하는 가장쉬운 방법은? 변수
그중 전역변수
전역변수를 쓰면 좋잖아?
단점을 가짐
개선하는 방법, 즉시실행함수, 객체스페이스, 모듈
var arr = []; for (var i = 0; i < 5; i++) { arr[i] = function () { return i; }; } for (var j = 0; j < arr.length; j++) { console.log(arr[j]()); }
var로 쓰면 전역변수가 된다 최종값 밖에 참조 못한다
const arr = []; for (let i = 0; i < 3; i++) { arr[i] = () => i; } for (let i = 0; i < arr.length; i++) { console.log(arr[i]()); // 0 1 2 }
let을 쓰면 계속 참조 할 수 있다
let이 들어오면 for문의 {}를 스코프로 잡아서, 상위스코프를 {}내부로 잡는다 - 한번에 돌때마다 함수 생성
각각 다른 독립적인 렉시컬 환경을 생성한다
-함수 정의가 없다 = 렉시컬 환경을 만드는데, 아무도 참조를 하지 않아서 순회가 끝나면 가비지컬렉션 대상
for문이 돌기전에 하나(실행 환경을) 만든다
순회가 돌기시작하면 하나씩 만든다 (스냅샷찍듯이)
for문안에 함수정의가 없으면
함수가 생기면 - 자신의 상위스코프를 만든다(내부 슬롯 invirment에 저장)
for문을 남발하면 곤란하다, for문에서 함수를 정의하는것은 더곤란하다 100개만들면, 렉시컬환경이 100개생긴다
for in
객체에서 키
const O = { a: 1, b:2}
for const key in O
console.log(O[key]);
for of (뒤에오는것 이터러블)
for of를 써야되는상황에서 for in 가능
const arr = [1,2,3,4,5]
for(const item of arr){
console.log(item); // 1,2,3,4,5
}
const item이라는 선언문이 함수가 여러번돌때, 지역변수로 선언되듯이 '이 스코프 내부에서 계속 선언이 되는것'
순회가능한 객체,이터러블을 만든 경우에 사용한다 (for of)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡclass
construcor 없이 생성해도 빈객체는 생긴다
클래스필드에 추가하길 원하면
클래스필드 밖에서 프로퍼티를 추가할 수 있나? 있다.
초기화 할려면 컨트스럭터 안으로 들어가야한다
클래스{}에는 메소드가 들어갈 수 있다
console.log(name) = 안된다
컨스트럭터의 this는 생성될 객체를 가리키고, 자동으로 리턴 this
name이라는 프로퍼티는 window부터 갖고있어서 안쓰는게 좋다
화살표함수의 this는 클래스가 만드는 인스턴스를 가리킨다
상속 ( 부모가 this를 만들어서 자식한테 상속)
이벤트위임
li가 동적으로 생성된다면? li가 100개라면?
window에서 시작해서 event target까지 내려왔다가 다시 올라간다 캡처링페이즈, 버블링페이즈
이벤트를 다는방법 3가지
html에 직접 onclick 어트리뷰트
li.onclick = fucntuon (){} -무조건 버블링만
li.addevnetlistener - ('onclick', 함수, 디폴트 버블링) -캡처링도 가능
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ아코디언 ui의 정적메소드 merge config
제일먼저 호출(외부에서 밀어넣어준것 )
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 추가적
html 컬렉션과 -라이브
nodelist -논라이브 (배열이 갖고있는듯한 메소드가 있음)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ배열 고차함수의 콜백
'함수 정의를 전달하고', 함수 정의를 전달받은 함수, 또는 브라우저가 호출한다 ?
함수가 함수를 전달받는다는 의미는 함수를 호출하겠다는 의미
함수가 함수를 받아서 함수를 호출하는 이유가 뭐야? 여러가지일을 함수에 담아놔서
하나로 정할 수 있음