HTML
* HTML(Hypertext Markup Language,하이퍼텍스트 마크업 언어)
우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
HTML은 elements로 구성, 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업
* 태그
HTML의 tags 는 문서의 내용을 구조화, 의미 부여
검색 엔진이 문서의 내용을 이해하고 적절히 처리하는 데 중요한 역할
<head> 태그 브라우저에 표시 되지 않음
<meta> 태그
메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함
메타데이터는 데이터를 설명하는 데이터이다
구성) character set / 작성자 name / 내용 content
이 설명은 검색엔진 결과 페이지에서도 사용된다
* inline과 block레벨
inline 요소는 다른 요소와 같은 줄에 배치
inline 엘리먼트은 width와 height 속성을 지정해도 효과가 적용되지 않는다
해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문
block 레벨 요소는 자동으로 새로운 줄에서 시작하며, 사용 가능한 전체 너비를 차지
이러한 요소는 구조적인 레이아웃을 형성
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여 넣을 수 없다
inline 요소가 block 레벨 요소를 포함할 수 없음 이유) 레이아웃 문제 생길 수 있다
CSS
* CSS은 디자인을 입히고 사용자와 상호작용이 가능하도록 함
DRY (Don' Repeat Yourself) 원칙 준수를 위해 CSS 사용
HTML과 역할 분리하여 웹 개발 효율성, 유연성, 코드 재사용성, 유지보수성 향상
* CSS 선택자 특징
- 구체성: 구체적인 규칙이 우선적으로 적용
- 상속: 부모 요소 스타일이 자식 요소로 전달
- 우선 순위: 동일한 구체성에서는 CSS 파일에서 나중에 정의된 규칙 적용
* SCSS 는 CSS의 전처리기 이며 CSS를 확장하여 더 효율적이고 강력한 기능을 제공
변수, 중첩 규칙, 믹스인, 상속 등과 같은 기능 제공
CSS로 컴파일을 거친 뒤 실행 가능
출처) https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started
HTML 시작하기 - Web 개발 학습하기 | MDN
HTML 기본 사항을 둘러 보셨기를 바랍니다.
developer.mozilla.org
Javascript
* 데이터 타입 종류
기본형 데이터 타입 (primitive)
number, string, boolean, null, undefined, symbol
스택 메모리에 값을 저장
참조형 데이터 타입 (reference)
객체, 배열, 함수
힙메모리에 저장된 객체의 참조(객체의 메모리 주소)를 변수에 담아 스택 메모리에 저장
* map과 forEach 차이
map은 함수 실행 후 새 array로 return
forEach는 함수 실행만 (undefinded 반)
데이터 변환 작업에서 map 대신 forEach+push를 쓰면 불변성의 원칙 위반
데이터를 변경하지 않고 새로운 데이터를 생성 (추적이 쉬움, 예측 가능성)
map은 원본 배열을 변경하지 않고 (원본 데이터 상태 유지) 변환된 새 배열 생성
forEach+push은 원본 배열 바뀔 수 있음 (테스트 어렵고, 코드 복잡)
* 함수의 종류
함수선언문(호이스팅)
함수표현식(익명함수)
화살표함수
즉시 실행 함수
* 함수를 잘 만드려면? (작게 또 작게) "단일 책임 원칙" 한 가지 기능만 수행
- 가독성과 이해도
- 재사용성 증가
- 디버깅, 오류 수정
- 유지 보수의 간소화
- 효율적 협업
- 테스트 검증 용이
* Javascript 는 prototype 기반의 객체지향 언어 cf) 클래스 기반 객체 지향 언어
모든 객체는 프로토타입을 통해 다른 객체로부터 상속 받음
객체는 다른 객체의 property, method 상속 받아 확장 (복사가 아닌 참조)
객체가 다른 객체의 프로토타입을 참조함으로써 형성되는 연결고리를 프로토타입 체인
프로토타입 체인을 통해 상속된 속성이나 메소드에 접근
[참고]
패스트캠퍼스 강의 (내 생에 마지막 JavaScript : 기초 문법부터 실무 웹 개발까지 한 번에 끝내기 초격차 패키지 Online) 를 기반으로 작성하였고, 추가 서치 내용을 정리하였습니다.
'개발공부' 카테고리의 다른 글
| [Front] 테스트 주도 개발 (1) | 2024.06.04 |
|---|---|
| [ETC] 패키지 매니저 yarn (0) | 2024.05.26 |