이사한번 갔다오겠습니다

돌아올 수도 있음!

HTTP(HyperText Transfer Protocal)

웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인된 통신 규약
웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약을 HTTPS라 함
데이터를 주고 받는다 -> HTML, 이미지, 영상, 음성 파일 등을 주고 받는다

HTTP 통신

HTTP에서는 클라이언트(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지 반환
서버는 응답 메시지를 반환한 후에 초기 상태로 돌아감
이러한 특징으로 인해 HTTP를 stateless 규약이라고도 함

생활 속 HTTP 통신

HTTP 요청과 응답

요청

HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성

• 요청 행 : 요청 메소드, URL, HTTP 버전 정보 등 포함
• 요청 헤더 : 메시지 정보, 메세지에 저장한 데이터 정보 등 포함
• 메시지 본문 : 서버 측으로 보내는 데이터 포함
  요청 메소드 - GET, POST 등 데이터 송수신 방식을 지정한 것

응답

HTTP 응답 메시지는 응답 행, 응답 헤더, 메시지 본문으로 구성

• 응답 행 : 상태 코드, 보충 메시지, HTTP 버전 정보 등 포함
• 응답 헤더 : 메시지 정보, 메세지에 저장한 데이터 정보 등 포함
• 메시지 본문 : 클라이언트 측으로 보내는 데이터 포함
  상태 코드 - 요청이 성공적으로 완료되었는지를 보여주는 숫자 코드

주요 상태 코드

요청이 성공적으로 완료되었는지를 보여주는 숫자 코드, 각 숫자마다 의미가 있음

XMLHttpRequest

서버와 상호작용하기 위해 사용하는 자바스크립트 빌트인 생성자
이를 이용하면 서버(URL)로부터 데이터를 받아와 전체 페이지의 새로고침 없이도 페이지의 일부만 업데이트하는 비동기 방식의 데이터 통신을 수행할 수 있음
-> 이러한 프로그래밍 기법을 Ajax라 함

Ajax

Ajax(Asynchronous JavaScript And XML)
웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법

XMLHttpRequest 사용흐름

Aja기법에 기초한 XMLHttpRequest 비동기 통신은 세단계를 거침

• XMLHttpRequest 객체 생성
• 서버와 통신할 때 필요한 정보 및 처리 방법 등 기입
• 요청을 전송해 통신 시작
  (객체 생성은 new 연산!!!)

이벤트 핸들링

비동기 통신을 할 때 서버와의 통신 상태를 감시할 수 있음 그리고 이때 발생하는 이벤트에 대한 이벤트 핸들러를 등록할 수 있음

요청 초기화 및 전송

서버에 요청을 보낼 때 XMLHttpRequest 객체의 open 메소드로 요청을 초기화하고, 이후 send 메소드로 보내주는 순서로 작업 수행

// open 메소드 사용시 기본 형태
const request = new XMLHttpRequest()
request.open("HTTP메소드", "서버URL")
// 초기화 했고, 요청 보내자
request.send()

객체 리터럴

객체를 구성하는 속성(값이나 기능)의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체 리터럴'을 이용하면 객체 생성 가능

• 속성의 이름 - 키(key)
• 속성의 값 - 밸류(value)

  const me = {
    name: "여진",
    town: "대구"
  }

속성의 밸류로 함수가 주어지면, 이 속성은 메소드가 됨

const me = {
    name: "여진",
    town: "대구",
    eat: function(){
        console.log("밥을 먹는다")
    },
    scratch: function(){
        console.log("건드리면 죽빵")
    }
}

키는 중복될 수 없음, But 값은 같은 것이 있어도 상관X

속성 접근

객체 안의 속성 값을 참조할 때(읽기 쓰기) 도트(.)연산자 또는 대괄호([])연산자 사용 가능

// 도트 연산자 사용
console.log(me.town) // 대구
me.scratch() // 건드리면 죽빵

// 대괄호 연산자 사용
console.log(me['name']) // 여진
me['eat']() // 밥을 먹는다

스프레드 연산자

스프레드 연산자를 사용하면 객체 리터럴의 요소 목록을 펼칠 수 있음 전개 구문, 전개 연산자 등으로 불림 (펼치다 = spreed)
스프레드 연산자 - ...
객체 리터럴에 대해 스프레드 연산을 수행하면, 구성요소를 그대로 복사

const bird = {
    parrot: '앵무새',
    chicken: '닭'
}
const animal = {
    ...bird,
    dog: '강아지'
}
console.log(animal)

{parrot: '앵무새', chicken: '닭', dog: '강아지'}

배열에도 사용가능!

const pet = ["강아지", "고양이"]
console.log(...pet)
console.log(pet)

강아지 고양이 ['강아지', '고양이']
스프레드 연산자는, 사용된 자리에 개별 요소를 놓고옴

Json

자바스크립트 객체 표기법 (JavaScript Object Notiation) 자바스크립트 객체를 문자열로 표현하는 데이터 포맷
주로 자바스크립트에서만 사용할 수 있는 객체 타입을, 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용
객체 리터럴

const gokuObject = {
    name: "손오공",
    race: "사이야인",
    skills: [
        "에네르기파",
        "계왕권",
        "원기옥",
        "순간이동"
     ]
}

JSON 문자열

const gokuObject = `{
    "name": "손오공",
    "race": "사이야인",
    "skills": [
        "에네르기파",
        "계왕권",
        "원기옥",
        "순간이동"
     ]
}`

내장객체

LocalStorage

현재 도메인의 로컬 저장소에 접근할 수 있게 해줌
로컬 저장소는 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로, 데이터를 영구적으로 보관할 수 있음
데이터 보관 시에는 데이터의 이름과 데이터의 실제 값을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용됨

영구적으로 보관한다?

브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 도메인에 데이터가 남아있도록 할 수 있음!

로컬 저장소 조회

개발자 도구의 Application 탭에서 조회 가능

localStorage 메서드

로컬스토리지의 데이터 이름은 중복 될 수 없음!!

차이점

var는 함수 범위를 가지며, 호이스팅의 특성 때문에 혼란을 줄 수 있다 중복선언과 재할당 모두 가능하다

let과 const는 블록 범위의 특징을 갖는다 특정 블록(if, for) 내에서 선언된 변수가 해당 블록 밖에서 접근 불가능하다는 것을 의미 let은 중복선언은 불가능하다 재할당은 가능하다

const는 let과 var와 달리 한번 값을 할당하면 그 값을 변경할 수 없다

let과 const를 사용함으로써, 변수의 재할당과 재선언에 관련된 일반적인 문제점들을 피할 수 있는데 이로 인해 코드의 버그 발생 확률이 줄어들고, 코드의 안정성이 향상된다

현재 개발에서는 var의 한계와 문제점들을 피하기 위해 let과 const를 주로 사용하며, 변수의 재할당이 필요하지 않은 경우 const, 필요한 경우에는 let을 사용하는 것이 권장된다

Var

ES6 등장 이전에 사용되던 키워드
중복선언, 재할당 모두 가능
스코프 - 함수레벨 스코프(Function-level)
호이스팅 - 호이스팅 시 undefined로 변수 초기화
전역객체 프로퍼티 - 할당

WHY? var 사용 지양

문제점

변수의 중복 선언 가능
이미 선언했던 변수명을 모르고 또 사용할 경우, 기존에 있던 변수는 전혀 다른 값을 가지게 됨 그 경우, 그 변수를 사용하는 다양한 로직들에 치명적인 문제가 생김

for문에서의 문제점
var는 function-scoped이기 때문에, for문에서 순회를 위해 i라는 변수를 var로 선언한 경우, 이 변수는 for문이 종료되어도 접근이 가능하게 됨
만약 for문의 함수 내부가 아닌, 함수 외부에 전역적으로 돌아갈 경우 for문에서 사용한 var변수들은 전역 변수로서 역할을 하므로, 전역 변수가 남발될 수 있다

호이스팅

var키워드를 사용해 변수 선언 시, 해당 변수의 선언부를 최상단으로 올리는 것 JavaScript의 변수 생성과 초기화의 작업이 분리되어 진행되기 때문에 이런 현상 발생
var는 기존 c나 java의 Block-scoped가 아니라 Function-scoped 따라서 코드 전체의 최상단이 아닌 함수 내부의 최상단으로 이동함
( function-scoped는 중괄호로 구분된 영역의 범위를 갖는 것이 아닌 함수 내부의 영역을 범위로 갖는 것을 의미 )

Let

재할당 가능, 중복선언 불가능
스코프 - 블록레벨 스코프(Block-level)
호이스팅 - 선언 단계 - TDZ - 초기화 단계 - 할당 단계로 분리되어 진행
전역객체 프로퍼티 - undefined

Const

중복선언, 재할당 불가능
스코프 - 블록레벨 스코프(Block-level)
호이스팅 - 초기화 이전 접근시 ReferenceError발생 전역객체 프로퍼티 - undefined

이벤트(event)란

DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스

예시

• 웹페이지 사용자가 버튼 클릭 -> 클릭 이벤트
• 웹페이지 사용자가 키보드 클릭 -> 키다운 이벤트
• 웹페이지 사용자가 입력 폼 내용 제출 -> 제출 이벤트
• 외 다수

이벤트가 발생했을 때?!

각각의 이벤트에 대한 이벤트 핸들러 정의 가능
이벤트 핸들러 - 이벤트가 발생되면 실행될 코드 블록, 주로 함수가 이 역할 담당 이벤트 핸들러 등록 - 이벤트 핸들러 역할을 수행할 함수를 정의하는 것

구문 기본 형태

이벤트를 처리할 타켓 선택 후 이벤트 핸들러 속성에 이벤트 핸들러 대입 [주의] - 이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 다름
타켓.on이벤트명 = 이벤트핸들러 함수 -> button.onclick = handleClick

addEventListener()

onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 이벤트 처리방법
장점

• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드 존재
• 같은 리스터(타겟)에 대해 다수의 핸들러를 등록할 수 있음
  addEventListener(이벤트명, 이벤트핸들러)

이벤트 객체

추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터
이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있게 해야함

// click 이벤트가 발생하면 함수 호출하겠다
target.addEventListener('click',function(){})

// click 이벤트가 발생하면 함수를 호출하겠다
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다
target.addEvenListener('click', function(event){})

value

input, select처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있는데, 여기서 사용자가 입력한 값을 읽을때 value속성에 접근

textContent와 value 차이

• textContent - 요소에 쓰여져 있는 텍스트에 접근
• value - 사용자가 직접 요소에 입력한 값에 접근

value 접근

입력 요소의 value에 접근하여 할 수 있는 일은 크게 두가지, 읽기와 쓰기

// 대상 요소의 사용자 입력값을 읽어 콘솔 출력
console.log(target.value)

// 대상 요소의 사용자 입력값을 "변경값"으로
target.value = "변경값"

자바스크립트

HTML - 마크업 언어, CSS - 스타일시트 언어
자바스크립트 - 프로그래밍 언어
자바스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는 언어지만, 주된 활동 분야는 '웹 개발'
웹 개발 - 인터넷을 통해 서비스되는 웹사이트를 개발 하는 일

자바스크립트의 역할

• 웹브라우저 및 하위 객체가 가진 기능을 구동
• HTML/CSS를 통해 렌더링된 화면을 조작할 수 있음
  역할을 정상적으로 수행하기 위해서는, 자바스크립트 코드를 올바른 위치에 작성하는 것이 중요

자바스크립트 작성 위치

• HTML문서 내부에 작성, < script > 태그사용
• 자바스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결

스크립트 동작 원리

자바스크립트는 프로그래밍 언어로써, 소프트웨어적 대상에게 명령을 내리는 역할을 수행
소프트웨어적 대상이란, 웹브라우저, 웹 요소, 웹 스타일 등을 의미
명령을 내리고싶은 대상에 자바스크립트 명령을 전달하면, 다음 절차대로 작업이 이루어짐

• 입력 -> 처리 -> 출력
  자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리켜 '객체'라 함

입력, 처리, 출력

• 입력 - 객체에게 어떤 작업을 수행하라는 명령 전달
• 처리 - 객체가 주어진 작업을 수행
• 출력 - 객체가 작업을 수행한 결과를 사용자에게 반환

객체 다루는 방법

자바스크립트가 제공하는 객체 이름을 선택하고, 뒤에 점(.)을 붙인 다음 전달하고자 하는 명력을 적어줌
그러면 입력, 처리, 출력의 절차 시작

객체 명령의 두가지 유형

객체.데이터

• 객체가 가지고 있는 숫자, 문자 등의 다양한 데이터 사용 가능
• 객체가 가지고 있는 데이터(정보)를 가리켜 일반적으로 '속성'이라 함
  객체.기능()
• 객체가 가지고 있는 다양한 기능을 수행할 수 있음(괄호 필수)
• 객체가 가지고 있는 기능을 가리켜 일반적으로 '메소드'라 함

예시

window.alert('warn') 웹브라우저에게 '경고창에 'warn'이라고 쓴 다음 화면에 띄워줘'라는 명령 전달

콘솔 (console)

브라우저의 디버깅 콘솔
콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근할 수 있음
window.console 과 console 같음 -> window 생략가능

변수

'데이터에 붙이는 이름표'
변수를 이용하면 이름표를 붙여 둔 데이터를 기억해뒀다 필요할 때마다 재사용할 수 있게 됨
let 변수이름 = 데이터; // 변수 선언 변수이름 = 데이터 // 변수 초기화
데이터를 기억하기 위해 변수 사용
변수는 한 번에 하나의 데이터만 기억할 수 있으며, 기억하고 있는 값을 바꿔가며 사용가능

변수 제약사항

• 오직 문자와 숫자, 그리고 기호$과 _만 포함될 수 있음
• 첫 번째 글자로 숫가 올 수 없음
• 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없음

상수

수식에서 '변하지 않는 값'을 뜻함
변수와 반대되는 것, 상수는 '단 하나의 데이터만을 위해 사용하는 이름표'로써, 값의 변경이 불가능
const 상수이름 =데이터;
상수도 변수처럼 지정된 데이터 대신 사용 가능 상수 이름 짓기 규칙은 변수 이름 짓기와 동일
선언과 동시에 초기화 해줘야함 const 상수이름; 상수이름 = 데이터; // 에러!!!
상수는 자신이 선언될 때 지정된 데이터로 고정 선언 이후 데이터를 대입하려고 하면 에러 발생

템플릿 리터럴

문자열을 표현하는 또 다른 방법, 따옴표를 이용해 표현하는 방법에 비해 조금 늦게 추가된 문법
백틱을 이용해 표현 ``

const str1 = '작은 따옴표' const str2 = "큰 따옴표" const str3 = ``

표현식 삽입 방법

템플릿 리터럴은 반환값이 존재하는 자바스크립트 코드, 표현식을 내장할 수 있는 문자열 표현법
문자열 내용에 데이터를 삽입한다는 것을 의미
템플릿 리터럴로 표현한 문자열 내부에 플레이스 홀더 ${}를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 됨

입력문

const data = "데이터"
const str = `문자열 중간에 ${data} 삽입하기`
console.log(str)

출력문 - 문자열 중간에 데이터 삽입하기

undefined & null

• undefined - 아직 데이터가 정의되지 않음
• null - 의도적으로 데이터가 없음

기본 자료형 boolean

true 와 false 두가지 값만 존재
참과 거짓 여부를 나타내기 위해 사용하는 데이터
소문자로 작성해야함

DOM 관련 메소드

DOM을 다루는 명령문도 입력-처리-출력 절차 수행

createElement & appendChild

document.createElement

지정된 이름의 HTML 요소를 만들어 반환 document.creatElement('div') document.creatElement('p') document.creatElement('a')
HTML 요소가 만들어지고 반환 되었다고 해서 해당 요소가 바로 웹 브라우저 화면에 추가되는 것은 아님
자바스크립트 단계에서 만들어져 있는 요소를 화면에 표시하는 작업을 추가로 해야함

요소를 추가할 때 append() / appendChild()

appendChild()

appendChild 메소드 - DOM 내 개별요소 ('노드')에 자식 요소를 추가할 때 사용하는 메소드
기본 사용 법 target.appendChild(자식으로 추가할 요소)
예시

const p = document.createElement('p')
document.body.appendChild(p)

append()

타켓 요소에 자식 요소를 추가한다는 점에서 appendChild()와 같으나 차이점 존재

차이점

• append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만 추가 가능
• appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없음

동기 (Synchronous)

요청을 하고 응답을 받을 때까지 기다림
응답이 오면 다음 동작 수행

장점

• 로직이 간단하고 이해하기 쉽다

단점

• 응답을 기다리는 동안 아무것도 못하므로 리소스가 낭비될 수 있다

비동기(Asynchronous)

요청을 하고 응답으 기다리지 않고 바로 다음 동작 수행
응답이 오면 이후 처리

장점

• 응답을 기다리는 동안 다른 작업을 수행할 수 있으므로 효율적이다

단점

• 로직이 복잡해질 수 있고, 동시성 제어가 필요할 수 있다

CSS 레이아웃

레이아웃(layout) - 구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기술
CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술
CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며, 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있음

대표적인 CSS 레이아웃 기술

• 일반적인 문서 흐름
• display 속성
• 플렉스 박스
• 그리드 레이아웃
• float 속성
• position 속성
• 기타 등등

플렉스 박스 (flex box)

행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식
플렉스박스 방식에서, 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템 간의 상호작용을 통해 결정

• 플렉스 컨테이너 - 플렉스 박스 방식으로 레이아웃을 결정할 요소
• 플렉스 아이템 - 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소

display:flex; - 플렉스박스 방식을 사용하기 위해 플렉스 컨테이너 생성
display:inline-flex; - 플렉스 컨테이너가 인라인 레벨 요소

중요 개념

플렉스박스 방식은 두 개의 축을 기반으로 동작
그 중 하나의 축을 주축삼아 요소를 배치하는데, 주축의 기본값은 가로 방향(왼 -> 오)

flexbox 관련 속성

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-self
• align-content
• flex-grow
• flex-shrink
• flex-basis
• flex
• order

flex-direction

플렉스 컨테이너의 주축을 결정하는 속성
행 - 가로 열 - 세로

flex-wrap

플렉스 아이템들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현할 것인지 결정하는 속성

justify-content

플렉스 아이템들이 플렉스 박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식 결정

align-items

플렉스 컨테이너의 교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지 결정

align-self

각각의 플렉스 아이템이 교차축에서 어떤 식으로 정렬될 것인지 스스로 결정

align-content

교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성
다음 두 조건이 만족되면서 여유 공간이 있을 때만 동작할 수 있음

• flex-wrap의 값이 wrap으로 지정되어 있을 때
• 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때

flex-grow & flex-shrink & flex-basis

• flex-grow - 플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성


• flex-shrink - 플렉스아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성


• flex-basis - 플렉스 아이템의 초기 크기를 지정하는 속성

order

플렉스 아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행
코드에 영향을 끼치는 것이 아닌, 보여지는 순서에만 영향을 줌

1. 바이트 파싱

웹 서버에서 웹 페이지 관련 파일들 (HTML, CSS, JavaScript 등)을 받아옴
받아온 바이트들은 사람이 읽을 수 있는 문자로 바꿈

2. HTML파싱과 DOM트리 생성

문자로 바뀐 HTML 문서를 위에서 하래로 읽으면서 해석
여기서 HTML태그들을(div, a, p 태그 등) 기반으로 '노드' 를 만듬
이러한 노드들을 연결해서 DOM트리 생성

3. CSS 파싱과 CSSOM 트리 생성

외부 CSS파일이나 내장된 스타일을 파싱하여 CSSOM(CSS Object Model) 트리를 만듬

4. JavaScript 실행

파서는 < script> 태그를 만나면 파싱을 일시 중단하고 (파서 차단) 해당 JavaScript를 실행
JavaScript코드는 DOM이나 CSSOM을 수정할 수 있으므로, 이 단계는 페이지의 렌더링에 직접적인 영향을 미칠 수 있음

5. 렌더 트리 생성

DOM 트리와 CSSOM 트리는 합쳐져서 렌더 트리를 형성
렌더 트리는 실제 화면에 그려질 노드들만 포함

6. 레이아웃

렌더 트리를 기반으로, 각 노드가 화면의 어디에 위치할지, 어떤 크기를 가질지 계산하는 과정

7. 페인트

레이아웃 단계에서 계산된 위치와 크기 정보를 바탕으로, 화면에 실제 픽셀로 그리는 작업을 수행

8. 합성과 레이어

복잡한 애니메이션, 효과 또는 레이어를 최적화하기 위해 브라우저는 페이지의 일부분을 별도의 레이어로 관리할 수 있음
필요한 경우 GPU를 사용하여 이러한 레이어들을 합성하거나 처리

변형이란, 요소의 크기나 위치를 바꾸는 것을 뜻함 이때 크기나 위치는 요소의 x축과 y축을 기준으로 바뀜

transition 속성을 이용한 변화

• transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태의 변형임. transition 속성을 이용하면 요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 변화시킬 수 있음


• transition은 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정할 수 있어 다양한 애니메이션 효과르 만들 수 있음


• transition속성은 단축 속성으로, 변화를 주고자 하는 속성이나 실행 시간, 실행 방법, 그리고 지연 시간 등에 대한 정보를 포함할 수 있음

transition 하위 속성

trasition-timing-function

애니메이션 효과

애니메이션 사전적 정의 - 움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 촬영기법 또는 그렇게 만들어진 영화
CSS는 웹페이지 상에 표시되는 콘텐츠가 TV애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation 속성 지원

@keyframes

애니메이션을 표현하는 여러 개의 프레임은 @keyframes 모듈을 이용해 정의
백분율을 이용해 프레임을 나누거나, 별도의 키워드로 간단히 나눌 수 있음

@keyframes 애니메이션_이름{
  from{width:100px;}
  to{width:200px;}
}

@keyframes 애니메이션_이름{
  0%{width:100px;}
  33%{width:133px;}
  66%{width:166px;}
  100%{width:200px;}
}

animation

.ball{
  animation-name: moving;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  /*한줄완성코드*/
  animation: moving 2s 0s linear infinite alternate;
}

@keyframes moving{
  from{left:30px;}
  to{left:120px;}
}

상속과 공용키워드

상속(Inheritance)

하위 요소가 상위 요소의 스타일 속성값을 물려받는 것

상속 여부 속성

상속확인 사이트

공용 키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만, CSS에서는 스타일 속성의 상속 여부를 제어할 수 있는 3개의 키워드를 별도로 지원함
이들은 모든 속성에 적용할 수 있는 키워드로 '공용키워드' 또는 '전역키워드'라 부르기도 함

반응형 웹과 뷰포트 단위

반응형 웹

다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법

뷰포트

현재 화면에 보여지고 있는 영역
기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타남

뷰포트 설정 < meta >

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
>

화면 크기에 반응하는 단위

미디어 쿼리

미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)
모든 미디어 쿼리는 두가지 구성요소를 지니고 있음

• 미디어 타입
• 조건에 대한 물음(쿼리)

@media 미디어_타입 and (조건에_대한_물음) {
  /*
  미디어 타입과 조건을
  모두 만족할 때 덮어씌울
  스타일 선언문
  */
}

@media screen and (max-width: 768px) {
  /*
  화면(screen)의
  너비가 768px 이하일 경우에
  여기에 정의된 스타일 선언문을
  추가 적용할 것이다
  */
}

미디어 쿼리 종류

모듈화 디자인

반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 해도 과언이 아님

웹 개발에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻함

컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있어 효율이 좋아짐

모듈화 디자인의 이점

• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 됨
• 스타일 재사용이 용이함. 필요한 경우 추가 스타일을 적용하면 됨
• 페이지의 일관성 유지 용이

GET

리소스를 서버로부터 요청할때 사용

URL에 쿼리 파라미터를 포함하여 데이터 전달

ex) https://url?'key=value'

브라우저에 기록이 되고, 캐시되어 동일한 요청이 반복될 경우 더 빠른 응답을 받을 수 있음

브라우저 히스토리나 서버로그에 노출될 수 있음 주의!

GET 사용케이스

페이지 조회, 리소스 조회, 검색결과, 링크 클릭시 사용

POST

서버에 데이터를 제출할 때 사용

데이터 전송시 body부분에 담겨 전송

URL에 데이터가 노출되지 않아 노출의 위험이 적음 하지만, 보안을 위해 HTTPS와 함께 사용하는것이 좋음

POST 사용케이스

로그인, 회원가입, 데이터 업로드, 사용자 민감정보 전송 등 데이터를 서버로 전송해야하는 상황에서 사용

보안 측면

보안을 고려할 때는 민감한 정보의 전송이 필요한 경우 POST() 사용
GET()은 정보 조회와 같이 민감하지 않은 데이터 요청에 사용하는 것이 좋음

< display >

display 속성에 지정할 수 있는 대표적인 설정

< float >

요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소 기준으로 위치 변경
선택된 요소가 문서의 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징을 가지고 있음

float 속성을 적용한 요소를 '부동 요소'라 부르기도 하는데 이는 위치를 이동하면서 다른 요소의 공간에까지 영향을 주며, 이를 잘 활용하면 유용하나 float을 적용하지 않는 요소의 공간에 영향을 주어 때론 역효과를 가져옴
이를 해결하기 위한 속성으로 'clear'가 있음

< position >

문서 상에 요소를 배치하는 방법 정의
최종 위치 결정 - top, bottom, right, left

z-index

요소의 쌓임 순서(stack order) 정의
정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용, 위치 지정 요소에 대해 적용할 수 있는 속성
위치 지정 요소 - Position 속성이 정의되어 있는 요소

z-index 기본값 - auto
높은 값을 가질 수록 윗층에 위치

overflow

선택자

선택자 유형

선택자	의미	사용 기호
속성 선택자	특정 속성을 명시하여 요소를 선택	[속성명]
하위 요소 선택자	상위 요소에 포함된 하위 요소를 선택	공백
자식 요소 선택자	상위 요소의 바로 한 단계 하위 요소를 선택	>
인접 형제 선택자	형제 요소 중 첫 번째 형제 요소를 선택	+
형제 요소 선택자	형제 요소를 선택 유의사항 : 뒤이어 등장하는 형제 대상	~

기호와 함께 사용하는 속성 선택자

• * : 값의 포함 여부
• ^ : 값의 시작 여부
• & : 값의 끝 여부

의사요소와 의사클래스

의사클래스

의사클래스(가상클래스)는 선택자에 추가하는 키워드로,
요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미

선택자 : 의사클래스{
    속성명: 속성값;
}

속성값	설명
hover	마우스 포인터가 요소에 올라가 있다
active	사용자가 요소를 활성화했다 (ex - 마우스 누르기)
focus	요소가 포커스 받고 있다
disabled	비활성 상태의 요소이다
nth-child()	형제 사이에서의 순서에 따라 요소를 선택한다

의사요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의 할 수 있음

선택자 :: 의사요소{
    속성명: 속성값;
}

속성값	설명
after	요소의 앞에 의사 요소르 생성 및 추가
before	요소의 뒤에 의사 요소를 생성 및 추가
first-line	블록 레벨 요소의 첫 번째 선에 스타일 적용
marker	목록 기호의 스타일 적용
placeholder	입력 요소의 플레이스홀더(자리표시자) 스타일 적용

]]> https://velog.io/@yeojin_ni/%EC%8B%9C%EB%A9%98%ED%8B%B1-%EB%A7%88%ED%81%AC%EC%97%85 https://velog.io/@yeojin_ni/%EC%8B%9C%EB%A9%98%ED%8B%B1-%EB%A7%88%ED%81%AC%EC%97%85 Fri, 30 Aug 2024 11:38:15 GMT 시맨틱 마크업

시맨틱은 '의미론적인'이라는 의미
시맨틱 태그는 개발자와 브라우저에게 의미를 제공

<의미>콘텐츠</의미>

태그명은 '이 요소가 가진 목적이나 역할은 무엇인가'를 나타냄 -> 검색 엔진에 좋은 단서

---

시맨틱 장점

대부분의 시맨틱 태그는 컨테이너 태그(span, div)와 같이 특별한 스타일을 제공하지 않음 But, 아래 장점이 있음

• 검색 엔진은 시맨틱 태그를 중요한 단서로 봄
• 시각 장애가 있는 사용자가 화면 판독기로 페이지 탐색할 때 참조 됨
• 코드의 가독성이 좋아짐
• 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편함

---

대표적인 시맨틱 태그

태그명	의미	태그명	의미
< article >	독립적인 콘텐츠	< header >	머릿말
< aside >	별도의 콘텐츠	< main >	주된 콘텐츠
< details >	추가적인 상세한 정보	< nav >	네이게이션 링크
< figcaption >	figure의 자막	< section >	콘텐츠의 한 섹션(절)
< figure >	설명 붙는 독립 콘텐츠	< summary >	detail의 헤더
< footer >	맺음말	< time >	강조할 시간

---

시맨틱 태그를 사용한 Html 구조

이미지 출처

]]> https://velog.io/@yeojin_ni/CSS%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90 https://velog.io/@yeojin_ni/CSS%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90 Fri, 30 Aug 2024 06:03:29 GMT

CSS - Cascading Style Sheet

연속적으로 스타일을 정의하는 문서

Cascading - 폭포같은, 계속되는, 연속적인

Style - 멋을 내다

Sheet - (종이나 문서) 한 장

---

문법

HTML코드가 다수의 '태그'로 구성되는 것처럼, CSS코드는 다수의 '스타일 선언문'으로 구성

선택자{
    속성명: 속성값;
}

<li>선택자 - 어떤 요소에 스타일을 적용 할지에 대한 정보</li>
<li>{중괄호} - 선택한 요소에 적용할 스타일을 정의하는 영역</li>
<li>속성명 - 어떤 스타일을 정의하고 싶은지에 대한 정보</li>
<li>속성값 - 어떻게 정의하고 싶은지에 대한 정보</li>

## CSS 주석

/주석의 내용/

## CSS 3
> 현 시점 HTML5가 웹 개발 표준으로 인정받고 있는 것처럼,
스타일시트 또한 웹 표준 기술이 존재 -> CSS3

<hr>

## HTML에 CSS를 더하려면
> <li>인라인 스타일 - 태그에 직접 기술하기</li>
<li>스타일 태그 - 스타일시트를 위한 태그를 추가하여 기술하기</li>
<li>문서 간의 연결 - 스타일시트 문서를 따로 작성하여 HTML문서와 연결하기</li>

### 인라인 스타일 - 우선 적용
> 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식
선택자 필요 X
(웹 콘텐츠와 스타일시트를 분리하기 위해서 사용하지 않는 편이 좋음)

글자를 파랗게 만들어줘

스타일 태그

HTML 문서에 style 태그를 추가하여 그 안에 CSS코드 작성 '내부 스타일시트'라 표현하기도 함

<style>
  /* style 태그 안에는 CSS 코드 작성해야 함*/
  p{color: red;}
</style>

문서 간의 연결

확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고, HTML문서에 이를 연결해 줄 수 있음 이때 link 태그 사용

<link href="./style.css" rel="stylesheet">

href - 연결하고자 하는 외부 소스의 url을 기술하는 속성

rel - 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성

-> link태그는 HTML문서의 head태그 내부에서 사용해야 함

스타일 적용

인라인 스타일은 우선적으로 적용 인라인 스타일이 아닌 경우, 나중에 쓰여진 선언문이 적용

---

선택자 유형

스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정 이때 요소는 오직 하나만 선택할 수도, 여러 개를 동시에 선택할 수도 있음

전체 선택자 - 문서 내 모든 요소 선택 - *

태그 선택자 - 특정 태그로 만들어진 모든 요소 선택 - 태그명

클래스 선택자 - 특정 클래스 값이 지정된 모든 요소 선택 - .클래스값

아이디 선택자 - 특정 아이디 값이 지정된 요소 선택 - #아이디값

그룹 선택자 - 여러 유형의 선택자를 한꺼번에 선택 - 선택자,선택자,선택자 {}

선택자 우선순위

쓰여진 순서랑 관계없이 적용되는 순위 1. 아이디 선택자 2. 클래스 선택자 3. 태그 선택자

---

박스 모델 (box model)

브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간 따라서 브라우저를 통해 렌더링 되는 웹 요소들 또한 그 안에서 개별적으로 너비와 높이를 가짐
박스 모델은 너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현하고, 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델
CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있으며, CSS는 영역 별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공

영역	설명	관련 속성
콘텐츠 영역	요소 내에 포함된 콘텐츠를 표시하는 영역	width, height
안쪽 여백	테두리 안에서 콘텐츠 주변을 감싸는 여백	padding
경계선(테두리)	콘텐츠와 안쪽 여백을 둘러싸는 테두리	border
바깥쪽 여백	테두리 바깥에서 요소를 감싸는 여백	margin

---

테두리 스타일

테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있게 해주는 유용한 영역
테두리 스타일을 정의할 때 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으로 사용하는 방법을 사용

속성명	용도
border-width	테두리의 두께를 지정
border-style	점선, 실선, 겹선 등으로 테두리의 모양을 지정
border-color	테두리의 색상을 지정
border	테두리의 두께, 모양, 색상 등을 한번에 지정
border-radius	박스의 모서리를 둥글게 만들어줌

---

여백 다루기

개수	설명	예
1	여백의 모든 면에 동일한 값을 지정	margin : 10px;
2	위아래, 왼쪽오른쪽 여백의 값 따로 지정	margin : 10px 20px;
3	윗쪽, 왼쪽 오른쪽, 아래쪽 여백 순서로 값 지정	margin : 10px 20px 15px;
4	위,아래,왼,오 순서대로 각각 따로 지정	margin : 10px 20px 30px 40px;

box-sizing

콘텐츠 영역의 크기를 결정하기 위해선 width나 height 사용 여기에 padding 속성을 추가 정의하면 여백이 생기면서 요소가 기존보다 더 커지게 되는데 이를 원치 않을경우 box-sizing 사용

content-box

border-box

---

배경 다루기

콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 만들 수 있음
박스 모델에 배경으로 추가된 색상이나 이미지 등은 박스 모델의 바깥쪽 여백을 제외한 나머지 영역 안에서 요소의 콘텐츠를 뒷받침

background

background의 하위 속성

접미사	설명	속성값 유형
-color	요소의 배경 색상 지정	색상
-clip	요소 내 배경의 적용 범위	별도의 키워드
-image	요소의 배경 이미지 지정	이미지 url
-origin	요소 내 배경의 시작 위치	별도의 키워드
-size	배경 이미지의 크기	수치와 단위
-position	배경 이미지의 위치	수치와 단위
-repeat	배경 이미지의 반복 패턴	별도의 키워드

---

색상 지정

글자 색을 지정할 때는 color속성 사용
색 지정 방법은 글자 색, 테두리 색, 배경 색 모두에 동일

키워드 - 색상을 나타내는 키워드(영단어) 입력

rgb함수 - rgb함수에 수치를 입력해 색상 결정

hsl함수 - hsl함수에 수치를 입력해 색상 결정

16진수 값 - 빨강,초록,파랑의 비율을 16진수로 표현해 색상 결정

rgb함수

빛의 3원색인 red, green, blue의 줄임말
CSS는 빨강, 초록, 파랑 각 색상의 비율을 지정해 색상을 결정할 수 있는 rgb함수와 투명도를 추가 지정할 수 있는 rgba함수 지원

rgb(r, g, b)
rgba(r, g, b, 투명도(0~1))

hsl함수

색조(hue)와 채도(saturation), 그리고 조도(lightness)를 각각 지정해 색상을 결정하는 함수
투명도를 추가로 지정하고자 할 때는 hsla함수 사용

hsl(색조값, 채도값(%), 조도값(%))
hsla(색조값, 채도값(%), 조도값(%), 투명도(0~1))

16진수 값

색상을 지정할 때 해시(#) 기호로 시작하는 여섯자리 16진수 값을 입력하는 방법
'RGB 색상코드'라고 부르기도 함'

#RRGGBB
#RRGGBBAA

0 1 2 3 4 5 6 7 8 9 A B C D E F (16 진수)

00 ~ FF : 255

opacity - 투명도 지정하는 또 다른 방법

opacity : 0 ~ 1 값

---

텍스트 꾸미기

font-family - 글꼴 바꾸기

요소에 포함된 텍스트의 글꼴을 정의할 때 사용하는 속성
한 개 이상의 글꼴 지정
입력한 글꼴 뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력하는 방식으로 속성값 지정 -> 가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용

p{
    font-family:Arial, Helvetica, sans-serif;
}

웹 폰트 사용하기

컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아 사용할 수 있는 '웹 전용 글꼴'
font-family를 이용한 글꼴 적용시 잘못 입력된 글꼴이거나 시스템에 설치되어 있지 않은 글꼴인 경우에는 요소에 적용되지않는데, 웹 폰트를 이용하면 그런 문제가 발생하는 것을 방지할 수 있음

속성명	설명	속성값 유형
font-size	글자 크기 지정	수치와 단위
font-weight	글자 두께 지정	별도의 키워드 (100~900)
line-height	행 높이 지정	수치와 단위
text-align	텍스트 정렬 방식 지정	별도의 키워드
text-decoration	텍스트 줄 긋기	별도의 키워드

웹 폰트 - 구글폰트

단위

단위	용도
rem	루트 요소(html태그)의 글자 크기를 배수로 계산해 적용하는 상대 단위
em	부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위

]]> https://velog.io/@yeojin_ni/HTML-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95 https://velog.io/@yeojin_ni/HTML-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95 Thu, 29 Aug 2024 08:33:46 GMT 태그

• HTML은 웹 페이지의 어느 부분에 텍스트가 있어야 할지, 어느 부분에 이미지가 있어야할지 등을 나타내는 역할
• HTML은 '태그(tag)'라 불리는 표기법을 사용해 맡은 역할을 수행
• 태그의 구성요소
- 태그의 이름(태그명)
- 여는 태그(시작 태그)
- 닫는 태그(끝 태그)
- 콘텐츠

콘텐츠 생략이 가능할 경우는 아래처럼

태그 작성시 주의점

• 태그 이름은 소문자
• 여는 태그와 닫는 태그 정확히 입력 (두개 세트로 보기!!)
• 태그의 콘텐츠로 또 다른 태그가 포함될 수 있음
• 들여쓰기 적절히 사용

요소의 구분

태그를 통해 표현하는 웹 요소들은 '블록 레벨 요소'와 '인라인 요소'로 구분할 수 있음

---

속성

태그의 부가적인 기능을 정의하는 것으로, 선택사항

• 시작 태그 내부에 정의
• 갯수 제한 X
• 태그에 추가할 속성이 여러개일 경우 각각 구분하기 위해 공백 사용
• 속성을 추가한 태그에 의해 표시되는 콘텐츠는 속성으로 인해 형태가 바뀔 수도 있음 (but, 겉으로 드러나지 않는 속성도 존재)

속성이 추가된 태그의 형태

단일 태그에도 속성 추가 가능

전역 속성

모든 HTML 태그에서 공통으로 사용할 수 있는 송성

전역 속성	설명
id	요소 고유한 이름을 부여하는 식별자 역할
class	요소를 그룹별로 묶을 수 있는 식별자 역할
style	요소에 적용할 CSS 스타일 선언
title	요소의 추가 정보를 제공하는 텍스트, 툴팁 제공

---

주석

• 주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에는 보이지 않는 코드
• 주로 코드에 대한 메모를 남기기 위한 용도로 사용
• 주석을 만들기 위해 총 7개의 기호 사용

]]> https://velog.io/@yeojin_ni/HTML-vs-HTML5-%EC%B0%A8%EC%9D%B4 https://velog.io/@yeojin_ni/HTML-vs-HTML5-%EC%B0%A8%EC%9D%B4 Thu, 29 Aug 2024 07:56:42 GMT HTML

하이퍼 텍스트와 콘텐츠를 표시해주는 언어

하이퍼 텍스트 마크업 랭귀지(HyperText Markup Language)

• HyperText - 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
• Markup - (콘텐츠를) 표시하다
• Language - 언어

웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어

HTML5

• 1991년 웹 창시자 팀 버너스리에 의해 최초로 제안
• 첫 등장 이후 오랜 시간이 흐른만큼, HTML은 만들어진 순간부터 지금까지 계속해서 기능을 개선하거나 추가해 가며 발전해 옴
• 그 과정에서 새로운 버전의 HTML이 계속해서 발표되어 왔는데, 현 시점에는 HTML5가 웹 개발 표준으로 인정받고 있음

HTML 문서

• HTML코드는 결국 텍스트
• 따라서 코드를 작성할 대 메모장으로 대표되는 텍스트 편집 전용 프로그램을 사용해 'HTML 문서'를 만들어야 함
• HTML 문서는 응용 프로그램에 따라 다른 형태로 열린다는 특징이 있음

]]> https://velog.io/@yeojin_ni/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9D%EC%B2%B4-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%AA%A8%EC%9D%8C.JIP https://velog.io/@yeojin_ni/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9D%EC%B2%B4-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%AA%A8%EC%9D%8C.JIP Fri, 23 Aug 2024 05:59:04 GMT

객체

자바스크립트는 객체 기반 언어 기능 + 속성

객체 종류

• 내장 객체
• 브라우저 객체 모델 (BOM, Browser Object Model)
• 문서 객체 모델 (DOM, Document Object Model)

날짜 관련 메서드

날짜 정보를 가져올 때(GET)	날짜 정보를 수정할 때(SET)
getFullYear() - 연도 정보 가져옴	setFullYear() - 연도 정보 수정
getMonth() - 월 정보 가져옴 (현재 월 - 1)	setMonth() - 월 정보만 수정 (월 - 1)
getDate() - 일 정보 가져옴	setDate() - 일 정보만 수정
getDay() - 요일 정보 (일:0 ~ 토:6)	'요일'은 날짜를 바꾸면 자동으로 바껴서 setDay 없음
getHours() - 시 정보 가져옴	setHours() - 시 정보만 수정
getMinutes() - 분 정보 가져옴	setMinutes() - 분 정보만 수정
getSeconds() - 초 정보 가져옴	setSeconds() - 초 정보만 수정
getMilliseconds() - 밀리초 정보 가져옴 (1/1000초 단위)	setMilliseconds() - 밀리초 정보만 수정
getTime() - 1970년 1월 1일부터 경과된 시간 밀리초 표기	setTime() - 1970년 1월 1일부터 경과된 시간 밀리초 수정
toGMTString() - GMT 표준 표기 방식으로 문자형 데이터로 반환	toLocaleString() - 운영 시스템 표기 방식으로 문자형 데이터로 반환

수학 메서드 및 상수

종류	설명
Math.abs(숫자)	숫자의 절댓값 반환
Math.max(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 큰 값 반환
Math.min(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 작은 값 반환
Math.pow(숫자, 제곱값)	숫자의 거듭제곱값 반환
Math.random()	0~1 사이 난수 반환
Math.round(숫자)	소숫점 첫째 자리에서 반올림하여 정수 반환
Math.ceil(숫자)	소숫점 첫째 자리에서 올림하여 정수 반환
Math.floor(숫자)	소숫점 첫째 자리에서 내림하여 정수 반환
Math.sqrt(숫자)	숫자의 제곱근 값 반환
Math.PI	원주율 상수 반환

Math.random() 정수 반환하려면

Math.floor(Math.random()*(최댓값 - 최솟값 + 1)) + 최솟값;

Math.floor(Math.random()*11) // 0~10 정수 반환

배열 객체의 메서드 및 속성

종류	설명
join(연결문자)	배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환
reverse()	배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환
sort()	배열 객체의 데이터를 오름차순으로 정렬
slice(index1, index2)	배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴
splice	배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터 삽입 가능
concat()	2개의 배열 객체를 하나로 결합
pop()	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터 삭제
push(new data)	배열 객체의 마지막 인덱스에 새 데이터 삽입
shift()	배열 객체에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터 삭제
unshift(new data)	배열 객체의 가장 앞 인덱스에 새 데이터 삽입
length	배열에 저장된 총 데이터 개수 반환
forEach	배열의 각각의 요소에 대한 콜백을 호출

문자열 객체의 메서드 및 속성

종류	설명
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자 반환
indexOf("찾을 문자")	문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자 인덱스 번호 반환, 찾는 문자가 없으면 -1 반환
lastIndexOf("찾을 문자")	문자열 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자 인덱스 번호 반환, 찾는 문자가 없으면 -1 반환
match("찾을 문자")	문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자 반환, 찾는 문자 없으면 null 반환
replace("바꿀 문자","새 문자")	문자열 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환
search("찾을 문자")	문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호 반환
slice(a,b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자 반환
substring(a,b)	a 인덱스부터 b인덱스 이전 구간의 문자 반환

window 객체의 매서드 종류

종류	설명
open("URL","새창이름","새창옵션")	URL페이지를 새창으로 나타냄
alert(data)	경고 창을 나타내고 데이터 보여줌. 방문자가 [확인] 버튼 누르면 alert()를 사용한 다음 위치의 코드 수행
prompt("질문":"답변")	질문과 답변으로 질의응답 창 나타냄
confirm("질문 내용")	질문 내용으로 확인이나 취소창 나타냄. [확인]버튼 누르면 true 반환, [취소]버튼 누르면 false 반환
moveTo(x, y)	지정한 새 창의 위치 이동
resizeTO(width, height)	지정한 새 창의 크기 변경
setInterval(function(){코드},일정 시간 간격)	지속적으로 일정한 시간 간격으로 함수 호출 및 코드 실행
setTimeout(function(){코드},일정 시간 간격)	단 한번 일정한 시간 간격으로 함수 호출하여 코드 실행

Element.classList

classList 속성 - 웹 요소로부터 클래스 콜렉션을 반환하는 속성

<p class="hello greet good>안녕하세요</p>

// javascript
const p = document.querySelector('p')
console.log(p.classList)

• 결과

  ['hello', 'greet', 'good', value: 'hello greed good;]
  0: "hello"
  1: "greet"
  2: "good"
  length: 3
  value: "hello greet good"

관련 메소드

메소드	기능	사용 예
add	지정한 클래스 값 추가	add("new_class")
remove	지정한 클래스 값 제거	remove("old_class")
item	인덱스를 이용해 클래스 값 반환	item(1)
toggle	클래스 값 토글링(on/off)	toggle("some_value")
contains	지정한 클래스 값 존재 여부 확인	contains("is_contains")
replace	기존 클래스를 새 클래스로 대체	replace("old","new")

]]> https://velog.io/@yeojin_ni/ORCLE%EA%B3%BC-MYSQL%EC%9D%98-%EC%B0%A8%EC%9D%B4 https://velog.io/@yeojin_ni/ORCLE%EA%B3%BC-MYSQL%EC%9D%98-%EC%B0%A8%EC%9D%B4 Tue, 20 Aug 2024 07:52:27 GMT ORCLE

미국의 오라클 회사에서 제작한 세계 점유율 1위 데이터베이스 관리 시스템이며 현재 유닉스 체제에서 가장 많이 사용되는 DBMS

장점

다른 DB보다 고성능 트랜잭션 처리

COST 비용을 최소화 하기위해 테이블과 인덱스 분리

Multiple Databases 튜닝이 가능

다수의 사용자가 동시에 접근이 가능

변경 plan을 작성하고 실제 구현하기 전에 변경사항의 효과를 볼 수 있음

생산 시스템을 방해하지 않음

오류가 발생하면 설정되어 있는 계정 및 이메일로 연락이 옴

경고는 예정된 가종 정지 시간 동안 차단 될 수 있음

DBMS 실행 컴퓨터 | 서버 역할 컴퓨터 | DB응용 프로그램 실행 컴퓨터를 다르게 분산처리

단점

비쌈 (COST 문제)

기능이 많아서 진입장벽이 높음

높은 하드웨어 사양 필요

MYSQL

전세계적으로 가장 널리 사용되고 있는 오픈 소스 데이터베이스이며, MySQL AB사가 개발하여 배포 및 판매하고 있는 데이터베이스 관리툴

장점

오직 1MB의 RAM만 사용할 만큼 용량차지가 매우 적음 -> 매우 적은 오버헤드 사용

처리속도가 매우 빠르고 대용량 데이터 처리에 용이

다른 데이터 관리 툴에 비해 구조가 간단하여서 사용하기 편함

다양한 프로그래밍 언어와 통합할 수 있음

거의 모든 운영체제 사용을 지원

확장이 가능하고 유연한 구조

무료사용 가능 (오픈소스 -> 무료 | 상업용 -> 유료)

단점

복잡한 쿼리문은 성능 저하의 원인

트랜잭션 지원이 완벽하지 않음

용자정의 함수의 사용이 쉽지 않고 유연한 처리가 이루어 지지 않음

구조적 차이

ORACLE - DB 서버가 통합된 하나의 스토리지를 공유하는 방식 MYSQL - DB 서버마다 독립적인 스토리지를 할당하는 방식

조인방식의 차이

ORACLE - 중첩 루프 조인, 해시 조인, 소트 머지 조인 방식을 제공 MYSQL - 중첩 루프 조인 방식을 제공

확장성의 차이

ORACLE - 별도의 DBMS을 설치해 사용할 수 없음 (별도 DBMS X) MYSQL - 별도의 DBMS을 설치해 사용할 수 있음 (별도 DBMS O)

메모리 사용율의 차이

ORACLE - 메모리 사용율이 커서 최소 수백MB 이상이 되어야 설치 가능 MYSQL - 메모리 사용율이 낮아서 1MB 환경에서도 설치가 가능

파티셔닝

ORACLE - Local Partion Index, Global Partion Index를 지원 MYSQL - Local Partion index만 지원

힌트방식

ORACLE - 힌트에 문법적 오류가 있으면 힌트를 무시하고 쿼리를 수행 MYSQL - 힌트에 문법적 오류가 있으면 오류를 발생

SQL구문의 차이

NULL값 확인 함수

ORACLE - NVL MYSQL - IFNULL

현재 날짜 및 시간 확인 함수

ORACLE - SYSDATE MYSQL - DATE()

날짜 포맷 변환

Oracle - TO_CHAR MySQL - DATE_FORMAT

요일 변환의 숫자 범위

Oracle - 일,월,화,수,목,금,토를 1,2,3,4,5,6,7로 인식 MySQL - 일,월,화,수,목,금,토를 0, 1,2,3,4,5,6로 인식

문자와 문자 합치는 방법

Oracle - '' MySQL - COMCAT

형변환 방법

Oracle - TO_CHAR MySQL - CAST

페이징 처리

Oracle - ROWNU BETWEEN 0 AND 10 MySQL - LIMIT

시퀀스 사용시 다음 번호 불러오는 방법

Oracle - 시퀀스명.NEXTVAL MySQL - 시퀀스명.CURRVAL

]]>