전체 글
-
React DOMReact 2022. 2. 25. 11:21
돔(DOM) 이란? DOM(Document Object Model)은 문서 객체 모델이라는 뜻이다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 객체를 의미한다. 즉 DOM이란 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. ⇒ DOM은 HTML과 스크립팅 언어 (JavaScript)를 서로 이어주는 역할이다. 자바스크립트는 document 라는 전역 객체를 통해 HTML 태그에 접근할 수 있다. document 객체는 웹 페이지 그 자체를 의미한다. 또한, document 객체의 상위에 위치한 window라는 객체로도 접근이 가능하다. 가상 돔(Virtual DOM) 이란? 실제 DOM에 ..
-
React 설치 (2022)React 2022. 2. 25. 11:10
설치해야 할 프로그램 Node.js Webpack과 Babel 등의 도구들은 자바스크립트 런타임인 Node.js 기반으로 만들어져 있으며 이 도구들을 사용하기 위해서 설치해야 한다. LTS 버전으로 설치하면 된다. yarn yarn은 조금 개선된 버전의 npm(node package manager)으로 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위해 설치한다. 💡 npm Node.js를 설치할 때 자동으로 설치되는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 버전 관리를 할 때 사용한다. yarn 설치 $ npm install -g yarn 에디터 원하는 에디터를 설치하면 된다. (현재 VS code 사용중) React 설치 $ npx create-react-app 폴더이름
-
논리 연산자JavaScript 2022. 2. 21. 18:11
논리 연산자 논리 연산자란? 논리식을 판단하여 참(true), 거짓(false)를 반환한다. 자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있다. || (OR) alert( true || true ) // true alert( false || true ) // true alert( true || false ) // true alert( false || false ) // false 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다. 왼쪽에서 오른쪽으로 연산한다. && (AND) alert( true && true ); // true alert( false && true ); // false alert( true && false );..
-
Template literalsJavaScript 2022. 2. 21. 18:07
Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 표현식/문자열 삽입, 여러줄의 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다. 런타임 시점에서 일반 자바스크립트 문자열로 처리/변환된다. Syntax `string text` `string text line 1 string text line 2` // "string text line 1\\n" + "string text line 2"와 같음 `string text ${expression} string text` tag `string text ${expression} string text` 템플릿 리터럴은 '' 나 "" 대신 **백틱(``)**을 사용한다. ${}를 사용하여 표현식을 표기할 수 있..
-
[JavaScript] 이상한 문자 만들기 - Level 1알고리즘 문제/프로그래머스 2022. 2. 14. 18:47
코드 function solution(s) { return s.split(" ").map(v => v.split('').map((v, i) => { if (i % 2 === 0) return v.toUpperCase() return v.toLowerCase() }).join('')).join(' ') } 입력받은 문자열 s를 split을 사용해 공백(” “)을 기준으로 쪼개 배열에 넣는다. ⇒ [ 'try', 'hello', 'world' ] [ 'try', 'hello', 'world' ]에 각각 split을 사용해 한글자씩 쪼갠다. ⇒ [ [ 't', 'r', 'y' ], [ 'h', 'e', 'l', 'l', 'o' ], [ 'w', 'o', 'r', 'l', 'd' ] ] 짝수번째 글자에는 대문자..
-
데이터 타입JavaScript 2022. 2. 14. 14:14
데이터 타입 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 기본 타입으로 제공하고 있다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다. 원시 타입 숫자(number) 자바스크립트는 다른 언어와 달리 정수와 실수를 따로 구분하지 않고 모든 수를 실수로 표현하며, 매우 큰 수나 작은 수를 표현할 경우 e 표기법을 사용할 수 있다. let firstNum = 10 // 소수점을 사용하지 않은 표현 let secondNum = 10.00 // 소수점을 사용한 표현 let thirdNum = 10e6 // 10000000 let fourthNum = 10e-6 // 0.00001 1. 숫자를 변..
-
var, let, const 차이JavaScript 2022. 2. 14. 10:27
var, let, const 차이 var (변수 재선언 가능) var variable = '변수선언' console.log(variable) // 변수선언 var variable = '변수선언2' console.log(variable) // 변수선언2 변수 선언을 여러번해도 에러없이 출력되어 이를 보완하기 위해 ES6부터 let, const 개념 추가되었다. console.log(variable) // undefined var variable = '변수선언' 호이스팅 (끌어올린다 라는 의미로 변수와 함수를 소스의 맨 위치로 이동하는 것)이 가능하다. let (변수 재선언 불가능, 변수 수정 가능) let variable = '변수선언' console.log(variable) // 변수선언 let vari..