프론트엔드 면접을 대비하여 지식 요약1 (Programming용어 관련)

안녕하세요. 좋아요요정입니다!

이직을 준비하며 프론트엔드 면접을 대비해 질문을 정리하고 있습니다. :) 

취업이나 이직을 준비하는 분들에게 도움이 되면 좋겠습니다! 

 

[프로그래밍 용어 관련]

TDD

MSA

데이터베이스

브라우저 저장소

CSR_SSR

CI/CD

함수형 프로그래밍

객체지향 프로그래밍

Pass by value/ Pass by Reference

JSON

애자일

 

---

 

 

TDD의 이해

TDD란 Test Driven Development 의 약자로 '테스트 주도 개발'이라고 합니다. 여기서 테스트란 제품의 함수, 특정한 기능, UI, 성능, API 등이 원하는 대로 동작하는지 확인하는 것입니다.

TDD를 하기 이전에는 개발과 검증의 역할이 따로 분리되어 있었습니다. 개발이 아무리 빨랐어도 검증 단계에서 시간이 소요되고 비용이 발생했습니다. 그 후 검증 단계를 자동화하여 개발-검증자동화 단계로 이동했으나, 테스트 단계에서 문제가 발생하면 개발을 다시 진행해야 했습니다.
요즘을 개발을 하면서 자동으로 테스트를 진행하며 개발을 완료하는 방식으로 진행합니다.

TDD의 장점

• 제품, 기능이 원하는 대로 동작하는 것을 확인할 수 있습니다.
• 요구사항을 만족하는 확률이 높아집니다.
• 이슈에 대한 예측을 할 수 있습니다.
• 버그를 개발 단계에서 빠르게 발견합니다.
• 테스트를 바로 진행할 수 있기 때문에 리팩토링을 자신감 있게 진행할 수 있습니다.
• 손쉬운 유지보수가 가능합니다.
• 코드의 품질이 향상합니다.
• 코드간의 의존성을 낮춥니다.
• 좋은 문서화가 가능합니다.
• 개발시간이 절약됩니다.

테스트 종류

• Unit test : 단위 테스트로 함수, 모듈, 클래스 등이 있습니다.
• Integration Test : 통합 테스트로 모듈들, 클래스들 간의 상호작용을 테스트하는 것입니다.
• E2E test : end-to-end로 최종적인 UI, 사용자 테스트입니다.

테스트의 종류에 따라 비용과 속도 차이가 있습니다. 단위가 작을수록 비용이 적고, 속도가 빠르며 단위가 커질수록 비용이 크고 테스트 속도도 오래 걸립니다.

TDD를 하는 방법?

이름에서 알 수 있듯이 테스트 주도 개발로 개발(코드 작성)전에 테스트 코드를 먼저 작성합니다.
코드가 없는데 어떻게 테스트 코드를 작성할 수 있냐고요? 저도 그렇게 생각했습니다.

1. 먼저 테스트 코드를 작성합니다.
2. 테스트를 돌립니다. (이 때 코드가 없기 때문에 처음에는 실패합니다.)
3. 테스트를 성공할 수 있는 아주 작은 코드부터 시작해 작성합니다.
4. 1~3번의 단계를 반복하며 기능을 구현한 후, 최종 단계에서 코드를 리팩토링합니다. 리팩토링할 때에는 이미 테스트코드가 확장되어 있기 때문에 더 체계적으로 리팩토링할 수 있습니다.

테스트 코드를 어떻게 먼저 작성할까요?

테스트 코드를 작성하기 위해서는 요구사항 분석 및 이해가 필요하고, 설계를 먼저 해보는 단계를 거쳐야합니다. 이를 통해 코드를 개발하기 전에 요구사항에 대해 점검할 수 있고, 사용자 입장을 고려하여 코드를 작성할 수 있습니다.
TDD를 잘 적용이 개발하게 되면 시스템 전반적으로 설계가 향상되고, 개발 집중력도 향상하게 됩니다. 조금씩 보상을 얻으며 개발할 수 있기 때문입니다.

---

[참고] 드림코딩 아카데미- TDD 강의

 

---

MSA의 이해

마이크로소프트 아키텍쳐의 줄임말로 기존 하나로 통합되어있던 어플리케이션을 여러개로 쪼개어져서 어플리케이션의 하나의 기능들이 하나의 어플리케이션이 되도록 구현된 것을 뜻합니다.

기존은 모놀리스(monolith)라고 표현하며 모든 서비스, 로직이 서버 하나에 다 들어가 있었습니다.

마이크로 서비스는 서비스 로직마다 각각의 서버가 존재하게 됩니다.

예를 들어 기존의 어플리케이션은 User, Post, Sopping이 하나의 서버에 존재했습니다.
서버에 문제가 생겼을 때 모든 기능을 사용할 수 없게 되었습니다. 마이크로 서비스는 User서비스로직과 서버, Post서비스로직과 서버, Sopping서비스로직과 서버 각각의 어플리케이션으로 존재하게 됩니다. 만약 Shopping 서버가 문제가 생겼을 때 Shopping 은 이용할 수 없지만 User, Post는 이용할 수 있게 됩니다.

마이크로서비스의 특징

각 서비스마다 데이터베이스는 하나만 사용해야 합니다. 다른 서비스와 독립적이어야합니다.
기존 모놀리스 방식의 경우 데이터베이스가 같다보니 Join으로 다른 테이블의 데이터를 쉽게 가져올 수 있었습니다. 그러나 마이크로서비스는 '다른 데이터베이스'이므로 서비스간 어떻게 데이터를 주고받을지 결정해야 합니다.

데이터베이스 간의 소통

• Sync : 필요한 데이터를 제공해주는 서비스에 직접 요청을 보내서 필요한 데이터를 받아오는 방식입니다. 이해하기 쉽고 추가적인 디비를 확보하지 않아도 되지만, 다른 서비스들과 의존성이 생기게 됩니다.
• async : 비동기의 경우 서비스들을 독립적으로 두고 이벤트 버스를 하나 구축해서 모든 요청이 이벤트 버스를 향하게 합니다. 이벤트 버스는 요청을 전달합니다. 이 경우에는 의존성이 생기지 않고 다른 서비스에 요청을 보낼 필요가 없어서 속도가 더 빠르나, 이벤트 버스를 적용하기가 어렵다고 합니다.

[참고]
hoon

 

---

 

DataBase

데이터 베이스란?

데이터베이스는 여러 사람에 의해 공유되어 사용될 목적으로 통합하여 관리되는 데이터의 집합을 뜻합니다.
기존 파일시스템보다 효율적으로 데이터의 중복을 피하고 정보를 일원화하여 처리를 효율적으로 수행하기 위해서 서로 관련성을 가지며 중복이 없는 데이터의 집합을 유지하는 것을 데이터베이스라고 합니다.
그리고 데이터베이스를 관리하는 시스템을 데이터베이스 관리 시스템, 데이터베이스가 구조되어있는 형태에 따라 유형을 분류할 수 있습니다.

데이터베이스 종류

관계형 데이터베이스(Relational Database)

관계형 데이터 모델을 기초로 모든 데이터를 2차원 테이블 형태로 표현합니다. column과 row를 이루는 하나 이상의 테이블로 정리하며 고유 키로 각 로우를 식별합니다. 로우는 레코드나 튜플로 부릅니다. 그리고 관계형 데이터베이스는 다른 테이블들과 관계를 맺고 모여있는 집합체로 이해할 수 있습니다. 이러한 관계를 나타내기 위해 key와 테이블간 Join이 가능하다는 특징이 있습니다.

NoSQL(Not Only SQL)

관계형 데이터베이스가 아닌 다른 형태의 데이터 저장 기술들입니다. 테이블간의 관계를 정의하지 않습니다. 테이블 간 Join도 불가능합니다. 빅데이터의 등장으로 데이터와 트래픽이 기하급수적으로 증가함에 따라 서능을 향상시키기 위해 등장했습니다.
NoSQL은 다양한 형태의 저장 기술을 지원하고 있습니다.

• Key-Value Database : key-value 쌍으로 저장
• Document Database : key-Document 형태로 저장
• Wide Column Database: Column-family Modal 기반으로 계층적인 구조로 저장 key와 column-faily, column-name을 가집니다.
• Graph Database : Graph Database Model에서는 데이터를 Node, Edge, property와 함꼐 그래프 구조를 사용하여 데이터를 표현하고 저장합니다.

TS-DB 시계열 데이터베이스

먼저 시계열 데이터는 시간에 따라 저장된 데이터를 의미합니다. 시계열 데이터들은 동일한 소스로부터 시간이 지남에 따라 만들어진 데이터들로 구성되므로, 시간 경과에 따른 변화를 추적하는데 용이합니다. 서버로부터 기록되는 히스토리성 데이터나, 경제 지표, 회사의 주가 등과 같은 것들은 시계열 데이터가 될 수 있습니다.
시계열 데이터베이스는 시계열 데이터를 처리하기 위해 최적화된 데이터베이스로써 빠르고 정확하게 실시간으로 쌓이는 대규모 데이터들을 처리할 수 있도록 고안되었습니다.

데이터베이스 관리 시스템 용어

스키마 : 데이터베이스에서 자료의 구조, 자료의 표현 방법, 자료간의 관계를 형식 언어로 정의한 구조입니다. 쿼리문 : 데이터베이스에 정보를 요청하는 문법입니다. DBMS : 사용자와 데이터베이스 사이에서 사용자의 요구에 따라 정보를 생성해주고 데이터베이스를 관리해주는 소프트웨어입니다. 더 포괄적인 용어입니다. RDBMS : Relational이 포함된, 관계형 데이터베이스 관리시스템을 의미합니다.

SQL(구조화 쿼리 언어)

SQL : 관계형 데이터베이스 관리 시스템의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어입니다. 자료의 검색과 관리, 데이터베이스 스키마 생성과 수정, 데이터베이스 객체 접근 조정 관리를 할 수 있습니다.

---

[참고]
RDBMS와 NoSQL의 차이점 및 장단점
TSDB 시계열 데이터베이스란?

 

 

 

---

브라우저 저장소

브라우저 저장소는 HTML5부터 추가되었습니다.
기존 쿠키와 비슷한 기능으로 해당 도메인과 관련된 데이터를 클라이언트의 웹 브라우저에 저장할 수 있도록 제공되는 기능입니다. 로컬스토리지, 세션스토리지가 있으며, 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴입니다. 데이터의 지속성에 따라 선택할 수 있으며, 클라이언트에 저장되기 때문에 해킹에 취약하다. 고로 중요한 정보는 저장하지 않는다.

쿠키

• 쿠키는 웹사이트에 의해서 유저의 정보를 저장하는 것입니다.
• 서버와 데이터를 공유하는 용도로 사용되며 유효기간 지정이 가능합니다.
• 단점 : 데이터 저장 제한으로 사이즈가 작고, 서버에 매 HTTP요청으로 전달되어 데이터 전달 낭비가 발생하게 됩니다.

로컬 스토리지

• 로컬 스토리지는 브라우저를 닫았다가 다시 열어도 계속 유지됩니다.
• 영구저장소로 만료기한을 따로 지정할 수 있으며 로그인 유지 등에 사용할 수 있습니다.
• 도메인만 같다면 전역적으로 공유가 가능합니다.

세션 스토리지

• 브라우저가 열려있으면 한 페이지 내에서 reload를 해도 계속 유지되지만, 브라우저를 닫으면 삭제되는 저장소입니다.
• 데이터의 지속성과 엑세스 범위에 특수한 제한이 존재합니다. 같은 사이트의 도메인이라도 브라우저가 다르면 서로 다른 영역이 됩니다.

 

---

CSR과 SSR

CSR

• client side Rendering의 약자
• 랜더링이 클라이언트 쪽에서 일어난다.
• 서버는 요청을 받으면 클라이언트에게 HTML, JS를 보내주고 클라이언트는 그것을 받아 랜더링한다.
• 순서 :
  • 사용자가 웹사이트 요청을 보냅니다.
  • CDN이 HTML/JS로 접근할 수 있는 링크를 클라이언트에 보내고, 다운로드 받습니다. 이 때 유저는 아무 화면도 볼 수 없습니다.
  • 다운이 완료된 JS가 실행되고 데이터를 위한 API가 호출됩니다.
  • 서버가 API로부터의 요청에 응답합니다.
  • API로부터 데이터를 받고 웹사이트가 구현되고 상호작용이 가능합니다.

SSR

• Server Side Rendering의 약자
• 서버쪽에서 랜더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
• 순서 :
  • 사용자가 웹사이트 요청을 보냅니다.
  • 서버는 즉시 렌더링이 가능한 html파일을 만듭니다.
  • 클라이언트에 전달되는 순간 즉시 html이 렌더링됩니다. 하지만 사이트 자체 조작은 불가능합니다.
  • 클라이언트가 js다운받아 성공적으로 컴파일이 되면, 저장된 사용자 조작이 실행되고 웹사이트는 상호작용이 가능해집니다.

차이

1. 웹사이트 로딩 시간 : SSR이 처음에는 더 빠르고, 나머지 부분이 업데이트 되는 경우는 CSR이 더 빠르다.
2. SEO 대응 :검색 엔진 자동화 로봇 크롤러로 웹 사이트들을 읽을 때 자바스크립트를 실행시키지 않는다. 그래서 애초에 컴파일 되어온 SSR이 크롤러 대응하기에 용이하다.
3. 서버 자원 사용 : SSR이 서버 자원을 더 많이 사용한다.

 

---

 

CI/CD

CI/CI는 개발부터 배포까지의 단계를 자동화하여 어플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법입니다.

CI(Continuous Integration)

CI는 지속적 통합을 뜻하며 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 뜻합니다. CI르 구현할 경우 새로운 코드 변경 사항이 지속적으로 빌드 및 테스트되어 공유 저장소에 통합되므로 여러 명이 협업할 때 서로 충돌할 수 있는 문제를 해결할 수 있습니다.

CD(Continuous Delivery or Continuous Deployment)

CD는 지속적인 전달 또는 배포를 뜻합니다. 기업에 따라 CI를 통해 빌드/테스트된 어플리케이션을 수동적으로 배포하는지 자동적으로 하는지, 자동하의 정도에 따라 구분됩니다.

• 지속적인 전달 : CI로 배포가 가능한 상태가 된 후 배포는 수동으로 실행한다.
• 지속적인 배포 : 프로덕션 배포까지 자동으로 배포한다.

 

---

FP(Functional Programming)

함수형 프로그래밍은 객체지향 프로그래밍처럼 프로그래밍 패러다임 중 하나로, 순수함수를 활용하여 연산 작업을 순차적으로 진행되게 합니다.
순수 함수란 동일한 입력 값을 넣었을 때 동일한 리턴 값을 반환하며 외부에 영향을 받지 않는 함수를 뜻합니다.
함수의 실행이 프로그램에 영향을 주지 않고, 사이드이펙트를 줄이고 직관적인 코드 구현에 집중하도록 해줍니다. 여러가지 동시 다발적인 멀티쓰레딩환경에서도 안정적으로 동작할 수 있습니다.

 

 

---

OOP(Object-Oriented Programming)

OOP는 객체지향 프로그래밍은 프로그램을 객체들로 구성하고, 서로 상호 소통을 하도록 작성하여 하나의 어플리케이션을 이루게하는 방법입니다.
객체는 {키:값}의 형태로 데이터와 메서드를 가지질 수 있고, 프로퍼티를 조작할 수 있는 프로퍼티의 상태를 정의할 수 있는 데이터 프로퍼티와 접근자 프로퍼티를 가지고 있었습니다.
객체 지향은 단순히 객체를 사용하여 작성한다기보다, 많은 객체들을 공통적인 특징을 기준으로 직관적으로 이해할 수 있게 분류하고 묶어서 정의하고 상호작용하도록 작성하는 것입니다.

• 객체 지향 프로그래밍을 활용하기 위해서는 클래스, 객체, 메소드, 요소들이 있습니다.
  • 클래스: 객체들의 틀
  • 객체 : 클래스로 만든 요소
  • 메소드 : 객체들의 동작
  • 요소 : 객체들의 상태
• 객체지향 프로그래밍을 위한 4가지 원칙
  • 캡슐화(Encapsulation) : 다른 객체 혹은 외부의 누군가가 임의로 특정 객체의 값을 조작하지 못하도록 보호하는 기술
  • 추상화(Abstraction) : 사용자가 객체를 동작하기 위한 로직을 알 필요 없이 기능성만 제공하는 매커니즘
  • 상속(Inheritance) : 이미 존재하는 클래스에 구현된 기능들을 그대로 가져와 확장하여 사용할 수 있는 기술
  • 다형성(Polymorphism) : 하나의 객체가 여러 형태로 변화하는 것을 뜻함.

---

 

Pass by Value와 Pass by Reference

함수의 파라미터로 변수를 넘겨줄 때 값(value), 참조(reference)이냐에 따라 차이가 있습니다. 자바스크립트의 자료형은 원시값과 참조값이 있습니다. 원시값은 변수에 할당하게 되면 해당 값이 복제되어 할당됩니다. 참조값은 힙 메모리의 주소값을 할당합니다.

함수의 인자로 전달하는 경우 함수 스코프 내부에서 전달받은 인수를 위한 변수를 할당해 그대로 복제해 사용합니다. 이 때 원시값의 경우 원시값 자체를 복제하여 함수 내에서 수정이 이루어져도 함수에 전달했던 기존 값은 변경하지 않습니다.
하지만 참조형의 경우 데이터가 저장되어있는 힙메모리 주소를 복제하기 때문에 원본 데이터가 수정되어지게 됩니다. 원하지 않던 상황인 경우 예상하지 못한 버그를 발생시킬 수 있습니다.

 

 

---

JSON

JSON은 JavaScript Object Notation으로 서버와 클라이언트간 주고받을 데이터의 규칙입니다. 자바스크립트 객체 리터럴에 영감을 받아 개발되었으며, key와 Value를 가지고 순수한 문자열 스트링으로만 이루어져 있습니다.
기존 서버와의 데이터 통신 시 사용되었던 XML보다 훨씬 간단하고 가볍고, 사용자가 이해하기도 쉽습니다. 또한 다양한 언어에서 해당 언어의 데이터타입에 맞게 사용될 수 있다는 장점이 있습니다.

자바스크립트의 JSON

자바스크립트에서는 두가지 함수를 이용해 사용할 수 있습니다.

• stringify : 객체를 JSON형식으로 변환해 네트워크로 전달해줄 때 사용하는 함수
• parse: 서버로부터 받아온 JSON형식의 데이터를 자바스크립트 데이터 타입으로 변환하는 함수

---

 

애자일

요즘 IT업계에서 자주 접하게 되는 단어입니다. 애자일은 무슨 뜻인지 알아보았습니다.
애자일은 민첩성을 뜻하며 소프트웨어 기업들이 도입한 개념으로 급변하는 시장에서 기민한 대응을 하기 위해 빠르고 유연한 기업 환경(조직)을 만드는 것을 목적으로 한다고 합니다.

애자일의 본질

애자일의 본질은

1. 고객들에게 최소한의 기능과 제품을 보여주고
2. 피드백을 받은 다음 개선해나가는 것입니다.

전체가 완성되는 완성품을 시장애 내놓기 위해서는 시간, 비용의 소모가 크고 시장에서의 반응을 미치 예측해 대응하기에 어려움이 있습니다.
애자일은 최소한의 기능으로 먼저 고객들에게 피드백을 얻고, 그 다음 보완하고 기능을 추가하는 방식으로 지속적인 개선을 하는 것입니다.

애자일의 장점

• 시장 출시 속도가 빠르게 가능합니다.
• 애자일 방법론은 변화를 수용합니다. 시장에 적응성이 뛰어납니다.
• 위기 관리 능력이 뛰어납니다. 초반의 제품을 사용자테스트 할 수 있으며, 초기에 결함 문제를 식별할 수 있습니다.
• 전체를 완성하는 프로젝트보다 더 적은 비용으로 먼저 실행할 수 있습니다.
• 애자일은 전체 프로젝트 프로세스를 통해 테스트를 통합합니다. 지속적으로 개선될 수 있습니다.
•  

---

여러분 github, README파일이 중요한거 알고 계셨나요? 저는 알고는 있었는데 제대로 정리하지 못했었어요..  

이번에 이직을 준비하며 교수님께 자문을 얻었는데 github를 가장 먼저 본다는 답변을 받았습니다. 시간을 죄다 포폴에 투자하고, 이력서를 작성하고 준비를 끝마쳤다 생각했던 제게 큰 충격이었어요.

그래서 바로 깃허브를 키고 정리했습니다. test로 올려둔 것들, 빈 레파지토리들을 삭제하고, public으로 변경할 수 있는 항목들은 public으로 변경했습니다. 오케이! 꾸준히 깃잔디를 심고, 작은 단위의 프로젝트들부터 올리며 습관을 들여야겠다 생각했어요. 화이팅!

가즈아! 함께 깃잔디를 심읍시다..!! ㅎㅎ 

깃허브주소

주말동안 열심히 작업한 뿌듯한 내용 :)