-

React 정의- Meta 에서 만든 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용 - 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움React 특징새로고침 없이 다른 페이지 이동가능JSX 사용Component이 조합 구성 - 재사용성 향상으로 개발 기간 단축, 유지보수 용이Virtual DOM 사용하여 DOM 업데이트를 추상화 함으로 처리 횟수를 최소화하여 효율적으로 관리하여 빠른 처리가 가능React Native를 활용하여 앱 개발 가능지속적인 버전 업데이트 및 라이브러리로 인한 방대한 학습 진행과 상태 관리(state)가 복잡한 단점이 있음리액트 DOM 업데이트 과정데이터를 업데이트하면 전체 UI를 Virtual DOM에 Rerender..

JSX (JavaScript XML) 자바스크립트에 XML을 추가한 확장 문법 Javascript의 공식적인 문법이라고 할 수는 없다. 브라우저에서 실행 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환. Javascript에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 장점이자 사용하는 이유 React에서의 JSX React.ceateElement()의 호출을 통해 일반 자바스크립트 객체인 'React 엘리먼트'로 컴파일 됨 Babel은 JSX를 React.createElement() 호출로 컴파일 함 // 아래 두 코드는 동일 const element = ( Hello, world! ); const element = React.createEl..

◎ 클로저 함수 : 함수가 종료되어도 함수 내부에 만든 지역변수가 사라지지 않고, 계속 값을 유지하는 상태를 클로저라고 하며, 내부에 있는 함수를 클로져 함수라고 함 - 연관있는 변수와 기능(중첩함수)을 하나의 함수로 묶어 독립적으로 실행 가능 - 함수 내부에 데이터가 만들어지기 떄문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있음 - 객체지향 프로그래밍에서는 private data, 캡슐화된 data라고 칭함 * 기본 문법 function name(callback){ 로직구현 callback(결과) // 로직 처리 부분을 다른 함수에 넘겨줌 } • Sources function createCounter() { let cnt = 0; // 지연 변수 선언 후 // add()가 클로저 함수가..

◎ 중첩함수 : 함수 내부에 만들어지는 함수 - 지역변수처럼 함수 내부에서만 사용이 가능 - 일반적으로 이름이 없는 이벤트 리스너로 많이 화룡ㅇ - 중복코드 또는 그룹화 (함수 내부의 큰 기능이나 중복코드를 내부함수로 만들어 재사용시 사용) * 중첨함수의 변수 scope - 중첩함수는 외부함수의 변수 접근이 용이함 let a = 100, b = 200, c = 300; function outer() { let b = 2000, a = 22, c = 100; function inner() { let c = 20000 console.log(`a : ${a}, b : ${b}, c: ${c}`); } inner(); // 외부에서 호출이 불가하므로 중첩함수를 호출해놓음 } outer(); //a : 22, b..

Arrow Function함수를 간략히 정의할 수 있음익명함수임function 키워드 대신 화살표를 사용    this를 묶는것이 가능new 연산자로 인스턴스 생성 불가new 생성자와 함께 호출 할 수 없다실행문법화살표 함수 정의가 한 줄인 경우 {} 와 return 생략 가능파라미터가 1개인 경우 () 생략 가능// 기본 문법(매개변수) => {} // 한 줄일때 표현 ({}와 return 생략 가능)const func = (a) => a+2// 파라미터(매개변수)가 1개 인 경우 () 생략 가능const func = a => ()// 다른 선언 방법const func = x => y => z => `${x], ${y}, ${z}`// 일반 함수로 표현하면 아래오 같음function func(x){ r..

◎  콜백 함수: 힘수를 매개변수로 받아 해당 함수를 호출 하는 함수  - 함수 내부의 결과값을 함수 외부로 내보낼 때 주로 사용(일종의 return문과 유사기능) - 함수 실행 결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라 하며   이때 매개변수로 넘어온 함수를 의미  - 콜백 함수를 사용하는 구조는 특정함수의 매개변수 값으로 콜백함수를 넘긴 후,    처리 결과를 콜백함수의 매개변수에 담아 콜백함수를 호출하는 구조- 로직구현 부분은 동일하고 로직 처리 부분을 다양하게 처리해야 하는 경우 유용 (유지보수 및 확장의 용이성)- return문이나 콜백 함수를 사용하는 경우 결과는 동일. 일반적으로 단순한 처리는  return문을 이용하는 것이 더 효율적- 비동기 처리를 주..

• git 명령어 • git init git init - 프로젝트 root 디렉터리에서 생성 - .git 이라는 하위 디렉토리를 만들고 .git 디렉토리에는 저장소에 필요한 뼈대 파일이 들어 있다. - 정상적으로 생성 시Initialized empty Git repository 문구가 나옴 • git config // 환경설정 확인 git config --옵션 조회 git config --liist 환경설정 확인 조회 git config user.name 사용자 이름 확인 설정 git config --global user.name '사용자이름' 사용자 이름 설정 조회 git config user.email 사용자 이메일 확인 설정 git config --global user.email '사용자메일' 사용..

• Git : 파일의 버전관리 시스템 - 개별 파일 또는 프로젝트 전체를 이전 상태로 되돌릴 수 있고, - 시간에 따른 변경 사항을 비교해 볼 수 있고, - 누가 문제를 일으켰는지 추적할 수 있고, - 누가 언제 만들어낸 이슈인지도 알 수 있고, - 파일을 잃어버리거나, 잘못된 부분을 쉽게 복구할 수 있다. * 특징 - 빠르다. 다른 버전 관리 시스템과 달리 git은 데이터를 파일 시스템 스냅샷[1]으로 취급하고 크기가 아주 작다. 파일이 달라지지 않았으면 성능을 위해서 파일을 새로 저장하지 않는다. 단지 이전 상태의 파일에 대한 링크만 저장한다. - 거의 모든 명령을 로컬에서 실행한다. 거의 모든 명령이 로컬의 파일과 데이터만 사용한다. 프로젝트의 히스토리 조회 시 서버 없이 로컬에서 조회하고, 오프라..

• Case Styles : 프로그래밍 선언 관습 카멜식(Camel case) - 첫문자는 소문자, 두번째 단어부터 대문자 camelCase 케밥식(Kebab case) - 하이픈(-)으로 연결 - 모든 단어로 소문자로 이루어짐 kebab-case 파스칼식(Pascal case) - 카멜식과 유사하나 첫단어도 대문자로 시작 PascalCase 스네이크식(Snake case) - 언더바( _ )로 연결 - 모든 단어 소문자 snake_case

변수 - 값 변경 가능 - 기본 변수 선언방법 - let (added in ES6) - 현재 IE11에 부분적 호환 varblock scope를 무시한 호이스팅 발생함수 스코프에 종속되어 함수 내에 선언한 경우 함수 밖에서 사용 Xfor문의 경우 for문도 밖에서 사용 가능let블록 스코프로 종속됨 const재할당을 통해 값이 변경되거나 재 선언할 수 없음객체를 const로 할당하는 경우 속성 재할당 가능 (Object.freeze(객체명)을 통해 고정도 가능)TDZ(Temporal Dead Zone)변수의 일시적 비활성 구역var는 정의되기 전 접근 가능하여 undefined값을 갖지만, 값에는 접근할 수 없음let은 변수가 선언되기 전까지 TDZ에 머물러 초기화 전 변수에 접근 시 오류 발생let, ..