React란 Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크) React의 작동원리 SPA(Single Page Application) => 하나의 HTML 파일만 보여주고 내부 요소는 모두 자바 스크립트를 활용해 변경 시키는 것. 기존의 방식은 페이지가 변경될때 마다 무조건 새롭게 HTML, CSS파일을 표시해야했던 예전 방식보다 훨씬 효율적 Virtual Dom with Diff Algorithm DOM은 HTML 문서를 통해서 생성된 자바스크립트를 통해서 조작 가능한 요소들. (쉽게 말하면 크롬 개발자도구에서 보이는 그 요소들을 생각하면 된다.) React는 가상으로 HTML 요소들을 생성하고 (Virtual DOM), 현재 화면에 표시되는 HTML 요소들(..
변수의 생명주기(life cycle) - 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다 그리고 소멸. 변수는 자신이 선언된 위치에서 생성되고 소멸. -변수의 생명주기가 필요할까? 변수의 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 메모리 공간을 점유하게 된다. (메모리의 경량화?)=> 코공이 개인적 생각이므로 잠시 취소선 지역 변수의 생명 주기 - 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸. (함수의 생명주기와 일치) function foo() { var x = 'local'; // 변수 x 생성 및 값 할당 console.log(x); return x; }; foo();// output value local console.log(x);..
동적 스코프(dynamic scope) -함수가 호출되는 시점에 동적으로 상위 스코프를 결정 렉시컬 스코프(lexical scope,static scope, 정적스코프) -함수가 어디에서 정의(선언)했는지에 따라 상위 스코프를 결정 대부분 프로그래밍 언어는 렉시컬 스코프에 따른다. (자바스크립트도 포함) 함수의 상위 스코프는 자신이 정의된 스코프 var x = 1; function foo() { var x = 10; bar(); } function bar() { console.log(x); } foo(); bar(); 위의 예제를 통해서 알아보자 foo(), bar() 함수를 호출시 어떤 값이 나올까? foo 함수와 bar 함수는 전역에서 정의 된 함수이다. bar는 전역에서 정의 된 함수이며, 자신의 ..
함수 레벨 스코프 -var키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체만) 지역스코프로 인정하며 해당 특성 블록 레벨 스코프 -함수 몸체만 아니라 모든 코드 블록(if, for,while try/catch)이 지역스코프이며 특성 var x = 1; if(ture) { var x =10 //var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정 //함수 밖에 var 키워드로 선언된 변수는 코드 블록 내에 선언되었다 할지라도 // 모두 전역 변수 이다. //이는 의도치 않게 변수값이 변경되는 부작용이 발생시킨다 } console.log(x); // 10 var i = 10; for (var i = 0; i < 5 ; i++) { console.log(i); //0 1 2 3 4 ..
스코프 체인 모든 스코프는 하나의 계층 구조로 연결된 것 중첩함수 함수 몸체 내부에 정의한 함수 외부함수 중첩함수를 포함한 함수 var x = "global x"; var y = "global y"; function outer() { var z ="inner's local z" console.log(x); //global x console.log(y); //global y console.log(z); //inner's local z function inner() { var x = "inner's local x" console.log(x); //inner's local x console.log(y); //global console.log(z); //inner's local z } inner(); //inn..
스코프의 종류 구분 설명 스코프(유효범위) 변수 전역 ( global ) 코드 가장 바깥 영역 전역 스코프 전역 변수 지역 ( local ) 함수 몸체 내부 지역 스코프 지역 변수 전역과 전역 스코프 전역 -전역 스코프가 만든다. 전역 변수 -전역에서 변수를 선언하면 전역스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든지 참조 가능 지역과 지역 스코프 지역 -함수 몸체 내부 지역 변수 -지역에서 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다 자신의 지역 스코프와 하위 지역 스코프에서 유효 var x = "global x"; var y = "global y"; function outer() { var z ="inner's local z" console.log(x); //global x cons..
스코프 -식별자가 유효한 범위 . => 모든 식별자(변수 이름, 함수 이름, 클래스 이름등)는 자신이 선언된 위치에 의한 다른 코드가 식별자 자신을 참조할 수 있는 유효범위 -식별자는 어떤 값을 구별할수 있어야 하므로 유일해야한다(식별자인 변수 이름은 중복 불가) => 스코프를 통해 식별자인 변수 이름의 충돌 방지하여 같은 이름의 변수를 사용 가능하게 함 =>즉, 네임스페이스: 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다 function add(x, y) { //매개변수는 함수 몸체 내부에만 참조가능 //매개변수의 스코프 유효범위는 함수 몸체 내부 console.log(x, y); return x + y; } add(2, 3) console.log(x, y..
- Total
- Today
- Yesterday
- shell command
- 국비지원교육
- 패스트캠퍼스
- export
- til
- git flow
- MegabyteShool
- CSS
- JSX
- 가상클래스
- html
- 그룹스터디_북스터디
- javascript
- 북스터디
- 내일배움카드
- 개발자취업부트캠프
- vim 편집기
- GitHub
- 국비지원
- react
- Root_Component
- 컴포넌트
- 메가바이트스쿨
- MegabyteSchool
- 스코프
- Git
- 리액트
- component
- 그룹스터디
- 개발자치업부트캠프
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |