허도경, limewhale

1. 리액트에서는 카멜 표기를 원칙으로 합니다. 하이픈(-)이 들어가는 요소자리를 카멜 표기로 대체합니다. back-ground (x) backGround(o) font-size(x) fontSize(o) 2. 이벤트 이름은 카멜 표기로 작성합니다. onclick(x) onClick(o) onkeyup(x) onKeyUp(o) 3. 이벤트에 실행할 코드를 전달하는 것이 아니라 함수 형태의 값을 전달합니다. 4.DOM요소에만 이벤트를 설정할 수 있습니다. DOM요소(div, input, span)등의 요소에는 이벤트를 설정할 수 있지만 우리가 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다. 자세한 이벤트는 공식문서를 통해서 확인하실 수 있습니다. import React, { Component }..

어떻게 보면 리액트에서 가장 핵심이 되는 내용이 이번 컴포넌트의 내용이 아닐까 생각합니다. 컴포넌트를 공부하면서 props, state, 그리고 리액트 hooks 개념을 살펴보려고 합니다. 리액트에서 우리가 보는 하나의 화면에는 여러 개의 컴포넌트로 구성되어 있습니다. 컴포넌트는 사용자가 만들수 있는 하나의 데이터 블록(값이 변하는 영역)이라고 생각하면 조금은 이해가 쉬울 거 같아요. 그래도 이해가 잘 안가면 아래 그림을 한번 볼게요. 위 그림은 제가 예시로 만든 영상 목록 화면입니다. 그림에서 보면 컴포넌트로 구분할 수 있는 곳은 검색 영역, 영상 상세 view, 영상 리스트, 영상 썸네일 목록 이렇게 4개로 각각 구분될 수 있을 거 같아요. 값이 변하지 않는 곳은 컴포넌트로 분리하지 않아도 무방하고 ..

기본 강의를 숙지하고 책의 예제를 따라 하기 위해 리액트에서 제공하는 CRA(Create React App) 프로젝트를 신규로 생성해서 공부를 하려 하였습니다. 기분 좋게 신규 프로젝트 생성 $ npx create-react-app my-app $ npx create-react-app my-app 하지만 폴더만 생성되었을 뿐 폴더 안에는 어떠한 내용도 생성되지 않았습니다. 이 문제로 한참 동안 시간을 허비하였는데 이는 기존에 설치한 CRA를 삭제하고 다시 설치하여야만 설치가 된다는 걸 알게 되었습니다. 기존에 global 옵션으로 create-react-app을 설치했다면 아래 커맨드로 삭제해야 합니다. $ npm uninstall -g —-save create-react-app 아래와 같은 에러가 나온..

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter() 메서드를 사용하면 filter() 메서드의 조건에 맞는 요소로 이루어진 새로운 배열을 반환합니다. 어떤 요소도 조건을 만족하지 못했다면 빈 배열을 반환합니다. 즉 filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다. 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. callback의 조건을 만족하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다. f..

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; const map1 = array1.map(x => x * 2); console.log(map1); // 결과: Array [2, 8, 18, 32] 위의 코드를 한번 보면 배열에 들어있는 값을 화살표 함수를 이용하여 배열의 값을 매개변수로 받아서 각 배열의 값을 반복문을 돌며 값을 출력하는 코드입니다. map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 아직은 구조 분해 할당이라는 말이 쉽게 이해되지 않으실 거예요. 그럼 예시를 한번 들어볼게요. 가령 배열에 1,2의 값이 있고 이 값을 변수 a, b에 각각 넣으려고 한다면 어떻게 하면 될까요? const array = [1,2]; const one = array[0]; const two = array[1]; console.log(one) //결과:1 console.log(two) //결과:2 위의 코드처럼 각 변수에 인덱스 값으로 접근해서 하나씩 값을 넣으면 변수에 값을 각각 넣을 수 있습니다. 하지만 위의 예제처럼 값이 2개가 아닌 수백 개, 수천 개의 배열이라면 저런 방..

ES6 클래스 문법은 ES6 이전에는 없던 문법입니다. ES6의 Class는 기존 prototype 기반의 상속을 보다 명료하게 사용할 수 있도록 도와줍니다. 그럼 Class는 도대체 무엇일까요? JavaScript에서 Class는 함수입니다. JavaScript는 class 키워드를 만나면 Class 오브젝트를 생성합니다. 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야 합니다. 그렇지 않으면 ReferenceError 가 발생합니다. 클래스에서 사용되는 constructor는 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 합니다. constructor가 없으면 인스턴스를 생성할 수 없습니다. 이전 클래스 개념이 없었을 때 ..

기존 함수 정의 방식 var a = function() { // ... }; 화살표 함수 정의 방식 var a = () => { // ... }; 화살표 함수는 ES6문법에서 함수를 표현하는 새로운 방식입니다. ES5의 function 함수와 비슷한 방식으로 동작하지만 몇 가지 차이점이 있습니다. // ES5 var add = function(x, y) {return x+y;} // ES6 let add = (x, y) => {return x+y}; ES5와 비교해보면 function이 사라졌고 그 자리를 => 함수가 대체했네요. 지금은 그것 말곤 크게 다른 게 없는 것 같죠? 우선 기본적인 화살표 함수 사용방법을 알아볼께요. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 ..

ES6에서 새롭게 추가된 변수 선언 방식 let, const와 기존 ES5에서 사용하던 변수 var가 어떠한 차이점이 있고 어떻게 사용해야 하는지 알아보려고 합니다. 스크립트에서 값을 할당하는건데 그렇게 꼭 구분을 지어야 하나? 아무거나 사용하면 안 돼?라고 생각하시는 분들도 있을지 모르겠어요. 하지만 무엇이든 이유 없이 탄생하는 문법은 없고 새로운 문법이 탄생하는 이유는 지금보다 더 나은 코드를 사용하기 위해서이기 때문에 우리는 목적에 맞게 해당 문법을 사용해야 합니다. 기존 자바스크립트에서 변수를 선언하는 방식은 "var" 오직 하나였습니다. 처음에는 한 가지 방법으로만 사용하니 편하다고 생각할지도 모르지만 이 방법은 편안함보다는 코드상에서 더 큰 문제점들을 만들었습니다. ES5의 "var"에 대한 ..

이 글은 React에 관심이 있는 분들이라면 모두를 대상으로 작성되었습니다. 동기 워낙 빠르게 다변하는 IT에서 Angular, Vue, React는 확실히 자신들만의 생태계를 구축하며 Front개발에는 이제 빠져서는 안 되는 라이브러리로 자리 매김했습니다. 저도 Angular, Vue 두 프레임워크는 실무에서 사용을 해 본 적은 없지만 개인적으로만 공부를 해 본 상태였고 혼자서 공부를 하지 않고 있는데 하루가 다르게 변하는 코드들을 보면서 더 이상은 미룰 수 없다고 판단하여 공부를 시작했습니다. 운이 좋게도 저는 현재 개발팀에 소속되어서 UI 개발 업무를 담당하고 있는데 팀에서 인원들을 나누어 각자의 관심 분야를 공부하고 토의하는 자리를 만들면 좋겠다는 의견이 있었고 저는 관심분야인 React를 선택하..