15 May 2018
|
javascript
<body>
<ul>
<li>java </li>
<li>JavaScript </li>
<li>spring </li>
<li>react </li>
</ul>
</body>
var list = document.querySelectorAll("li");
for(var i=0; i<list.length; i++) {
list[i].addEventListener('click', function() {
console.log(i+ "번째");
})
}
위 코드로 실행 후 li태그를 클릭 하면 모두 3으로 로그가 출력된다
하지만 var i 를 let으로 선언하게 되면 원하는 순서로 1, 2, 3으로 로그가 출력된다
왜 그럴까 ??
var 은 function scope를 가지게 된다. for문 안의 var i는 전역 변수이다. 이벤트 함수에서 전역변수
i값과 연결이 된다. 그렇게 되면 최종 값인 i=3 이 이벤트 함수에 등록되게 된다. let을 사용하게 되면 블록
범위를 갖게 됨으로 for문 안의 블록 범위를 가지게 되어 이벤트 함수까지 전파되지 않는다. javascript는
함수에 의해서 scope가 생성되고 함수가 호출될 때도 지속되는 속성이 있어서 이다
let을 사용하지 않고는 ?
function을 하나 더 생성하여 scope를 갖도록 한다
var list = document.querySelectorAll("li");
for(var i=0; i<list.length; i++) {
list[i].addEventListener('click', function() {
a(i);
})
b(i);
}
function a(i) {
//호출 시점
console.log(i);
}
function b(j) {
//등록 시점
list[j].addEventListener('click', function() {
a(j);
})
}
for문을 돌며 이벤트를 등록 할 때 중간에 function b를 두어 function scope의 변수를 만들어 연결 고리
를 끊는다.
b function안의 j는 function scope를 갖게 되어 event 핸들러의 호출되는 값이 더 이상 전역 변수인
i를 가르키지 않고 function scope를 갖는 j를 가르키게된다
j의 function scope는 for문 안에서 function b를 호출 하며 event 핸들러를 등록할 때 생성된다
11 May 2018
|
javascript
ES6에서 달라진 점
-
ES6에서 변수 선언하기
const 상수
let 변수 블록 scope를 가진다
템플릿 문자열 ${변수} 문자열 중간에 변수를 삽입할 수 있다
디폴트 파라미터 : 값이 할당되지 않을 때 기본값 설정
-
화살표 함수(arrow function)
function 키워드 없이 함수를 만들고 return을 사용하지 않아도 식을 계산하여 자동으로 반환 한다
NOTE 세미콜론(;) 사용
자바스크립트에서는 세미콜론이 선택사항이다. 필요하지 않은 곳에 세미콜론을 넣지 않는 것이다.
불필요한 구문을 최대한 사용하지 않는 미니멀리즘을 지향 한다
화살표 함수에서 단수히 () => extension 으로 표기 한다면 이 의미는 () => {return extension}
과 동일하다
fetch(url).then(response => response.json()).then(json=>json.data.movies).catch(error=>{console.log(error)})
fetch(url).then(response => {return response.json()}).then(json=>{return json.data.movies}).catch(error=>{console.log(error)})
화살표 함수는 this를 새로 바인딩 하지 않는다.
아래 코드에서 setTimeout의 콜백함수를 function 키워드로 작성했다면 해당 this가 알수없는 객체로
에러를 발생 시킨다. function 키워드로 함수를 작성하게 되면 this는 window 객체를 가르킨다. this가
test 객체를 가르키게 하려면 화살표함수로 콜백을 작성하면 된다.
var test = {
land : ['서울', '경기도'],
print : function(delay=1000) {
setTimeout( function() { // ()=>{
this.land.join(",")
},delay)
}
}
test.print();
- ES6 트랜스파일링
모든 브라우저가 ES6를 지원하지는 않음으로 ES6코드를 ES5로 변환해줄 필요가 있다.
이러한 변환을 트랜스파일링이라고 한다. 바벨이 트랜스파일링 툴로 유명하다
런타임시 트랜스파일링을 하게 되면 속도가 느려지고 클라이언트의 자원을 점유함으로 먼저 트랜스파일링한
결과를 배포한다
- ES6 객체와 배열
4-1. 구조분해
4-2. 객체 리터럴 개선 : 구조 분해의 반대
4-3. 스프레드 연산자 (…) : 복사본
5.
03 May 2018
|
spring
문제 : local에서 스프링으로 REST API를 만들고 동일 로컬에서 react로 만든 페이지에서 ajax로 호출하니 크로스도메인 이슈가 발생하였다
원인 : 크로스도메인 이슈
해결 : 서버측에 cors를 지원 스프링 서버에 해당 Controller에 @CrossOrigin(origins=”허용주소:포트”)
03 May 2018
|
javascript
react-native: 결국 javascript로 작성한 코드를 ios용으로 object-c android용으로 java파일로
변환된다 이러한 작업을 react-native가 해준다
react-native 장점
- 화면을 css를 통해서 꾸밀 수 있다
- 하나의 코드로 ios와 android 앱을 만들 수 있다. 단 OS별 차이점은 존재한다
- 구동원리는 react와 동일하다, 하지만 더 엄격하다
https://facebook.github.io/react-native/docs/getting-started.html
- react native cli 설치
$ npm install -g react-native-cli
- brew install watchman
- IntelliJ에서 새로운 프로젝트 생성 - Static web - React Native
- 실행
실행 이후 아래와 같은 에러가 발생 했다면 xcode가 설치되어 있지 않아서 이다.
Found Xcode project kawai_todo.xcodeproj
dyld: Symbol not found: _OBJC_CLASS_$_SimProfileBundle
실행하였으나 에뮬레이터는 실행되나 정작 만든 앱이 실행되지 않고 터미널에 에러를 뱉어낸다면 watchman을 설치 해야한다
27 Apr 2018
|
create-react-app
문제 : IntelliJ에서 create-react-app을 생성 했을 때 yarn start를 통해 실행했을 때 문제
Error: Cannot find module '../scripts/start'
터미널 상에서 create-react-app을 실행해서 만들었을 때는 문제를 발생 시키지 않음
해결책
- IntelliJ로 react app을 만들고 터미널에서 yarn을 실행
yarn install v1.6.0
warning ../../../package.json: No license field
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
- yarn start를 해주면 정상 동작 한다
