면접 질문리스트 정리

Dev_Oh·2023년 2월 13일

Step 1.

이 회사를 어떻게 알게 되었나요?

지인의 소개로 알게 되었습니다.

입사하고 싶은 이유를 알려주세요.

본인을 채용한다면 회사에 어떤 기여를 할 수 있나요? 본인이 꼭 뽑혀야 하는 이유를 알려주세요.

이전 회사에서 기른 개발능력과 소통 능력, 그리고 능동적인 업무 접근 방식을 갖추고 있어, 프로젝트에 적극적으로 참여하여 새로운 환경에서 기술을 배우고 실현하는거에 거부감이 없는 성격이라 프로젝트를 성공적으로 완료하는데 기여를 할 수 있습니다.

본인 성격의 장단점에 대해 알려주세요.

이전 회사에서 관리자분들이 인정해줬던 성격중 하나가 믿고 맡길수 있다 였습니다. 역량 밖의 일이라도 완성을 목표로 하는이상 어떻게든 방법을 찾아서라도 끝내는 성격이 있었습니다.

그리고 중간관리자로서 소통의 가교역할을 많이 했었습니다.

최근에 관심갖거나 공부 하고 싶은 개발 기술은?

vue,react,scss 등 프론트엔드의 실무적 심화 개발을 배우고 싶고 거시적으로 해보고 싶은건 chatGPT기술에 충격이 쎄서 chatGpt api을 활용한 개발 및 ai챗봇과 연동되는 작업을 해보거나 공부해보고 싶습니다.

평소 어떤 방식으로 공부 하나요?

완전 새로운걸 공부할때는 인프런강의를 들은 후 공식홈페이지 튜토리얼과 api를 익힌후 클론사이트 제작하면서 공부 하고 있습니다.

코딩 할때 가장 재밌다고 생각되는 것?

새로운 기술을 배우고 구현하며 실제 애플리케이션에 적용하며 문제를 능동적으로 해결하는거에 재미를 느낌니다.

어떤 유형의 문제에 도전할때 흥미를 느끼나요? 좋아하는 프로젝트가 어떤건지 설명해주세요.

기존에 제가 경험하지 않았던 새로운 유형의 문제나 써보지 않았던 api를 사용해야할때 흥미를 느낍니다.
좋아하는 프로젝트보다 잘할수 있는 프로젝트는 마케팅 랜딩페이지 퍼블리싱 이벤트페이지등을 빠르게 제작 하는걸 잘했었습니다.

자신의 최대 강점이 뭐라고 생각해요? 주변 사람들은 어떤 부분에서 성장이 필요하다고 생각할까요?

제 최대의 장점은 어떻게든 방법을 찾아가는 성격이구요, 성장이 필요하다 생각하는것은 기술역량

3년 후 지금과 비교해서 어떻게 달라졌으면 좋겠어요?

기술역량의 발전 및 프로젝트를 이끄는 리더가 되고 싶습니다.

지난 1년동안 가장 힘들었던 갈등 상황이 뭐였나요? 그 상황이 어떻게 끝났고 거기서 뭘 배웠죠?

이전 회사에서 저희 부서에 저 보다 나이가 10살 정도 많으셨던 팀원분이 있었습니다. 그분이 부장님들도 컨트롤이 안됐던 분이라 팀내에서 트러블을 많이 일으켜서 제가 중재역할을 많이 했었습니다.

사람 관계는 노력해도 안된다 입니다.

최근에 일하다가 가슴이 설레거나 뭉클했던 때가 언제였나요?

Step 2. 작업 환경 및 웹사이트 일반

선호하는 개발 환경과 그 이유를 알려주세요.

언어는 js, php
기존 php환경에서 프론트엔드 작업을 많이 했었어서 익숙합니다.
php는 아직도 많은곳에서 사용하고 있는 언어로 선호 한다기 보다 익숙한 분야 입니다. 다른환경에서도 작업해보고 싶습니다.

프레임워크 jquery, vue

IDE: vsc
주로 사용하는 IDE(Integrated Development Environment)는 VSC입니다.
필요에 따라 에디터플러스, 드림위버, 아톰도 병행해서 사용했었습니다.
운영체제: window
widow로 계속 작업을 해왔기 때문에 익숙합니다.

사용해본 버전 관리 시스템 중 선호하는 것과 그 이유를 알려주세요.

이전 회사에서 작업방식 파일서버 방식이라 익숙하진 않지만 현재는 선호하는 방식은 git입니다.
git은 분산형 버전 관리 시스템으로 개발자들이 코드를 공유하고 협업에 필요한 모든 기능을 제공합니다.

분산형 시스템: Git은 각각의 개발자들이 로컬 저장소를 가지고 있어 독립적으로 작업을 진행할 수 있습니다. 이로 인해 서버에 문제가 생기더라도 각각의 로컬 저장소를 이용하여 작업을 계속할 수 있어 안정성과 신뢰성이 높아집니다.
브랜치 기능: Git은 브랜치 기능을 지원하여, 각각의 개발자들이 자유롭게 코드를 작성하고 수정할 수 있습니다. 이는 여러 개발자들이 동시에 작업을 진행하는 프로젝트에서 특히 유용합니다.
속도: Git은 매우 빠르게 코드를 처리하고, 빠르게 커밋하고 머지할 수 있어 개발자들이 빠르게 작업을 진행할 수 있습니다.
커뮤니티: Git은 매우 넓은 개발자 커뮤니티를 가지고 있어, 많은 개발자들이 지원하고 다양한 문제를 해결해주는 데 도움이 됩니다.

웹사이트를 만들때 과정을 설명해 주세요. (프론트엔드 관점에서)

우선 웹사이트를 만들때는 6가지 과정을 거침니다.

기획단계: 웹사이트의 목적 및 그에 맞는 사용자가 원하는 기능 요구사항을 파악하고, pc모바일을 따로 갈지 반응형으로 제작할지 등 전체적인 디자인 레이아웃을 기획합니다.
디자인단계: 기획한 내용을 바탕으로 UI/UX디자이너와 협업하여 웹사이트의 디자인을 작성합니다. 이때 컬러,글꼴,아이콘등을 선택합니다.
개발단계: 디자인 시안을 바탕으로 개발자가 HTML/CSS/JS 등의 기술을 사용하여 웹사이트를 만들고, 모든기기에서 호환이 되게 제작합니다.
테스트단계 : 오타 체크, 쿼리전송체크, 유효성검사 및 크로스 브라우징을 합니다.
배포단계: 테스트 완료한 웹사이트를 서버에 배포 하고, 호스팅 도메인등을 설정합니다. SSL인증서를 적용하여 보안을 강화합니다.
유지보수 단계 : 사용하면서 발생하는 오류를 수정하며 보안 업데이트 및 기능을 추가합니다.

웹사이트를 만들때 어떤 부분을 가장 중요하게 생각하시나요?

현재 제작된 웹사이트가 개발 목적에 맞게 잘 수행이 가능한지?
웹사이트가 사용자경험을 제대로 전달하고 있는지를 중요하게 생각합니다.

Step 3. 웹표준, 접근성, SEO

웹표준에 대해 아는대로 설명하고 왜 중요한지 설명해주세요.

웹표준은 W3C에서 발표한 html/css/javascript 등의 표준화된 기술을 말합니다.
웹표준는 다양한 브라우저와 기기에 호환 및 장애인 고령자등에 표준화된 경험을 제공해주며, 검색엔진에 최적화를 유리하게 만듭니다.

예를들어 html에 header, footer, aside, figure, section, article 등의 태그를 지키는것 img에 alt를 넣어주는것

SEO(Search Engine Optimization)에 대해 아는대로 설명해 주세요.

검색엔진 최적화를 말합니다.
웹페이지를 검색에 노출이 잘되게 태그와 링크 구조를 개선하여 트래픽 유입을 높이는 방법론을 말합니다.

스키마 태그를 사용해 본 적이 있나요? 있다면 어떤 종류의 스키마를 사용 했었는지 알려주고 올바른 태그를 추가 했는지 여부는 어떻게 확인할 수 있는지 알려주세요.

json 스키마는 사용해본적은 없긴하지만
이 웹페이지가 무엇인지? 검색엔진에 설명하는 메타데이터를 전송하는 방법으로 알고 있습니다.
구글에 스키마 유효성 검사 도구가 있다는건 알고있습니다.

웹접근성과 스크린 리더에 대해 설명해주세요. role, wai-aria (aria-label 등)를 사용해봤거나 알고 있다면 연관지어 설명하세요.

웹접근성은 나이나 장애등에 구애없이 모든 사용자가 웹사이트를 이용하는데 불편이 없게 만드는겁니다.

스크린 리더는 시각장애인들에게 화면을 읽어주는 보조 기술입니다.

wai-aria는 브라우저를 읽을때 각 요소가 무슨 역할을 하는지 알려주는 기술입니다.

role="button"은 button, link, tab, banner 등등 그 요소에 역할을 말합니다.
시멘틱태그를 잘사용하면 role을 사용할 필요가 없을수도 있습니다

<nav role="button"></nav>
//가 아닌
<nav><button></button></nav>
//이렇게 쓸 것을 권장한다.

aria-label은 내용보다 우선해서 있습니다. role이나 시멘트태그가 아니면 aria-label 마음대로 쓰지 않는게 좋다

<div aria-label='이것은 버튼입니다'>버튼</div>
//이것은 버튼입니다.

aria-labelledby은 그룹으로 묶어주는 속성입니다.

<h2 id="today-todo">오늘 할 일</h2>
<ul aria-labelledby="today-todo">
  <li>자바스크립트 공부</li>
  <li>html/css 과제</li>
  <li>알고리즘 문제풀이</li>
</ul>
오늘 할 일
자바스크립트 공부
html/css 과제
알고리즘 문제풀이

시각적으로 보이지 않고 스크린 리더에서만 읽히도록 하는 방법을 알려주세요.

visibility:hidden,
opacity:0,
position:abolute, lift:-9999px, overflow:hidden 하여 화면 밖으로 벗어나게 합니다.
해서 시야에서는 보이지 않고 스크린리더에는 읽히게 하는 방법이 있습니다.

코드를 입력하세요

"KE" 영역은 a 로 마크업하고 동작하지 않으므로 role="presentation"과 aria-disabled를 삽입하여 스크린리더 사용자가 링크로 오해하지 않도록 제작하고 "KE"는 aria-hidden="true"로 스크린리더에서 읽지 않게 하고 실제 읽어야 하는 "대한항공"은 숨김 텍스트로 삽입하여 가상 모드나 브라우즈 모드에서 "대한항공"만 읽히게 한다.

<a href="#" class="tooltip" aria-disabled="true" role="presentation">
    <span class="offscreen">대한항공</span>
    <span aria-hidden="true">KE</span>
</a>
//

웹접근성을 만족하는 인터렉션을 구현하기 위해 어떤 점을 고려해야 할까요?

키보드 만으로 모든 인터렉션이 동작 가능할수 있게 tabindex속성을 추가합니다
그리고 모든 인터렉션에 대해 시각적인 피드백을 제공해야 하며, 웹접근성 가이드라인을 준수하여 구현합니다.

Step 4. 성능 및 보안

웹페이지 로드 시간을 줄이는 방법?

이미지 용량줄이기
css와 javascript .min으로 압축하기
브라우저 캐시를 활용해서 리소스 재용청하지 않게 하기
CDN을 사용하여 리소스 분산하기
서버최적화
텍스트 컨텐츠 먼저 로딩시키기
필요없는 리소스 제거하기

Http와 Https 통신 방식의 차이?

HTTP (Hypertext Transfer Protocol)와 HTTPS (Hypertext Transfer Protocol Secure)는 모두 클라이언트와 서버 간에 데이터를 교환하기 위한 통신 프로토콜입니다.

하지만 HTTP는 보안 기능이 없기 때문에 데이터가 암호화되지 않은 상태로 전송되어, 중간에 제 3자가 데이터를 가로챌 수 있는 보안 취약점이 있습니다. 반면 HTTPS는 SSL (Secure Sockets Layer) 또는 TLS (Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화하고 전송하기 때문에, 제 3자가 데이터를 가로채더라도 데이터를 해독할 수 없습니다.

따라서, HTTPS는 개인 정보를 주고받는 웹사이트에서 중요한 보안 요소로 사용됩니다. 일부 웹사이트는 HTTP와 HTTPS를 모두 사용하며, 이러한 경우에는 보안성이 중요하지 않은 페이지는 HTTP로, 로그인이나 결제와 같은 보안이 필요한 페이지는 HTTPS로 통신하는 것이 일반적입니다.

Http 1.1과 2.0의 차이는? 웹사이트 제작시 http 버전에 따라 어떤 부분을 주의해야 하는지 설명해주세요.

1.1은 요청이가면 응답을 해야 다음으로 진행되는 순차적 처리가 됩니다.
2.0은 요청과 응답을 동시에 여러개 처리가능하는 멀티플렉싱을 지원 하기 때문에 속도의 차이가 있습니다.

주의해야할 점은
http1.1은 병렬처리가 안되기 때문에 페이지로딩이 길어질수 있어 불필요한 리소스를 줄이고, 캐싱을 활용해서 로딩속도를 높여야 합니니다.
http2.0은 한번의 연결에 여러개의 응답이 처리 되기 떄문에 https 암호화가 필수적입니다.

CORS에 대해 설명해주세요. 이로 인해 꼭 필요한 데이터에 접근할 수 없다면 어떻게 하는 것이 좋을까요?

COSR(Cross-Origin Resource Sharing) 은
웹 브라우저에 실행되는 javascript 코드가 다른 도메인에 XMLHttpRequest에서 데이터를 요청할 경우 보안상의 이유로 http요청이 제한되는걸 말합니다.

서버측에서 다른 도메인에 접근 할수 있도록 API를 제공하거나 프록시 서버를 이용하여 요청을 보내는 등의 방법이 있습니다.

가장 최근에 만들어본 사이트에서 지원했던 브라우저의 종류 및 버전을 알려주세요. IE와 같은 구형 브라우저를 지원한 경우 이러한 브라우저를 위해 어떤 작업을 했는지 알려주세요.

기본적으로 크롬 사파리 인터넷익스플로어 파이어폭스에서 정상 작동하는지 크로스브라우징을 했구요
버전까지는 기억하고 있진않습니다.

인터넷 익스플로어는 호환 안되는 많았기 때문에
우선 css를 초기화 하고 css가 작동되는 것들은 Vendor Prefix를 이용해서 -ms- 사용하거나 안되는것들은 시행착오를 겪으면서 보면서 작업했습니다.

인터넷 익스플로어 문서 모드 메타태그를 넣고

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

그래도 안되면 IE 버전별 CSS파일을 따로 작성하여 적용되게 했습니다.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

고버전 오픈스크립트 소스같은 경우 IE을 지원안해주는 경우도 많았기 때문에 저 버전을 사용했습니다.

웹사이트를 만들 때 보안과 관련하여 어떤 작업을 해 봤나요?

Step 5. HTML

본인의 HTML 관련 지식 및 실력은 10점 만점에 어느 정도인가요?

8점 정도라고 생각하고 나머지 2점은 검색으로 보안 할 수 있다고 생각합니다.

시멘틱 마크업의 이점은?

웹접근성이 향상되며, SEO 최적화에 도움을 주며, 코드 가독성 및 유지보수 재사용이 쉬워집니다.

Content model에 대해 설명해주세요.

html5 태그 특성을 정의하는 개념으로 웹 브라우저가 문서를 파싱하고 DOM을 생성하는 과정에서 중요한 역할을 합니다.
content model을 준수하면 문서의 의미가 명확해지고 웹 접근성과 seo(검색엔진최적화)에 도움이 됩니다.

1. metadata content

메타데이터를 포함하는 요소 head요소에 내에서만 사용할 수 있다.

base, command, link, meta, noscript, script, style, title

2.flow content

대부분의 요소가 포함 가능한 일반적인 텍스트와 문서 요소

a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas,
cite, code, command, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i,
iframe, img, input, ins, kbd, keygen,
label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre,
progress, q, ruby, s, samp, script, section, select, small, span, strong,
sub, sup, svg, table, textarea, time, ul, var, video, wbr, text

- area (map 요소의 자식 요소인 경우)
- style (scoped 속성이 있으면)

3.sectioning content

특정 구역을 나누거나 섹션을 생성하는 역할

article, aside, nav, section

4.heading content

제목을 나타내는 요소

h1, h2, h3, h4, h5, h6

5. phrasing content

문장을 구성하는 요소

abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist,
dfn, em, embed, i, iframe, img, input,
kbd, keygen, label, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, 
script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr, text

- a (구문만을 포함하는 경우)
- area (map 요소의 자식요소인 경우)
- del (구문만을 포함하는 경우)
- ins (구문만을 포함하는 경우)
- map (프레이징 콘텐츠만을 포함하는 경우)

6. Embeded content

이미지 비디오 오디오 등

audio, canvas, embed, iframe, img, math, object, svg, video

7. Interactive content

사용자와 상호작용하는 요소, 버튼,폼 링크

a, button, details, embed, iframe, select, textarea, keygen, label

- audio (controls 속성이 있으면)
- img (usemap 속성이 있으면)
- input (type 속성이 hidden 상태가 아니면)
- menu (type 속성이 toolbar 상태면)
- object (usemap 속성이 있으면)
- video (controls 속성이 있으면)

Form 의 속성 중 action, method, id의 용도를 설명해주세요.

action 은 폼데이터를 처리할 서버프로그램 url입니다.

method 는 get/post 전송방식을 정하는 속성입니다.
get은 주소표시줄 뒤에 따라가며, 크기제한이 있습니다. post는 노출되지 않으며, 크기제한이 없고 회원가입, 로그인 등에 쓰입니다.

name은 폼이 여러개 있을경우 이름을 부여하여 구분합니다.

img 태그의 alt와 figcaption의 용도상 차이를 설명해주세요.

alt는 엑박이미지나 스크린리더가 이미지 읽을때 대체 텍스트로 제공합니다.
figcaption 이미지의 캡션을 나타내며, 이미지를 이해하기 쉽게 설명을 제공합니다.

Step 6. CSS

본인의 CSS 실력은 10점 만점에 어느 정도인가요?

css점수는 8점이라고 생각합니다.

SCSS를 사용해 본적이 있나요?

vs에서 확장프로그램인 live Sass Complier를 이용하여 scss 코딩을 해본 경험이 있습니다.

box model에 대해 설명해 주세요.

요소의 크기를 정의하는 모델로
content, padding ,border, margin 으로 구분합니다.

box-sizing 속성에 대해 설명해주세요.

크기를 계산할때 기준을 설정해주는 속성으로 border-box로 지정하면 padding값을 포함해서 width값을 정해서 레이아웃이 깨지지 않습니다.

reflow와 repaint에 대해 설명해주세요.

브라우저가 랜더링과정에서 변화가 있을때 발생하는 작업으로 성능저하의 원인이 됩니다.

reflow는 브라우저가 렌더링 과정에서 요소의 위치나 크기를 변경할때 해당 요소의 관련 레이아웃을 다시 계산하는 작업을 말합니다.
repaint 는 요소의 스타일이 변경 되었을때 픽셀을 다시그리는 작업을 말합니다.

캐스케이딩(cascading)과 상속(inheritance)의 차이를 설명해주세요.

css의 캐스케이딩은 스타일 규칙의 우선순위를 결정하는 프로세스를 말합니다.

캐스케이딩 중요도 순위

<head>의 <style>
<head>의 <style> 내의 @import
<link>로 연결된 CSS 파일
<link>로 연결된 CSS 파일 내의 @import
브라우저의 기본 CSS

명시도 순위

!important
inline 스타일
아이디 selector
클래스 / 가상 선택자
태그 선택자
상속된 스타일

반면 상속은 부모요소가 자식요소에 스타일 속성을 전달 하는 메커니즘을 말합니다.
상속되는 속성은 color,font-size,font-family 등이 있습니다.

마진 병합 (margin collapsing)을 설명하고 병합이 생기지 않도록 하는 방법을 알려주세요.

마진병합은 block 요소 끼리 위아래로 만났을때 마진이 큰값으로 마진이 병합되는 현상을 말합니다.

마진병합 해결법

padding, border 속성사용
부모요소에 overflow:hidden
자식요소에 display : inline-block

Flex layout과 Grid Layout을 사용해본적이 있나요?

네 둘다 사용해본적 있습니다. 익스플로어가 사라진 이후 flex는 많이 사용했었고, grid는 어떤 메커니즘으로 작동하는지 원리는 이해하고 있으며 레이아웃을 짜라면 보면서 짤수있는 수준입니다.

flex 레이아웃은 1차원 행/열 하나만 사용가능하며,
display: flex 로 선언하며
flex-direction : row column 으로 방향 설정하고,
줄바꿈 : flex-wrap:wrap
메인축정렬 : justify-content:flex-start
y축정렬 : align-item : stretch

자식에는 flex, align-self,order 등이 있습니다.

grid 레이아웃은 2차원 레이아웃입니다.

.container {
	grid-template-columns: repeat(3, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr */
}

.container {
	gap: 10px 20px;
	/* row-gap: 10px; column-gap: 20px; */
}

웹페이지를 인쇄하기 위한 CSS를 작성할때 어떤 방식으로 하나요?

@media print, @page 를 사용합니다.

@page {
  size:210mm 297mm; /*A4*/
  margin:0mm
 }
 
@media print{
  html, body {
    margin:0;
    padding:0;
    page-break-after: avoid;
    page-break-before: avoid
  }
  .body, .page {margin-top:-1px} /*서브픽셀 해결1*/
  
  .page:first-child {
    page-break-before: auto;
    page-break-inside: avoid
  }
  .page {
    overflow:hidden;
    position:relative;
    width:210mm;
    height:297mm; /*서브픽셀 해결1 사용시*/
    height:calc(297mm - 1px); /*서브픽셀 해결2 - IE는 미지원*/
    page-break-before: always
  }
  .page > .content { /*img를 .page안에 꽉차게 */
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:100%
  } 
  .page > .watermark { 
    position:absolute;
    top:45%;
    left:25%;
    width:50%;
    height:10%;
    z-index:50
  }
}

CSS 애니메이션과 JavaScript 애니메이션의 차이점?

css는 css속성 값을 변화되면서 애니메이션이 작동 되고
javascript는 javascript 코드를 사용하여 DOM요소를 조작하여 애니메이션 효과를 만듭니다.

css는 브라우저 엔진에 최적화 되었기 때문에 자바스크립트보다 가벼워 간단한 인터렉션을 만드는데 유용합니다.

javacript는 css가 할수 없는 복잡한 스크롤, 키프레임 등의 애니메이션을 만들수 있습니다.

SVG 스타일링을 해 본적이 있나요?

네 svg는 벡터기반 이미지형식으로 그래픽요소를 포함하고 있습니다.
그리고 로고, 그래프, 그리고 선을 따라 움직이는 인터렉션에 사용해본적 있습니다.

Step 7. Javascript

본인의 jQuery 실력은 10점 만점 중 어느 정도인가요?

jquery 7점 정도라고 생각합니다.

본인의 자바스크립트 실력은 10점 만점 중 어느 정도인가요?

5~6점 정도라고 생각합니다.

jQuery 와 javascript의 공통점과 차이점을 설명해주세요.

공통점

둘다 클라이언트 스크립트 언어 입니다.
DOM(Documnet Object MOdel)에 접근하여 html요소를 조작합니다.
둘다 이벤트 핸들러를 등록하여 이벤트를 처리할수있습니다.

차이점
제이쿼리는 자바스크립트 기반의 라이브러리여서 제이쿼리 제공하는 메서드 함수는 모두 자바스크립트로 구현가능합니다.
제이쿼리는 자바스크립트에서 자주사용하는 기능을 간편화 경량화되어 자바스크립트보다 쉽게 배울수있고 코드 경량화되어 웹페이지 속도향상에 도움을 줍니다.

OOP(객체지향프로그래밍)와 함수형 프로그래밍의 가장 큰 차이점은?

프로그래밍 중심의 관점에 차이가 있습니다.
객체지향프로그래밍은 객체기반으로 코드를 작성에 중점을 두고 함수형은 함수를 통해 데이터를 처리하는 거에 중점을 둡니다.

Ajax가 무엇인지 설명하고 사용했을때 장단점을 나열해주세요.

Ajax는 (Asynchronous JavaScript and XML) 약자로 자바스크립트를 이용하여 클라이언트와 서버간에 xml데이터를 주고 받는 기술입니다.

Ajax를 사용하면 새로고침 하지않고 데이터를 비동기적으로 받아와 갱신할수 있습니다.

종류는 Get post put delete가 있습니다.

장점은
1. 웹페이지를 다시 로드하지 않아도 되서 트래픽이 감소합니다.
2. 응답성이 향상됩니다.
3. 데이터를 비동기적으로 처리하므로 웹페이지의 사용경험을 개선할 수 있습니다.
4. 서버와 클라이언트 간의 통신을 위해 XML 대신 JSON 등의 경량 데이터 형식을 사용할 수 있습니다.

단점은
1. 서버와 데이터 교환시 보안 문제가 발생할 수 있습니다.
2. 검색엔진 최적화에 안좋을 수 있습니다.
3. 연속으로 데이터를 요청하면 서버 부하를 증가시킬수 있습니다.

JavaScript를 디버깅할 때 사용하는 도구가 있으면 설명해주세요.

크롬 개발자도구 와 console.log()를 이용해 디버깅 합니다.
console.log()는 코드 중간에 log찍어서 크롬개발자 도구 콘솔에서 확인하고 performance 탭에서 페이지 로딩을 확인하면서 디버깅합니다.

지역변수와 전역변수에 대해 설명해주세요.

지역변수는 함수 안에서 선언된 변수로 함수 내부에서만 사용할 수 있습니다.
전역변수는 모든 함수 외부에 선언된 변수로 해당 파일 전역에 사용할수 있습니다.

let, var, const 의 차이점에 관해서 설명해주세요.

let,const 블록스코프이며, var는 함수스코프 입니다.
let은 블록스코프이며, 재 다른값을 재할당할 수 있습니다.
const는 블록스코프이며, 재할당이 불가능 합니다. 즉 상수를 선언할때 사용합니다.

var는 함수스코프이며 재할당이 가능합니다. 하지만 호이스팅 현상이 발생합니다.

javascript에서 호이스팅은 무엇인가요?

호이스팅이란?
javascript에서 변수와 함수가 코드 상단으로 옮겨자서 동작하는걸 말합니다.

예를 들어

console.log(x); // undefined

foo(); // "hello"

var x = 10;

function foo() {
  console.log("hello");
}

마치 아래처럼 작동함

var x;
function foo() {
  console.log("hello");
}

console.log(x); // undefined

foo(); // "hello"

x = 10;

자바스크립트 호이스팅은 어떻게 이루어지는 가요?

호이스팅은 이렇게 이루어 집니다.
1. 변수와 함수의 선언문이 해당 스코프 최상단으로 옮겨집니다.
2. 변수의 경우 선언은 옮겨지지만 초기화는 옮겨지지 않습니다. 따라서 초기화 이전에 해당 변수를 사용하며느 undefined가 반환됩니다.
3. 함수의 경우 함수 선언식은 함수 전체가 옮겨지고, 홤수 표현식은 변수 선언부만 옮겨집니다.

ES6 변수 선언에서 등장하는 개념 용어 중 TDZ(Temporal Dead Zone)에 대해 설명해주세요.

TDZ(Temporal Dead Zone) let이나 const 발생하는 개념입니다.
let,const가 초기화 되기 전에 접근하면 ReferenceError가 발생합니다.

콜백함수와 프로미스 생성자에 대해 설명하고 차이점을 알려주세요.

콜백함수(Callback Function)는 함수의 매개변수(parameter)를 다른 함수를 전달하고 그함수가 실행을 완료한후 호출되는 함수를 말합니다.
보통 비동기적인 작업을 수행할때 콜백을 많이 사용합니다.

function greet(name, callback) { 
  console.log('Hello, ' + name + '!');
  callback(); //콜백
}

function sayGoodbye() {
  console.log('Goodbye!');
}

greet('Alice', sayGoodbye); //2번째 매개로 sayGoodbye 함수 실행

프로미스(promise) 생성자는 비동기적인 작업을 수행하고 결과를 반환하는 객체로
프로미스가 성공적으로 실행되면 결과값, 실패하면 에러값을 then(),chatch()문으로 반환합니다.

function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const userData = { name: 'Alice', age: 30 };
      if (userData) {
        resolve(userData);
      } else {
        reject('Failed to fetch user data');
      }
    }, 2000);
  });
}

fetchUserData()
  .then((userData) => {
    console.log('User data:', userData);
  })
  .catch((error) => {
    console.error(error);
  });

차이점은 콜백함수는 콜백지옥에 빠질수 있지만 프로미스는 then(),catch() 메서드로 가독성을 높여 콜백지옥을 방지할수 있습니다.

HTML Collection 객체와 HTML Element 객체의 차이점을?

HTML Collection은 리턴 결과가 여러개일 경우 사용합니다.
documnet.getElementByTagName('p') 이렇게 하면 현재 문서의 모든 p요소를 담은 html collection이 됩니다.

HTML Element는 HTML 개별 요소를 나타내는 객체입니다.
documnet.getElementById(''), document.querySelector('') 등입니다.

클로져와 자유변수를 설명해주세요.

클로저는 자신이 생성될때 렉시컬환경을 기억하는 함수입니다. 값을 수정할수 없게 은닉화 할때 사용합니다.
자유변수는 함수 내부에서 사용되는 함수인데 함수안에서 선언되지 않는 변수 입니다.

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5); // add5 함수는 클로저입니다. 
const add10 = makeAdder(10); // add10 함수는 클로저입니다. 

console.log(add5(2)); // 7
console.log(add10(2)); // 12

생성자 또는 Class 함수를 사용해 얻는 이익을 기술해 주세요.

객체를 생성할때 쓰는 방법으로
코드 재사용, 캐슐화 상속 가독성 객체지향 프로그래밍에 좋습니다.
생성자는 앞글자를 대문자로 쓰는게 규칙입니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}


const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

동기방식과 비동기 방식 함수의 차이에 관해서 설명해주세요.

동기방식은 함수의 반환값을 받기전까지 기다렸다가 진행하는거고
비동기 방식은 콜백함수를 사용하여 반환값을 기다리지 않고 바로바로 진행하는걸 말합니다.

대표적인 비동기 방식은 setTimeout setInterval fetch XMLHttpRequest 가 있습니다.

Step 8. 다음 내용 중 해당 사항이 있는 경우 모두 말해주세요.

반응형 레이아웃 제작 경험이 있다.

모바일 전용 페이지를 만들어본적이 있다.

UI 인터렉션 (시차 스크롤링, 슬라이더 등)을 만들어본적이 있다.

jQuery 플러그인을 제작해 본 적이 있다.

네 즉시실행 함수를 이용하여 여러 이벤트를 사용한 경험이 있습니다.

(function($) {
  $.fn.myPlugin = function() {
    // 버튼 클릭 이벤트 처리
    this.on('click', function() {
      console.log('Clicked!');
    });
    return this;
  };
})(jQuery);

// 사용 예시
$('#my-button').myPlugin();

위 코드에서 $는 jQuery 객체를 가리키며, (function($ ) { ... })(jQuery)는 즉시실행함수(IIFE)로 jQuery 객체를 $로 전달받아 사용하겠다는 의미입니다.

$.fn.myPlugin은 jQuery 객체의 프로토타입에 myPlugin이라는 메소드를 추가하는 것을 의미합니다. 이 메소드 안에서는 클릭 이벤트를 처리하고 있습니다.

마지막으로 $('#my-button').myPlugin();에서는 myPlugin 메소드를 호출하여 버튼 클릭 이벤트를 처리하도록 설정합니다.

이렇게 제작한 플러그인은 다른 jQuery 메소드와 마찬가지로 메소드 체이닝을 이용할 수 있고, 여러 요소에 대해서도 동시에 처리할 수 있습니다.

다국어 사이트를 제작해 본 적이 있다.

없습니다

웹사이트 운영 프로젝트를 맡아서 해본적이 있다.

신규 사이트 제작시 프론트엔드 작업을 리드해 본적이 있다.

리팩토링을 해 본적이 있다.

-가독성을 높이고 코드수를 줄이는 작업을 한적이 있습니다.

웹 접근성 권고를 맞춰 본 경험이 있다.

인터넷 진흥원의 권고에 따라 작업을 한적이 몇번있습니다.

기술면접 질문

Doctype에 대해 아는데로 설명 해주세요

Doctype은 html 문서 첫줄에 선언되며 문서 형식이나 버전을 지정하는 걸말합니다.
안썻을 경우 기본 모드로 동작합니다.

시멘틱태그는 무엇이며 왜 사용하는가?

html5에서 추가된 의미론적인 태그입니다.
해당 태그가 어떤 의미인지 명확하게 설명하는 태그이며 header footer nav article 등이 있습니다.

사용하는 이유는 구조를 명확하게 보여줄수있으며, 웹표준에도 좋고 검색엔진 최적화에도 좋고 가독성도 좋습니다.

UI가 무엇인가?

user interface 약자로 사용자랑 컴퓨터가 상호작용하는 시스템 인터페이스를 말합니다.

api는 무엇입니까?

프로그램에서 프로그램으로 상호작용하는 인터페이스를 말합니다.
이 프로그램에서 제공하는 기능들을 외부에서도 호출하여 사용할수 있도록 만든 프로그램적인 인터페이스를 말합니다.

float를 clear 하는 방법을 말해주게요

clearfix hack

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

2 flexbox 사용
부모요소 display:flex

.parent {
  display: flex;
  flex-wrap: wrap;
}

위 두가지의 장단점이 뭔가요?

float는 오래된 방법으로 브라우저 호환성이 좋으나 높이값이 다를경우 빈공간이 생길수 있습니다. 중첩해서 사용할 경우 복잡해 질수도 있습니다.
flexbox의 경우 직관적이며 반응형에 적용도 용이하고 그러나 익스플로어10이하는 지원되지 않습니다.

ul, ol의 차이는?

ul 점 등으로 표기되며 순서가 상관 없으며, ol 순서대로 숫자나 알파벳이 나옵니다. 해야합니다.

dl dt dd 차이는?

dl로 묶고 dt dd를 넣어 정의합니다.

dl(Definition list): 정의 목록을 나타내는 태그입니다.
dt: 용어(단어)를 정의하는 태그입니다.
dd: dt에 정의된 용어(단어)의 정의를 나타내는 태그입니다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지를 만드는 데 사용되는 마크업 언어입니다.</dd>
  <dt>CSS</dt>
  <dd>웹 페이지의 스타일을 지정하는 데 사용되는 스타일 시트 언어입니다.</dd>
</dl>

strong, em, b 차이는?

셋다 텍스트 스타일을 주는 태그로

strong은 글자를 강조
em은 글자를 기울어짐
b는 시각적으로만 그냥 굵게

figure태그 설명해주세요

<figure>
  <img src="example-image.jpg" alt="예시 이미지">
  <figcaption>이미지 설명</figcaption>
</figure>

이미지나 동영상 같은걸 표현할때 사용합니다.

css 전처리기란?

sass, less를 말합니다. css 보다 편리하게 관리하기 위해 문법을 확장한 개념입니다.

MDN 사이트를 아는가?

네 개발자 나무위키 같은 곳입니다.
개발 및 검색할때 자주 애용하고 있습니다.

button태그의 Default type은?

type='submit' 입니다.

button 과 input type="button"의 차이점이 무엇인가?

button은 button안에 html요소를 넣을수 있지만 input type='button'은 그럴수 없습니다.
button은 submit로 폼내에서 엔터키로 전송이 가능한데, type='button' 은 클릭이벤트 처리용도 입니다.

문장에 취소선을 넣고싶을때 어떤 태그를 사용하는가?

ddd

section 태그와 article 태그의 차이점을 설명해달라

section은 컨텐츠의 그룹
article 은 좀더 구체적이고 독립된 그룹 입니다.

cdn은 무엇이며 직접로드하는것과의 차이점이 무엇인가요?

CDN(contents Delivery Network) 정적인 파일을들을 여러대에 다른서버에 분산저장하여 접근하는 기술입니다.

cdn은 빠른속도와 안정성을 제공합니다.

직접로드하면 한곳에서 다운로드를 하기 때문에 파일크기가 크고 웹사이트 속도가 느려집니다.

가상요소와 가상클래스에 대해 설명해주세요

가상요소는 ::before ::after
가상클래스는 :hover, :nth-child()

css 적용 우선순위를 설명해주세요

!important : !important 속성을 사용한 스타일은 다른 모든 스타일보다 우선합니다.
직접 지정한 스타일 : 요소에 직접 지정한 스타일은 다른 스타일보다 우선합니다.
아이디 선택자 : 아이디 선택자로 지정한 스타일은 태그 선택자, 클래스 선택자보다 우선합니다.
클래스 선택자 및 속성 선택자 : 클래스 선택자, 속성 선택자로 지정한 스타일은 태그 선택자보다 우선합니다.
태그 선택자 : 요소 이름으로 지정한 스타일은 기본적으로 가장 낮은 우선순위를 가집니다.

바닐라js는 무엇이며 장단점을 알려주세요.

바닐라js는 순수 자바스크립트를 의미합니다.

장점은 가볍고 빠릅니다.

단점은 개발시간이 오래걸릴수 있습니다.

JQuery란 무엇이며 장단점과 개인적인 생각을 말해주세요

jquery는 자바스크립트 개발을 좀더 편하게 해주는 라이브러리 입니다.

바닐라js보다 쉽고 빠른개발이 가능하며, 크로스브라우징에 유리하며, 역사가 오래되어 많은 오픈소스가 있습니다.

단점은 페이지 로딩이 느려질수 있습니다.

많은 라이브러리가 나왔지만 그래도 제이쿼리는 아직 범용적으로 많이 사용되는 라이브러리이기 때문에 아직까지는 필수요소라고 생각합니다.

plugin이란 무엇이며 무엇을 사용해 보았으며 장단점이 무엇인가?

에플리케이션 확장기능을 말합니다.
제이쿼리 ui를 사용해 보았습니다.
장점은 구현이 간단하며, 개발속도 향상입니다.

CSS 스트라이프란 무엇이며, 장단점을 말해달라

표에 색상줄을 넣어 가독성을 높이는 css디자인입니다.

tr:nth-child(even){}

script를 로드할때 defer, async는 각각 무엇을 나타내는가?

defer 와 async은 스크립트 로드할떄 사용하는 속성입니다.

제이쿼리의 attr(), prop()의 차이는?

attr() 속성값을 가져옵니다.
예를 들어 attr('href'),attr('class')

prop() 요소의 프로퍼티값을 가져옴니다.
예를 들어 prop('checked')

제이쿼리 선택된 요소의 위치를 알고 싶다 어떻게 하는가?

var element = $('#my-element');
var offset = element.offset();
console.log(offset.left, offset.top); // 선택된 요소의 x, y 좌표 출력

제이쿼리 e.preventDefault()란?

자바스크립트 ES6에서 많은 변화가 일어났는데 대표적으로 3가지만 말해달라

블록스코프
화살표 함수
클래스 사용가능

Dev_Oh

웹개발이 재밌다. 8년차 웹퍼블리싱

이전 포스트

Vue에서 Scss 사용하기

다음 포스트