開發時習之

React의 작동원리 Single Page Application - 하나의 html 파일만 보여주고, 내부의 요소는 모두 자바스크립트를 활용해서 변경시키는 것 - 페이지가 변경될 때마다 무조건 새롭게 html, css 파일을 표시해야했던 예전 방식보다 훨씬 효율적! Virtual Dom with Diff Algorithm - React 는 가상으로 html 요소들을 생성하고 (가짜 DOM), 현재 화면에 표시되는 html 요소들 (진짜 DOM) 과 비교해서, 달라진 부분만 다시 그리는 방식으로 렌더를 진행 요소가 달라질 때마다 새롭게 화면을 다시 그리는 것이 아니라, 달라진 부분만 알아서 React 가 다시 그려줌 Component - React 는 component 라는 것을 작성해서, 조합하는 방식으..

margin - 요소의 외부 여백(공간)을 지정하는 단축 속성 - 음수사용 가능 - 기본값: 0 (외부 여백이 존재하지 않음) - auto 값 사용가능(브라우저가 여백을 자동 계산), 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용가능 - 단위: px, em, vw 등 단위로 지정 (%도 사용가능하나 가로너비에만 지정할수 있고 사용이 드물어서 자주 사용되진 않음) .item { width: 100px; height: 100px; background-color: green; border: 1px solid red; margin: 10px; } - 단축 속성: margin은 값을 하나부터 4개까지 나눠서 지정할 수 있음 .item{ margin: 0; /* top, right, bottom, left 모..

px - 픽셀: 하나의 디바이스가 표시할 수 있는 화면의 점 - 화면해상도 표시에도 사용됨 (ex. 1920 x 1080 해상도를 가진 모니터) - 디바이스 화면과 상황에 따라 조금 차이가 있기 때문에 절대단위라고 말할 수는 없음 % - 상대적 백분율 - 기준이 있고 그에 따라 상대적인 비율을 나타내는 단위 ex) 부모요소의 width:300px; 이라면 자식요소가 width:50%; 라고 했을 때 150px을 말함 .parent { width: 300px; height: 200px; background-color: royalblue; border: 1px solid; } .child { width: 50%; /* 부모요소 기준 50% 줄어듬 */ height:50%; background-color: o..

기본속성 - 속성을 HTML에서는 Attributes, CSS와 Js에서는 Properties라고 함 - 요소마다 이미 들어있는 기본적인 속성의 값(기본값)을 가지고 있고 별도로 명시하지 않아도 됨 width, height - 요소의 가로/세로 너비 - 기본값: auto (브라우저가 자동으로 너비를 계산) - 단위: px, em, vw 등 .box { width: 100px: height: 100px; background-color: orange; } span - 대표적인 inline 요소 - 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 - 기본값: auto (포함한 콘텐츠 크기만큼 자동으로 줄어듬) - 가로, 세로 사이즈를 명시할 수 없음, ex) width: 100px; heigh..

Queue/Deque Queue : 한 방향에서 입력이 이뤄지고, 그 반대편 방향에서 출력이 이루어지는 자료구조 큐의 구조는 스택과 다르게 '선입선출'의 구조를 가지고 있음 (먼저 들어온 것이 먼저 나가는 구조) 대기열은 양쪽 끝에 있으며 한쪽은 데이터를 삽입(enqueue), 반대쪽은 제거(dequeue)에 사용 예) 이메일, 쇼핑몰 주문, 콜센터 전화, 은행 대기 번호표 장단점 데이터접근, 삽입, 제거가 빠름 중간 데이터에 대한 접근이 불가능 큐의 추상자료형 enqueue: 큐의 맨 뒤에 요소 삽입 dequeue: 큐의 맨 앞에 요소 삭제 peek: front에 위치한 데이터 참조 front: 큐의 맨 앞의 위치 인덱스(프론트 데이터 출력) rear: 큐의 맨 뒤의 위치 인덱스(레어 데이터 출력) D..

CSS 개요 기본문법, 주석 스타일(CSS)의 기본 문법: 선택자 {속성: 값;} 선택자(Selector) : 스타일(CSS)을 적용한 대상 속성(Property) :스타일(CSS)의 종류 값(Value): 스타일(CSS)의 적용되는 실제 값 속성과 값사이는 :(콜론)으로 구분 스타일 범위의 시작과 끝은 {}(중괄호)를 사용 주석은 /**/를 이용 (브라우저는 이 범위를 해석하지 않음) div {color: red;} /* 종류(속성)은 color, 값은 red */ div {margin: 20px;} /* margin: 요소 외부 여백 */ div {padding: 10px;} /* padding: 요소 내부 여백 */ /* 들여쓰기(indent)와 내어쓰기(outdent)로 가독성있게 작성함 */ d..

Emmet 이란? Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. Emmet은 콘텐츠 지원을 통해 HTML, XML, XSLT 및 기타 구조화된 코드 형식으로 고속 코딩 및 편집을 허용하는 텍스트 편집기용 플러그인 세트입니다. (CSS에서도 사용가능) 기능: 1. Element (요소) 생성 - div(탭 or 엔터) → 2. Nesting Operators(중첩 연산자) - 자식요소 생성 ( > 사용) div>ul>li - 형제요소 생성 ( + 사용) div+p+..

input 요소에 keydown 이벤트를 추가하고 텍스트 입력 후 Enter키를 눌렀을 때 const inputEl = document.querySelector('.create input'); const buttonEl = document.querySelector('.create button'); inputEl.addEventListener('keydown', event => { if(event.key === 'Enter'){ console.log(event.key) buttonEl.click(); // 저장 } }); 아래와 같이 콘솔 로그에는 Enter가 두번 찍혔고 저장도 두 번 실행되었다. 한글 입력시에만 해당되는데 웹은 영어를 기준으로 동작하나 한글을 입력시 한글을 처리하는 도중에 처리 전과 후..

1. - 문서의 전체 범위 : HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할 2. - 문서의 정보를 나타내는 범위: 웹브라우저가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일위치, 스타일(CSS)같은, 웹페이지의 보이지 않는 정보를 작성하는 범위 html 문서의 제목을 정의, 웹브라우저 탭에 표시됨 외부 문서를 가져와 연결 (대부분 CSS파일), 필수 속성으로 rel, href가 있음 - rel="가져올 문서와의 관계" href="가져올 문서의 경로" 스타일(CSS)를 HTML문서 안에서 작성하는 경우 사용 자바스크립트 파일을 선언, 속성으로 src(Source)가 있음 html 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에 제공, name(정보의 종류)..

 맥에서의 단축키 ⌘ : command ⇧ : shift ⌃ : control ⌥ : Option or Alt 코드 정리(전체): ⇧ + ⌥ + F 코드 정리(블록): ⌘ + K, ⌘ + F (블록씌운 부분만 정리) 터미널 열기/닫기: ⌃ + `(grave) 탐색기창 열기/닫기: ⌃ + B 파일검색: ⌃ + P 한 줄 복사: ⇧ + ⌥ + ↑, ↓ 한 줄 삭제: ⇧ + ⌃ + K / ⌃ + X 같은 단어 선택: ⌃ + D 같은 단어 전체 선택: ⇧ + ⌃ + L 열 편집: ⌃ + ⌥ + ↑, ↓ 모든 라인 끝에 커서생성(블록): ⇧ + ⌥ + I