면접 스터디 추가 답변 정리
네트워크
쿠키와 세션 공/차
- 공통점 : 데이터를 임시로 계속 저장해두는 역할.
- 차이점 : 쿠키는 사용자에게 저장되고 세션은 서버에 저장됨.
웹 개발 시 어떤 정보를 쿠키로 저장할지, 세션으로 저장할지 적절히 판단하는 것이 중요하다.
GET
- 데이터를 조회하기 위해 사용되는 방식으로 데이터를 헤더에 추가하여 전송하는 방식
- 주의점 : URL에 데이터가 노출되기 때문에 보안적으로 중요한 데이터를 포함해서는 안됨
POST
- 데이터를 추가 또는 수정하기 위해 사용되는 방식으로 데이터를 바디에 추가하여 전송하는 방식
- 주의점 : 완전히 안전하다는 것은 아니지만 URL에 데이터가 노출되지 않아 GET보다는 안전함
브로드캐스트/유니캐스트
- 브로드캐스트 : 송신 호스트가 전송한 데이터가 네트워크에 연결된 모든 호스트에 전송되는 방식
- 유니캐스트 : 고유 주소로 식별된 하나의 네트워크 목적지에 1:1로 데이터를 전송하는 방식
디자인패턴과 프로그래밍 패러다임
테스트 코드
작성 이유
- 기능이 정상적으로 동작하는지 확인할 수 있다.
- 결함을 사전에 발견할 수 있다.
- 코드 변경 시 변경 부분의 영향도를 쉽게 파악할 수 있다.
- 리팩토링을 안심하고 할 수 있다.
단위 테스트
소형 테스트에 속하는 단위 테스트는 클래스 범주 내에서 작은(함수) 단위의 기능에 대한 유효성을 검증하는 테스트이다. 매우 간단하고 명확하며 빠르게 실행된다는 특징이 있다.
실무에서 테스트 코드 작성
그렇다면 프론트엔드는 어떻게 테스트 코드를 적용할 수 있을까?
- 시각적 요소
- HTML 구조가 의도한 대로 나타나는지 테스트하기 위해 스냅샷 테스트를 수행하고 실제로 브라우저에 모습이 의도한 대로 나타나는지를 테스트하는 시각적 회귀 테스트를 수행한다. 이 스냅샷 테스트에 사용되는 도구로 JEST가 대표적이다. 시각적 회귀 테스트에 사용되는 도구로는 Chromatic이 존재한다.
- 사용자 이벤트 처리
- 입력 이벤트를 이벤트 핸들러로 처리하는 작업을 하게 되는데 이를 테스트하기 위해 이벤트를 시뮬레이션하거나 E2E 테스트를 통해서 실제로 발생시킬 수도 있다.
MVC 패턴
MVC 패턴을 사용한 대표적인 라이브러리는 React.js가 있다.
- 장점 : 재사용성과 확장성이 용이하다.
-
단점 : 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다.
- Model : 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.
- View : 사용자 인터페이스 요소를 나타낸다. 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다. 또한, 변경이 일어나면 컨트롤러에 이를 전달해야 한다.
- Controller : 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당한다. 또한, 모델과 뷰의 생명주기도 관리하며, 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려준다.
MVVM 패턴
대표적인 라이브러리는 Vue.js가 있다.
- 장점 : 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있다.
MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴이다. 뷰모델은 뷰를 더 추상화한 계층이며 MVC와 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다.
- 커맨드 : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법이다.
- 데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다.
순수함수
함수형 프로그래밍은 선언형 패러다임의 일종이며 순수 함수들을 블록처럼 쌓아 로직을 구현하고 고 함수를 통해 재사용성을 높인 프로그래밍 패러다임이다. JS는 단순하고 유연한 언어이며, 함수가 일급 객체이기 때문에 객체지향보다는 함수형 프로그래밍 방식이 선호된다. 이때, 순수함수는 출력이 입력에만 의존하는 것을 의미한다.
출처 :
댓글남기기