할머니의 콤퓨타 도전기

Command Palette: shift + command + P Quick Open (해당하는 파일 빠르게 검색 및 이동 가능): command + P User Settings: command + , Toggle Sidebar: command + B Toggle Terminal: control + ` Keyboard Shortcuts: command + K + S Beginning/End of file: command + up/down Beginning/End of line: command + left/right Move Word: option + left/right Select Word: option + shift + left/right Copy Line: command + C Cut Line: co..

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다. 하나의 박스는 이처럼 네 영역으로 이루어진다. Content, Padding, Border, Margin 영역이 있다. content area 글이나 이미지, 비디오 등 요소의 실제 영역을 포함한다. 배경색과 배경 이미지를 가지고 있기도 한다. box-sizing 속성의 값이 기본 값인 content-box block level의 요소인 경우, 컨텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설..

classList 자바스크립트에서 클래스 이름을 조작하는 것 클래스를 조작하는 다양한 메서드를 쓸 수 있다 classList.add(): 클래스를 필요에 따라 삽입 classList.remove(): 클래스를 필요에 따라 제거 classList.contains(): 값이 존재하는지 체크 (True/False) classList.toggle(): 클래스 값이 있는지 체크하고 없으면 더하고 있으면 제거 function updateItems(items, key, value) { items.forEach((item) => { if (item.dataset[key] === value) { item.classList.remove("invisible"); } else { item.classList.add("invis..

Axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 브라우저 환경: XMLHttpRequests 요청 생성 Node.js 환경: http 요청 생성 백엔드랑 프론트엔드 통신을 쉽게 하기 위해 Ajax와 더불어 사용 Promise(ES6) API 지원 요청/응답 차단 요청/응답 데이터 변환 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변환 HTTP developer.mozilla.org/ko/docs/Web/HTTP HTTP | MDN 하이퍼텍스트 전송 프로토콜(HTTP)은 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. 웹 브라우저와 웹 서버간의 커뮤니케이션을위해 디자인되었지만, 다..

Material-UI React 개발에서 쉽게 사용할 수 있는 UI Framework https://material-ui.com/ Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com 패키지 다운로드 npm install @material-ui/core // with npm yarn add @material-ui/core // with yarn SVG Icons 설치 npm install @material-ui/icons // with npm yar..

ES6 shorthand property names https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer 객체 초기자 - JavaScript | MDN 객체는 new Object(), Object.create() 또는 리터럴 표기법 (initializer 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리 developer.mozilla.org { const jiwon1 = { name: 'jiwon', age: '24', }; const name = 'jiwon'; const age = '24'..