📝 질문 목록
✍ 학부 기초
객체지향 프로그래밍
- 컴퓨터 프로그래밍 패러다임중 하나로써 기존의 절차지향과는 다르게 객체끼리 상호작용을 통해 프로그램이 동작하는것
- 특징
- 캡슐화, 추상화, 상속, 다형성
- 장점
- 코드 재사용이 용이
- 유지보수가 쉬움
- 큰 프로젝트에 적합
오버로딩 vs 오버라이딩
- 오버로딩
- 하나의 클래스의 같은 이름의 메서드를 여러개 정의하는것
- 매개변수 타입과 갯수가 달라야함!
- 오버라이딩
- 부모클래스로부터 상속받는 메서드의 내용을 상속받는 클래스에 맞도록 재정의 하는것
추상클래스
- 추상클래스는 클래스 구현부 내부에 추상 메서드가 하나 이상 포함되거나 abstract로 정의된 경우를 말함
- 동일한 부모를 가지는 클래스를 묶는 개념으로 상속을 받아서 기능을 확장시키는 것이 목적
인터페이스
- 모든 메서드가 추상 메서드인 경우를 말함
- 구현 객체가 같은 동작을 한다는 것을 보장하는 것이 목적
- 추상클래스와 반대로 다중 상속이 가능함
싱글턴 패턴
- 애플리케이션 시작시 최초 한번만 메모리를 할당하고 그 메모리의 객체를 만들어 사용하는 패턴
- 장점
- 메모리 낭비를 막음
- static(전역) 객체기 때문에 다른 클래스에서 데이터를 공유하기 쉬움
가비지 컬렉션
- 시스템에서 더이상 사용하지 않는 동적 할당된 메모리 블록을 찾아 다시 사용가능한 자원으로 회수하는것
- 자동으로 이루어지므로 메모리 영역을 관리할 필요가 없음
람다식
- 메소드를 하나의 식으로 표현한것
- 식별자 없이 실행할 수 있는 함수 표현식
- 익명 함수로 부르기도 함
✍ JavaScript
자바스크르립트?
- HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 스크립트 언어
- 객체 기반의 언어이고, 변수 자료형이 선언되지 않음
- 장점 : 컴파일 과정이 없는 동적 언어이기 때문에 다른 정적인 언어와 비교했을 때 빠른 시간안에 스크립트 코드를 작성할 수 있도록 도와줌
- 단점 : 성능이나 보안에 조금 취약하고, 내부에서 제공되는 기능이 제한적이고 관련된 도구가 상대적으로 적은 편임
비동기 프로그래밍
- 어떤 코드가 실행되고 완료되는걸 기다리지 않고 다음 코드를 먼저 실행하는것
JSON
- 자바스크립트의 객체를 만든는 표현식으로 key, value쌍으로 이루어져 있음
Callback(콜백)
- 다른 함수의 인자로써 이용되는 함수를 말함
- 어떤 이벤트에 의해 호출되어지는 함수를 말함
- 비동기 처리시 콜백 함수를 사용
- 단점
- 콜백지옥에 빠지면 로직이 어려워지고 가독성이 떨어짐
- Promise 혹은 Async/Await를 이용해 해결
Promise
- 비동기 프로그래밍을 위해 사용
- 콜백함수의 단점을 보완하며 동기 처리 시점을 명확하게 표현
Async, Await
- 자바스크립트 비동기방식 패턴중 가장 최근에 나온 기술
- 기존 콜백과 Promise의 기능은 살리고 코드의 가독성을 높여줌
스코프
- var : 함수 단위 스코프를 가짐 재선언 및 재할당 가능
- let : 블록 단위 스코프를 가짐 재할당만 가능
- const : 블록 단위 스코프를 가짐 재선언 및 재할당 불가능
호이스팅
- 자바스크립트 함수가 실행되기 전에 함수안에 필요한 변수값을들 모두 모아서 유효 범위의 최상단에 선언하는 것
- var 변수 선언과 일반 함수 선언문에서만 호이스팅이 일어남
- 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려 처리하는 것
(실제 메모리에서는 변화가 없음)
익명함수
- 함수 표현식으로 함수를 선언할때 콜백함수에서 사용
클로저
- 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말함
- 즉, 함수가 선언되는 그 순간에 함수가 실행될 때 실제 외부변수에 접근하기 위한 객체이다.
- 클로저를 무자비하게 사용할 경우 가비지컬렉션 대상이 될 객체들이 메모리상에 존재하게 되므로, 클로저를 남발하게 되면 Overflow 가 발생할 수 있으니 유의해야한다.
타입스크립트
- MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어!
- ES5, ES6 문법을 포함하고 있음
- 정적 타입 언어이기 때문에 컴파일 시간이 조금 걸리지만 안정성을 보장함
(컴파일 단계에서 오류를 포착할 수 있는 장점이 존재)- 네임스페이스, 클래스 및 인터페이스를 지원함
함수형 프로그래밍?
- 부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임!
- 인풋과 아웃풋이 있고 외부 요인에 영향을 받지않아 철저히 독립적임, 다른것을 참조하지 않고 오로지 자신에게 주어진 것들로만 작업함
- 부수 효과
외부의 상태를 변경하는 것 또는 함수로 들어온 인자의 상태를 직접 변경하는 것
- 순수 함수
부수 효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 (외부의 상태를 변경하지 않는 함수)
- 장점
- 모듈화 수준이 높으면 재사용성이 높고 좋은 프로그래밍이라고 할 수 있음
반응형 프로그래밍?
- 데이더 흐름과 전달에 관한 프로그래밍 패러다임!
- 데이터의 흐름을 먼저 정의하고 데이터가 변경되었을때 연관된 함수나 수식이 업데이트 되는 방식
ex)엑셀의 월매출을 더한것이 연매출이 되는것- 기존 자바에서 사용했던 Pull방식이 아닌, Push방식의 프로그래밍 개념이고, 복잡한 비동기 프로그램을 쉽게 만들 수 있도록 도와줌
프레임워크 vs 라이브러리
- 프레임워크 : 뼈대나 기반구조를 뜻함으로써 프로그래밍을 진행할때 필수적인 코드, 알고리즘 등과 같이 어느 정도의 구조를 제공해 주기 때문에 이 뼈대 위에서 코드를 작성하여 개발함
- 라이브러리 : 특정 기능에 대한 도구 또는 함수들의 집합으로써 프로그래머가 어떠한 기능을 수행하기 위해서 도움을 주는 것들을 제공해 주는 역할
- 프레임워크는 전체적인 흐름을 자체적으로 가지고 있음
- 라이브러리는 프로그래머가 전체적인 흐름을 가지고 있음
✍ React
React?
- 페이스북에서 개발한 자바스크립트 라이브러리의 하나로써 사용자 인터페이스(UI)를 만들기 위해 사용하는 (컴포넌트들)components!
특징
1. JSX
2. 단방향 데이터 바인딩
3. 가상돔
가상돔(Virtual DOM)
- 속도 이슈에 대한 해결책으로써 DOM을 최소한으로 조작하자는 개념을 바탕으로 등장
- Virtual DOM은 Real DOM에 접근하여 조작하는게 아닌, DOM을 추상화 한 자바스크립트 객체를 구성하여 사용 👉 Real DOM의 사본 정도의 개념
Virtual DOM을 이용한 업데이트 방법!
1. 업데이트한 전체 UI를 Virtual DOM에 리랜더링
2. Real DOM과 생성된 Virtual DOM을 비교
3. 바뀐 부분만 Real DOM에 적용
Compenent Life Cycle
일반적인 순서
1. constructor
2. render
3. ComponentDidMount
4. ComponentDidUpdate
5. ComponentWillUnmount
React Hooks! (일반적으로 자주 사용하는 훅)
- useState : state(상태) 관리
- useEffect : 함수형 컴포넌트에서 라이프 사이클
- useRef : 특정 DOM을 선택하는 경우
- useMemo : 연산한 값 재사용
- useCallback : 연산한 값 재사용(함수)
Redux
- 전역(Static)적인 상태 관리를 위한 상태관리 도구!
- 규모가 큰 프로젝트에서 유용함
- 3가지 원칙
- 단 하나의 store를 사용
- store안의 모든 state값은 읽기 전용이어야 함
(변경을 위해서는 action > dispatcher를 이용)- 순수 함수로 변경
(reducer는 이전 상태를 변경하지 않고 새로운 상태를 리턴함)
Redux-Saga
- 비동기 액션을 처리하기 위한 Redux-Middleware중 하나!
- saga를 실행하기 위한 action함수를 호출하면 saga가 듣고 특정 동작을 수행 후 다시 특정 action함수를 호출해 reducer의 상태를 업데이트해서 return함
saga-effect 함수
- all : 배열을 받고, 받은 이펙트를 등록
- yield : 다음 진행 여부/시점을 제어함(await과 비슷)
- select : 리듀서의 상태(state)를 가져옴
- call : 동기 함수를 호출(api가 리턴할때까지 기다림)
- fork : 비동기 함수를 호출
- put : 리듀서의 dispatch와 동일한 기능을 함
- take -> 한번만 실행되고(다음 action이 오기전까지 블럭 처리) 이벤트 삭제됨
- takeEvery -> 한번 실행되도, 이벤트 계속 listen
map 사용시 key가 없으면 warning이 나타나는 이유?
리액트가 Virtual DOM을 통해 렌더링 하는 특성때문에 변경된 아이템 요소를 알아차려 변경된 것만 리렌더링 하기 위해서 고유한 key값을 필요로 함
- key값이 없어도 실행에는 문제없지만, 굳이 변경이 없는 데이터까지 DOM을 조작해서 불필요한 자원을 낭비하는것을 방지하는것이 좋음
- index를 key값으로 사용하면 안되는 이유
- 리스트 요소에 가장 앞에 데이터가 추가(삭제) 되는 경우, 기존에 순서대로 있던 모든 데이터 요소들이 뒤로(앞으로) 하나씩 밀리게 되면서 index가 모두 변경 되는데, 그러면 변경된 데이터는 없지만 key값이 모두 바뀌게 되면서 모든 요소를 리렌더링하여 불필요한 자원의 낭비가 발생하기 때문!
훅의 중요한 규칙
반복문, 조건문 혹은 중첩된 함수 내에서 훅 호출 불가능
- 예를들어 조건문 안에 훅을 사용하는데 만약 조건문이 false라서 그냥 넘거가게 되는 경우가 발생 할 수 있음
- 리액트가 훅이 호출되는 순서에 의존하기 때문에 해당 부분이 건너뛰게 된다면 순서가 밀려서 버그가 생기게 되기 때문!
SSR - 서버 사이드 렌더링
서버에 html 파일을 저장해두었다가 요청이 발생할 때 모든 파일을 서버 연산을 통해 렌더링하여 완성된 페이지를 브라우저에 전달하는 방식
- 장점
- 검색엔진 최적화 기능(SEO)
- 첫 렌더링된 html을 클라이언트에게 전달해 주기 때문에 초기 로딩속도를 많이 줄여줄 수 있음
- 단점
- 매 페이지 이동마다 서버 요청(플리커링 현상)
- 모든 페이지를 리로딩
- TTV(Time To View)와 TTL(Time To Interaction)이 다름
CSR - 클라이언트 사이드 렌더링
서버에서 html 파일을 처리하지 않고, 브라우저의 자바스크립트를 통해 상호작용하는 방식으로 주로 DOM을 사용하여 브라우저에서 렌더링 하는 방식
- 장점
- 초기 로딩 이후 SSR보다 속도가 빠름
- 단점
- 초기 로딩에 많은 시간이 걸림
- 검색 엔진 최적화에 취약함 -> 초기에 받은 index.html의 body가 비어있기 때문, 이후 JS파일을 다시 요청하여 가져온 후 동적 페이지를 만들어주는 역할을 함
✍ 자료구조
배열(Array)
- 리스트를 배열의 형태로 구현한 것, 실제로 내부 구조가 물리적으로 연속된 배열의 형태로 구현함
- 장점
- 인덱스로 바로 접근이 가능하기 때문에 검색 속도가 빠르다
- 단점
- 연속적으로 데이터가 들어있어야 하는 특성 때문에 데이터 추가, 삭제 시 빈 공간이 생기지 않도록 별도의 작업이 필요하다
연결리스트(LinkedList)
- 리스트를 포인터를 이용하여 구현한 것, 실제로 떨어져있는 데이터를 포인터를 이용하여 구현함
- 장점
- 데이터의 추가, 삭제 시 포인터만 바꿔주면 되기 때문에 추가, 삭제가 용이함
- 단점
- 원하는 노드를 찾을 때까지 포인터로 노드를 탐색해야 하기 때문에 검색하는 시간과 비용이 많이 듬
해시
- 임의의 크기를 가진 데이터(Key)를 고정된 크기의 데이터(Value)로 변화시켜 저장하는 것
- 키에 대한 해시값을 구하는 과정을 해싱이라고 하며 이때 사용하는 함수를 해시함수 라고 함
- 해시값 자체를 index로 사용하기 때문에 평균 시간복잡도가 O(1)로 매우 빠르다
- 자바스크립트에서 Object와 동일
정렬 시간복잡도
✍ 기타
Rest?
- 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 것
- 다음의 구성으로 이루어져 있음
- 자원(Resource) - URL
- 행위(Verb) - Http Method
- 표현(Representations)
- 자원에 대한 행위는 Http Method로 표현
Restful API?
- REST 아키텍처의 제약 조건을 준수해 설계된 API를 뜻함
- 특징 : 확장성과 재사용성을 높여 유지보수 및 운용이 편리함
GraphQL
facebook이 2012년에 개발하여 2015년에 공개한 쿼리 언어로써 API를 만들 때 사용할 수 있고, 그와 동시에 쿼리에 대한 데이터를 받을 수 있기도 함
- SQL : 데이터베이스에 저장된 데이터를 효율적으로 가져오는 것을 목적으로 함
- GraphQL : 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것을 목적으로 함
- 장점
- 필요한 정보만 가져올 수 있음
- 하나의 엔드포인트가 존재함
- 여러번 네트워크를 호출할 필요 없이, 한번의 네트워크 호출로 처리가 가능함
- 단점
- 캐싱이 REST에 비해 복잡함
- 데이터 쿼리의 상당 작업을 서버측으로 옮겨, 서버 개발자 작업의 복잡성이 커짐
웹 인증(쿠키-세션 / JWT)
쿠키-세션
1. 사용자가 로그인을 한다.
2. 서버에서는 계정정보를 읽어 사용자를 확인한 후, 사용자의 고유한 ID값을 부여하여 세션 저장소에 저장한 후, 이와 연결되는 세션ID를 발행합니다.
3 사용자는 서버에서 해당 세션ID를 받아 쿠키에 저장을 한 후, 인증이 필요한 요청마다 쿠키를 헤더에 실어 보냅니다.
4. 서버에서는 쿠키를 받아 세션 저장소에서 대조를 한 후 대응되는 정보를 가져옵니다.
5. 인증이 완료되고 서버는 사용자에 맞는 데이터를 보내줍니다.JWT
1. 사용자가 로그인을 한다.
2. 서버에서는 계정정보를 읽어 사용자를 확인 후, 사용자의 고유한 ID값을 부여한 후, 기타 정보와 함께 Payload에 넣습니다.
3. JWT 토큰의 유효기간을 설정합니다.
4. 암호화할 SECRET KEY를 이용해 ACCESS TOKEN을 발급합니다.
5. 사용자는 Access Token을 받아 저장한 후, 인증이 필요한 요청마다 토큰을 헤더에 실어 보냅니다.
6. 서버에서는 해당 토큰의 Verify Signature를 SECRET KEY로 복호화한 후, 조작 여부, 유효기간을 확인합니다.
7. 검증이 완료된다면, Payload를 디코딩하여 사용자의 ID에 맞는 데이터를 가져옵니다.
크로스 브라우징
- 각기 다른 브라우저에서 동일한 정보 제공을 위한 기능
Get방식 vs Post방식
- Get방식
- 데이터를 전달할 때 URL에 데이터를 포함시켜 요청
- 데이터를 Header에 포함시켜 전송
- URL에 데이터가 노출되어 보안에 취약
- 전송하는 길이에 제한이 있음
- Post방식
- URL에 데이터를 노출하지 않고 요청
- 데이터를 Body에 포함시겨 전송
- URL에 데이터가 노출되지 않아 기본보안은 되어있음
- 전송하는 길이에 제한이 없음
HTTPS
- 보안이 강화된 HTTPS를 의미
- 암호화되지 않는 방식으로 통신할 경우 메세지의 감청으로 인한 보안 문제 발생 가능
AWS(Amazon Wen Services)
- 아마존에서 제공하는 클라우드 서비스
- 네트워킹 기반으로 가상 컴퓨터와 스토리지 네트워크 인프라 등 다양한 서비스를 제공
데브옵스
- 개발(Developement)과 운영(Operation)의 합성어
- 장점
- 속도, 빠른 배포, 안정성, 확장 가능, 협업 강화
✍ 기술 질문 외
우리회사에 지원한 이유는?
프론트엔드에 지원한 이유는?
성격 장점 및 단점?
취미가 무엇인지?
학교 다니면서 좋아했던 과목?
팀프로젝트 경험 및 의견결정 시 어떤식으로 진행하는지?
front-end developer