개발/Web Front-End (17) 썸네일형 리스트형 클래스 분리 전 공부 사항 이번 미션에서 필요할 것 같은 부분만 정리 클래스 생성시 반드시 'new'를 붙여 생성합니다. 클래스는 파스칼케이스 (PascalCase) constructor는 생성 및 초기화를 할 수 있습니다. 덧붙여 constructor 안에선 return문 써선 안됩니다. 여기서 static # 같은 글자를 baseball 미션 피어리뷰하면서 종종보고, 심지어 #은 이번 lotto미션에 등장하는데, 이것이 무엇이냐면, static은 정적메소드 즉 new 없이 사용 가능합니다. #은 그 유명한 private. 한줄씩으로 얘기하자면 정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 '전체’에 필요한 기능을 만들 때 사용. private는 함수도 클래스 내부에서만 사용할거면 사용. 외부에서도 호출할거면 public. .. URL과 URI URL은 URI의 하위 집합이다. URI는 특정 리소스를 식별하는 통합 식별자로, 논리적 물리적 리소스를 구별하는 고유 문자열 시퀀스이다. URL은 URI의 서브 셋 으로, 특정 리소스의 주소를 가리킨다. 즉 URI는 식별하고 URL은 위치를 가리킨다. 그림 참고 : 1학기 과목 정리 - 1편 - https://jiho1996.tistory.com/m/98 예시를 가져왔다. http://torang.co.kr/user/107 이는 유저들 중에서 107번 즉 /user 까지는 주소를 가리키는 URL이자 URI 107은 유저들 중 107번째 유저를 식별하고 있기에 URI이다. 다른예시 하나를 들어본다. http://torang.co.kr/index 이는 torang.co.kr의 index파일을 가리킨다. 하.. SSR vs CSR , SEO문제 해결 이번 포스팅은 SSR과 CSR, 그리고 이를 통해 SEO문제를 어떻게 해결하는지 정리하고자 한다. 먼저 SSR과 CSR. 간단하게 말하면 HTML파일을 어디서 받아오는가의 차이 이다. SSR은 서버 사이드 렌더링 즉 이름에서도 알 수 있듯이 HTML 렌더링 위치가 서버. CSR은 클라이언트 사이드 렌더링 즉 클라이언트 쪽에서 HTML 렌더링이 된다. * 여기서 렌더링의 의미는 조금 얕게 보자. 원래라면 HTML CSS JS파일을 가져와서 파싱하고 paint하는 작업이라면 여기서는 HTML 내용이 있는 채로 주고 있는 것인가? 로 해석하자. 단계를 살펴보면 1 SSR 서버가 브라우저의 요청에, 렌더링된 HTML을 응답한다 -> 브라우저는 이 렌더링된 HTML을 viewable하게 만든다 동시에 JS 파일 .. [클린코드 자바스크립트] 배열 및 객체 shorthand property const person = { getFullName : funtion(){...} } const person ={ getFullName (){...} } 위의 getFullName프로퍼티나 아래 getFullName프로퍼티나 같다. 즉 shorthand property를 쓰고 있음을 인지하기 let result = score >= 50 ? "pass" : "fail"; 조건 ? true일때 피연산자 : false일때 피연산자 좌항프로퍼티?.우항프로퍼티 좌항프로퍼티가 falsy값(null undefined 외)이면 우항프로퍼티 참조 null undefined시 우항 프로퍼티 참조하지 않음. 좌항 ?? 우항 좌항이 null 또는 undefined시 우항 반환. let res.. Executive Context 자바스크립트에서 실행 컨텍스트는 세가지로 나뉜다. 1. global 2. functional 3. eval global execution context JS코드 실행시에 생성되며 무조건 하나만 갖는다. functional execution context는 함수 호출을 할때마다 스택에 쌓이며, 여러개 갖을 수 있다. eval은 나오는 경우가 드물고, 사용해본 적 없기에 후에 다루겠습니다. 실행 컨텍스트는 후입 선출 구조로 스택에 쌓입니다. 스크립트 생명 주기 동안 모든 실행 스택을 저장하기 위함입니다. 자바스크립트 엔진은 두가지 단계로 실행컨텍스트를 만듭니다. 이는 전에 이야기한 호이스팅과 관련이있습니다. 1. Creation 단계 2. Execution 단계 1. Creation 단계에서는 다음의 세 과.. 이벤트 버블링 이벤트 버블링 기포가 밑에서 부터 위에서 가듯, 이벤트가 발생한 요소부터 최상단 요소 (보통 document객체 몇몇은 window객체 까지도) 까지 전달되는 동작을 말합니다. 거의 모든 이벤트가 버블링 되며, focus() 등 몇몇 이벤트는 버블링 되지 않습니다. 이벤트 버블링시, event.currentTarget(this) 는 핸들러가 발생한곳( 즉 이벤트를 넣은태그)이 감지됨. event.target은 실제 클릭한 태그가 감지됨. event.stopPropagation으로 버블링 중단가능하다 이를 어떤 태그에 적으면 그 태그 부모들은 더이상 이벤트를 전달 받지 못한다. 허나, onclick에 이 핸들러를 적으면 onclick에 대해서만 중단하고 그 외 keypress 등 다른 핸들러가 겹쳐있을 경.. 브라우저 렌더링 프로세스 - 1 브라우저 렌더링 요소 에는 다음과 같은 7가지 과정이 있다. 하나하나 먼저 간략 하게 살펴보자. 1. 사용자 인터페이스 : 웹으로 이 글을 보고 있다면 모두가 확인할 수 있을 것이다. 탭 창, 주소 창, 즐겨찾기 창, 닫기, 축소, 확대 등 요청한 페이지 외에 우리가 확인할 수 있는 브라우저의 부분들이다. 2. 브라우저 엔진 : 렌더링 엔진에 동작을 요청하는 등 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어합니다. 3. 자료 저장소 : 쿠키 캐시와 같은 데이터를 로컬에 저장할 공간. 3. 렌더링 엔진 : URI를 통해 사용자의 요청을 받습니다. 받은 요청을 통신, 자바스크립트 해석기, ui백엔드에게 각각 역할에 맞는 동작을 요청하고 HTML CSS Javascript를 파싱한 결과를 렌더링 합니다... mvc 도전기 Model은 Controller와 View에 의존하지 않아야 한다. (Model 내부에 Controller와 View에 관련된 코드가 있으면 안된다. View는 Model에만 의존해야 하고, Controller에는 의존해선 안된다. (View 내부에 Model 코드만 있을 수 있고, Controller 코드가 있으면 안된다. View가 Model로 부터 데이터를 받을 때는, 사용자마다 다르게 보여주어야 하는 데이터에 대해서만 받아야한다. Controller는 Model과 View에 의존해도 되다. (Controller 내부에는 Model과 View의 코드가 있을 수 있다. View가 Model로 부터 데이터를 받을 때, 반드시 Controller에서 받아야 한다. 출처 테코톡 영상 이전 1 2 3 다음
