죠셉의 세상이야기

-[JOBINTERVIEW]자주하는 Web Developer Interview Questions & Answers

이번에는 자주 사용하는 질문 뿐 아니라, 답변도 같이 적어보겠습니다.

TOP 17이라고 적혀잇는데, 정작보면 15개이고, 마지막 15번째 문제는 무슨말인지 만들다가 말았더군요.

아마 HTML에서 DIV와 Frame사이의 차이점을 이야기하는것같았습니다.

자주하는 웹 개발자 인터뷰 질문 및 답변

1) Explain what are the key responsibilities of a Web Developer?

웹 개발자의 주요 책임은 무엇인지 설명하십시오.

-Program test and debug all web applications

-Design, develop, test and deploy web applications

-Uploading sites onto server and registering it with different search engines

-Coordinate with other designers and programmers to develop web projects

-Fix bugs, troubleshoot and resolve problems

-In case of system failure initiate periodic testing and implement contingency plans

-Develop appropriate code structures to solve specific tasks

-Support and assist in the upkeep and maintenance of websites

-Assume ownership of code throughout staging, development, testing and production

-프로그램 테스트 및 모든 웹 응용 프로그램 디버깅

-웹 애플리케이션의 설계, 개발, 테스트 및 전개

-서버에 사이트 업로드 및 다른 검색 엔진에 등록

-다른 디자이너 및 프로그래머와 협력하여 웹 프로젝트 개발

-버그 수정, 문제 해결 및 문제 해결

-시스템 장애가 발생할 경우 정기적 인 테스트를 시작하고 비상 계획을 수립하십시오

-특정 작업을 해결하는 적절한 코드 구조 개발

-웹 사이트 유지 및 유지 보수 지원 및 지원

-준비, 개발, 테스트 및 생산 과정에서 코드 소유권을 주장합니다.

2) What web developer should know?

웹 개발자는 무엇을 알아야합니까?

A good web developer should know

웹개발자는 알아야합니다.

HTML

CSS

SQL

PHP/Ruby/Python

JQuery

JavaScript

3) Explain what is CORS? How does it work?

CORS가 무엇인지 설명하십시오. 어떻게 작동합니까?

(CORS) Cross-Origin Resource Sharing is a mechanism that enables many resources (e.g.,JavaScript, fonts etc.) on a web page to be requested from another domain outside the domain from which the resource originated. 

It is a mechanism supported in HTML5 that manages XMLHttpRequest access to a domain different.

(CORS) Cross-Origin Resource Sharing은 웹 페이지의 많은 리소스 (예 : JavaScript, 글꼴 등)를 리소스가 생성 된 도메인 외부의 다른 도메인에서 요청할 수있게하는 메커니즘입니다. 

HTML5에서 지원되는 메커니즘으로 다른 도메인에 대한 XMLHttpRequest 액세스를 관리합니다.

4) List out the advantage of HTTP/2 as compared with HTTP 1.1?

HTTP 1.1과 비교하여 HTTP / 2의 이점을 나열하십시오.

The advantage of HTTP/2 compared to HTTP/1.1 is

-HTTP headers data compression

-Server push technologies

-Over a single TCP connection parallel loading of page elements

-Prioritization of request

HTTP / 1.1에 비해 HTTP / 2의 장점은

-HTTP 헤더 데이터 압축

-서버 푸시 기술

-단일 TCP 연결을 통해 페이지 요소의 병렬로드

-요청의 우선 순위 지정

5) Explain what is an ETag and how does it work?

ETag는 무엇인지 설명하고 어떻게 작동합니까?

An ETag is an opaque identifier allocated by a web server to a specific version of a resource found at a URL. 

The ETag is a part of HTTP, the protocol for the world wide web and when the server reads the ETag from client request, the server can then tell whether to send the file (HTTP 200) or tell the client just to use their local copy (HTTP 304).

ETag는 웹 서버가 URL에서 찾은 특정 버전의 리소스에 할당되는 불투명 한 식별자입니다. 

ETag는 월드 와이드 웹의 프로토콜 인 HTTP의 일부이며, 서버가 클라이언트 요청에서 ETag를 읽을 때 서버는 파일 (HTTP 200)을 전송할지 클라이언트에게 로컬 복사본을 사용할지 여부를 알릴 수 있습니다 (HTTP 304).

6) Explain what is long polling?

long polling이 무엇인지 설명하십시오.

Long polling is a web application development pattern used to emulate pushing data from the server to the client. 

When the long polling is used, the client sends a request to the server, and the connection remains intact until the server is ready to send data to the client. The connection will be closed only after the data is sent back to the client or connection timeout occurs.

long polling은 서버에서 클라이언트로 데이터를 에뮬레이트하기 위해 사용되는 웹 애플리케이션 개발 패턴입니다. 

long polling이 사용되면 클라이언트는 서버에 요청을 보내고 서버는 클라이언트에 데이터를 보낼 준비가 될 때까지 연결을 그대로 유지합니다. 데이터가 클라이언트로 다시 전송되거나 연결 시간 초과가 발생한 후에만 연결이 닫힙니다.

7) Explain what is DTD (Document Type Declaration)? Mention what is the difference between CDATA and PCDATA in DTD?

DTD (Document Type Declaration) 란 무엇입니까? DTD에서 CDATA와 PCDATA의 차이점은 무엇입니까?

A DTD means Document Type Definition (DTD) which defines the structure, legal elements and attributes of an XML document.

PCDATA: A PCDATA is a Parsed Character Data. XML parsers usually parse all the

text in an XML document.

CDATA: While CDATA is an Unparsed Character Data, the term CDATA is used about

text data that should not be parsed by the XML parser.

DTD는 XML 문서의 구조, 적법 요소 및 속성을 정의하는 DTD (Document Type Definition)를 의미합니다.

PCDATA : PCDATA는 구문 분석 된 문자 데이터입니다. XML 파서는 일반적으로 모든

XML 문서의 텍스트.

CDATA : CDATA는 분석되지 않은 문자 데이터이지만 CDATA라는 용어는

XML 파서가 구문 분석해서는 안되는 텍스트 데이터

8) Mention some tips you can use to reduce the load time of a web application that you have written?

작성한 웹 응용 프로그램의로드 시간을 줄이기 위해 사용할 수있는 몇 가지 팁을 언급합니까?

To decrease the load time of a web application you have to follow the following tips

-Optimize images to no longer than screen resolution and save it as a compressed file

-Eliminate all JavaScript files to reduce the amount of transferable data

-Combine & Mininify all CSS and JS and call them in footer

-Defer or Asynch JS Files

웹 응용 프로그램의로드 시간을 줄이려면 다음 팁을 따라야합니다.

-이미지를 화면 해상도보다 더 이상 최적화하지 말고 압축 파일로 저장하십시오.

- 전송 가능한 데이터 양을 줄이기 위해 모든 JavaScript 파일을 추출하십시오.

-모든 CSS와 JS를 깔끔하게 정리하고 꼬리말로 호출

-Defer 또는 Asynch JS 파일

9) Mention what is the correct way to include JavaScript into your HTML?

HTML에 JavaScript를 포함시키는 올바른 방법은 무엇입니까?

The correct way to include JavaScript into your HTML is by using inline event handlers or inline code.

자바 스크립트를 HTML에 포함시키는 올바른 방법은 인라인 이벤트 핸들러 또는 인라인 코드를 사용하는 것입니다.

10) Explain in CSS, how can you make a form element's background color change when the user is entering text? Does this work in all browsers?

CSS에서 설명합니다. 사용자가 텍스트를 입력 할 때 양식 요소의 배경색을 어떻게 바꿀 수 있습니까? 이 기능이 모든 브라우저에서 작동합니까?

Yes, you can change the default look of form elements by styling their HTML tags: input, select and textarea. but it won’t work for all browsers.

예, HTML 태그의 스타일을 지정하여 양식 요소의 기본 모양을 변경할 수 있습니다 (input, select 및 textarea). 그러나 모든 브라우저에서 작동하지는 않습니다.

11) Explain what is the difference between cookies and local storage?

쿠키와 로컬 스토리지의 차이점은 무엇입니까?

-Client Side/Server Side 

Cookies : Data accessible both at client side and server side. The data is sent to the serverside with every cookie request.

Local Storage : Only at the local browser side data is accessible. Server cannot use local storage until deliberately sent a request to the server via POST or GET

-Size

Cookies : Storage capacity of cookies is 4095 bytes/cookie

Local Storage : Storage capacity of local storage is 5MB per domain

-Expiration

Cookies : Cookies have expiration and cookie data gets deleted after some time

Local Storage : There is no expiration and has to remove manually

-클라이언트 측 / 서버 측

쿠키 : 클라이언트 측과 서버 측에서 모두 액세스 할 수있는 데이터입니다. 데이터는 모든 쿠키 요청과 함께 서버 측으로 전송됩니다.

로컬 저장소 : 로컬 브라우저에서만 데이터에 액세스 할 수 있습니다. 서버는 의도적으로 POST 또는 GET을 통해 서버에 요청을 보낼 때까지 로컬 저장소를 사용할 수 없습니다.

-크기

쿠키 : 쿠키의 저장 용량 = (4095바이트/쿠키)입니다.

로컬 저장소 : 로컬 저장소의 저장소 용량은 도메인 당 5MB입니다.

-만료 시

쿠키 : 쿠키의 유효 기간이 만료되고 잠시 후 쿠키 데이터가 삭제됩니다

로컬 저장소 : 만료가 없으며 수동으로 제거해야 합니다.

12) In HTML what tag can be used for a multi-line text input control?

HTML에서 다중 라인 텍스트(multi-line text) 입력 컨트롤을 위해 사용할 수 있는 태그는 무엇입니까?

For multi-line text input control, you can use the “textarea tag”.

여러 줄 텍스트 입력 컨트롤의 경우 "textarea 태그"를 사용할 수 있습니다.

13) Explain how can you refer to CSS file in the web page?

웹 페이지에서 CSS 파일을 어떻게 참조 할 수 있는지 설명하십시오.

You can refer to the .CSS file in the webpage by using the tag. It should be kept between tag.

태그를 사용하여 웹 페이지의 .CSS 파일을 참조 할 수 있습니다. 태그 사이에 보관해야 합니다.

14) List out few ways you can reduce page load time?

페이지 로드 시간을 줄일 수 있는 몇 가지 방법을 나열하십시오.

You can do following things to reduce the page load time

Reduce image size

Remove unnecessary widgets

HTTP compression

Placing CSS at the top and script reference at the bottom or in external files

Reduce lookups

Minimize redirects

Caching,

페이지 로드 시간을 줄이려면 다음을 수행 할 수 있습니다.

이미지 크기 줄이기

불필요한 위젯 제거

HTTP 압축

상단에 CSS를 배치하고 맨 아래 또는 외부 파일에 스크립트 참조

lookups 축소

redirects 최소화

캐싱

출처 : https://career.guru99.com/top-17-web-developer-interview-questions/

-[JOBINTERVIEW]웹개발자 인터뷰 질문들(번역)

이번엔 영어로된 웹개발자에 관련된 인터뷰 질문들의 예제입니다.

Web Developer interview questions

-Computer Science questions

컴퓨터 과학 관련 질문

What is a ‘MIME type’ and what is it used for? Provide an example.

'MIME 형식'이란 무엇이며 어떤 용도로 사용됩니까? 예제를 제공하십시오.

Explain the pros and cons for CSS animations vs. JavaScript animations.

CSS 애니메이션과 JavaScript 애니메이션의 장단점을 설명하십시오.

What’s the difference between HTML and XHTML?

HTML과 XHTML의 차이점은 무엇입니까?

Why is it generally a good idea to position CSS s between and JS s just before ? Do you know any exceptions?

CSS를 배치하기 전에 일반적으로 JS를 배치하는 것이 일반적으로 좋은 이유는 무엇입니까? 예외를 아십니까?

-Role-specific questions

역할 관련 질문

Can you describe your workflow when you create a web page from scratch?

당신은 처음부터 웹 페이지를 만들 때 워크 플로를 설명 할 수 있습니까?

What’s your favorite programming language and why? What features (if any) would you like to add to this language?

가장 좋아하는 프로그래밍 언어는 무엇이며 그 이유는 무엇입니까? 이 언어에 어떤 기능을 추가 하시겠습니까?

How would you decrease page load times?

페이지로드 시간을 어떻게 줄일 수 있습니까?

Describe the process from the time you type in a website’s URL to it finishing loading on your screen.

웹 사이트 URL을 입력 할 때부터 화면에로드가 완료 될 때까지의 과정을 설명하십시오.

What user interface and security principles do you consider when building a website or online application?

웹 사이트 또는 온라인 응용 프로그램을 만들 때 어떤 사용자 인터페이스(user interface) 및 보안 원칙(security principles)을 고려합니까?

Have you used or implemented mobile specific layouts/CSS?

당신은 모바일 특정 레이아웃/CSS를 사용해왔거나, 구현해왔습니까? 

What tools and techniques do you use to debug JavaScript code?

자바 스크립트 코드를 디버깅 할 때 어떤 도구와 기술을 사용합니까?

Are you familiar with designing a single page app?

단일 페이지 응용 프로그램(single page app)을 디자인하는 데 익숙하십니까?

What methods do you use to make SEO-friendly web pages?

당신은 SEO 친화적 인 웹 페이지를 만들기 위해 어떤 방법을 사용합니까?

ps.SEO는 검색 엔진을 사용하는 사람들을 위한 최적화를 말합니다.

-Behavioral questions

행동 관련 질문

Describe a time when a program you developed didn’t run. How did you troubleshoot your code?

개발한 프로그램이 실행되지 않은 시간을 설명하십시오. 코드 문제를 어떻게 해결 했습니까?

What’s a fun project that you’ve worked on recently?

최근에 일해 온 재미있는 프로젝트는 무엇입니까?

What area of expertise would you like to master?

어떤 분야의 전문 지식을 마스터하고 싶습니까?

How do you stay up-to-date with the latest technology developments?

최신 기술 개발에 대해 어떻게 생각하십니까?

출처 : https://resources.workable.com/web-developer-interview-questions

-[JOBINTERVIEW]몇가지의 코딩인터뷰 질문 번역해봤습니다.

제가 영어가 짧아고 Ruby나 파이썬은 익숙하지 않아서 좀 번역이 시원찮네요.

일단 Cover-letter와 Resume가 중요해야겠지만, 대략적으로 어떤 질문을 하는지 좀 알아봐야 될거 같네요.

필요하시다면 참고 해보시기 바랍니다.

Coding interview questions

-Java

How are Runtime exceptions different from Checked exceptions?

Runtime exceptions는 Checked exceptions와 어떻게 다릅니까?

Why use an object Factory and how would you implement the Singleton pattern?

왜 object Factory를 사용해야하고 어떻게 Singleton pattern을 구현하겠습니까?

Is this possible in Java? “A extends B, C”

자바로 가능합니까? "A 확장 B, C"

What is difference between String, StringBuilder and StringBuffer in Java?

자바에서 String, StringBuilder 및 StringBuffer의 차이점은 무엇입니까?

-Ruby

What is the use of load and require in Ruby?

Ruby에서 사용되는 load and require 무엇입니까?

Explain each of the following operators and how and when they should be used: ==, ===, eql?, equal?

다음 연산자 각각과 언제 어떻게 사용해야하는지 설명하십시오 : ==, ===, eql?, equal?

What is a module? Can you tell me the difference between classes and modules?

모듈이란 무엇입니까? 클래스와 모듈의 차이점을 알려주시겠습니까?

What are some of your favorite gems?

좋아하는 gems에는 어떤 것들이 있습니까?

-Python

Why are functions considered first class objects in Python?

파이썬에서 functions가 first class objects로 간주되는 이유는 무엇입니까?

Can you explain circular dependencies in Python and potential ways to avoid them?

파이썬에서의 순환 의존성과 그것들을 피할 수있는 잠재적 인 방법을 설명 할 수 있습니까?

Give an example of filter and reduce over an iterable object.

필터의 예제를 제공하고 반복 가능한 객체를 줄입니다.

Can you explain the uses/advantage of a generator?

generator 의 용도 / 장점을 설명 할 수 있습니까?

-.NET

What is the WebSecurity class in .NET? What is its use?

.NET의 WebSecurity 클래스는 무엇입니까? 그 용도는 무엇입니까?

In .NET, attributes are a method of associating declarative information with C# code. Please describe the way they are used and a proper use case.

.NET에서 속성은 C # 코드와 선언 정보를 연결하는 방법입니다. 사용 방법과 적절한 사용 사례를 설명하십시오. 

Which is the best way to pass configuration variables to ASP.NET applications?

ASP.NET 응용 프로그램에 구성 변수를 전달하는 가장 좋은 방법은 무엇입니까?

Is it possible in .NET to extend a class (any class) with some extra methods? If yes, how can it be accomplished?

.NET에서 몇 가지 추가 메서드로 클래스 (any 클래스)를 확장 할 수 있습니까? 그렇다면 어떻게 성취 될 수 있습니까?

-PHP

If you need to generate random numbers in PHP, what method would you follow?

PHP에서 임의의 숫자(random numbers)를 생성해야한다면 어떤 방법을 따르겠습니까?

What’s the difference between the include() and require() functions?

include ()와 require () 함수의 차이점은 무엇입니까?

Explain how you develop and integrate plugins for PHP frameworks, like Laravel and Yii.

Laravel 및 Yii와 같은 PHP 프레임 워크 용 플러그인을 개발하고 통합하는 방법을 설명하십시오.

How can you get web browser’s details using PHP?

PHP를 사용하여 웹 브라우저의 세부 사항을 어떻게 얻을 수 있습니까?

-HTML/CSS

Can you describe the difference between inline elements and block elements?

inline elements와 block elements의 차이점을 설명해 주시겠습니까?

Why is it generally a good idea to position CSS s between and JS s just before ? Do you know any exceptions?

CSS를 배치하기 전에 일반적으로 JS를 배치하는 것이 일반적으로 좋은 이유는 무엇입니까? 예외를 아십니까?

Can you describe how padding and margin differ?

padding과 margin이 어떻게 다른지 설명 할 수 있습니까?

How is responsive design different from adaptive design?

반응형 디자인(responsive design)과 적응형 디자인(adaptive design)의 차이점은 무엇입니까?

출처 : https://resources.workable.com/coding-interview-questions