#1. CS

1. DNS가 무엇인가요?

DNS는 도메인 이름을 사용했을 때 입력한 도메인을 실제 네트워크상에서 사용하는 IP주소로 변환하고 해당 IP주소로 접속하는 과정을 말합니다. 즉, 웹사이트에 접속 할 때 보기 어려운 IP 주소 대신에 도메인 이름을 사용하여 사람이 쉽게 볼 수 있게 변환해 줍니다.

 

2. 객체 지향 프로그래밍이란 무엇인가요?

프로그램을 만들 때 서로 관련 있는 데이터와 명령어를 하나로 묶어 객체라는 단위로 만들고, 서로 상호작용하는 방식을 말합니다. 관리가 편하고, 확장성이 용이하고, 재사용성이 높다는 장점이 있지만, 개발과 실행 속도가 느리다는 단점이 있습니다.

캡슐화, 상속성, 추상화, 다형성을 가지고 있는게 특징입니다.

  • 캡슐화: 데이터와 코드를 외부로 부터 알 수 없게 하고 하나의 캡슐 형태로 만드는 것
  • 상속성: 부모클래스의 메소드를 자식 클래스가 물려 받는 것
  • 추상화: 객체의 공통적인 속성과 기능을 추출하여 정의하는 것
  • 다형성: 한 객체가 다른 여러 형태로 재구성 되는 것

 

3. 자료구조 중 Stack과 Queue는 무엇인가요?

스택은 물건을 쌓고 그것을 다시 뺄 수 있는 구조로, 보통 배열이 스택으로 되어있습니다. 마지막으로 넣은 데이터가 먼저 나온다는 의미로 LIFO(Last-In-First-Out)구조라고 합니다.

큐는 먼저 들어온 데이터가 먼저 처리되는 구조로 되어 있습니다. 먼저 들어온 데이터가 먼저 나온다는 의미로 FIFO(First-In-First-Out)구조라고 합니다.

 

4. 컴파일러와 인터프리터의 차이는 무엇인가요?

컴파일러는 전체 코드를 보고 명령어를 수집하여 재구성합니다. C, C++이 컴파일러에 해당합니다.

인터프리터는 소스코드의 각 행을 연속적으로 분석하며 실행합니다. 고레벨의 언어를 중간 레벨의 언어로 변환한 뒤 행마다 실행하기 때문에 컴파일러보다 느리다는 단점이 있습니다. 파이썬, 자바스크립트 등이 이에 해당합니다.

 

5. 프로세스와 스레드의 차이는 무엇인가요?

프로세스는 운영체제로 부터 CPU자원을 할당 받는 작업의 단위 입니다. 메모리에 올라와서 실행되고 있는 프로그램의 인스턴스를 의미합니다. stack, code, data, heap 구조로 되어있습니다.

스레드는 프로세스 내에서 실행되는 여러 흐름의 단위입니다. 한번에 한가지 일만 할 수 있는 싱글 스레드가 있고, 둘 이상의 스레드를 동시에 실행할 수 있는 멀티 스레드가 있습니다.

 

#2. 웹

1. 브라우저의 렌더딩 과정이 어떻게 되나요?

  • 브라우저의 주소창에 주소를 입력하면 DNS가 해당 url의 서버를 찾아갑니다.
  • 서버에 있는 index.html 파일을 클라이언트로 보냅니다.
  • 브라우저에서는 텍스트로 이루어진 index 파일을 파싱하며 DOM 트리를 만듭니다.
  • css 요청이 있다면 css를 파싱하여 CSSOM을 생성합니다.
  • 이렇게 생성된 DOM과 CSSOM을 합쳐 Render Tree를 구축하게 됩니다.
  • 만약 중간에 <script> 태그를 만나게 되면 자바스크립트 코드를 실행하기 위해 파싱을 중단하게 되는데, 이는 <script> 태그를 맨 밑에 두는 이유이기도 합니다.

 

2.  HTTP(HyperText Transfer Protocol)가 무엇인가요?

웹에서 브라우저와 서버가 데이터를 주고 받을 수 있는 통신규약 중 하나로 요청(request)과 응답(response)으로 구성 되어있습니다.

 

3. HTTP와 HTTPS의 차이가 무엇인가요?

http 방식은 네트워상에서 누군가 데이터를 마음대로 열람하거나 수정할 수 있지만, https는 데이터가 쉽게 도난 당하는 것을 방지하기 위해 보안소켓을 사용해 브라우저와 서버 사이를 암호화하여 연결해줍니다.

따라서 민감한 정보가 있는 경우 https를 사용해야 합니다.

 

4. 캐시란 무엇이고, 어떻게 동작하나요?

캐시는 데이터나 값을 미리 복사해 놓은 임시 저장소를 말합니다. 캐시가 없다면 데이터가 변경되지 않는 고정 데이터임에도 계속해서 네트워크를 통해 데이터를 다운 받아야 합니다. 따라서 캐시를 사용하면 새로고침 시 반복되는 데이터가 네트워크를 사용하지 않으므로 사용량이 줄고, 브라우저 로딩 속도가 빨라집니다.

 

5. 쿠키, 로컬스토리지, 세션스토리지는 각각 무엇인가요?

  • 쿠키

만료 시간이 있는 Key와 Value의 형태로 이루어진 저장소를 말합니다. 대부분의 브라우저가 지원하며, 용량은 약 4kb로 작은 편입니다. 주로 팝업창 같은 부분에 쿠키를 사용합니다.

  • 로컬스토리지

가장 큰 특징은 브라우저 창을 닫아도 데이터가 유지된다는 것 입니다. 장점은 서버에 불필요한 데이터를 저장하지 않고, 용량이 약 5MB로 매우 큽니다. 하지만 HTML5를 지원하지 않는 브라우저에서는 사용이 불가능 합니다. 유출되어도 상관없는 정보들은 로컬스토리지를 사용합니다.

  • 세션스토리지

로컬스토리지와 비슷하지만 브라우저 창을 닫는 순간 데이터가 삭제된다는 차이점이 있습니다. 장바구니 같은 휘발성이 강한 정보들은 세션스토리지를 사용합니다.

 

6. REST API가 무엇인가요?

REST란 자원을 이름으로 구분하여 자원의 형태를 공유하는 것을 의미하고, API란 데이터와 기능을 모아 사용하기 쉽게 해놓은 것 입니다.

따라서 REST API는 REST를 통해 확장성과 재사용성을 규칙을 적용해 구현하는 웹서비스를 말합니다. 메소드의 종류로는 GET, POST, PUT, DELETE, PATCH가 있으며, GET은 조회, POST전송, PUT은 수정, DELETE는 삭제 요청을 담당합니다. 데이터의 일부만 수정하고 싶을 때는 PATCH 를 사용합니다

 

7. GET과 POST의 차이가 무엇인가요?

GET은 서버로부터 데이터를 조회하기 위해 사용되는 HTTP 메소드입니다. 데이터를 query로 전달하여 조회합니다.

POST는 서버에 데이터를 보내기 위해 사용되는 HTTP 메소드입니다. GET 메소드와 달리 body에 담아서 전송합니다.

GET은 동일한 요청을 여러번 수행해도 동일한 결과가 나타나야 하는 경우에 주로 사용되고, POST는 서버의 데이터를 변경시길 때 주로 사용됩니다.

 

8. CORS는 무엇인가요?

CORS가 없이 모든 곳에서 데이터를 요청하게 되면 다른 사이트에서 원래 사이트를 흉내 낼 수 있게 됩니다. 이는 악의적으로 사용될 우려가 있기 때문에 웹 브라우저에서 현재 접속하고 있는 도메인과 요청하려는 API의 도메인이 다르면 접속을 제한합니다. 따라서 요청을 하려면 서버와 협의하여 요청해야합니다.

 

9. CSR과 SSR의 차이가 무엇인가요?

  • CSR (Client Side Rendering)

최초에 서버에서 전체 페이지를 로딩해서 사용자에게 보여주고, 이후에는 사용자의 요청에 따라 리소스를 서버에서 제공하면 클라이언트가 해석하고 바로 렌더링 하는 방식입니다. 빠른 속도가 특징이지만, 초기 구동 속도가 SSR에 비해서 느리고, 검색엔진 최적화에 취약합니다.

  • SSR (Server Side Rendering)

사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 해 html과 같은 리소스들을 어떻게 보여줄지 결정한 뒤에 사용자에게 반환합니다. 리액트의 단점 중 하나가 CSR로 구현되어 SEO에 취약하다는 점인데, SSR을 통해 정적인 웹페이지의 리소스를 제공해 해결할 수 있습니다.

 

10. Webpack과 Babel은 무엇인가요?

웹팩은 여러개의 파일을 하나로 합쳐주는 모듈 번들러입니다. 쉽게 말해 html 파일에 들어가는 다수의 자바스크립트 파일들을 하나의 파일로 만들어 주는 역할을 합니다. 

바벨은 트랜스파일러로 특정 언어로 작성된 소스 코드를 비슷한 수준의 다른 언어로 변환합니다. 최신 자바스크립트 문법은 모든 브라우저에서 호환되지 않기 때문에 babel을 통해 호환되는 문법으로 변환합니다.

 

#3. HTML & CSS

margin과 padding이 무엇인가요?

border를 기준으로 margin은 밖의 여백을 지정하는 속성이며, padding은 안쪽 여백을 지정하는 속성입니다.

 

position 속성은 무엇인가요?

position 속성은 html 요소를 배치하는 방법을 지정하는 속성입니다. 사용할 수 있는 속성값은 static, relative, absolute, fixed, sticky가 있으며, static은 디폴트 값, relative는 현재 위치를 기준으로 포지션을 지정하고, absolute는 부모 요소를 기준으로 포지션을 지정합니다. fixed는 고정된 위치이며, sticky는 원하는 위치에 도달하면 고정되는 속성값입니다.

 

Flex 속성은 무엇인가요?

플렉스는 display 속성값에 flex값을 명시하면 사용할 수 있습니다. float 속성이나 inline-block 속성의 단점을 보완하여 레이아웃 배치 전용 기능으로 고안되었습니다.

저작자표시 비영리 변경금지

'ETC > 기술면접' 카테고리의 다른 글

React 관련 기술면접 정리  (0) 2022.09.19
Javascript 관련 기술면접 정리  (0) 2022.09.19

+ Recent posts

티스토리툴바