분류 전체보기 108

리액트 ES6 문법 - 라이브러리 의존성 관리

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 라이브러리 의존성 관리 ⇒ 기존에는 라이브러리 / 모듈 관리가 불편했다…. 기존 자바스크립트의 라이브러리 의존성 관리 방법 알아보기 기존에는 라이브러리나 모듈의 의존성을 script 엘리먼트를 이용해 관리했음 엘리먼트의 선언 순서가 바뀌면 오류가 발생하는 등 문제가 많았음 ES6의 라이브러리 의존성 관리 방법 알아보기 import MyModule fr..

React 2024.02.01

백준 2579 C++

https://www.acmicpc.net/problem/2579 2579번: 계단 오르기 계단 오르기 게임은 계단 아래 시작점부터 계단 꼭대기에 위치한 도착점까지 가는 게임이다. 과 같이 각각의 계단에는 일정한 점수가 쓰여 있는데 계단을 밟으면 그 계단에 쓰여 있는 점 www.acmicpc.net 정답 코드 #include #include using namespace std; int main() { int N, arr[300], stair[300], dp[300] = {0}; cin >> N; for(int i=0 ; i> arr[i]; } for(int i=0 ; i

백준 2024.01.31

리액트 ES6 문법 - 객체 확장 표현식과 구조 분해 할당

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 객체 확장 표현식과 구조 분해 할당 ⇒ 객체나 배열의 특정값을 손쉽게 추출할 수 있는 표현식! ⇒ 배열이나 객체의 값을 해체하여 개별 변수에 할당하는 것 기존 자바스크립트의 객체 확장 표현식 사용 방법 알아보기 // ES5의 예 var x = 0; var y = 0; var obj = { x: x, y: y}; var randomKeyString = ..

React 2024.01.29

[JS] 동적으로 객체 속성을 생성하기

JavaScript에서 동적으로 객체 속성을 만들어 값을 할당하는 예시 // ES5 방식 var combined = {}; combined['one' + randomKeyString] = 'some value'; // ES6 방식 var combined = { ['one' + randomKeyString]: 'some value', }; 1. combined라는 빈 객체를 생성한다. 2. randomKeyString은 어딘가에서 가져온 랜덤한 문자열! 이 문자열을 one과 결합하여 새로운 속성의 키를 만든다. 예를 들어 randomKeyString이 'ABC'라면 이 부분은 'oneABC'가 된다. 그리고 이 키에 'some value' 라는 값을 할당한다. 결과적으로 combined 객체는 다음과 같은..

자바스크립트 2024.01.28

리액트 ES6 문법 - 화살표 함수

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 화살표 함수 기본 자바스크립트의 함수 사용 방법 알아보기 function add(first, second) { return first + second; } // typeof add === 'function' var add = function(first, second) { return first + second; }; // typeof add === '..

React 2024.01.28

리액트 ES6 문법 - 클래스

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 클래스 ⇒ 기존 자바스크립트 문법은 클래스 표현식이 없어서 prototype으로 클래스를 표현함 기본 자바스크립트의 클래스 표현 방법 알아보기 // ES5 문법 function Shape(x, y) { this.name = 'Shape'; this.move(x, y); } // static 타입 선언 예제 Shape.create = function(x..

React 2024.01.28

리액트 ES6 문법 - 가변 변수와 불변 변수

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 3. 가변 변수와 불변 변수 ⇒ 기본엔 변수 선언에 var를 사용했지만 ES6에서는 let, const를 사용한다. ES6의 가변 변수 사용 방법 알아보기 let num = 1; num = num * 3; let str = '문자'; str = '다른 문자'; let arr = []; arr = [1, 2, 3]; let obj = {}; obj = { name : '새 객체' }; let으로 선언한 변수는 읽거나 수정할 수 있다 ES6의 불변 변수 사용 방법 알아보기 const num = 1; num = 3; // 타입 에러가 발생합니다 const str = '문자'; str = '새 문자';..

React 2024.01.27

리액트 ES6 문법 - 전개 연산자

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 전개 연산자 ⇒ 전개 연산자 사용 방법 배열이나 객체, 변수명 앞에 마침표 세 개(…)를 입력한다. 다만 배열, 객체, 함수 인자 표현식( [], {}, () )안에서만 사용해야 한다. ES6의 배열 전개 연산자 사용 방법 알아보기 // ES5 문법 var array1 = ['one', 'two']; var array2 = ['three', 'four..

React 2024.01.27

리액트 ES6 문법 - 템플릿 문자열

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 템플릿 문자열 템플릿 문자열 사용 방법 - 템플릿 문자열은 문자열 안에 변수와 연산식을 혼합하여 사용한다. 기존 자바스크립트의 문자열 사용 방법 알아보기 // ES5 문법 var string1 = '안녕하세요'; var string2 = '반갑습니다'; var greeting = string1 + ' ' + string2; var product = {..

React 2024.01.27
728x90