Web Frontend Developer

오늘은 바벨에 대해서 이야기 해 보려고 한다. 바벨이 무엇이며, 왜 필요하고, 기본적인 사용법이 어떻게 되는지 등등에 대해서 설명해 보도록 하겠다. 먼저 크로스 브라우징(Cross Browsing)에 대해서 설명해야 할 것 같다. 크로스 브라우징은 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 말한다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 한다. 프론트엔드 개발자들에게 크로스 브라우징 이슈는 코드의 일관성도 망가트리고 혼란스럽게 만드는 요소 중 하나이다. 이러한 크로스 ..

이번에도 CS Fundementals 중 하나인 운영체제 관련 질문들에 대해 정리해 보려고 한다. 운영체제 컴파일러와 인터프리터의 차이가 무엇인가요? (N사 전화면접) 컴파일러와 인터프리터 모두 고레벨 언어를 기계어로 변환하는 역할을 수행하지만 차이점은 컴파일러의 경우 전체 코드를 보고 명령어를 수집하고 재구성하는 반면, 인터프리터는 소스코드의 각 행을 연속적으로 분석하며 실행한다. 인터프리터는 고레벨 언어를 중간 레벨 언어로 한 번 변환하고 이를 각 행마다 실행하기 때문에 일반적으로 컴파일러가 인터프리터보다 실행 시간이 빠른 경우가 많다. java의 경우 .java 파일을 .class 파일로 자바 컴파일러가 컴파일을 하고, .class 파일을 기계어로 인터프리터가 변환하는 것이다. 프로세스와 스레드의 ..

오늘은 웹팩이 무엇인지에 대해서 알아보고 기본적인 사용법을 확인해 보려고 한다. 자바스크립트를 사용한 웹 서비스 어플리케이션의 복잡도가 증가하면서 자바스크립트 코드의 양이 많아지고, 이러한 코드를 유지 보수하기 쉽게 만들려고 모듈로 관리하는 방법이 필요하게 되었다. 자바스크립트에서는 ES2015 이전에 모듈을 사용하기 위해서 여러가지 명세가 존재했다. 대표적으로 AMD, CommonJS 등이 있다. 그러다가 ES2015에서 자바스크립트는 표준 모듈 시스템을 제안했다. 우리가 잘 아는 export/import 방식으로 말이다. 안타까운 사실은 모든 브라우저가 이러한 ES2015방식의 모듈 시스템을 지원하지는 않는다는 점이다.(특히 IE가 그렇다) 크롬의 경우 버전 61부터 모듈 시스템을 지원한다. 그래서 ..

중견기업 이상에서 많이 물어보는 CS 기본기 인터뷰 질문 중 첫 번째로 자료구조에 대해서 정리해 보려고 한다. 자료구조 Array와 LinkedList의 차이가 무엇인가요? (N사 전화면접) Array는 Random Access를 지원한다. 요소들을 인덱스를 통해 직접 접근할 수 있다. 따라서 특정 요소에 접근하는 시간복잡도는 O(1)이다. 반면 Linkedlist는 Sequential Access를 지원한다. 어떤 요소를 접근할 때 순차적으로 검색하며 찾아야 한다. 따라서 특정 요소에 접근할 때 시간복잡도는 O(N)이다. 저장방식도 배열에서 요소들은 인접한 메모리 위치에 연이어 저장된다. 반면 Linkedlist에서는 새로운 요소에 할당된 메모리 위치 주소가 linkedlist의 이전 요소에 저장된다...

지난 포스팅 #1. 웹 브라우저 & HTML #2. CSS #3. JavaScript (Part1) 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요. 클로저는 독립적인 변수를 가리키는 함수이다. 그리고 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 통해 은닉화를 할 수 있으며, 콜백 함수 등을 사용할 때 발생할 수 있는 에러를 해결하는데도 유용하다. function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); //myFunc변수에 displayName을 리턴함 //유효범위의 어휘적 환경을 유지 m..

지난 포스팅에 이어서 Vue.js로 트렐로와 비슷한 앱을 만드는 작업을 블로그로 정리해 보려고 한다. 이번에 만들어볼 기능은 카드 이름을 실시간으로 수정하고 카드를 다른 리스트로 이동하는 기능이다. 1. 카드 이름 실시간으로 수정하기 예를 들어 첫번째 리스트인 A 리스트에서 첫번째 카드인 TaskA의 이름을 수정하고 싶을 때, 바로 이름을 수정하고 그 수정된 이름이 저장이 되게 하고 싶다. 이 때 사용하는 지시자는 v-model이다. v-model은 form의 input 요소와 컴포넌트의 output을 변화시키고 싶을 때 사용한다. 예를 들어 라고 하면 이 input에 입력하는 값이 컴포넌트의 message 데이터에 자동으로 저장되고 실시간으로 바뀔 때 마다 그 변화가 반영된다. 아래 소스코드 line ..

오늘은 vue로 간단한 웹 어플리케이션을 만들어 보면서 vue의 기능들을 공부해 보려고 한다. 이와 같은 과제가 실제로 프론트엔드 개발 직군에서 나오는 경우도 있으니 연습해 보면 많은 도움이 될 것이라고 생각한다. 트렐로 라는 앱을 써본 사람들이 있을 것이라고 생각한다. https://trello.com/ Trello Infinitely flexible. Incredibly easy to use. Great mobile apps. It's free. Trello keeps track of everything, from the big picture to the minute details. trello.com 트렐로는 프로젝트의 순서를 관리해 주는 앱으로 보드와 리스트 등으로 할 일들을 구분하여 사용하기 쉽..

자바스크립트 관련 예상 질문은 양이 많아서 두 번에 나누어서 정리해 보려고 한다. JavaScript 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요. (D사 화상면접) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다. event delegation에 대해 설명하세요. (D사 화상면접) 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 ..