본문 바로가기

분류 전체보기

 (72)
React - 프로젝트 시작하기 (터미널명령어) & 컴포넌트 생성 및 작성 터미널 명령어 1. yarn으로 react-app 생성하기 프로젝트 폴더를 만들고자 하는 위치로 디렉토리를 설정하고 아래 명령어를 입력한다. >> yarn create react-app 프로젝트폴더명 2. 폴더를 통째로 복사하기 templete 폴더를 habit-tracker 로 복사한다. >> cp -R templete habit-tracker 2. 코드 열기 (편집기로) 코드를 열기를 원하는 프로젝트 폴더로 디렉토리를 설정하고 아래 명령어를 입력한다. >> code . 리액트 기본 폴더 구조 public 폴더 : 정적인 파일, static한 것들 src 폴더 : 동적 파일 (자바스크립트 코드), dynamic한 것들 * 웹팩에서는 빌드할때마다 자바스크립트의 유니크한 고유의 버전이 할당 된다. 그래서 ..
리액트 (클래스컴포넌트 vs 함수컴포넌트) 클래스 컴포넌트 state와 lifecycle methods가 있다. 함수 컴포넌트 state와 lifecycle methods가 없다. react16.8부터 React Hook을 도입하여 state와 lifecycle methods를 사용할 수 있도록 했다. 클래스 컴포넌트 대신 함수 컴포넌트를 사용하는 이유 (클래스 컴포넌트의 단점) 클래스 컴포넌트는 어렵다. 클래스 컴포넌트에는 this bind issue가 있다. functional programming을 이용하기 위해. lifecycle methods가 세분화 되어있어 코드를 중복으로 사용하는 경우가 발생했는데, 그 중복을 줄일 수 있다. 출처 드림코딩 엘리 - 리액트 4.1 강의
Web Hosting (웹 호스팅) host 인터넷이 연결되어 있는 컴퓨터 한대, 한대를 각각 호스트(host)라고 함. web hosting 업체 웹서버를 운영하기 위한 컴퓨터(= host)를 빌려주는 회사 * github도 웹호스팅을 제공하고 있음. 무료 또는 추천 호스팅 업체 출처 opentutorials.org/course/3084/18891
상속 (prototype) 기본 상속 (prototype) function Person(name, age){ this.name = name; this.age = age; } function Programmer(name, age, lan){ Person.call(this, name, age); // prototype을 추가해도 변수?들은 상속이 안된다. 기능만 된다. this.lan = lan; } Programmer.prototype = Object.create(Person.prototype); // 새 객체를 생성해서 prototype을 할당한다. // 새 객체를 생성하지 않고, Person.prototype을 그대로 넣으면, 추후 Programmer.prototype에 기능을 추가했을때, Person.prototype에도 같이..
전역객체 / this & this의 제어 전역객체 (window/global) 모든 객체는 전역객체의 프로퍼티 이다. 전역객체의 이름은 호스트 환경에 따라 다를 수 있다. (웹브라우저 : window / node.js : global) function func(){ console.log('hello?'); } func(); window.func(); // 위의 코드와 실행결과가 같음. // 점(.)이 있고, 그 앞에 있는 것은 객체이며, func함수는 window객체 안의 메소드 이다. this 함수의 호출 맥락에 따라서, 상황에 따라서 달라진다. 함수나 메소드에서 this는 그 함수가 속해있는 객체를 가리킨다. 생성자에서의 this var funcThis = null; function Func(){ funcThis = this; } var o..
객체의 생성 ( 생성자 & new ) 객체의 생성 var person = { 'name' : 'bolbbang', 'introduce' : function(){ return `my name is ${this.name}`; } } document.write(person.introduce()); //person.name = 'bolbbang' 으로 객체의 프로퍼티를 넣을 수 있지만, 객체를 정의하는 부분이 분산되므로 위와 같이 사용하는 것이 좋다. new ( 생성자 함수를 이용하여 객체 생성하기 ) function Person(){} // Person이라는 기본 함수 정의 var p0 = Person(); // p0 = undefined var p1 = new Person(); // p1 = {} // 함수에 new를 붙이면 그 return 값..
함수의 호출(call & apply) 함수를 호출하는 방법 1. 함수(파라미터인자) : 가장 기본적인 방법 2. 함수.call(null, 파라미터인자1, 파라미터인자2, ..) : 함수.call()을 생략하여 더 간단하게 호출할 수 있게 한 것이 1번 3. 함수.apply(null, 파라미터인자 배열) : apply의 첫번째 인자를 null로 하고, 두번째 인자를 배열형식으로 한다면 1,2번과 같은 결과가 나온다. apply의 사용 apply(this로 보내고 싶은 객체, 파라미터인자 배열) const obj = { msg : 'hello' } function print(){ console.log(this.msg); } print.apply(obj); // 결과: hello가 출력된다. 이것은 흡사 obj안에 print함수를 넣은 것과 같은..
arguments VS parameter arguments VS parameter arguments : 함수를 호출할 때 함수에 전달된 인자들 (배열과 유사하지만 배열은 아니고, arguments 객체의 인스턴스) parameter : 함수에 정의된 변수. 자바스크립트에서는 함수에 정의된 변수의 개수와 다르게 함수를 호출할 수 있다. function print (a){ // parameter가 1개 console.log(a); } print(1, 2); // 호출할때는 두개의 데이터를 넣을 수 있다. 이 때, 1과 2라는 데이터가 arguments 이다. arguments는 배열처럼 함수로 전달된 인자들의 값을 가지고 있다. arguments[0] : 함수로 전달된 인자들 중 첫번째 값 arguments.length : 함수로 전달된 인자의 개..

티스토리툴바