JavaScript
1.내가 보려고 정리하는 HTML 요약
0. 웹사이트 제작시 고려 사항 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는
2.내가 보려고 정리하는 CSS 요약
1. css 연결 방법 ① Inline StyleSheet - html 요소에 직접 style 작성 ② Internal StyleSheet - html 문서의 head 영역에 style 작성 ③ External StyleSheet - 외부 스타일 시트에 따로 작성
3.Git 파헤치기
1. Git을 사용하는 이유 효율적인 협업이 가능해진다. 버전 관리가 쉬워진다. 2. Git의 특징 가지치기와 병합이 가능하다. 대부분의 작업이 로컬에서 진행되기 때문에 가볍고 빠르다. 여러 사람이 동시에 분산 작업이 가능하다. 프로젝트의 무결성을 보장할 수 있다.
4.[JavaScript] 기초 문법
객체 기반의 스크립트 언어로, 동적인 웹사이트 제작을 위해 사용하는 프로그래밍 언어이다.변수는 말 그대로 변하는 수라는 의미로, 프로그래밍할 때 계속해서 변하는 데이터를 담는 공간이다.① 변수 선언 - 데이터를 담는 공간을 생성자바스크립트의 변수는 var, let, c
5.[JavaScript] 내장 객체와 브라우저 객체
내장 객체(Built-in Object)란 브라우저의 자바스크립트 엔진에 내장된 객체를 말한다. 필요한 경우 객체를 생성해서 사용할 수 있으며, 내장 객체로는 문자, 날짜, 배열, 수학, 정규 표현 객체 등이 있다.
6.[JavaScript] DOM
문서 객체 모델 (Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서의 구조, 스타일, 내용 등을 변경할 수 있게 돕는
7.[JavaScript] Node
HTML DOM은 노드(node) 라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.HTML 문서의 정보는 노드 트리(node tree) 라고 불리는 계층적 구조에 저장된다. 이러
8.[JavaScript] Event
이벤트란 웹페이지가 사용자와 상호작용하면서 발생하는 동작들을 의미한다. (클릭, 마우스 이동 ...) 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.이벤트 핸들러는 이벤트를 처리하기 위한 함수와 연결
9.[JavaScript] className / classList
className : 클래스 리턴classList : 클래스 리턴classList.item(index) : 특정 index의 class item 하나씩 리턴className = '이름' : 직접 값을 지정하여 클래스 설정classList.replace('변경전이름',
10.[JavaScript] ES6 문법 정리📑
\- var은 재정의와 재선언 모두 가능하다.\- let은 가변변수로 재정의가 가능하지만 재선언은 불가능하다.\- const는 불변변수로 재선언과 재정의 모두 불가능하다.\* 재선언: 똑같은 이름의 변수를 다시 만드는 것\* 재정의: 값이 지정된 변수에 값을 바꾸려는
11.[JavaScript] 실행 컨텍스트
1. 자바스크립트 코드의 실행 자바스크립트 엔진은 코드가 없어도 기본적으로 실행환경(=실행 컨텍스트, Execution context)을 초기화 한다. ① this ② 변수를 담는 변수 객체(Variable Object) ③ Scope chain 이 3가지를 초기화 한
12.[JavaScript] innerHTML, innerText, textContent 차이
innerHTML, innerText, textContent 속성은 텍스트를 읽어오고 설정할 수 있다는 점에서 비슷해보이지만, 조금씩 다른 차이가 있고 이 차이를 잘 알고 써야한다.먼저 innerHTML은 'Element'의 속성으로, element내에 포함 된 HTM
13.[JavaScript] 자바스크립트 비동기식 처리
동기식 (Synchronous) 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식. 즉, 한 번에 여러 작업을 처리하지 않고 하나만 처리함.비동기식 (Asynchronous)먼저 실행된 작업이 끝날 때까
14.[JavaScript] UI Event
• 클릭 관련click : 요소 위에서 마우스를 클릭했을 때 이벤트 발생dbclick : 요소에 마우스를 더블클릭했을 때 이벤트 발생contextmenu : 요소 위에서 마우스 오른쪽을 클릭했을 때 이벤트 발생mouseup : 요소 위에서 마우스를 떼었을 때 이벤트 발
15.[Node.js] 입문하기
Web 1.0 시대의 브라우저는 단순히 정보를 뿌리기만 하는 정도의 매우 정적인 체계였다. 그러다가 Web 2.0 시대에 들어서면서 상호간의 양방향 통신이 가능해졌고, 이 시기를 기점으로 무시 받던 자바스크립트의 중요도가 상승했다.2008년 구글에서 Chrome의 V8
16.[TypeScript] 기본 문법
0. 타입스크립트란❔ 타입스크립트는 자바스크립트에 타입을 부여한 언어로, 코드 작성 단계에서 타입을 체크해 타입 에러를 방지할 수 있다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해야 하며, 컴파일러를 통해 자바스크립트와 100% 호환
17.[JavaScript] Form
폼(form)은 body 객체(document.body)와 마찬가지로 document의 직계 객체로 설계되어 있다. 다만, 문서 내에 여러 개의 폼이 존재할 수 있기 때문에 document.forms 유사배열에 담기게 된다. 따라서, DOM으로 form 요소에 접근한
18.[Node.js] NPM과 Express
NPM은 Node Package Manager의 약자로, Node.js로 만들어진 모듈을 온라인 저장소로부터 설치 및 관리가 쉽도록 도와주는 패키지 매니저이다.npm을 사용하면 자신이 만든 모듈을 다른 사람들이 쓸 수 있도록 공유할 수도 있고, 다른 사람이 만든 모듈을
19.[JavaScript] 문서 생명주기 이벤트, defer/async 스크립트
DOMContentLoaded 이벤트는 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 즉, DOMContentLoaded 핸들러는 문서가 로드되었을 때 실행된다. 다만, 이미지 파일이나 스타일시트 등의 로드는 기다리지 않는다는 특징이 있다.DO
20.[JavaScript] 이벤트 루프와 큐
자바스크립트의 비동기처리에서 이벤트 루프와 태스크 큐에 대해서 간략하게 언급하고 넘어갔었다. Event Loop는 브라우저에 존재하는 여러 Queue들에 우선순위를 부여해 어떤 task를 먼저 수행할지 결정한다. 그런데 사실 우리가 알고 있던 태스크 큐 외에도 다른 큐
21.CSR과 SSR, SPA와 MPA
CSR(Client Side Rendering)은 렌더링이 클라이언트 측에서 발생한다.CSR은 유저가 웹사이트에 방문하면 브라우저가 서버에 콘텐츠를 요청하고 서버는 빈 뼈대만 있는 html을 응답으로 보내준다. 이 때문에 처음에 접속하면 빈 화면만 보인다는 문제점이 있
22.원시값과 참조값, 얕은 복사와 깊은 복사
앞서 말한 HTTP의 특징으로 인해 쿠키, 세션 외에도 JWT 인증 방식을 사용한다. JWT(Json Web Token) 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미합니다. JWT 정보를 request에 담아 사용자응 정보 열람, 수정 등 개인적