JavaScript
-
ES6+ | Spread Operator 전개 연산자JavaScript/ES6+ 2020. 3. 6. 15:26
Spread Operator 전개 연산자 나열형 자료를 추출하거나 연결할 때 사용하는 연산자 배열, 객체, 변수명 앞에 마침표 세 개(...) 입력 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 사용 가능 기본값 지정 가능 Spread Operator 배열, 함수 인자 표현식 배열에 저장된 순서대로 요소 나열 기본값을 지정하면 해당 변수에 저장될 값이 없을 때 기본값이 저장됨 const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4] // Destructuring(구조 분해 할당)과 함께 사용 const [first, second, thi..
-
ES6+ | Template Literal 템플릿 문자열JavaScript/ES6+ 2020. 3. 6. 14:42
Template Literal ES6에 새로 도입된 문자열 표기법 Template Literal 특징 백틱(``) 사용 내부에 큰따옴표(""), 작은따옴표('') 혼용 가능 여러 줄에 걸쳐 문자열 작성 가능 줄바꿈을 그대로(enter) 표현할 수 있음 특수 기호 $를 사용해서 변수 또는 식 포함 가능 예제 const t1 = `"안녕"이라고 '안녕'`; console.log(t1); // "안녕"이라고 '안녕' const t2 = `줄바꿈을 이렇게 편하게 할 수 있습니다.` console.log(t2); /* 줄바꿈을 이렇게 편하게 할 수 있습니다. */ const v1 = `제 나이는 ` const v2 = 20; const t3 = `${v1}${v2}살입니다.` console.log(t3); // ..
-
ES6+ | let & constJavaScript/ES6+ 2020. 3. 4. 16:56
let & const ES6에 새로 도입된 변수 선언 키워드 const는 불변 변수를 let은 가변 변수를 선언할 때 사용 var ES5까지 변수를 선언할 수 있었던 유일한 키워드 var 특징 함수 레벨 스코프(Function-level scope) 함수의 코드 블록을 변수 스코프로 함 즉, 함수 외부에서 생성한 변수는 모두 전역 변수 for 문의 초기화식에서 선언한 변수(ex. i)를 for문 외부에서 참조 가능 var 키워드 생략 가능 의도치 않은 전역 변수 양산 가능성이 있음 변수 중복 선언 가능 원치 않게 변수의 값이 변경될 가능성이 있음 변수 호이스팅 변수를 선언하기 전 문장에서도 변수를 참조할 수 있음 ※ 전역 변수는 사용이 편리한 반면 유효 범위가 넓어서 어디에서 사용할 것인지 확인하기가 어..
-
ReactJS | Component StylingJavaScript/React JS 2020. 2. 28. 11:06
Component Styling CSS Styling 컴포넌트.js 파일에서 컴포넌트.css 파일을 import 하는 형식 중복되는 클래스명이 있으면 안 됨 여러 개의 컴포넌트들은 웹팩을 통해 하나로 합쳐지는데 중복되는 클래스명이 있으면 둘 중 하나가 덮어 쓰여짐 SMACSS, BEM 과 같은 CSS 방법론을 적용할 수도 있고 CSS Selector를 활요하는 방법도 있음 CSS Selector CSS에서 스타일링을 원하는 html 요소(element, tag)를 선택하는 패턴 Selector 설명 .class class="class"인 요소를 전부 선택 .class1.class2 class1과 class2의 요소를 전부 선택 .class1 .class2 class1 내부의 class2 요소 전부 선택 ..
-
ReactJS | Component 개요JavaScript/React JS 2020. 2. 28. 10:53
Component 리액트의 기본 동작 단위라고 할 수 있음 컴포넌트는 재사용 가능하게 작성되어야 함 부모 컴포넌트로부터 Props를 입력받아서 리액트 요소(React Element)를 반환하는 형태로 동작 컴포넌트를 작성하기 위해서는 컴포넌트.js 파일 상단에 import React from "react"; 를 작성해야 함 컴포넌트는 주로 기능별로 나누어서 작성 es) 메인 컨테이너, 헤더, 메인 컨텐츠, 컨텐츠 아이템 Component hierachy 클래스형 Component HTML JSX // React.Component를 상속하는 HelloReact 클래스형 컴포넌트 작성 class HelloReact extends React.Component{ render(){ /* render: 그림을 그리..
-
ReactJS | 개요 및 JSX 문법JavaScript/React JS 2020. 2. 28. 10:39
REACT JS UI를 효과적으로 구축하기 위해 사용하는 JavaScript기반 오픈 소스 라이브러리 React 특징 선언적(Declaretive): 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행 컨포넌트 기반(Component-Based): 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere): 기존의 소스코드를 불필요하게 작성하지 않고 새로운 기능 개발 가능, 재사용성이 높음 프론트엔드를 객체 지향적으로 개발할 수 있도록 하는 라이브러리 클라이언트 렌더링뿐만 아니라 서버 사이드 렌더링도 지원 클라이언트 렌더링 : 필요한 데이터를 그때 그때 받아오는 것 서버 사이드 렌더링: 데이터를 서버..
-
JavaScript | With문JavaScript/JavaScript 2020. 2. 18. 17:33
with 명령문의 스코프 체인을 확장해주는 구문 특정 객체를 여러 번 사용하는 경우 객체명을 생략할 수 있도록 도와줌 형식 with(Expression){ statement; } ※ Expression 객체의 이름은 생략하고 메소드나 변수명만 사용이 가능해짐 예제 let a, b, c; let d = 5; with(Math){ a = d * random(); b = d * PI; c = sqrt(d); } console.log(a); // 2.5252127106198294 console.log(b); // 15.707963267948966 console.log(c); // 2.23606797749979 명령문의 스코프 체인을 확장시켜서 객체명을 반복적으로 작성하지 않도록 도와주는 with문에 대해 알아보..
-
JavaScript 익명함수(Anonymous function)JavaScript/JavaScript 2019. 12. 26. 21:44
191226 수업 내용 정리 익명함수(Anonymous function) ▶ 이름을 지정하지 않은 함수 함수 이름이 없어도 호출 가능 → 변수명으로 함수 호출 일반적인 함수와 달리 익명함수는 선언 이후에만 호출 가능 (호이스팅X) 호출) 변수명() or 변수명(매개변수~) ※ 호이스팅(hoisting) : 함수 선언 앞에서도 함수를 호출할 수 있게 해주는 기능 형식 var 참조변수명 = function() { 자바스크립트 코드 }; 참조변수명(); 예제 var test = function() { document.write("이름이 없는 함수를 호출합니다."); } test(); 익명함수는 호이스팅이 되지 않는다는 점을 꼭 기억해 주시기 바랍니다.