(11:37~)
인성 (~11:52)
자기소개
- 노력 + 함꼐하고 싶은 개발자 학식 어플리케이션 혼자 개발 - 개발동아리 - 2번의 인턴 JS 지식 전문 교육 - gfa교육
개발자가 된 이유 / 프론트
- 내가 만든 결과물로 다른 사람에게 영향을 준다는 점
- 프론트는 바로바로 구현물이 눈에 보이는 점 / 성능최적화 수치 부분 재미있었다 / 프론트엔드 생태계 빠르게 변화되는 점 재미있다.
최신기술 파악하기 위해 어떤 노력을 하고 있는가
- youtube(채널) , velog + blog
- conference, deview
- 최근에 관심있게 보고 있던 부분
- 리액트, 뷰 , 앵귤러 ⇒ 스벨트
- 스벨트 특징과 떠오르는 이유
- 빠름과 간결함, 가상돔 사용x
- 가상돔 사용 이점을 어떻게 보완하고 있는지
나에게 있어 중요한 가치 3가지는?
- 가족 / 행복 / 성장
나의 장단점은 무엇이라고 생각
- 장점 (의사소통 장점)
- 사람과의 트러블이 적다
- 단점
- 욕심이 많다
- 문제있는 동료와의 트러블
- 객관적인 자료를 가지고 이야기를 나누어보겠다
우리 부서에 오게 된다면 어떤 부분에 기여할 수 있는지
- 새로운시도 좋아함 ( 성능개선 측면)
- 번들사이즈 줄이는 과정 등 긍정적 피드백
개발자로의 목표
- 단기적 목표
- 프론트엔드 주제로 발표해보고 싶다.
- 장기적 목표
- 함께하고 싶은 동료가 되는 것
- 팀을 리딩하면서, 같이 끌어주고 가는 모습
혼자서 개발할 때와 같이 개발할 때의 장단점이 있다면
- 혼자 개발할 때 < 같이 개발할 때
- 능률이 좋다. (모르는 점 찾을 때 해매었다.)
- 개발모임
- 피드백 받을 수 있다는 점. 발전속도
프로젝트 중 동료와 갈등상황이 있었나요? 있었다면 어떻게 해결
- 대학팀플 역할 분배에서의 갈등
- 공평하게 업무 분배를 하도록 분배
- 모두가 프론트를 원한다면?
살면서 가장 몰입했던 경험은 무엇인지? 그때 경험으로 배운 것은?
- 프론트엔드 부트캠프기간
- 개발에서 재미를 느낀 분야는?
- 성능 최적화부분
- 프론트엔드를 선택한 이유
- 클론코딩식으로 바로바로 구현물을 만들 수 있다는 점
- 새로운 지식
카카오, 쿠팡 등이 아니라 왜 네이버에 지원?
- 대규모 트래픽을 경험할 수 있는 회사
- 서비스에 대한 애착
- 좋은 개발문화
- 직급에 상관없이 수평적인 분위기
선호하는 서비스 분야
- 데이터 시각화 하는 분야
질문의도랑 조금 다른듯?
왜 BizCIC 부서지원
꾸준히 지켜온 자신만의 가치관이 있는지
- 제일 빠르게 가는 길은 정직하게 가는 길이다.
- 요행을 바라기 보다 정직하게 가는 것.
- 바뀐 가치관
- 클린코드 측면, useEffect - sideEffect관련에서 피드백 받으면서 수용했던 점
스트레스
프로젝트 (20~
진행했던 프로젝트 간략하게 소개
- 1문장 소개 (테이블 리포트를 차트화)
진짜 프로젝트 소개보다, 어떤 것들을 했는지 좀 더 기술적으로 이야기하면 좋을 것 같음
최적화
- 번들사이즈 축소
- FCT, ... , 성능측정지표를 개선
- lodash,
- (throttle, debounce차이)
- throttle : 일정시간 동안 특정 이벤트
- debounce: 가장 마지막 이벤트를 실행하도록 함
가장 어려웠던 부분
- 성능적인 개선 (CLS 수치 최소화, 번들사이즈 최적화, 코드스플리팅)
프로젝트 하면서 에러핸들링 어떻게 했는지
- 에러처리 (API 처리)
이전 경험에서 어려웠던 기술부분
- 드라이브(파일 다운로드, 업로드)
상태 라이브러리
- Redux
- devtool 사용,
- 확장성 미들웨어
- redux에서 비동기작업등을 할 수 있는 부분
- redux thunk, redux saga
- Redux와 Mobx의 차이
- 스토어의 개수 차이
- Redux는 곧 사라질 기술이다? 본인의 의견은?
- 미들웨어 장점을 대체할 수 있다면,
차트라이브러리 왜 그거 사용하셨는지
- apexchart 사용이유
- 구현하고자 하는 기능을 가지고 있는가 (드래그 기능지원)
- 공식문서의 사용성
- canvas와 svg차이는?
- 성능적인 차이 svg속도가 빠른다.
- 왜? 벡터요소 사용, 선형적인 부분을 사용
웹팩과 바벨
- 웹펙
- 모듈번들러, 여러개의 자바스크립트 파일을 하나로 번들링
- 웹펙사용이유
- resourse로 하나의 js파일을 만드는 부분에서 장점
예상답변
웹팩은 여러 파일을 하나로 합쳐주는 자바스크립트 번들러이다. 하나의 entry point에서 시작하여 의존하는 모듈을 찾아내고, 결과적으로 하나의 결과물을 만들어 낸다. 웹팩은 모듈 시스템을 구성하는 기능 이외에도 컴파일 속도를 빠르게 해준다거나, 로더를 사용할 수 있다는 등의 장점을 가지고 있다.
- 바벨의 3단계(파싱,변환, 출력)
- 트리쉐이킹
프론트에서의 최적화
- 로딩최적화
- 번들사이즈 최적화
- 코드 스플리팅
- 렌더링 최적화
- CLS최적화
- 이미지 최적화
- 캐시 최적화
코드 가독성을 높이기 위해서 어떤 노력했는지
- 함수는 하나의 역할만 하도록
- 변수명, 함수명
TS 왜 사용했는지, 사용했을 때 느꼈던 장단점은?
- TS 사용이유
- 컴파일 단계에서 에러검출
- vscode IDE 도움받을 수 있다
- 불편했던 점
- 초기 설정 비용
공부,개발비용있다? 위험하지않나?
리액트 (12:05~)
React 장단점
- 장점
- DOM연산이 적어 렌더링속도가 빠르다
- 컴포넌트화 재사용,유지보수 장점
- 리액트 웹/네이티브 사용가용
- 단점
- 뷰(UI) 부분만 관리하기 떄문에, 다른 부분은 써드파티 라이브러리 사용
React의 재조정 과정에 대해서 설명
- VirtualDOM
- 재조정 과정 구체적으로 어떻게 하는지
- diffing알고리즘
- 요소를 비교 → 요소가 다르다면 트리를 교체
- 요소가 같다면 속성을 비교
- 리스트 요소의 경우 key를 통해 맵핑하여 효율적인 비교
lifecycle
- constructor
- componentDidmount
- render
- componentDidUpdate
함수형에서는 어떻게
- hooks ( useEffect)
- unmount는 어떻게
setState 비동기?
- 마지막에 1번만 업데이트 진행
React에서 불변성을 지켜야하는 이유
- 불변성을 지키는 방법
- 깊은복사
React Element와 컴포넌트의 차이
state를 직접 변경하지 않고, setState를 사용하는 이유
통일성부여?
React Hooks의 장점
- 간결함
- custum hooks
React의 컴포넌트들의 이름을 대문자로 표기하는 이유
state와 props의 차이
네트워크
HTTP와 HTTPS 차이
- HTTP 보안적 약점이 있다
- HTTPS SSL 프로토콜을 사용해 강화
- SSL 프로토콜
- ㅇㅅㅇ?
- 비대칭키 방식과 대칭키 암호화 방식
- SSL은 혼합된 방식
TCP/IP 4계층
- 네트워크 계층역할
- 라우팅- 경로를 설정
- 전송계층, TCP와 UDP의 차이
- TCP
- 흐름제어, 3wayhandshaking
- 송신과 수신측의 속도를 조절하는 것
- UDP
- 동영상 스트리밍
프록시서버란? 필요이유
답변
프록시 서버란
클라이언트의 요청을 받아 중계해주는 서버입니다.
프록시 서버는 빠른 데이터 성능과 보안을 위하여 사용합니다.
[데이터성능]
프록시 서버는 요청된 리소스들을 캐시를 이용하여 저장해두고, 반복되는 요청 시 캐시에서 이를 제공함으로 데이터 전송 시간을 절약하고, 외부 트래픽을 줄여 네트워크 병목현상을 방지할 수 있습니다.
[보안]
보안적인 측면에서 자신의 IP를 익명화 하여 IP 추적을 방지하는 익명웹프록시를 사용할 수 있으며, 위험한 컨텐츠를 사전에 필터링하고, 특정 사이트의 접근을 차단하여 보안을 높이는 역할도 담당합니다.
웹프록시는 컴퓨터 네트워크에서 다른 서버로의 자원 요청을 중계하며, 분산시스템 구조를 단순화하여 서비스의 복잡도를 줄일 수 있습니다.
https://ko.wikipedia.org/wiki/프록시_서버
REST API와 RESTFUL 하다는 것은?
post에서 동사사용x답변
REST API (Representational State Transfer)는
HTTP를 제대로 활용하여 데이터를 주고 받는 일종의 API 패턴을 의미합니다.
[사용방법]
1.URI 는 정보의 자원을 표현해야 한다.
2. 자원에 대한 행위는 HTTP Method( get, post, put, delete)로 표현한다.
[특징]
가장 큰 특징은 Uniform인터페이스 입니다. 통일되고 한정적인 URI를 사용하도록 하여 범용성을 가지게 됩니다. 자체표현구조 는 REST API 메세지만 보고도 어떤 데이터 통신을 하는 지쉽게 이해할 수 있도록 하는 것을 말합니다. 또 서버와 클라이언트 구분을 명확히 한다.
- API 설계 규칙
- 리소스는 명사로 사용 (동사x)
- 단수와 복수데이터 구분
- 소문자와 하이픈(-)을 사용하여 작성한다. (대문자,카멜케이스,밑줄 사용 x)
- 마지막 문자 슬래시 사용하지 않는다.
쿠키와 세션 그리고 토큰의 차이는?
- 회원가입 로직 토큰으로 사용
- 토큰을 통한 인증 방식의 장점은?
- 저장을 하지 않아도 된다는 점
CS 기본
컴파일러와 인터프리터 차이
프로세스와 스레드의 차이
- 프로세스
- 스레드
- 프로세스내의 실행 흐름
- 멀티프로세스 보다 멀티 스레드의 장점
예상답변
프로세스는 운영체제로부터 CPU 자원을 할당받는 작업의 단위이다. 그리고 메모리에 올라와 실행되고 있는 프로그램의 인스턴스(독립적인 개체)를 의미한다. Code, Data, Stack, Heap의 구조로 되어 있다, 이러한 구조로 된 독립된 메모리 영역을 할당받는다.
스레드는 프로세스 내에서 실행되는 여러 흐름의 단위이다. 스레드는 프로세스 내에서 각각 Stack만 따로 할당받고 Code, Data, Heap 영역은 공유한다.
멀티 프로세스에 비해 멀티 스레드가 가지는 장점은 먼저 첫 번째로 프로세스를 생성하여 자원을 할당하는 시스템 콜이 감소함으로서 자원을 효율적으로 관리할 수 있다는 점이다. 두 번째로 프로세스 간 통신(IPC)보다 스레드 간의 통신 비용이 더 적게 발생한다. 다만 멀티 스레드 사용 시에는 공유 자원으로 인한 문제를 해결하기 위해 동기화를 신경써 주어야 한다
메모리는 어떻게 구성되어 있는지
예상답변
메모리는 크게 코드, 데이터, 스택, 힙 영역으로 나누어져 있다. 코드 영역은 실행될 프로그램의 코드가 저장되어 있는 영역이다. 데이터 영역은 전역 변수와 정적 변수가 저장되어 있는 영역이다. 스택 영역은 지역변수와 매개 변수가 저장되어 있으며, 함수의 호출과 함께 할당되는 영역이다. 힙 영역은 사용자에 의해 동적으로 할당되고 해제될 수 있는 메모리 영역이다. 스택 영역은 컴파일 타임에 크기가 결정되고, 힙 영역은 런 타임에 크기가 결정된다.
JS
Javascript 작동방식, 구조
예상답변
자바스크립트는 V8 엔진을 사용하며, 싱글 쓰레드 기반이고 콜백 큐를 사용한다. 엔진은 크게 두 요소로 구분된다. 메모리 힙(Memory Heap)과 콜 스택(Call Stack). 메모리 힙에서는 메모리 할당이 일어나고, 콜 스택에서는 코드 실행에 따라 호출 스택이 쌓인다. 자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 호출 스택이 하나이고 따라서 그 하나의 호출 스택에 실행된 코드가 하나씩 쌓이게 된다. 싱글 스레드이기 때문에 데드락 같은 문제나 복잡한 시나리오를 고민할 필요는 없으나, 호출 스택에 처리 시간이 어마어마하게 오래 걸리는 함수가 있다면 브라우저는 해당 함수가 실행되는 동안 아무것도 하지 못하고 가만히 있게 된다.
callback, promise, async,await 차이
예상답변
가장 먼저 나온 Callback은 비동기 처리를 구현하기 위해 만들어 졌다. 이 함수는 다른 함수에게 인자로 전달되어 어느 시점에 실행될 수 있도록 던져주는 함수이다. 하지만 콜백 지옥이라 불리는 중첩문이 발생하면서 에러처리 한계가 생기기 시작했고 이를 해결하기 위해 Promise가 나타났다.
Promise는 어떤 값이 생성 되었을 때 그 값을 대신하는 대리자이다. 비동기 연산이 종료된 이후에 그 결과 값이나 에러를 처리할 수 있도록 처리기를 연결하는 역할을 하는 객체이다. Promise 객체를 통해 성공, 실패, 오류에 따른 후속처리가 바로 가능해서 가독성도 좋고, 비동기 에러를 처리하기도 수월하다.
Async/await은 비동기 코드를 동기식으로 표현하는 더 나은 방법으로 ES2017에 등장하였다. Async와 await는 항상 같이 붙어 있어야 한다. await 모드는 Promise 객체를 받아 처리하고, 만약 비동기 함수가 아닌 동기적 함수라면 리턴 값을 그대로 받는다. Async 함수는 Promise 객체를 통해 비동기적으로 처리된 내용을 동기적인 코드 진행 순서로 보여주는 역할을 한다.
기타
하고 싶은 질문
- 아직도 개발이 재미있으신지
(입코딩) 긴문자열이 주어졌을 때, 문자열을 압축할 수 있는 방법을 설명하여라
(보안) CORS에러란, 해결방법
- CORS에러는 sameOrigin 정책에서 다른 오리진에서 오는 요청을 해결하는 방법
- 프록시서버를 통해 해결
(보안) 대표적인 프론트엔드 공격과 방어법
- CSRF
- 피싱사이트
- http header의 refferer
- XSS
- 스크립트를 심는 것
Docker란?
(디자인패턴) 디자인 패턴에 대해 하는 것 아는 것 설명
- MVC 패턴
- FLUX 패턴
- 단방향으로 데이터가 흐르도록
- MVVM 패턴
- ''