본문 바로가기

전체 글

(71)
React로 사고하기 React로 사고하기 – React A JavaScript library for building user interfaces ko.reactjs.org
JSX란? 정의 자바스크립트를 확장한 문법으로 React Element를 생성한다. React.createElement(component, props, ...children)에 대한 Sugar Syntax이다. // 컴파일 전 Click Me // 컴파일 후 React.createElement(, {color:"blue", shadowSize:2}, "Click Me"); 브라우저는 JSX를 해석할 수없으므로, Babel를 사용해서 모든 JSX를 순수 React로 변환해야 한다. 아래 글을 참고하자. 2021.05.21 - [Programming/Frontend] - Babel 정리 (Polyfill 포함) 특징 배열을 매핑하기 // map을 사용해서 여러개의 JSX 컴포넌트를 합성할 수 있다. { menus.ma..
State 특성 3가지 React에는 Props, State라는 2가지 데이터 모델이 있다. 이 글은 State의 특성에 대한 설명이다. 1. state는 수정할 수 없다. (불변성) state는 아래와 같이 접근하여 수정할 수 없다. this.state.counter = 3; (X) this.state.counter = this.state.counter+this.props.increment; (X) this.state.counter = this.state.counter++; (X) 반드시 setState로 접근하여 수정해야 한다. setState({counter:3}); (O) setState((state, props) => { state.counter + props.increment }); (O) setState((stat..
Babel, Babel Preset, Polyfill에 대하여 babel 정의 자바스크립트는 인터프리터 언어이다. 즉, 브라우저가 코드를 해석하기 때문에 컴파일할 필요가 없다. 그러나 모든 브라우저가 ES Next(ES6 이상)를 지원하지 않는다. 그리고 어떤 브라우저도 JSX를 지원하지 않는다. bable은 ES Next, JSX를 다양한 호스팅 환경에서 사용할 수 있도록 지원하는 컴파일러이다. 목적 ES6 이후의 코드를 호환 가능한 코드(ES5)로 변환하여 다양한 호스팅 환경에서 사용할 수 있게 해 준다. ES5 : 모든 브라우저에서 지원 ES6 : 대부분의 브라우저에서 지원 ES7~ : 호환성이 떨어짐 기능 Syntax 변환 Polyfill 소스코드 변환 babel preset 바벨은 처리할 수 있는 변환의 종류를 프리셋(preset) 모듈로 분리했다. 개발자..
배열 순회 구문 비교 : for vs. for-in vs. .forEach() vs. for-of 2ality에서 포스팅을 읽으며 번역, 정리한 글입니다. Looping over Arrays: `for` vs. `for-in` vs. `.forEach()` vs. `for-of` Book, exercises, quizzes (free to read online) 2ality.com 자바스크립트에서 제공하는 배열 반복 구문 4가지에 대해서 비교해보려고 한다. const array = [1, 2, 3, 4, 5, 6, 7]; // ES1 for 구문 for (let index = 0; index < array.length; index++) { console.log(index, array[index]); } // ES1 for in 구문 for (const key in array) { console.log..
(210519:BTB) Lesson 6. MaxProductOfThree 발생가능한 배열의 케이스는 총 3가지이고, 각각에 대하여 3가지 곱의 최댓값을 뽑는 방법은 아래와 같다. (오름차순으로 정렬되었다는 전제이다.) 1. 양수, 음수가 섞인 경우 - [-3, -2, 1, 2, 3] : 0~1번 인덱스의 숫자의 곱이 2~3번 인덱스의 숫자의 곱보다 크면, (0, 1, 4)번 인덱스 값의 곱이 답이다. - [-3, -2, 4, 5, 6] : 0~1번 인덱스의 숫자의 곱이 2~3번 인덱스의 숫자의 곱보다 작으면, 2~4번 인덱스의 숫자의 곱이 답이다. 2. 모두 양수일 경우 - [1, 2, 3, 4, 5] : 2~4번 인덱스의 숫자의 곱이 답이다. 3. 모두 음수일 경우 - [-5, -4, -3, -2, -1] : 2~4번 인덱스의 숫자의 곱이 답이다. 즉, 양수, 음수가 섞인 ..
(210519:BTB) Lesson 6. Distinct 유형 : 정렬 풀이 : Set 객체는 중복된 값을 허용하지 않는다는 것을 이용하여 풀 수 있다. function solution(A) { const array = A.slice(); let newSet = new Set(); for (let item of array) { newSet.add(item); } return newSet.size; } console.log(solution([2, 1, 1, 2, 3, 1]));
[HackerRank] Balanced Brackets (Javascript) 풀이 닫힘괄호(), }, ])가 들어왔을 때, stack에 마지막으로 들어있는 값을 확인한다. 마지막 값이 pair((, {, [)이면 pop한다. 아닌 경우는 모두 push한다. stack에 남은 원소 값이 있는 경우 NO를 반환한다. function isBalanced(s) { // Write your code here const array = s.split(""); let stack = []; for (let item of array) { if (item === "{" || item === "[" || item === "(") { stack.push(item); } else { // console.log(item, stack[stack.length - 1]); if (stack.length === ..