면접 질문 대비 (React , Node.js , mySQL, JavaScript )

설 주간 휴식을 취하면서, 나의 위치를 파악해보기 위해 백엔드 신입 개발자로 이력서를 넣은 기업에서 오퍼가 와서, 면접을 보고 왔다. 어제 받았던 질문 중 기억에 남는 질문들을 학습을 위해 포스팅하려고 한다.

호이스팅이란 무엇인가?

호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.
자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(*실행 컨텍스트를 위한 과정)을 거친다.
자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다.
(정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다. 이는 선언이 파일의 맨 위로 끌어올려진 것 처럼 보이게 한다.)

let과 var 차이란?

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
호이스팅 역시 함께 잘 설명되있는 블로그입니다.

MVC Pattern에 대해서 설명해보세요.

데이터베이스와의 직접적인 상호작용을 관리하는 Model 단, 클라이언트와의 상호작용, 예시로써 유저에게 직접적으로 제공되는 웹페이지의 User Interface와 같은 프론트엔드에서의 구현 사항들을 제공해주는 View 단, Model과 View의 상호작용들 예시로써, 유저의 요청을 처리해서 응답하는 부분, 예시로써 API 구현등의 사항이 구현되어지는 Controller 단으로 레이어드 패턴을 구현하는 아키텍처를 일컫습니다.
(내 머리에서 나온 답변)

https://www.notion.so/wecode/Project-Architecture-d81fafd6059d46b6aee9dbb7730f1d08 (참고 자료)

사용하는 이유 :

• 염려의 분리 (Seperation of Concerns)
  유저 인터페이스와 관련된 부분은 모두 View 에 의해서 관리되고, 모든 데이터와 관련된 로직은 Model 에 의해서 관리되며 오로지 Controller 에 의해서 Model 에 접근할 수 있게 됩니다. 각각의 레이어가 하는 역할이 명확 합니다.
  
• 동시적인 개발 (Simultaneous Development)
  세개의 레이어로 역할이 나뉘어져 있기 때문에 동시다발적인 개발이 가능합니다. 역할분담에 용이하며 협업이 가능한 프로젝트를 구성할 수 있습니다.
• 수정의 용이함 (Ease of Modification)
  다른 레이어에 영향을 주지 않고 문제가 있는 로직을 찾아서 문제를 해결할 수 있습니다.
• 테스트-주도 개발(Test Driven Development)
  각각의 레이어, 그리고 그 레이어 속에 속한 각각의 모듈을 테스트 하기 좋습니다.

Restful API란 무엇인가요?

• REST(Representational State Transfer)란 웹에 존재하는 모든 자원(resorce, ex. 이미지, 동영상, 데이터)에 고유한 URI를 부여하여 자원에 대한 주소를 지정하는 방법론, 또는 규칙입니다. 현재 가장 널리 사용되고 있습니다.
• RESTful API는 REST 특징을 지키면서 API를 제공한다는 의미입니다.
  어렵다면 "프론트엔드에서 백엔드 API를 호출할 url을 어떻게 만들것인가?"에 대한 이야기라고 생각하셔도 됩니다.
• https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html (잘 설명되있음..)
• REST의 고유성을 높이기 위해 query parameter, path parameter 등을 사용할 수 있다.
• REST의 구체적인 개념
  HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.
  즉, REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐를 의미한다.
• 웹 사이트의 이미지, 텍스트, DB 내용 등의 모든 자원에 고유한 ID인 HTTP URI를 부여한다.
  CRUD Operation
  Create : 생성(POST)
  Read : 조회(GET)
  Update : 수정(PUT)
  Delete : 삭제(DELETE)
  HEAD: header 정보 조회(HEAD)

장단점

장점

HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해준다.
HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.
Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
여러가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
서버와 클라이언트의 역할을 명확하게 분리한다.

단점

표준이 존재하지 않는다.
사용할 수 있는 메소드가 4가지 밖에 없다.
HTTP Method 형태가 제한적이다.
브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 값이 왠지 더 어렵게 느껴진다.
구형 브라우저가 아직 제대로 지원해주지 못하는 부분이 존재한다.
PUT, DELETE를 사용하지 못하는 점
pushState를 지원하지 않는 점
https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

ORM에 대해서 설명하세요.

ORM은 Object-relational-mapping의 약어로, 데이터 하나를 하나의 객체로 생각하겠다는 패러다임에서 출발한 개념입니다. 여기서 객체 라고 하면, 언어마다 다를 수 있겠죠? 자바스크립트의 객체와 파이썬의 객체는 의미가 조금 다르니까요. 그러나 각 언어에 맞는 ORM을 사용하면 해당 언어에 적합한 객체의 형태로 데이터를 반환해줍니다.
즉, 각 언어에 적합한 객체의 형태로 데이터를 반환해주는 역할을 하는 것을 ORM이라고 할 수있 습니다.

Object Relational Mapping, 객체-관계 매핑
객체와 관계형 데이터베이스의 데이터를 자동으로 매핑(연결)해주는 것을 말한다.
객체 지향 프로그래밍은 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용한다.
객체 모델과 관계형 모델 간에 불일치가 존재한다.
ORM을 통해 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하여 불일치를 해결한다.
데이터베이스 데이터 <—매핑—> Object 필드
객체를 통해 간접적으로 데이터베이스 데이터를 다룬다.
Persistant API라고도 할 수 있다.
Ex) JPA, Hibernate 등
출처 ) https://gmlwjd9405.github.io/2019/02/01/orm.html
RDBMS : Relational DataBases Management Service

url 과 uri 차이는 무엇인가요?

• URL : Uniform Resource Locator의 약자 / URL은 흔히 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이다. URI의 서브셋이다.
• URI : Uniform Resource Identifier의 약자 / URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다.
• URI는 식별하고, URL은 위치를 가르킨다.
• 결론부터 말하면 URI는 URL의 의미를 품고있다.
  URL(Uniform Resource Locator)은 자원이 실제로 존재하는 위치를 가리키며, URI(Uniform Resource Identifier)는 자원의 위치뿐만 아니라 자원에 대한 고유 식별자로서 URL을 의미를 포함한다.
  https://velog.io/@torang/URL%EA%B3%BC-URI%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
  (아주 이해가 잘 가게 정리해주셨습니다.)

깃허브 과정

팀 프로젝트의 협업 과정에서 아주 중요한 역할을 한다. repository를 통해 clone 혹은 pull을 받은 프로젝트를 기점으로 수정 사항을 각자의 feature branch에서 add, commit, push 와 Pull Request를 통해 팀원들과의 의견 도출을 통해 Approve를 받아 merge하는 작업을 거치며 프로젝트를 진행한다. 기업에서는 대개 main, develop, feature, release, hotfix 브랜치들을 통해 버젼을 관리하고 있다.

데이터베이스 어떤 기능 구현 가능한가?

DATA DEFINE LANGUAGE의 CREATE, ALTER, DROP 쿼리문을 통해 데이터베이스와 테이블의 생성, 변경 삭제 기능을 구현하고 / DATA MANIPULATION LANGUAGE의 INSERT, UPDATE, DELETE 등의 쿼리문을 사용해 데이터 추가, 수정, 삭제할 수 있으며 / DATA QUERY LANGUAGE의 SELECT, WHERE, LIKE, JOIN 등의 쿼리문을 통해 상황에 따라 필요한 데이터를 추출할 수 있습니다. (실제 본인의 구현 능력을 토대로 답하였습니다.)

리액트를 사용하는 이유를 구조적으로 설명하세요.

• Component 단위 작성
  컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI를 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 됩니다. 이러한 블록을 조립해 하나의 완성품을 만드는 것과 같습니다. 이러한 특징은 하나의 컴포넌트를 여러 부분에서 사용할 수 있게 해줍니다. 가령, 웹 애플리케이션의 여러 곳에 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용하면 되죠.
  이러한 특징은 생산성과 유지 보수를 용이하게 합니다. 하나의 요소의 변화가 다른 요소들의 변화에 영향을 미치는 복잡한 로직을 업데이트하는 까다로운 작업에 경우, 컴포넌트의 재사용 기능으로서 보완할 수 있게 됩니다.
• JSX
  JSX(Javascript + xml)는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element(요소)를 제공해 줍니다. 장점은 매우 다양합니다. 단순히 개발자가 마크업 코드에 익숙하다면, 그것만으로도 JSX를 통해 컴포넌트를 구성하는 데 쉽게 적응할 수 있다는 장점이 있습니다.
• Virtual DOM
  제 블로그의 React 관련 면접에 잘 정리되있습니다!

번외 질문 : 파이썬 동적 정적 차이 설명해보아라. 장고 프레임워크 란?