비실이의 개발 성장기

# Spread 문법이란? Spread 는 우리말로 '펴다, 펼쳐지다' 의미를 가집니다. javascript Spread 문법도 배열이나 문자열과 같은 반복가능한(Iterable) 객체에 사용하여 객체 내부 데이터들을 펼쳐놓을 수 있습니다. Spread 문법은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다. 추가로 ES9(ECMAScript 2018) 부터는 object 리터럴 객체에도 Spread 문법을 사용할 수 있습니다. # Spread 문법 활용 기존 배열에 새로운 원소를 추가하여 새로운 배열 리터럴을 생성하는 경우 const foo = ["a", "b", "c", "f"]; const bar = ["d", "e"]; cons..

# async & await 이전의 비동기 코드 개발 javascript 에서 비동기 연산의 결과를 보장받기 위해 콜백 또는 Promise chain 방식을 사용합니다. 하지만, 위 두가지 방식으로 코드를 짜고 나면 코드구조가 복잡해져 있는 것을 확인할 수 있습니다. (callback hell) 코드구조가 복잡하다는 것은 코드를 이해하는데 시간이 걸리는 것이라 볼 수 있습니다. 이렇게 비동기 처리 코드 개발의 불편함을 간소화하고자 ES8(ECMAScript 2017) 에 async & await 문법이 추가되었습니다. # async & await 사용 및 확인사항 async & await 은 ES8 에 추가 된 표준 문법이며, ES6+ 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환..

# Promise 란? promise 의 어원 ‘약속하다’ javascript 의 Promise 객체는 비동기 연산을 수행하고 연산이 종료되면 결과를 알려주기 위해 사용합니다. (비동기 연산 결과를 알려주겠다고 약속하는 것) Promise 는 ES6 에 추가 된 객체이며, ES6 를 지원하지 않는 구형 브라우저에서 사용하려면 polyfill 을 해야 합니다. Promise.prototype.finally / Promise.any 등... Promise 객체에 유용한 메소드 제안 및 추가가 활발히 진행되고 있습니다. (Github tc39 - proposal 참고) # Promise 상태종류 & 사용 코드 Promise 객체는 총 3가지 상태 중에 하나를 가집니다. 대기(pending): 아직 작업이 완료..

# ECMAScript(ES) 란? ECMA 인터내셔널(정보와 통신 시스템을 위한 국제적 표준화 기구) 의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어 ECMAScript 하면 javascript 를 가장 먼저 떠올리지만, 액션스크립트와 J스크립트등 다른 스크립트도 포함됩니다. 2020년 05월 기준으로 ECMA-262 는 총 10개의 Edition 표준이 있습니다. 우리가 흔히 알고있는 ECMAScript 2015 는 6번째 Edition 이며, 그로인해 ES6 라고 불리기도 합니다. (ECMAScript 2015 = ES6 = ES2015) # ECMAScript 표준이 나오기 전은 어떠했나? 브라우저는 크게 넷스케이프의 넷스케이프 네비게이터 2.0 진영과 MS 의 Inter..

ES6 class 에서 method bind 를 해야하는 이유에 대한 답변 링크: https://okky.kr/article/708996 OKKY | [react] 이벤트핸들러 this class SaveButton extends React.Component { handleSave(event) { console.log(this); } render() { return React.createElement( div , null, React.createEleme okky.kr

chrome extension 어플리케이션은 크게 5가지 영역으로 구분된다. manifest.json 익스텐션 앱에 대한 정보를 나열해 놓은 json 앱 소개, 버전 및 개발자 정보와 앱 개발 시 필요한 필수로 명시해야 하는 값 등이 기록되어 있다. background 익스텐션 앱의 백그라운드 스크립트 처리 영역 manifest.json 의 background 항목에 스크립트 파일을 명시해줘야 한다. 크롬 브라우저가 정상 실행되고 익스텐션 앱이 활성화 되어있다면 등록한 스크립트가 실행된다. background 스크립트의 디버깅은 ‘크롬브라우저 > 도구더보기 > 확장프로그램 > 해당 앱 백그라운드 활성화’ 에서 가능하다. ui 익스텐션 앱의 ui 를 구성 ui element 를 구성하는 html 과, ui..

https://okky.kr/article/678234 OKKY | 자바스크립트 변수간 차이 관련 문의합니다. var value 100; let obj { value : 1, func1 : function(){ let that this; //obj의 참조값을 변수에 넣음. this.value 1; //메소드호출. o okky.kr

typescript 선택은 아주 만족스러웠다 javascript 로 개발하다 보면 타입 체크를 위한 조건문을 선언 해줘야 하는 경우가 있었다. typescript 를 사용하면서 타입 체크를 위한 조건문을 사용할 필요가 없었다. IDE 설정을 제대로 해주자 react 는 프레임워크가 아니다보니 디렉토리 구성이나 파일 명 등.. 제약이 없으나, 프로젝트 규모가 점차 커지면서 내가 구성한 구조에 불신(?) 이 생길 때가 있다. 하지만, IDE 설정을 제대로 해준다면 디렉토리나 파일 위치 또는 이름을 변경하면 발생하는 경로 수정을 자동으로 해주기에 신경 쓰지 않아도 된다. eslint 와 prettier 는 사용하는게 좋다 코드를 작성하다보면 함수 표현식 끝에 세미콜론을 붙이거나 안 붙이거나 뒤죽박죽 일 때가 ..