Front-End 검색 결과

해당 글 41건
[React] 2. 리액트의 작업 환경 설정(masOS)

리액트의 작업 환경 설정 리액트 공부를 시작하기에 앞서 첫 React Project 를 만들 것입니다. 2.1 Node.js 와 npm 리액트 프로젝트를 만들 때에는 Node.js 가 필수요건입니다. Node.js 는 크롬 V8 JavaScript 엔진으로 빌드한 JavaScript RunTime 입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 JavaScript 를 사용하여 연산할 수 있습니다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이기 때문에 Node.js 와 직접적인 연관성은 없으나 프로젝트를 개발하는 데 있어서 필요한 주 도구들이 Node.js 를 사용하기 때문에 설치하는 것입니다. 2.1.1 Node.js 와 npm 설치 : macOS 제 작업환경은 MacOS 이므로 터미널을 열..
Front-End/React 2020. 2. 2. 14:13
[React] 1. 리액트 시작과 특징

리액트 시작과 특징 리액트란? 최대한 성능을 아끼고 편안한 사용자 경험(user experience) 을 제공하면서 구현하고자 개발한 것이 리액트(React)입니다. 리액트는 JavaScript의 라이브러리로 사용자 인터페이스를 만드는데 사용합니다. 1. 컴포넌트(component) - 특정 부분이 어떻게 생길지 정하는 선언체입니다. - 재사용이 가능한 API로 수많은 기능 등을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의합니다. 2. 렌더링(rendering) - 사용자의 화면에 뷰를 보여주는 것입니다. - 초기 렌더링 : render() 함수 => 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다. 이 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객..
Front-End/React 2020. 1. 24. 21:55
[JavaScript] null 과 undefined

null 과 undefined null 이란 object 타입으로서, 아직 '값'이 정해지지 않은 것이고, undefined 란 null 과 달리 '타입'이 정해지지 않은 것이다. 따라서 JavaScript 에서 undefined 는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다. 예제) 1 2 3 var num; // 초기화하지 않았으므로 undefined 값을 반환함. var str = null; // object 타입의 null 값 typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함. cs null 과 undefined 는 동등 연산자(==) 와 일치 연산자(===) 로 비교할 때 그 결과값이 다르므로 주의해야한다. null 과 unde..
Front-End/JavaScript 2019. 5. 13. 15:44
[JavaScript] Symbol 객체

1. Symbol원시 데이터 타입 (primitive data type)의 일종으로 ECMAScript 2015 에 새롭게 추가된 래퍼 객체(Wrapper object) 이다. Symbol() 함수는 심볼(Symbol) 형식의 값으로 반환한다. 1Symbol([description])cs 2. Symbol 사용예제123var sym1 = Symbol();var sym2 = Symbol("foo");var sym3 = Symbol("foo");cs해당 코드는 3개의 새로운 심볼을 생성하며, Symbol("foo")는 "foo"라는 문자열을 심볼로 강제로 변환시키지 않는다는 점을 유의해야 한다. 해당 코드는 매번 새로운 심볼을 생성한다. 1Symbol("foo") === Symbol("foo"); // fa..
Front-End/JavaScript 2019. 5. 13. 15:38
[JavaScript] Destructuring

Destructuring Array 123456789// Destructuringlet data = ["crong", "honux", "jk", "jinny"];//일반적으로 구하는 방법// let jisu = data[0];// let jung = data[2]; let [jisu, , jung] = data;console.log(jisu, jung); Colored by Color Scriptercs> "crong""jk" Object 1234567891011121314let obj = { name : "crong", addres : "Korea", age : 20} // name, age 출력//let {name, age} = obj;//console.log(name, age); // 이름을 변경하..
Front-End/JavaScript 2019. 2. 18. 16:28
[Javascript ES6] 6. 간단한 객체 생성

간단한 객체 생성 개선된 Object 선언방법 123456789101112131415161718192021222324function getObj() { const name = "crong"; const getName = function() { return name; } const setName = function(newname) { name = newname; } const printName = function() { console.log(name); } return { getName : getName, setName : setName }} var obj = getObj();console.log(obj.getName());cs>"crong" 매번 Object 리터럴형태인 위와 같이 사용할 경우 복잡하다...
Front-End/JavaScript 2019. 2. 12. 16:48