자바스크립트에서 비동기를 처리할 때 사용되는 Callback과 Promise의 차이를 알아보자! 생각보다 많이 물어보는 프론트엔드 면접 질문 문제이다. 일단 결론 부터 듣고 시작하자! callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없습니다. 하지만 promise를 사용하면 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해집니다. 한마디로 비동기 처리 결과값을 사용여부가 차이점이다. Promise는 비동기 처리 결과값을 사용 가능하구, Callback은 이를 사용하지 못한다. CallBack 비동기처리 방식 콜백 함수는 말 그대로 나중에 호출할 함수를 의미한다. functi..
호이스팅 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 이 개념도 생각보다 단골 소재이다. 자세히 물어보는 것 보다는 개념을 잘 알고 있느니 묻는 형태로 나온다. 위의 개념을 말하면 다음 질문으로 넘어가는 경우가 많다. 그러나 포스팅을 하는거니.. 조금 더 공부해보자! 변수 선언에서의 호이스팅 // 호이스팅 때문에 선언이 끌어올려져서 오류 안남. console.log(text); // (선언 + 초기화 된 상태) text = 'Hanamon!'; // (선언 + 초기화 + 할당 된 상태) var text; console.log(text); // 호이스팅 때문에 선언이 끌어올려졌지만 초기화 안된 상태에서 참조해서 오류 남. console.log(tex..
자바스크립트 동작원리 프론트엔드 면접 문제로 가장 많이 나오는게 아닐까 생각 되네요. 먼저 자바스크립트의 동작원리를 알기 전에, 아래의 이 뜻을 정확히 알아야 합니다. 자바스크립트는 단일 스레드 기반 언어 입니다. JS 엔진(자바스크립트 엔진)이 단일 호출 스택을 사용한다는 의미입니다. 더 쉽게 말해 한순간에 하나의 동작만 한다는 의미죠! 그러면 자바스크립트는 단일 스레드의 동기적인 언어인데 어떻게 비동기 처리가 가능한가? 의구심이 들겁니다. 자바스크립트가 동작되는 WEB 브라우저 환경 자바스크립트를 웹 브라우저에서 작동하기 위해서는 자바스크립트 엔진, Web APIs, Callback Queue(Task Queue), Event Loop 영역이 필요합니다. [요약 결론] 자바스크립트엔진에서는 단일 호출..
This란 무엇일까? this는 함수가 호출되는 시점의 실행 컨텍스트(Execution Context)이다. 이것도 프론트 엔드 면접의 단골 소재중 하나이다. this의 쓰임새가 여러가지 이기 때문이다! 그 이유는 정의를 보면 알 수 있는데, 실행컨텍스트=코드가 실행되는 환경, 실행하기 위해 필요한 환경이다. 그러므로, 함수를 실행하는 환경이 달라지면 this가 변한다는 의미이다. 그래서 this에 바인딩될 객체는 함수 호출 패턴에 의해 결정된다. 이는 자바스크립트 엔진이 수행하는 것이다. 이러한 자바스크립트 엔진의 암묵적 this 바인딩은 여러가지가 있다. 1. this를 전역에서 호출하면, window(전역객체) this; // Window {} 2. 함수(내부함수)에서 호출하면, window(전역객..
클로저는 자바스크립트의 관심이 있는 사람이라면 한번쯤 들어본 개념인데, 이게 또 면접문제 단골 소재이다. 이해하기가 조금 헷갈린 개념이라서 자주 나오는거 같다. 클로저의 개념 “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 이걸 읽고, 이해가 될까????? 렉시컬은 뭐고 함수가 선언되었을때?? 언제? 뭔소리인지 잘 모르겠다. 그래서 이걸 쉽게 풀어서 요약 해보려 한다. 클로저는 "내부함수"이다. 자기가 선언됬을때의 환경을 기억하는 함수 이것만 알면..
프로토타입 기반 객체지향 프로그래밍 Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 "자바스크립트"는 프로토타입 기반 객체지향 프로그래밍 언어이다. 따라서 자바스크립트의 동작 원리를 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야 한다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의, 이를 통해 객체(인스턴스)를 생성한다. 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이(Class-less)도 객체를 생성할 수 있다. [중요 요약] 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체..
과거의 Javascript는 표준화 되지 못하고, 자사의 브라우저끼리 경쟁하며 기능을 추가했다. 그로 인해 "크로스 브라우저 이슈"가 발생했고 이런 문제로 인해 개발이 어려움이 따라서 자바스크립트의 표준화가 중요해졌다. ECMA 인터내셔널에서 표준화를 요청했고, ECMAScript로 명명되어 표준화가 이루어지고 있다. 버전 출시년도 특징 ES1 1997 초판 ES2 1998 ISO/IEC 16262 국제 표준과 동일한 규격을 적용 ES3 1999 정규 표현식, try…catch 예외 처리 ES5 2009 HTML5와 함께 출현한 표준안. JSON, strict mode, 접근자 프로퍼티(getter, setter), 향상된 배열 조작 기능(forEach, map, filter, reduce, some, ..
Javascript와 같이 느슨한 언어에서 패턴을 적용할 필요가 있을까? 고민해 보다가, 그래도 소프트웨어의 개발에서 패턴이란 문제의 해결책이나 모범적인 관행, 템플릿으로 효과가 많기에 자바스크립트 패턴을 공부하며 자바스크립트를 정리해보려 한다. Javascript의 디자인 패턴, 코딩 패턴을 공부하며 부족한 Javascript의 실력을 키워보자 패턴을 정립하면 좋은점 패턴으로 검증해 논 실행방법을 사용하여 시간절약! 일정정도의 추상화 작업을 제공하여, 복잡한 소스나 코드를 단순화해 문제에만 집중하게 도와줌! 같은 접근 방법과 패턴으로 개발자간의 커뮤니케이션 비용 절약! 이제 같이~ 디자인 패턴, 코딩 패턴을 공부해보자
놀라운 사실?! 개발자를 하면서 협업 도구로 가장 많이 사용하는.. 아니 거의 필수로 사용하는 Git은 놀랍게도 대기업으로 갈수록 개발자들이 Git 명령어를 잘 못쓴다는게 나의 개인적인 생각이다. 그 이유는 다양한데, 대기업일수록 CI/CD 구조가 굉장히 잘되어 있어서이다. 그래서 굳이 Git 명령어를 칠일이 거의 없을 수 있다. (JIRA를 통해 담당자를 배정하고 브랜치를 선택, 결재버튼 누르면 끝난다... 좋은세상~ ) 요즘 Git 명령어를 안치고 쉽게 사용할수 있도록 도와주는 Tool이 굉장히 많다. (ex 크라켄, Source Tree) 대기업일수록 운영 소스에 대한 Git 접근 권한이 통제되고 개발서버도 제한 되는 경우도 있다. 위와 같은 여러 사항 때문에 대기업 개발자는 Git 명령어를 잘 안..
Vue 경력 내가 Front-End 프레임 워크 중 가장 먼저 접한 개발 언어이다! Vue2를 2년 Vue3를 1년 도합 3년이나 사용한 언어로 가장 잘 알고 편하게 쓰는 프레임 워크 언어이다. Vue 역사 간단하게 역사부터 알면 좋을거 같아서 2줄로 요약하면 Front-End 프레임워크의 바이블인 AngularJS (갓 구글.. 어디 안가는군!)로 여러 프로젝트를 한던 중국계 미국인 "Evan You"가 AngularJS 가 복잡하고 비효율적이라 생각하여, 강력한 기술만 라이트하게 모아 2016년 Vue2.0을 발표하면서 출현! 나는 Vue 를 왜 하게 됬나? 참고로 사회생활을 2015년 부터 하게 된 나에게는 Vue2.0은 어찌보면 운명이었다. 왜냐면, 나는 사회생활 전에 전산병으로 PHP,JSP +..
