Web Frontend Developer

지난 포스팅 #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사 화상면접) 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 ..

오늘은 최근에 내가 개발을 하면서 몇 시간동안 고민한 이슈에 대한 정리를 해 보려고 한다. 이 이슈는 내가 어떤 회사에 입사하기 위해 치뤘던 코딩 과제를 하는 도중에 발생하였다. 다행히도 이 과제 기한을 48시간을 주어서, 몇 시간 삽질을 해도 완성 후 제출할 수 있었으나, 만약에 짧은 시간에 해결을 해야 하는 경우였다면 문제를 해결하지 못했을 것이다. 내가 했던 삽질을 앞으로 나를 포함한 누구도 하지 않고 시간을 아끼기 위한 마음에 내용을 정리해 보고자 한다. 먼저 나는 REST API가 구현된 서버 코드를 이미 받은 상태였고, 이미 잘 구현된 API를 그래도 가져다 쓰기만 하면 되는 것이었다. README에 명세된 API는 다음과 같은 조건을 가지고 있었다. POST 메서드로 Content-Type은..

이번 포스팅에서는 CSS 관련 예상 질문과 답변을 정리해 보고자 한다. CSS class와 id의 차이점을 설명해 주세요. id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다. 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다. 우선순위는 id가 class보다 높다. float가 어떻게 동작하나요? float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다. 클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요? float 속성의 영향에서 벗어나기 위해 사용하는 ..

프론트엔드 개발자로 면접을 준비하면서 나올 수 있는 질문 리스트를 틈틈이 작성해 보고자 한다. 첫 번째로 웹 브라우저와 HTML 관련된 질문 리스트를 적어 본다. 참고로 이는 화상 면접이나 전화 면접에서 나올 만한 예상 질문들을 정리하는 내용으로, 경력 3년 이하 주니어 개발자 면접을 대비하기 위함이기에 너무 자세하고 깊은 내용보다는 간결하고 핵심적인 내용 위주로 적어보았다. Web Browser 브라우저의 동작 원리를 간단하게 설명해 주세요. 브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시하는 것이다. 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립..

Vue.js란 무엇인가? Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. Vue.js의 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다. Vue.js는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원한다. Vue.js 의 주요 특징을 정리해 보면 다음과 같다. 1. 가상 DOM(Virtual DOM): Vue.js에서는 React.js, Ember.js 프레임워크와 유사하게 가상 DOM을 사용한다. 가상 DOM은 원본 HTML DOM을 표현하는 메모리 상의 가벼운 DOM 트리로, 원본 DOM에 영향을 미치지 않고 업데이트를 할 수 있다. 2. 컴포넌트(Components): ..