HTML, CSS, JavaScript
HTML과 CSS는 프로그래밍 언어는 아니다.
1. HTML
- form
input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 한다.
input 안에 있는 button을 누르면(== type이 submit인 input을 클릭하면) 내가 작성한 form이 submit 된다.
브라우저는 form이 submit 될 때 자동으로 새로고침 된다.\
<form id="login-form">
<input type="text" placeholder="what is your name?"/>
<input type="submit" value="Log In"/>
</form>const loginForm = document.querySelector("#login-form");
function onLoginSubmit(event){
event.preventDefault();
console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);
//하나의 argument를 받도록 하고 그걸 JavaScript에 넘겨주고 있다.eventListener function(onLoginSubmit)의 첫번째 argument(event)는 방금 발생한 event에 대한 정보를 담고 있다.
preventDefault 함수는 어떤 event의 기본 동작(어떤 function에 대해 브라우저가 기본적으로 수행하는 동작)이든지 발생되지 않도록 막는 것이다.
- input
<input required maxlength="15" type="text" placeholder="What is your name?" />- button
- body
- head
2. CSS
style
- class vs id
- selector
class를 추가하는 방법
h1{
color: cornflowerblue;
transition: color 0.5s ease-in-out;
}
.active{
color: orange;
}
//css
const title = document.querySelector(".hello h1");
function handleTitleClick(){
const clickedClass = "active";
if(title.classList.contains(clickedClass)){
title.classList.remove(clickedClass);
}else{
title.classList.add(clickedClass);
}
}
title.addEventListener("click", handleTitleClick);
//JavaScript- title.className vs title.classList
classList 함수는 내가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.
contains 보다 더 좋은 게 있다!! toggle!
: h1의 classList에 active라는 class name이 포함되어 있다면 제거하고 포함되어 있지 않았다면 추가하고~
const title = document.querySelector(".hello h1");
function handleTitleClick(){
title.classList.toggle("active");
}
title.addEventListener("click", handleTitleClick);
//진짜 섹시하다id를 추가하는 방법
const li = document.createElement("li");
li.setAttribute('id', '야호');3. JavaScript
animation
BootStrap
프레임워크*
*프레임워크: 재사용이 가능한 요소들의 집합으로 되어있다
jQuery
는 라이브러리
React
웹 프레임워크로, JS 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다
1. Data Flow
단방향 데이터 흐름으로 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 잘 예측할 수 있게 된다
2. Component 기반 구조
Component란? 독립적인 단위의 소프트웨어 모듈.
UI(View)를 여러 component를 쪼개서 만든다. 한 페이지 내에사도 여러 부분을 독립된 component로 만들고, 이 component를 조립해 화면을 구성한다.
3. Virtual DOM
DOM(Document Object Model)이란? HTML, CSS, xml 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다.
React는 이러한 DOM 트리 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.
이벤트가 발생할 때마다 Virtual DOM을 만들고 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해 앱의 효율성과 속도를 개선한다.
4. Props and State
- Props란?
부모 component에서 자식 component로 전달해 주는 데이터.
== 읽기 전용 데이터 - State란?
component 내부에서 선언하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 각각의 state는 독립적이다.
5. JSX
JSX란? JavaScript를 확장한 문법이다.
const element = <h1>Hello, world!</h1>;
View
Angular
양방향 데이터 바인딩으로 대규모 애플리케이션으로 갈수록 데이터의 흐름을 추적하기가 힘들어짐
