나는 취업을 했다

donggae·2022년 12월 5일
경험
58

성장

목록 보기
1/1
post-thumbnail

12/5일 내가 가고 싶었던 회사에서의 면접 후기 + 내가 부족한 점

전에 면접을 봤던 곳에서 출근 가능 여부를 물었지만, 운명인지 내가 가고싶었던 회사에서 코딩테스트에 통과를 하였고 1차 면접에 대한 연락이 왔다. 나의 선택은 당연히 후자를 선택했다.

정말 나에게 도움이 되는 인터뷰였다.

너무나 값진 시간이었고, 그렇기에 친구랑 밥먹으면서 메모장에 끄적인 것과 집에 오면서 생각나는대로 적었던 것을 정리해 보려고 한다.

내가 받았던 질문들

1. Doctype에 대하여

브라우저에게 어떤 버전의 HTML 문서로 작성했는지 알려주는 것이며, 웹브라우저가 내용을 올바르게 출력하도록 도와주는 것

1-2. Doctype을 선언하지 않았을 때는?

선언을 하지 않게 되면 호환 모드(Quricks Mode)로 작동해 나의 의도와는 다르게 표시 될 수 있다는 것

1.3. 표준모드 라는 것은?

HTML 과 CSS 표준에 따라 렌더링이 된다.

2. Meta 태그에 대하여

  • http-equiv="항목명" : 웹 브라우저가 서버에 명령을 내리는 속성, HTML 문서가 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다.
  • content="정보값" : meta 정보의 내용을 지정한다.
  • name="정보 이름" 몇개의 meta 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equiv 와 같은 기능을 한다.

정말 많이 봤지만 왜? 라는 궁금증을 가져보기 + 모든 것에는 이유가 있다.
이유를 설명 할 수있는 사람이 되자.

2-1. Meta charest="utf-8"

html 파일의 인코딩을 알려주는 태그 즉 브라우저에게 text를 그리는 방식을 말해주는 것 이것을 하지 않게 되면 한글, 특수문자가 깨질 수 있다.

3. 파일 관리에 대해서

나는 html파일,css파일,js파일,img파일 이렇게 정리를 해왔다.
그렇지만 프레임워크를 조금이라도 써봤으면, 파일 정리에 대해서도 조금 보기 좋게 할 수 있는 것을 알고 있음에도 그렇게 하지 않았다는 점
알고 있으면 실천으로 옮기자.

4. css방법론에 대하여

OOCSS, BEM , SMACSS

  • 세가지가 있지만 SMACSS는 잘 접하지 않았기에 설명하는데에 있어 어려움이 있었다.

WHY?
1. 코드의 재사용성을 높이기 위하여
2. 쉬운 유지보수를 위하여
3. 확장의 용이성을 위하여
4. class명으로 어떠한 의미인지 알 수 있게 하기

4-2. OOCSS(Object Oriented CSS) : 모듈방식으로 코딩 중복을 줄이는 기법

1. 구조와 외형의 분리
2. 컨테이너와 내용 분리

1)구조와 외형의 분리

  • 구조 : width, height, border, padding, margin
  • 외형 : color, background-color

2)컨테이너와 내용 분리

  • 위치에 의족하지 않는 스타일 정의 == 구조적 상황에 어느 곳에서나 재사용 가능.
  • 태그에 스타일 지정 X 클래스 명으로 스타일 지정 == 태그가 변경 되어도 css변경 X 
<!-- 지양 -->
<h2>....</h2>
h2{font-size : 16px;}
<!-- 지향 -->
<h2 class="title">....</h2>
<span class="title">....</span>
.title{font-size : 20px;}
<button class="btn cart">장바구니</button>
<button class="btn menu">메뉴</button>
/* 버튼에 대한 공통적인 구조를 설정 */
.btn{....}
/* 버튼의 외형을 추가적으로만 설정한다.*/
.menu{....}
.cart{....}

4-3. BEM(Block Element Modifier) : 클래스명이 용도, 형태를 나타내는 기법

1)Block

  • block의 속성을 가지고 재사용 가능한 컴포넌트
<!-- 지양 -->
<!-- red,등 상태에 대한 내용은 클래스로 담지 않는다. -->
<div class="btn-red">...</div>
<!-- 지향 -->
<!-- 목적에 맞게끔 설정, id 선택자 사용 X -->
<div class="btn-area">...</div>
<div class="menu">...</div>

2)Element

  • element는 block 안에서 특정 기능 __로 block과 연결한다.
.header__logo{...}
.header__menu{...}
.btn-area__login{...}

3)Modifier

  • modifier은 block,element의 속성이다.
  • 상태,외관을 변화시킨다 --를 통하여 클래스명을 연결한다.
  • block,element의 모양(color, size) / 상태 (disabled, checked)
.form__btn--disabled{....}
.btn-area__login--green{....}

4-4. SMACSS(Scalable and Modular Architecture for CSS) : CSS에 대한 확장형 모듈식 구조로 나타내는 기법

1)Base - 기초 스타일

  • 기본 스타일(Reset, Defalut, Variables, Mixins)

2)Layout - 레이아웃 관련 스타일

  • class명에 l-을 붙인다.
  • 주요 요소(ID), 하위요소 (class)로 구분한다.
  • 큰 덩어리 큰 구조에 관한 것(ex : header,footer .....)
l-width #header{....}
l-width #gnb{....}

3)Module - 모듈 관련 스타일

  • 스타일 재사용을 위한 요소
  • 재사용을 위하여 id , element 사용 X
  • 레이아웃 요소 안에 들어가는 더 작은 부분들 (ex : navBar, widget)
.title {....}
.sub-title {....}

4)State - 상태 관련 스타일

  • 요소의 상태 변화를 표현 is-, s- 를 붙인다.
is-hidden {....}
is-disabled {....}
is-error {....}

5)Theme - 테마 관련 스타일

  • 페이지의 전반적 모양을 제어
  • 기존 스타일을 재선언하여 사용
  • 적용 범위가 넓은 테마에 의해선 theme-를 붙인다.
/* main.css */
.btn {color : red;}
/* theme.css - main.css의 뒤에 컴파일이 되어야한다. */
.btn {color : green;}

이렇게도 많은 규칙들이 있다. 조금 더 생각을 하고 코드를 짜는데 신경을 써보자.

5. button태그에 대하여

  • reset : 입력된 데이터를 초기화 하는 타입
  • submit : 입력된 데이터를 서버로 전달하는 타입 (기본 값)
  • button : 클릭을 할 수 있는 버튼 타입

5-1. a태그와 button의 차이점

  • a태그 : 페이지의 이동, 페이지 내의 다른 영역으로의 이동
  • button태그 : 클릭 이벤트, 입력된 내용을 서버로 전송할 때

5-2. a태그 href에 #, #none 넣는 값에 대해서

  • #: 아무것도 실행하지 않지만 페이지 최상단으로 이동
  • #none : 아무것도 실행하지 않고, 페이지 최상단으로 이동을 막는다.
  • #id : 지정된 id 값으로 포커스 이동

5-3. a태그의 target 속성에 대해서

  • _blank : 새로운 탭에 연결된 url이 열린다.
  • _self : 열려진 창에서 주소창으로 새로운 페이지가 열린다.(기본값)
  • _top : 링크된 문서를 현재 윈도우 전체에서 오픈함.
  • _frame : 링크된 문서를 명시된 프레임에서 오픈함.

6. css전처리기를 쓰는 이유,종류에 대해서

1.css를 보다 쉽게 작성 할 수 있게
2. 코드의 가독성을 높이기 위해
3. css로는 구현 불가능한 변수 또는 함수를 사용 할 수 있게
4. css파일이 커짐으로 그 해당 위치를 찾기 힘들기 때문

Sass/Scss, less, Stylus, PostCSS
이러한 것들은 Syntax 만 다르고 개념 자체는 동일

단점 : 전처리기를 위한 도구 필요

6-1. SCSS 와 SASS의 차이에 대하여

  • 문법의 차이 {} , ;의 유무
  • 확장자 (.scss , .sass)

6-2. SCSS/SASS를 많이 사용을 하는데 문법에 대하여

  • @mixin : 재사용할 css 스타일 그룹을 정의 하여 @include로 호출
  • @extend : 스타일을 정의하다가 부분적으로 다른 부분에 대해 제외 시키는 것
  • @import : 외부에 모듈화 해서 분리한 파일에 대해 호출하는 것

7. dl,dt,dd태그에 설명

dl태그는 정의를 나타내기 위해 사용하는 태그이다.

  • 자식으로 dt, dd를 가진다.
  • 문법적으로 순서가 중요하다. dl은 직계로 dt를 가지며, dt는 dd를 가져야한다.
  • 같은 dt, dd 끼리의 연속 가능하다.
  • ex) dt dt dd 가능 // dt dd dt 불가능

8. SEO(검색 엔진 최적화)

웹 페이지에 대한 자료 수집 검색 결과의 상위에 나올 수 있도록 하는 작업
그러기 위해선 시멘틱 마크업이 필요하다.

8-1. 시멘틱 마크업에 대하여 + 왜 하는지

시멘틱 태그 : 어떤 의미를 하고 있는지 사용되는 태그.

WHY?

  • 웹 표준과 접근성의 측면
  • 코드의 가독성 측면
  • 코드의 재사용성의 측면

9. css컨벤션에 대하여

css도 작성을 할 때 규칙이 있다. 건축물을 지을 때에도 순서가 있듯이....
WHY? : 속성의 순서가 있음으로 특정 속성을 찾기 쉽다는 것

  • 1순위 : 객체의 노출여부와 표현방식
    • display , list-style
  • 2순위 : 위치와 좌표
    • position , float , clear
  • 3순위 : 크기와 여백
    • width / height , padding / margin
  • 4순위 : 윤곽과 배경
    • border / background
  • 5순위 : 글자와 정렬
    • color / font , text-deco , text-align / vercical-align , white-space
  • 6순위 : 내용
    • content

10. 번외) 왜 깃허브 이름이 donggggggae인가요?

아 처음에 배울 때 뭘로 하지 하다가 제 별명을 영어로 적었습니다.

  • 추가적으로 나의 생각에 대한 것들도 정말 많이 물어봐주셨지만,
    주관적인 내생각이 들어가는 질문과 답변에 있어서는 일부러 다루지 않았다.
    예상 질문 준비를 하는 것도 좋지만, 외우다 싶이 가게 되면 나라는 사람을 알리는데에 있어서
    그렇게 좋지 않다고 생각을 하기 때문이다.

11. 면접 후기

두분의 개발자와 나 2 : 1로 진행 하였고, 중간 중간 긴장하지 말라고
물 먹을 시간도 계속 챙겨주시고 너무 젠틀하셨다.
합격을 포기하고 오늘 보낸 한시간 반은 정말 뜻 깊었고, 배울 점이 너무 많았다.
코딩 테스트를 보았는데 그거에 대해서도 방향성을 제시 해주셨고
이 면접을 계기로 많은 생각을 하게 되었다. 나는 아직 우물안의 개구리구나
평소에 면접은 하나도 긴장이 되지 않았지만, 가고 싶다는 욕심이 있어서 인지
오늘만큼은 긴장을 해서 그런지 지금 생각해보면 엉뚱한 대답을 한 것 같긴 한데,
그래도 하는 말에 대해 경청 해주시고 하시는데 면접 본 곳들도 다 그렇긴 했지만
다른 느낌이였다. 이 회사에 들어가게 된다면 배울 점이 더욱 더 많을 것이라는 생각이 들었다.
블로그를 통하여 공부를 하고 있다고 슬쩍 말하니 좋아 하셨다.
1년하다 그만하지 말고 꾸준히 하는게 나중에 큰 재산이 될 거라고 하셨다.

1차 코딩테스트 합격
2차 기술 면접 (이번주에 연락 기다리기) 꼭 3차도 볼 수 있는 기회가 있으면 좋겠다.
+12/8 네이버 운세에서 희소식 올거라 했는데 진짜 왔다 마지막 까지 화이팅
3차 개발 실장님과 1:1 컬쳐 핏 면접 (2차 붙어라~~)

마지막으로

그 인터뷰를 통하여 내가 느낀 점이 있다면,
내가 인터뷰를 하면서 보낸 시간들이 정말 값어치 있는 시간이라 생각한다.
면접을 앞으로 더 나아갈 수 있는 경험이 될 수 있다라는 자세로 임한다면
알게 모르게 본인도 성장을 하고 있을 것이다.
만약 그 날 본 면접이 망했다고 하더라도 이것 또한 경험이고,
슬퍼할 시간이 없다. 그 날 면접 본 것을 내 것으로 만들어서 다음 면접을 준비 하면 되는 것이다.

모두들 취뽀 화이팅

  • 추가 내용

주간 인기글 감사합니다.

김동현 취업 축하요

profile
donggae
아자자자

0개의 댓글