본문 바로가기

web6

MPA와 SPA 1. MPA, Multiple Page ApplicationMPA, Multiple Page Application은 말 그대로 여러 개의 페이지로 구성된 애플리케이션이다.MPA라는 개념은 SPA라는 개념이 등장하고 나서,이 둘을 구분 짓기 위해 생겨난 개념으로 SPA 등장 전에 만들어졌던 대부분의 웹 사이트들은 MPA 방식으로 만들어졌다. 우리가 자주 사용하는 Naver도 SPA 등장 전에 만들어진 웹 사이트로MPA, Multiple Page Application에 가깝다고 할 수 있다.기본적으로 MPA 방식으로 만들어진 웹 사이트는 아래 이미지와 처럼 동작한다.클라이언트 (사용자) 측에서 서버에게 HTML 파일을 요청, 서버는 HTML 파일을 응답으로 전송한다.그리고 이를 전송받은 클라이언트 측에서 해.. 2024. 2. 26.
[JavaScript] 배열 Array 목차 0. 개요 1. 배열 Array ① 배열의 정의 ② 배열 요소 접근 2. 배열 요소 추가 및 삭제 ① 배열 요소 추가 ② 배열 요소 삭제 3. Reference 0. 개요 빨간색, 파란색, 초록색 위의 세 가지 색상을 'Color'라는 변수에 저장하려고 한다. 기본적으로 변수에는 한 개의 값만 저장할 수 있기 때문에, 객체를 활용해서 세 가지 색상 요소를 'Color' 변수에 저장해야한다. let Color = { "Color1": "Red", "Color2": "Blue", "Color3": "Green" }; 변수 'Color'에 "빨간색", "파란색", "초록색" 세 가지 색상이 객체의 형태로 할당된 것을 확인했으니 이제 다른 색상을 하나 더 추가해 보자. let Color = { "Color.. 2023. 10. 29.
[JavaScript] this 목차 1. this란? ① this ② this.(Key)와 '객체 변수'.(Key) 비교 2. JavaScript에서의 this 3. Reference 1. this란? 이전 게시글에서 메서드를 추가하고 사용하는 것을 다뤘지만 객체 메서드가 객체 Property를 참조할 수 있게 하는 방법에 대해서는 다루지 않았었다. 그러므로 이번에 다룰 것은 메서드가 객체 Property를 참조하려고 할 때 쓸 수 있는 'this' 키워드에 관한 것이다. ① this //this 예제 const Person = { name: "John", Hello(){ console.log(`안녕하세요. 저는 ${this.name}입니다.`); } }; Person.Hello(); 객체 메서드에서 'this'는 아래와 같이 입력하.. 2023. 10. 25.
[JavaScript] 객체 (Object) 1. 객체 ① 객체 생성 방법 (1). 객체 생성자 (2). 객체 리터럴 ② Property 2. 객체 Property 접근법 ① 점 표기법 ② 대괄호 표기법 3. 메서드 Method ① 메서드 생성 방법 (1). 외부 함수를 객체 메서드로 할당하는 방법 (2). 객체 리터럴 시, 메서드를 같이 생성하는 방법 4. Reference 1. 객체 이번에 정리한 것은 JavaScript의 비 원시 타입의 자료형인 객체에 대한 것이다. 기본적으로 변수에는 값을 하나만 저장할 수 있다. 변수에 원시 타입인 number, String, boolean 값 중 하나를 할당했다면 이후에 해당 변수에 새로운 값을 재할당하기 전까지 한 개, 한 종류의 값만 저장된 상태이다. let Sample = 10; console.lo.. 2023. 9. 20.
[CSS] 박스 모델 (Box Model) 1. 박스 모델의 정의 (Box Model) 2. 박스모델 영역 별 속성 ① content 속성 ② padding 속성 ③ border 속성 ④ margin 속성 ⑤ box-sizing 속성 3. 마치며 1. 박스 모델의 정의 (Box Model) Box란 HTML 문서가 랜더링될 때 각 요소가 사각형 형태로 차지하고 있는 영역을 말한다. 위의 소스 코드를 복사해서, html 문서로 만들고 이를 웹 브라우저에서 열어보자. 이제 여기서 '개발자 도구'를 한 번 열어서 요소를 클릭해보자. 그러면 아래와 같은 형태로 해당 요소에 하이라이트가 들어온 것을 확인할 수 있다. 태그는 블록 레벨 요소를 만드는 블록 태그이기 때문에 웹 브라우저의 한 영역을 사격형의 형태로 전부 차지하고 있다. 여기서 HTML 요소가 .. 2023. 4. 5.
[HTML] 목록 만들기 (<ul>, <ol>, <li>) 1. 목록 태그 (, , ) ① 목록의 정의 ② ③ (1). type 속성 (2). reversed 속성 (3). start 속성 ④ 2. 마치며 1. 목록 태그 (, , ) ① 목록의 정의 목록이란 "연관 있는 항목들을 순서대로 나열한 것"을 말한다. HTML에서도 목록, List를 웹 페이지에 출력하고 싶은 경우 요소를 통해서 표현하고 싶은 콘텐츠, 텍스트를 목록의 형태로 표시할 수 있다. 그리고 이러한 목록도 순서 없이 표시하거나 혹은 순서대로 표시할 수도 있다. 순서가 없는 목록(Unordered List)은 , 순서가 있는 목록(Ordered List)은 요소를 통해서 표현할 수 있다. 아래는 , 요소를 통해서 목록을 표시한 예시이다. HTML 삽입 미리보기할 수 없는 소스 , , 태그 모두 블.. 2023. 4. 1.

티스토리툴바