SSAFY 프론트엔드 과목평가를 준비중인 여러분들을 위한 내용 정리입니다. ૮꒰˶ฅ́ ˘ฅ̀˶꒱ა
1. HTML
HTML 주요 태그
- HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
- 주요 태그에는
<head>, <body>, <h1>~<h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <div>, <span>등이 있습니다.
- 각 태그는 특정한 속성을 가질 수 있습니다. 예를 들면, 태그의 href 속성은 링크의 주소를 지정합니다.
Web Storage
Web Storage는 웹 브라우저에서 키-값 쌍을 저장하는 클라이언트 사이드의 저장소 기술입니다.Web Storage는 localStorage와 sessionStorage으로 나뉩니다
localStorage
- 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 영구적으로 저장됩니다.
- 도메인과 프로토콜에 따라 고유하며, 다른 도메인에서는 접근할 수 없습니다.
- 대부분의 브라우저에서 최대 5MB~10MB의 저장 공간을 제공합니다.
sessionStorage
- 데이터는 페이지 세션이 유지되는 동안만 저장됩니다. 즉, 브라우저나 탭을 닫으면 데이터가 삭제됩니다.
- 도메인과 프로토콜에 따라 고유하며, 다른 도메인에서는 접근할 수 없습니다.
- localStorage와 비슷한 저장 공간을 제공합니다.
Web Storage의 주요 메서드와 속성:
- setItem(key, value): 키-값 쌍을 저장소에 추가합니다.
- getItem(key): 지정된 키의 값을 반환합니다.
- removeItem(key): 지정된 키의 항목을 삭제합니다.
- clear(): 저장소의 모든 항목을 삭제합니다.
- length: 저장소에 있는 항목의 수를 반환합니다.
- key(n): n번째 항목의 키를 반환합니다.
Web Storage의 장점:
- 쿠키보다 더 큰 저장 공간을 제공합니다.
- 서버로 전송되지 않기 때문에 네트워크 트래픽에 부담을 주지 않습니다.
- API가 간단하고 사용하기 쉽습니다.
Web Storage의 단점 및 주의점:
- HTTP 쿠키와 달리 서버 측에서 직접 접근할 수 없습니다.
- 보안 데이터나 민감한 정보를 저장하기에는 적합하지 않습니다. (데이터가 암호화되지 않고 평문으로 저장됩니다.)
- 저장 공간의 크기가 제한적입니다.
- 다양한 브라우저에서 동작 방식이나 저장 용량에 약간의 차이가 있을 수 있습니다.
2. CSS
CSS 선택자
CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다.
기본 선택자
태그 선택자: 태그 이름을 사용하여 해당 태그의 모든 요소를 선택합니다.
p {
color: red;
}클래스 선택자: .classname 형식으로 클래스 이름을 사용하여 해당 클래스를 가진 요소를 선택합니다.
.highlight {
background-color: yellow;
}아이디 선택자: #idname 형식으로 ID 이름을 사용하여 해당 ID를 가진 요소를 선택합니다.
#header {
background-color: blue;
}조합 선택자
자손 선택자: 두 선택자 사이에 공백을 두어 한 요소의 자손 요소를 선택합니다.
article p {
font-size: 16px;
}자식 선택자: > 기호를 사용하여 한 요소의 직계 자식 요소만을 선택합니다.
ul > li {
list-style-type: square;
}속성 선택자
- [attribute]: 특정 속성을 가진 요소를 선택합니다.
input[type="text"] { border: 1px solid gray; }
가상 클래스 선택자
- :hover, :active, :focus, :first-child, :last-child, :nth-child(n) 등을 사용하여 특정 상태나 위치의 요소를 선택합니다.
a:hover { text-decoration: underline; }
가상 요소 선택자
- ::before, ::after 등을 사용하여 요소의 특정 부분에 스타일을 적용합니다.
p::before { content: "Note: "; font-weight: bold; }
그룹 선택자
- 여러 선택자를 쉼표로 구분하여 동일한 스타일을 적용합니다.
h1, h2, h3 { font-family: Arial, sans-serif; }
레이아웃 관련 스타일의 이해
- box model :
margin, border, padding, content position: static, relative, absolute, fixed, stickydisplay: block, inline, inline-block, none, flex, gridflex: flex-direction, justify-content, align-items, flex-wrap 등
CSS 적용 방법
인라인 스타일 (Inline Style)
HTML 요소의 style 속성을 사용하여 직접 스타일을 적용합니다.
주로 개별 요소에 특정 스타일을 적용할 때 사용됩니다.
<p style="color: green;">This text is green.</p>내부 스타일시트 (Internal Stylesheet)
HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 정의합니다.
This is a red text.외부 스타일시트 (External Stylesheet)
CSS를 별도의 .css 파일에 작성하고, HTML 문서에서 태그를 사용하여 해당 파일을 참조합니다.
여러 HTML 문서에서 동일한 스타일시트를 재사용할 수 있습니다.
/* styles.css file */
p {
color: green;
}/* styles.css file */
p {
color: green;
}@import
CSS 파일 내에서 다른 CSS 파일을 가져오는 데 사용됩니다.
주로 여러 CSS 파일을 하나로 결합할 때 사용됩니다.
@import url('another-styles.css'); JavaScript를 통한 스타일 적용
JavaScript를 사용하여 동적으로 스타일을 변경하거나 적용할 수 있습니다.
document.getElementById("myElement").style.color = "purple"; CSS 적용의 우선순위
여러 출처에서 동일한 스타일 규칙이 적용될 경우, CSS의 "카스케이드" 규칙에 따라 우선순위가 결정됩니다.
CSS의 우선순위를 낮은 것부터 나열하면 다음과 같습니다:
기본 스타일 (브라우저 기본 스타일)
웹 브라우저에 내장된 기본 스타일입니다.
외부 스타일시트 또는 내부 스타일시트의 일반 선택자
예: *, div, p 등의 태그 선택자.
클래스, 속성, 가상 클래스 선택자
예: .classname, [type="text"], :hover 등.
ID 선택자
예: #idname.
인라인 스타일
HTML 요소의 style 속성에 직접 작성된 스타일.
<p style="color: green;">This text is green.</p>!important 선언
스타일 규칙에 붙은 !important 선언은 해당 규칙에 최고의 우선순위를 부여합니다.
추가적인 주의사항:
같은 우선순위를 가진 스타일 규칙이 여러 개 있을 경우, 코드 상에서 나중에 나오는 규칙이 우선 적용됩니다.
선택자의 구체성은 복합 선택자를 사용하여 높일 수 있습니다. 예를 들어, div p.classname은 .classname이나 p.classname보다 구체적입니다.
CSS 규칙의 우선순위와 구체성을 이해하고 올바르게 활용하면, 스타일 충돌을 최소화하고 원하는 스타일을 정확하게 적용할 수 있습니다.
부트스트랩 그리드
부트스트랩의 그리드 시스템은 웹 페이지의 레이아웃을 구성하기 위한 강력한 도구입니다. 그리드 시스템은 반응형 웹 디자인을 쉽게 구현할 수 있게 도와주며, 다양한 화면 크기에 맞게 콘텐츠를 자동으로 조절합니다.
컨테이너(Container)
그리드 시스템을 시작하기 전에, .container 또는 .container-fluid 클래스를 사용하여 컨테이너를 생성해야 합니다.
.container: 고정된 최대 너비를 가진 중앙 정렬 컨테이너
.container-fluid: 뷰포트의 전체 너비를 차지하는 컨테이너
로우(Rows)
그리드의 수평 행을 생성하기 위해 .row 클래스를 사용합니다.
로우는 여러 개의 열(columns)로 구성됩니다.
컬럼(Columns)
부트스트랩의 그리드 시스템은 기본적으로 12개의 컬럼으로 구성됩니다..col-* 클래스를 사용하여 원하는 수의 컬럼을 지정할 수 있습니다. (*는 1부터 12까지의 숫자)
예: .col-4는 12개의 컬럼 중 4개의 컬럼 너비를 차지합니다.
반응형 그리드
부트스트랩은 다양한 화면 크기에 대응하기 위한 반응형 그리드 클래스를 제공합니다.
xs (extra small): 모바일 장치
sm (small): 태블릿
md (medium): 데스크탑
lg (large): 큰 데스크탑
xl (extra large): 더 큰 데스크탑
예: .col-md-6는 중간 크기의 화면에서 12개의 컬럼 중 6개의 컬럼 너비를 차지합니다.
컬럼 순서 변경 및 오프셋
.order-* 클래스를 사용하여 컬럼의 순서를 변경할 수 있습니다..offset-* 클래스를 사용하여 컬럼 사이의 간격을 조절할 수 있습니다.
중첩 그리드
.row 내부에 다른 .row를 중첩하여 복잡한 레이아웃을 구성할 수 있습니다.
부트스트랩의 그리드 시스템은 위의 기본 개념을 바탕으로 다양한 레이아웃과 디자인을 구현할 수 있게 도와줍니다. 그리드 클래스를 조합하고 활용함으로써 반응형 웹 페이지를 효과적으로 디자인할 수 있습니다.
3. JavaScript
JS의 자료형
기본 자료형: string, number, boolean, undefined, null, symbol (ES6부터), bigint (ES11부터)
참조 자료형: object (배열, 함수, 날짜, 정규 표현식 등 포함)
내장 객체/메소드:
Array: 배열 관련 메소드 (push, pop, shift, unshift, splice, map, filter 등)
String: 문자열 처리 메소드 (charAt, substring, split, trim 등)
Math: 수학적 연산 (round, max, min, random 등)
Date: 날짜와 시간 관련 (getDate, getMonth, getFullYear 등)
Number, Boolean, Object 등도 다양한 메소드와 속성을 제공합니다.
자바스크립트의 엘리먼트 접근, 이벤트 핸들링
엘리먼트 접근:
document.getElementById('id'): ID를 사용하여 엘리먼트에 접근합니다.
document.getElementsByClassName('classname'): 클래스 이름을 사용하여 엘리먼트들에 접근합니다.
document.getElementsByTagName('tagname'): 태그 이름을 사용하여 엘리먼트들에 접근합니다.
document.querySelector('selector'): CSS 선택자를 사용하여 첫 번째 일치하는 엘리먼트에 접근합니다.
document.querySelectorAll('selector'): CSS 선택자를 사용하여 모든 일치하는 엘리먼트들에 접근합니다.
이벤트 핸들링:
element.addEventListener('event', function): 지정된 이벤트가 발생할 때 함수를 실행합니다.
예: btn.addEventListener('click', handleClickFunction); 버튼 클릭 시 handleClickFunction 실행.
JSON
JSON은 "JavaScript Object Notation"의 약자로, 데이터를 교환하는 데 사용되는 경량의 데이터 형식입니다. JSON은 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기도 쉽습니다. 원래 JavaScript에서 데이터 객체를 표현하기 위한 문법이었지만, 현재는 많은 프로그래밍 언어에서 지원되며, 특히 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환 형식으로 널리 사용됩니다.
기본 형식
JSON은 이름(키)과 값의 쌍으로 구성된 데이터 객체를 표현합니다.
각 이름은 쌍따옴표(")로 둘러싸여 있으며, 이름과 값은 콜론(:)으로 구분됩니다.
여러 개의 이름-값 쌍은 쉼표(,)로 구분됩니다.
데이터 타입
문자열(String): 쌍따옴표로 둘러싸인 유니코드 문자의 연속.
숫자(Number): 부동 소수점 형식.
부울(Boolean): true 또는 false.
배열(Array): 대괄호([])로 둘러싸인 값의 순서 있는 목록.
객체(Object): 중괄호({})로 둘러싸인 이름-값 쌍의 집합.
null: null 값.
예제
{
"name": "John Doe",
"age": 30,
"isStudent": false,
"courses": ["Math", "Science", "History"],
"address": {
"street": "123 Main St",
"city": "Anytown",
"zipcode": "12345"
}
}장점
- 텍스트 형식이므로 어떤 언어에서도 읽고 쓰기 쉽습니다.
- 구조가 단순하고 명확합니다.
- XML보다 가볍고 빠르게 파싱할 수 있습니다.
사용 사례
- 웹 API 응답: 많은 웹 서비스와 RESTful API는 JSON 형식으로 데이터를 반환합니다.
- 데이터 저장: NoSQL 데이터베이스(예: MongoDB)에서는 JSON과 유사한 형식으로 데이터를 저장합니다.
- 설정 파일: 많은 애플리케이션과 도구에서 JSON 형식의 설정 파일을 사용합니다.
- JSON은 그 구조와 표현력 때문에 웹 기반 애플리케이션에서 데이터 교환의 표준 형식으로 널리 받아들여졌습니다.
호이스팅(Hoisting)
호이스팅(Hoisting)은 JavaScript에서 실행 컨텍스트(특히 생성 단계) 내에서 변수 및 함수 선언이 코드의 상단으로 끌어올려지는 동작을 의미합니다. 이 동작은 변수와 함수의 선언만 끌어올려지며, 초기화나 할당은 호이스팅되지 않습니다.
호이스팅의 주요 특징 및 예제는 다음과 같습니다:
변수 호이스팅
var로 선언된 변수는 선언과 초기화가 한번에 이루어집니다. var로 선언된 변수는 undefined로 초기화가 이루어집니다.
console.log(a); // undefined
var a = 5;
console.log(a); // 5
위의 코드는 실제로 다음과 같이 동작합니다: var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5 함수 호이스팅
함수 선언식은 선언과 함께 정의도 상단으로 끌어올려집니다.
foo(); // "Hello"
function foo() {
console.log("Hello");
} 그러나 함수 표현식은 호이스팅되지 않습니다.
foo(); // TypeError: foo is not a function
var foo = function() {
console.log("Hello");
}; let, const와 호이스팅
let과 const로 선언된 변수도 호이스팅되지만, var와는 다르게 초기화 전에 접근하려고 하면 ReferenceError가 발생합니다. 이를 일시적 사각지대(Temporal Dead Zone, TDZ)라고 합니다.
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10; 중복 선언과 호이스팅
같은 스코프 내에서 동일한 이름의 변수나 함수를 여러 번 선언하면, 호이스팅 때문에 예기치 않은 결과가 발생할 수 있습니다.
호이스팅은 JavaScript의 독특한 특징 중 하나로, 이를 이해하고 있으면 버그를 예방하고 코드의 동작을 정확히 예측할 수 있습니다. 그러나 혼동을 피하기 위해 변수와 함수를 가능한 코드 상단에서 선언하는 것이 좋습니다.
이벤트 버블링과 캡처링
이벤트 버블링과 캡처링은 DOM에서 이벤트가 전파되는 두 가지 주요 단계를 나타냅니다. 이 두 단계를 이해하면 복잡한 이벤트 구조에서 이벤트를 효과적으로 처리할 수 있습니다.
이벤트 캡처링 (Capturing Phase)
이벤트 캡처링은 이벤트가 최상위 부모 요소에서 시작하여 실제로 이벤트가 발생한 요소까지 내려가는 단계입니다.
예를 들어, 페이지에 여러 중첩된 요소가 있고, 가장 안쪽 요소에서 클릭 이벤트가 발생했다면, 이벤트는 먼저 최상위 요소에서 시작하여 해당 클릭 이벤트가 발생한 요소까지 전파됩니다.
기본적으로 이벤트 핸들러는 이 단계에서 실행되지 않습니다.
이벤트 버블링 (Bubbling Phase)
이벤트 버블링은 이벤트가 실제로 발생한 요소에서 시작하여 최상위 부모 요소까지 올라가는 단계입니다.
위의 예를 계속 사용하면, 클릭 이벤트가 발생한 요소에서 시작하여 이벤트는 부모 요소로 전파되며, 최상위 요소까지 계속 올라갑니다.
기본적으로 이벤트 핸들러는 이 단계에서 실행됩니다.
이벤트 핸들러에서의 캡처링과 버블링
addEventListener 메서드를 사용하여 이벤트 핸들러를 추가할 때, 세 번째 매개변수로 true 또는 false 값을 전달하여 이벤트 캡처링 또는 버블링 단계에서 핸들러를 실행할지 결정할 수 있습니다.
true: 캡처링 단계에서 이벤트 핸들러 실행
false 또는 생략: 버블링 단계에서 이벤트 핸들러 실행
이벤트 전파 중지
이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출하면, 현재 이벤트의 추가 전파를 중지할 수 있습니다.event.stopImmediatePropagation() 메서드를 사용하면, 같은 요소에서 등록된 다른 이벤트 핸들러의 실행도 중지됩니다.
이벤트 버블링과 캡처링을 이해하면, 특정 요소에서 발생한 이벤트를 상위 또는 하위 요소에서 처리하는 등의 복잡한 이벤트 구조를 효과적으로 관리할 수 있습니다.
이벤트 전파를 막으면 성능이 올라갈까요?
이벤트 전파를 막는 것이 성능 향상에 도움이 되는 경우
- 많은 부모 요소나 상위 요소에 이벤트 핸들러가 등록되어 있고, 이벤트가 자주 발생하는 경우.
- 이벤트 핸들러 내에서 복잡한 연산이나 DOM 조작이 이루어지는 경우.
그러나 대부분의 일반적인 웹 애플리케이션에서는 이벤트 전파를 막는 것이 큰 성능 향상을 가져오지는 않습니다. 오히려, 이벤트 전파를 막음으로써 예상하지 못한 버그가 발생하는 경우도 많습니다. 따라서, 이벤트 전파를 막는 것은 성능 최적화의 목적보다는 특정 로직이나 기능을 구현하기 위한 목적으로 사용되어야 합니다.
HTTP 메서드
HTTP 메서드는 HTTP 프로토콜에서 요청 유형을 정의하는 방법입니다. 각 메서드는 특정한 종류의 작업을 나타냅니다. 주요 HTTP 메서드들과 그 특징은 다음과 같습니다:
GET
용도: 서버로부터 정보를 조회하기 위해 사용됩니다.
특징: 데이터를 URL의 쿼리 문자열에 포함하여 전송합니다. 본문(body)에 데이터를 포함하지 않습니다.
POST
용도: 서버로 데이터를 전송하기 위해 사용됩니다. 주로 리소스의 생성이나 데이터의 변경에 사용됩니다.
특징: 데이터를 HTTP 메시지의 본문(body)에 포함하여 전송합니다.
PUT
용도: 지정한 URI에 데이터를 저장하기 위해 사용됩니다. 이미 해당 URI에 데이터가 있으면 덮어씁니다.
특징: 전체 리소스를 수정하는 데 사용됩니다.
DELETE
용도: 지정한 URI의 리소스를 삭제하기 위해 사용됩니다.
특징: 리소스의 삭제에 사용됩니다.
Ajax
Ajax(Aynchronous JavaScript and XML)는 웹 페이지가 서버로부터 데이터를 비동기적으로 받아오는 기술입니다. 이를 통해 웹 페이지 전체를 새로고침하지 않고도 일부분만을 업데이트할 수 있습니다. Ajax는 웹 애플리케이션의 사용자 경험을 크게 향상시키는 중요한 기술 중 하나입니다.
Ajax 통신의 주요 특징
1. 비동기 통신
- 전체 페이지를 새로고침하지 않고도 서버와 데이터를 교환할 수 있습니다.
- 사용자는 데이터가 로드되는 동안 다른 작업을 계속할 수 있습니다.
2. XMLHttpRequest 객체
- Ajax의 핵심 컴포넌트로, JavaScript에서 서버와 비동기 통신을 수행하는 데 사용됩니다.
- 최근에는 JSON 형식의 데이터 교환을 위해 fetch API나 다른 라이브러리(Axios, jQuery 등)가 널리 사용되고 있습니다.
3. 다양한 데이터 형식 지원
- 원래 XML 데이터를 주고받기 위해 설계되었지만, 현재는 JSON, HTML, 텍스트 등 다양한 데이터 형식을 지원합니다.
4. 서버 부하 감소
- 필요한 데이터만을 요청하고 받아올 수 있으므로, 전체 페이지를 로드하는 것에 비해 서버와 네트워크 부하가 줄어듭니다.
5. 실시간 웹 애플리케이션
- Ajax를 활용하면 사용자와 서버 간의 실시간 통신이 가능해져, 채팅 애플리케이션, 주식 차트, 스포츠 스코어 보드 등 실시간으로 데이터를 업데이트해야 하는 웹 애플리케이션을 구현할 수 있습니다.
6. 브라우저 호환성
- 대부분의 현대 브라우저에서는 Ajax를 지원합니다. 그러나 구형 브라우저나 특정 환경에서는 Ajax 구현에 차이가 있을 수 있으므로, 호환성 문제에 주의해야 합니다.
7. 보안 고려
- Ajax 요청은 동일 출처 정책(Same-Origin Policy)에 따라 제한됩니다. 다른 도메인으로의 요청을 하려면 CORS(Cross-Origin Resource Sharing) 설정이 필요합니다.
- 또한, 사용자 입력 데이터를 서버로 전송하기 전에 검증 및 적절한 처리가 필요합니다.
'Study > Frontend' 카테고리의 다른 글
| TDD 테스트 주도 개발 방법론 (1) | 2023.10.28 |
|---|---|
| REST API (0) | 2023.10.27 |
| fork + template으로 프로젝트 초기설정 날로 먹기 (0) | 2023.10.20 |
| Vue 3 + TS + AntDV 프로젝트 세팅하기 (0) | 2023.10.18 |
| Frontend 뉴비들이 많이 하는 실수 모음집 (HTML, CSS 편) (2) | 2023.09.03 |
