개발공작소
728x90
article thumbnail
[JS] ES6 : Arrow Function( 화살표형 함수 )에서의 this
FrontEnd/JavaScript 2022. 3. 2. 23:08

============================================================================ 저번 글에서 Arrow Function에 대해 간단한 문법에 대해 정리해보았는데, Arrow Funtion는 this를 가지지 않는다. 라는 말을 했었다. (지난글 참조) 근데 이게 정확히 무슨 말일까? 지금까지 진행해왔던 프로젝트는 Vue라이브러리와 ES5문법을 혼용해서 사용해왔는데, Vue인스턴스나 컴포넌트의 데이터를 this 키워드를 사용해서 가져왔었다. 예를 들면 아래와 같이.. 위와 같이 component를 생성하고 data객체에 This라는 String변수를 하나 만들었다. 그리고 mouted된 순간에 this키워드를 사용하여 This의 속성값을 콘솔에 찍어..

article thumbnail
[JS] ES6 : Arrow Function( 화살표형 함수 )에 대하여
FrontEnd/JavaScript 2022. 3. 1. 05:27

ES6가 릴리즈 되면서 여러 문법이 생겼지만, 역시 하이라이트는 Arrow Function이라고 생각한다 ( 개인적인 생각 ) 이제 ES6 공부도 해야하니, 가장 기본이 되는 Arrow Function을 공부해보려 한다. Arrow Funtion 특징 ============================================================================ 1. Arrow Funtion은 Function 키워드 대신, 화살표(=>)를 사용하여, 간략한 방법으로 함수를 선언할 수 있다. 2. this를 가지지 않는다. 3. arguments를 지원하지 않는다. 4. new와 함께 호출할 수 없습니다. 정도인데 (출처: 모던 자바스크립트), 내 생각에는 Arrow Funtion..

article thumbnail
[JS] ES6 : Fetch함수에 대한 정리 ( feat. GET요청, POST요청 )
FrontEnd/JavaScript 2022. 3. 1. 03:00

저번에 ES6의 내장함수인 Fetch함수를 이용해서 API를 호출해보았다. ( 궁금한 사람은 아래 링크 참조 ) https://bongra.tistory.com/131 [JS] ES6 내장 함수인 Fetch를 활용하여 비동기 통신을 해보자. ( 오픈 API로 데이터 받아오기 ) 며칠전에 옆 팀에 놀러갔다가, 같이 일했던 선임이 Fetch함수를 이용해서 비동기통신을 하고 있는 걸 보고 나도 한번 써보고 싶어져서 이렇게 정리한다. 지금까지는 ajax아니면 axios ( axios를 더 많 bongra.tistory.com 이제 Fetch함수를 활용해서 API호출은 할 수 있게 됬는데, 정확히 Fetch함수의 구조와 활용형태에 대해서는 잘 몰라서 이번에 정리해보려고 한다. ( 실습위주가 아니라, 그냥 정리임 ..

article thumbnail
[JS] ES6 내장 함수인 Fetch를 활용하여 비동기 통신을 해보자. ( 오픈 API로 데이터 받아오기 )
FrontEnd/JavaScript 2022. 2. 24. 19:59

며칠전에 옆 팀에 놀러갔다가, 같이 일했던 선임이 Fetch함수를 이용해서 비동기통신을 하고 있는 걸 보고 나도 한번 써보고 싶어져서 이렇게 정리한다. 지금까지는 ajax아니면 axios ( axios를 더 많이 씀.. ) 를 썼었다. 왜냐하면 지금까지 우리 프로젝트는 ES6를 쓰지 않았기 때문.. 근데 옆팀은 ES6를 쓰니, ES6 내장함수인 Fetch를 쓰고 있는 모양이었다. 서론은 여기까지 하고 바로 정리해보자. Fetch란? ============================================================================ ajax, axios등과 마찬가지로, 클라이언트 ( 여기에서는 javascript )에서 서버로 비동기 통신을 하기 위해 사용하는 API이..

article thumbnail
[JS] ES6 : const, let 그리고 var 변수 선언방식에 대해 알아보자. ( feat. error '[변수명]' is constant no-const-assign 에러 )
FrontEnd/JavaScript 2022. 2. 20. 04:11

ES5 시절에는 변수 선언 방식이 딱 하나 있었다. 바로 var 형식이다. 어딜가나 var를 썼었다. 내가 했던 프로젝트도 처음에는 ES6를 쓸 수 없어서, var만 썼었는데 프로젝트를 진행하다보니 ES6를 사용해도 되는 환경이 되었다. ( 망할 놈의 익스.. ) 어쨌든, 오늘 변수 선언 방식 때문에 에러도 난 김에 정리해보고자 한다. var ============================================================================ 가장 많이 사용한 선언 방식이고, ES6로 넘어오면서 잘 사용하지 않게 된 녀석이다. 문제점이 없었으면 const나 let 형식이 나오지도 않았겠지? 그럼 한번 보자. 이미지를 보면 varTxt라는 녀석을 선언하고 그 뒤에 var..

article thumbnail
[JS] ES6문법 : import와 export에 대해서 알아보자.
FrontEnd/JavaScript 2022. 2. 14. 20:56

보통 개발을 하다보면 외부라이브러리든, 직접 만든 라이브러리든 써야하는 경우가 생긴다. 보통 js파일을 가져올 때 아래와 같이 를 이용해서 가져오는 경우가 많았는데, 2015년 ES6가 공개되면서 ES6 문법인 import와 export를 이용해서 javascript를 모듈화 하는 일이 많아졌다. 지금까지는 나도 저렇게 사용했었는데, 이제는 import와 export를 사용해보려 하는 김에 정리해본다. ============================================================================ export란? 내가 만든 모듈의 함수, 변수, 객체... 여러 타입의 데이터를 다른 모듈에서 사용 할 수 있도록 내보내는 것을 의미한다. export의 형식으로는 크게..

728x90