제가 생각하고 기획하는 것을 직접 만들어보고 싶다는 생각으로 개발 공부를 시작하게 되었습니다.
대학교 3학년 때, '같은 학교 내에서 필요한 학우들을 이어주는 서비스'를 기획하고 운영한 경험이 있습니다. 당시 초기 프로토타입 모델을 노션과 구글스프레드시트, 스프레드시트를 웹사이트로 만들어주는 서비스를 활용하여 운영해 보았고, 이후 개발팀을 모집하여 1500명의 학생들이 참여한 웹서비스를 운영해보았습니다.
이 때 문제해결의 도구로서 개발이라는 것에 매력을 느껴 본격적으로 개발공부를 시작하였고, 부트캠프를 거쳐 지금 자리에 오게되었습니다.
개발자가 된 이유 / 프론트
프론트는 사용자와 가장 가까운 부분을 개발하는 분야
더 나은 서비스를 개발하고, 직접 반응을 볼 수 있다는 것이 재미있고 매력적이다
나에게 있어 중요한 가치 3가지는?
💡
솔직함 / 집요함 / 긍정적
솔직함
스스로에게, 그리고 남에게도 솔직하려고 한다.
스스로에게 끊임없이 질문하며, 내가 잘 나아가고 있는지, 나를 속이거나 합리화하고 있지는 않은지 계속 물어보고 솔직하게 생각하려고 한다.
성격상 OK맨인데, 커뮤케이션에 있어서는 솔직한 내 의견을 말하는 것이 훨씬 더 효율이 좋다는 것을 깨닫고 솔직한 커뮤니케이션을 지향한다
나의 장단점은 무엇이라고 생각
장점 (의사소통 장점)
집요함과 긍정적 성격
집요함
한 번 정한 목표는 반드시 이루려고하는 편이다. (군대에서 수능, 비전공자 개발, 목공)
긍정적
타고난 성격으로 최대한 좋게좋게 생각하려고 하는 편 , 항상 즐겁게 생활하고 싶다.
일적으로도 내가 즐거움을 느낄 수 잇는 일, 사람적으로도 조금 손해보더라도, 일이 잘 될 수 있다면 윈윈으로 생각하는 편
단점
OK맨인데, 걱정이 많다.
도움이 되는 방향이라면 대부분 OK하는 편이고, 이게 쌓이다보면 결과적으로 마이너스 인 상황들 존재
일정을 세세하게 나누어서 걱정보다는 해결하면서 안정감을 찾으려고 한다.
한 번 더 생각을 해보고, 현재 상황에 대해서 솔직하게 이야기를 나누고 조율하려고 노력
다른지원자에 비해 가지는 장점은 무엇이라고 생각?
문제해결력
창업동아리 활동, 실제 목공방프로젝트 등 기획자로서 문제해결적으로 접근하려고 하는 측면에서 강점이 있다고 생각
일상생활에서도 문제를 발견하고, 해결하는 것 까지 이어나가려고 함
과제 중에서도, 실제 사용자가 필요로 하는 기능을 생각하며, 기존 기획서에 없던 이전기간비교기능을 추가하여 개발진행하여 좋은 피드백 받은 경험있음
몰입도
목표를 정하면 몰입해서 끝까지 이루려고 하는 편
군대에서의 수능경험
홍개팅 만들 때, 학교 수업 이후에 항상 모여서 밤늦게까지 프로젝트 진행함
함께하고 싶은 동료
긍정적 성격 가지고, 성장하려는 열정도 가지고 있습니다.
프로젝트 이후에도 팀원들
우리 부서에 오게 된다면 어떤 부분에 기여할 수 있는지
성능 관련 최적화 작업 진행
테스트 코드 작성하며 이해
팀 내 스터디 혹은 발표를 주도적으로 진행
클린코드, 테스트 관련 발표하고 의견나누는 시간 다들 긍정적으로 생각
개발자로의 목표
단기적 목표
회사에 잘 적응하는 것이 1순위
이어 다양한 웹프론트분야에 대한 학습을 이어나가는 개발자
최근 접한 최적화 분야, 테스트 부분도 재미있었고, 이외에도 보안, SEO 등 다양한 분야 적극적으로 학습하는 개발자
장기적 목표
즐겁게 일하는 개발자
자기 분야에서 깊은 전문성가지고 있어, 가치있는 개발자
내가 생각하는 것들을 오픈소스 서비스로 개발해 영향력을 줄 수 있는 개발자 (like Velopert의 velog, 밥면빵)
개발자 중 롤모델
sheet2site 해외개발자
개발관심가지게 된 계기, 많은 사람들이 가지는 문제를 심플하고 쿨하게 해결
velopert
신기술을 빠르게 사용하고, 공유하는 모습, 실제로 많이 배우기도 하였고, 개발의 재미를 느끼게 되었다.
사이드프로젝트로 자신이 생각하는 문제들을 재밌고, 실제도움이 되게 풀어나가고 있다.(벨로그, 벨로폴리오)
최신 트렌드 공부 (작성필요)
공부방법
전반적 흐름( velog, 개발바닥)
기술적 부분( 우테콕, 드림코더엘리)
지식적 부분( D2, 서적)
기타서적
최신
WebRTC -
사용자간
PWA
트위터, 우버, ...
progressive Web Application
웹앱을 +APIS를 결합하여 다양한 플랫폼(폰)에서 동작하도록 함
네이티브의 플랫폼자체 api이용 장점 + 브라우저만 있다면 사용가능하다는 웹앱의 장점
플랫폼API ( 알림, 카메라, 연락처, ...)
웹코드를 통해 모든 플랫폼에서 이용할 수 있는 앱
반응형디자인
serviceWorkers
app manifest + push notification
ms의 PWA builder
만드는 과정
웹서비스 + HTTPS + Application Manifest(JSON-앱의 정보들이 담겨있는 파일) + Service Worker (중간에서 요청을 통제하고 관리할 수 있는 기능 - 키자마자 무언가 실행하는 등)
serviceWorker
offline일 때 페이지 지정
우아한 테크콕 - NETWORK
process VS Thred
지식습득
개발 중 가장 좋아하고 재밌었던 부분 / 자신있던 부분 / 어려웠던 부분 (작성필요)
좋아하고 재밌는 부분은 클린코드
자신있는 부분 문제발견 정의 / 커뮤니케이션 부분
어려웠던 부분은 이전은 aws배포과정/ 최적화하는 부분
프로젝트 중 동료와 갈등상황이 있었나요? 있었다면 어떻게 해결
(p) 팀원 4명 모두가 프론트를 희망하는 문제
(s) 내가 먼저 배포부분 담당하겠다고 선언하고, 배우는 입장에서 프론트/백 선긋지말고 다 같이 학습하자고 설득
(결과) 각자 부분에 대하여 기본적인 벡엔드코드 작성, 1분이 벡엔드 담당, 제가 배포부분 담당
팀원 1분이 일정을 지키지 못하고 완성도가 떨어지는 결과물 작성하여, 동료들간 작은 갈등발생
(s) 중간에서 따로 따로 이야기하고, 멘탈적으로 회복되도록 함
매일 태스크에 대한 공유시간을 가지도록 함
(+) 일정관리 및 솔직한 커뮤니케이션의 필요성 깨달음
google Analytics에는 dummy데이터로 처음에 체험할 수 있는 기능있는데 이를 적용해보는 것도, 소상공인이 많은 것을 고려할 때 적합하다고 생각
인턴기간 수행한 과제에 대해 간단하게 설명해주세요. (필)
💡
기존 표형식 성과리포트 → 그래프를 통해 시각화된 다차원리포트 , (구체적),
실제 가공된 광고성과 data → 1.주요지표 요약한 overview보드, 2.기간별 주요지표를 그래프로 한 눈에 파악하는 overview차트, 3.다차원분석이 가능한 Widget차트를 개발하였습니다.
(더 자세히)
유의미한 분석을 위해 이전기간비교, filter전후 비교 기능을 추가 개발하였고,
최적화 및 테스트코드도 작성해보았습니다.
과제 수행 중 가장 어려웠던 부분과 해결방안에 대해서 말해주세요.
최적화 작업들 (렌더링최적화, CLS최적화)
렌더링최적화
하나의 위젯의 변화에 따라 다른 모든 위젯들 리렌더링되는 현상
react.memo로 props같을 때 리렌더링 방지, usecallback으로 이벤트함수가 재생성되지 않도록 하여 해결
redux는 미들웨어를 통한 비동기처리에서 장점있지만, Recoil의 selector를 통해 더 간단하게 비동기 처리를 할 수 있었다.
vs Cont
Cypress 선택이유 (vs Jest)
e2e VS Unit 테스트
모킹하는 것이 아니라, 실제 사용자 환경인 브라우저내에서 실제 API를 통해 테스트를 진행할 수 있다는 점
리팩토링 (클린코드, recoil)
클린코드
클린코드란 무엇인가?
For 유지보수 시간의 단축 - 코드파악, 디버깅, 리뷰
기본적으로 가독성이 가장 중요한 측면
단순하면서 유연성을 가지고 있는 코드 + 최소놀람의 법칙(일관성)
응집도, 단일책임, 추상화수준고려,
실제 어떤 부분에서 개선을 이루어냈는지
주요로직과 세부구현의 분리
차트컴포넌트
차트데이터를 가공하고, 옵션을 지정해주는 부분 함수화,모듈화하여 감춤
추상화 위계 수준 고려
분석기간을 설정하는 DateBox 컴포넌트
날짜표시, datepicker선택, 확인취소 부분 구성되지만, 날짜표시,확인취소부분 추상화수준이 너무 떨어져 한눈에 컴포넌트 구조 파악 어렵다
→ DatePickerLabel, DatePicker, BtnBox 로 추상화수준 맞추어줌
Recoil
Why Recoil?
React개발하는 facebook만들었다는 점에서 최신도입예정인 React기술과 호환가능
(React.suspense, ConcurrentMode)
react hooks와 유사한 동작방식을 가지고 있다는점
hooks 상승세로 npm trends에서 꾸준한 상승세
컴포넌트 내에서 useState를 사용하듯이, 똑같이 전역의 상태에 대해 useState와 같이 사용할 수 있다.
작은 규모의 프로젝트앱의 적합
vs Redux
유저로그인 등 복잡한 비동기 로직 존재 x
미들웨어 사용 필요성 떨어짐
미들웨어란 액션의 디스패치와 리듀서(상태변경) 사이의 특정 작업을 진행할 수 있도록 돕는 것
reduxThunk, reduxSaga 등 비동기동작 미들웨어 대표적
vs Context API
ContextAPI로도 propsdrilling 해결 가능,
그러나 변경이 자주 발생하는 state에서는 한계를 보임 → Recoil
Recoil 간단 설명해보세요
모든 상태 변화는 "그래프의 뿌리인 Atom 으로부터 순수함수인 Selector를 거쳐 컴포넌트로 흐른다"
Atom
Atom은 state와 같은 개념이지만, 컴포넌트들이 필요한 Atom을 구독하도록 하여, Atom변경 시 구독하는 모든 컴포넌트들이 리렌더링 되는 방식
Selector
Selector는 순수함수로, 서로 다른 atom을 입력받아, 파생데이터를 만들어 계산하는 함수이다.
Selector 내부에서 async/await 지원하여 비동기코드를 간단하게 작성할 수 있다.
장점
Redux 비교하여, 절대적인 코드량의 감소, 직관적인 사용
비동기처리로직 간단하게 가능
단점
Ridi, facebookx일부말고는 대규모 프로덕션 사용사례 찾기 힘듦
DevTools 지원 미미
진행했던 최적화에 대해서 설명
💡
렌더링최적화, CLS최적화, 불필요한 API Call 방지
렌더링최적화
problem: 하나의 차트변경에 다른 차트들이 같이 리렌더링 되는 현상
Solution: React리렌더링 4가지 → react.memo 로 props 같을 때 리렌더링 방지 → useCallback으로 특정 상태가 변할 때만 함수를 새로 생성하도록 설정- memoization && 함수형 업데이트를 통해 의존성 제거하여 함수재생성 방지함으로 해결 (컴포넌트 렌더링 마다 함수를 새로 생성)
구체적 해결 과정
원인분석 및 해결
원인분석(React 컴포넌트가 리렌더링 되는 경우 )
부모컴포넌트 리렌더링시
자신의 state 변경
전달받은 props 변경
forceUpdate()
해결
Step1. React.memo 적용
렌더링시 props의 변경사항을 비교하여, 변경이 없는 경우 리렌더링하지 않도록 한다.
memoization의 한 기법으로 props를 저장해두고, 렌더링상황 발생 시 비교하는 로직
export default React.memo(WidgetChart);
React.memo() 적용 이후에도 계속해서 리렌더링 됨
→ 함수는 참조동등성(얕은 비교)를 가지기 때문에 props를 비교할 때, 변경이 있다고 판단한다.
초기렌더링과 chart변경으로 인해 새로운 data를 받아올 때, canvas의 높이를 알지 못하여 data loading전후의 layout이 크게 변화되는 현상 (사용자경험해친다.)
크롬 개발자도구 탭에서 lighthouse 성능측정 report로 CLS 수치 매우 높음 확인
solution: chart.js의 canvas요소가 width:height 가 2:1 을 가짐을 이용,
css속성 중 padding 속성에 % 값을 이용할 경우 부모의 width 100% 를 기준으로 한다는 것 이용
빈 container를 만들고, padding-bottom: 50% 주고, loadingIndicator 넣어줌
: 실제 loading 이후의 height와 같은 높이를 가지게되어 layout변화 없어짐
중복된 API Call 방지
비교기능을 on/off 할 때마다, 같은 데이터요청을 보내고 있음. (차트의 개수만큼 요청을 하기 때문에 서버에 큰 부담이라고 생각)
같은 요청에 대해 캐싱할 수 있는 부분이 없을까 생각하고 찾아봄
기존 컴포넌트 내부에서 useEffect를 통해 컴포넌트 렌더링시에 data를 받아오도록 요청한 것을,
컴포넌트 렌더링 이전에 recoil selector를 통해 data를 받아오고, 이를 반영한 컴포넌트를 렌더링하도록 함.
recoil의 selector안에서 가능하였는데,
쿼리스트링의 파라미터에 해당하는 값을 atom이라는 상태로 지정하게 하였고, selector는 같은 상태를 가진 쿼리스트링에 대한 response를 저장하게 되어, 같은 요청이 올 때 캐싱된 응답을 사용하도록 하여 api call 방지
진행했던 테스트에 대해서 설명
왜 테스트가 필요한지?
왜 E2E 테스트 진행했는지
Cypress
Cypess선택이유
장단점
장점
단점
프로젝트 이후 달라진 점, 깨달은 점
💡
- 기술의 tradeOff에 대한 고민
- 경험하고 개선해가는 과정의 즐거움 (개발자 적성)
프로젝트에서 더 개선할 수 있던 부분
server 요청 처리
최적화 부분을 마지막에 진행했는데, 개발자도구와 React.profiler 부분을 보며 원인을 찾아내고, 개선해나가는 작업이 재미있게 느껴졌다.
프론트엔드 측면에서 리렌더링방지와 중복API call을 방지하도록 하는 최적화를 진행해보았는데,
시간이 더 있다면,
렌더링측면이외에도 실제 큰 프로젝트에서는 리소스로딩 하는 것이 초기페이지 렌더링과 사용자체감에 큰 영향을 주기때문에 이부분을 개선해보고 싶다.
Rout53(도메인구입) ⇒ S3 (버킷 생성 및 업로드) ⇒ CloudFront (빠른 속도 & HTTPS 배포 위해) ⇒ AWS Certificatiom (인증서발급)
S3파일업로드 배포
cloudFront → 빠른 접속과 https
Server
프론트배포된 도메인확인 → ACM인증서 발급 → 로드밸런서로 인증서를 EC2에 적용 → Route53으로 도메인주소와 로드밸런서 주소 연결
EC2 인스턴스 코드 업로드
https 로드밸런서
fenews, deview, 우테코테크톡
FE News 10월
쿠키 (sameSite : Strict, Lax ,...)
디자인패턴 (Atomic 패턴보다 변경에 유연한 컴포넌트)
컴포넌트는 데이터와 역할을 중심으로 추상화
주소목록-AddressList
일반적인인터페이스 설계 (도메인을 맥락에서 구분)
우테코
최적화, VirtualDOM,https등
리액트
리액트의 개념과 장단점
개념
리액트는 UI구축에 중점이 있는 자바스크립트 라이브러리 입니다.
장점
virtualDOM을 통해 직접 돔조작을 하지 않는 편의성과
빠른 렌더링 속도로 성능적으로 우수
컴포넌트를 통해 재사용성, 높은 가독성과 쉬운 유지보수 가능
넓은 생태계
단점
써드파트 라이브러리를 사용해야한다는 점
리액트의 virtual DOM
실제 DOM 구조와 비슷한 React객체의 트리
Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
JSX란?
jsx는 리액트에서 사용하는 문법으로, React엘리먼트를 생성할 떄 사용합니다. 자바스크립트 코드를 마치 HTML과 같이 표현할 수 있다는 특징을 가지고 있습니다.
리액트 동작원리 (재조정-reconciliation개념)
실제 DOM을 조작하지 않고 virtualDOM을 만들어, 변화가 발생했을 때 VirtyalDOM을 갱신하는 것을 Reconciliation이라고 함
setState()를 통해 비동기적으로 배치 처리하여 한 번에 업데이트를 적용한다.
render()함수 호출 시 virtualDOM의 최상위부터 변경된 부분을 확인한다.
1) 태그가 같고, 속성이 다르다면 속성만을 갱신한다.
2) 태그가 다르다면, 해당 노드(객체)를 언마운트하고, 모두 새로 만들어 갱신한다.
(불필요한 비교과정 사라지게 됨)
성능적 개선을 위해 참조비교만 진행 (불변성 필요), 키 기반으로 빠르게 컴포넌트 비교
+잦은 변경이 있는 컴포넌트는 깊이가 얕도록 설계하기
state를 직접 변경하지 않고, setState를 사용하는 이유
state는 불변성(새로운 값을 만들어 사용하는 것)을 유지해야하기 때문입니다.
state.count 변경시 참조가 같아서 상태변화를 인지할 수 없다.(얕은비교하기때문)
setState가 아니라 직접 값을 바꾸게 되면 render()함수가 실행되지 않아 상태변경에 따른 렌더링이 이루어지지 않기 때문이다.
이 객체를 ReactDOM.render()를 통해 DOM에 렌더링한다.
<div id='login-btn'>Login</div>
반면
컴포넌트는 props와 state를 가지고, JSX를 반환하는 점에서 차이 존재
React Hooks의 장점
lifecycle 이란, lifecycleMethod란
기술 (프론트)
읽었던 책과 인상깊었던 점 ( 미완)
💡
CleanCode - "클린코드는 잘쓴 문장처럼 읽히며, 최소놀람의 법칙을 따른다"
그림으로 배우는 HTTP&Network
그림으로 배우는 HTTP&Network
쿠키와 세션의 등장배경
HTTPS의 암호화 방식
클라이언트 서버 연결과정 (TCP의 3way핸드쉐이크)
(Web) 렌더링 과정 (1회독)
💡
HTML파싱 → DOM Tree → CSSOM → RenderTree → Layout → Paint
index.html을 받았을 때 렌더링
1) HTML파일을 파싱한다
2) HTML 파싱하여 DOM Tree 생성
3) 파싱 중 CSS 링크 만나면 CSS 파일 요청하여 받아온다.
4) CSS파일을 읽어서 CSSOM을 만든다.
5) DOM Tree와 CSSObjectModel을 합쳐서 RenderTree를 만든다.
6) RenderTree의 노드들이 화면에 위치할 지 계산하는 Layout과정
7) 최종적으로 실제 픽셀에 대하여 Paint 한다.
Reflow, Repaint 무엇이고, 언제발생?
reflow는 액션이나 이벤트발생으로 DOM요소의 크기나 위치등이 변경되었을 경우, 연관된 상위하위 노드들의 위치와 크기를 재계산한다.
repaint는 레이아웃에 영향을 주지 않는 color, backgroundclor등의 스타일 속성이 변경되었을 경우 발생
다른답변
Prompt for unload
현재 페이지에서 다른 페이지로 이동할 때 발생하는 이벤트입니다.
뒤로가기 버튼이나 링크를 눌러 다른 도메인의 페이지로 이동할 경우 발생합니다.
Redirect ~ Response
노란색으로 칠해진 Redirect 부터 Response 까지는 네트워크 통신입니다.
요청을 받고 HTML 파일 등의 리소스를 브라우저로 가져오는 일련의 과정입니다.
AppCache 는 이미 요청한 응답에 대한 캐싱을 확인해서 캐싱된 데이터가 있다면 통신을 또 하지 않고 바로 사용해서 퍼포먼스 효율을 높입니다.
DNS는 도메인을 서버의 IP 주소로 변환하는 역할을 합니다.
TCP 레이어에서 요청이 성공적으로 이루어지면 Response가 옵니다.
Processing
다운로드한 HTML파일과 CSS파일을 활용해 DOM Tree와 CSSOM Tree를 만들어 렌더링 트리를 구성합니다.
Load
렌더 과정까지 마무리되면 다운로드한 파일을 사용자가 알아볼 수 있게 화면에 보여줍니다.
1.일반적으로 CSS <link> 태그를 <head></head> 태그 사이에 위치시키고, JS <script> 태그를 <body> 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요?
💡
[한 줄]
브라우저 렌더링과정을 고려했을 때 화면을 빠르게 보여주기 위해서라고 생각합니다.
[script]
script 태그가 body의 마지막 부분에 있는 것은, <head>부분에 존재할 경우 html 파싱이 끝나기 전 script가 실행이 되어 html파싱이 멈추고, 그에 따라 존재하지 않는 DOM요소에 접근하게되어 오류가 발생할 수 있습니다.
따라서 html파싱 중 자바스크립트 파일이 반드시 필요하지 않다면 html파싱 이후에 스크립트가 실행되도록 하여, 오류발생을 막고 빠르게 화면을 보여줄 수 있습니다.
[css]
한편 css 태그의 경우 스크립트와 다르게 html 파싱과정을 멈추게 하지 않고, 별도의 css파서가 스타일을 관리하기 때문에 헤드에 위치하도록 합니다.
또 script 가 실행될 때, 스타일이 파싱되지 않는 경우 의도치 않은 화면을 보여줄 수 있기 때문에 보통 body태그에 있는 스크립트에 앞서 실행되도록 합니다.
2. <script><script async><script defer> 태그들의 차이점은 무엇인가요?
💡
[script태그]
<script> 태그는 브라우저에서 자바스크립트 파일을 다운로드 하고 실행하도록 동작하게 하는 태그를 의미합니다.
일반적으로 script 태그는 <body>태그가 끝나기 전에 위치하여 html파싱 이후 실행되도록 합니다.
[script async & defer]
script async와 defer 는 head 태그안에 script태그를 넣고자 할 때 사용할 수 있는 script태그의 속성들입니다.
[async]
script 태그는 스크립트 파일을 다운로드 하는 것과 실행하는 단계가 존재하는데,
async 속성의 경우 html파일 파싱과정에서 script태그를 만났을 때, html파싱과 동시에 javascript 파일의 다운로드를 진행합니다. 하지만 곧이어 script 파일을 실행되면서 html파싱은 잠시 중단 됩니다.
또 여러개의 스크립트가 존재할 경우 순서에 상관없이 다운로드 된 파일이 먼저 실행되는 문제가 있습니다.
[defer]
이를 보완할 수 있는 태그가 defer 태그라고 할 수 있습니다.
defer속성은 html파싱 중 스크립트 태그를 만나면 html파싱과 동시에 스크립트 다운을 진행하되, html파싱 이후에 스크립트를 실행시킵니다.
따라서 html파싱이 중간에 멈추지 않으며, 스크립트도 순서에 따라 실행될 수 있어 이상적이라고 할 수 있습니다.
html파싱과 동시에 스크립트 다운, html파싱 이후 스크립트 실행
첫 렌더링 시, HTML과 static파일을 먼저 전부 다운로드하고, 이후 필요한 리소스가 있을 때에만 서버에 요청하고 이를 웹브라우저에 반영하는 방식.
(장점) 첫로딩이후 렌더링 속도가 빠르다.
(장점) 서버 부담이 적다
(단점) 초기 로딩속도 느리다.
→ resource를 chunk단위로 묶어서 다운로드, Razy Loading을 통해 초기렌더링에 필요한 부분만 먼저 다운로드 받는 방법
(단점) SEO(검색엔진 최적화)에서 문제 발생
→ 구글엔진만이 js까지 크롤링함
→ react.helmet 라이브러리를 통해 각 컴포넌트 별로 meta 태그 지정,
→ 빌드시 하나의 html이기 때문에 SEO 어려움
→ react-snap을 통해, 배포시에 페이지 별(router)로 html파일을 생성하도록 함
(Web) 세션, 쿠키 차이점 (1회독) - 연습필요
💡
세션, 쿠키 모두 HTTP의 무상태성으로 갖는 인증 유지의 문제를 해결하기 위해 등장
쿠키
클라이언트에 데이터를 저장하는 방법
특정 도메인에 대해 쿠키가 존재한다면, 웹브라우저는 해당 도메인에 http요청 시 쿠키를 함께 전달
로그인 상태유지 사용, 장바구니 목록 유지
server에서 set-cookie 옵션을 통해 저장 가능
한 번 쿠키가 저장되면, 다음 요청시 마다 request Header에 쿠키가 담겨서 전송된다.
Options
httpOnly : document.cookie 접근을 막는다.
secure: Https를 통해서만 쿠키 전송 가능
maxAge: 쿠키 보존 기간 설정
Domain: ' localhost' 같은 도메인에서만 쿠키 주고받도록 설정
Path: 세부경로가 일치하는 경우만 전송
SameSite: cross-origin요청의 경우 옵션에 따른 쿠키 전송여부 설정
: Lax -GET 메소드만 허용, Strict-쿠키전송불가 (same-site만가능)
: None- 모든메서드요청가능(secure옵션필요)
: CSRF공격을 방지하기 위해 사용
동작과정
1) 클라이언트 페이지 요청
2) 서버에서 쿠키 생성하여 set-Cookie로 넣어 응답
3) 클라이언트(local Pc)에서 보관하고, 다음 요청시 요청과함께 쿠키를 전송
장점/단점
장점
서버에부담을 덜어줌
단점
쿠키는 인증을 위한 수단이 아니기 때문에 보안에 취약함
세션
사용자의 인증 여부를 서버에 저장하고, 이 정보(세션Id)를 쿠키에 담아 클라이언트에 공유
세션id는 보안을 위해 암호화과정을 거쳐야한다.
동작과정
1) 클라이언트 페이지요청
2) 서버는 쿠키의 세션Id를 확인
없다면 인증확인 후 세션Id 생성하여 쿠키에 보냄
3) 클라이언트는 세션Id 담긴 쿠키로 이후 요청을 진행
장점/단점
장점
중요정보 서버에 보관하여 쿠키보다 보안성이 좋음
단점
서버에 부담
여전히 쿠키를 사용하기 때문에 보안의 문제
세션과 쿠키
토큰
인증을 위해 사용되는 암호화 된 문자열
인증 성공시, 서버는 토큰을 클라로 보냄
클라에서 인증정보를 보관, 요청시 토큰을 같이 보냄(header에포함)
서버는 토큰의 '유효성'을 확인
토큰이 유효할 경우, 인증정보를 저장하지 않고 진행
JSON Web Token
AccesToken과 RefreshToken을 통해 인증을 진행
AccessToken
최초 인증 시 발급받은 token
짧은 유효시간을 가져, 탈취되어도 사용하기 어렵게 설정
RefreshToken
accessToken만료시, refreshToken으로 새로운 accessToken 재발급
Header, payload,signature로 구성
Header : 어떤토큰인지, 암호화알고리즘은 무엇인지 설정
Payload: 암호화된 정보를 담음
Signature : Hash처리 된 비밀키 존재
장단점
장점
서버가 클라이언트에 대한 정보저장하지 않는다.(무상태성)
토큰을 헤더에 추가하는 것만으로 인증완료 (확장성)
안정성 ( 암호화된 토큰 사용)
권한부여에 용이
payload에 특정 정보에만 접근가능함을 정의할 수 있다.
(Web) 라이브러리와 프레임워크의 차이
라이브러리는 사용자가 필요한 부분만 부분적으로 사용가능
프레임워크는 부분적사용이 불가하고, 프레임워크내에서 지원하는 문법을 따라 지켜 작성해야한다
v-for, v-if 등 특정기능에 대한 선택지가 1가지이다.
(React) 개념,작동원리, 장단점 (1회독)
💡
개념 SPA에서 UI측면에 강점을 가지고 있는 javascript 라이브러리.
특징
1) virtual DOM 으로 빠른 렌더링 속도
2) 단방향 데이터 흐름 (부모→자식)
3) 컴포넌트 기반 (가독성, 재사용성, 유지보수용이)
작동원리 직접 HTML DOM 조작이 아닌 가상 DOM을 생성
변경이 일어난 부분의 트리만을 감지하여 가상DOM에 그리고, 이를 실제 DOM과 비교하여, 변경된 부분만 리렌더링
가상DOM은 리액트엘리먼트이고 자바스크립트 객체이기 때문에, HTML의 DOM을 직접 다루는 것보다 훨씬 렌더링 속도가 빠르다.
장점 - React를 사용하는 이유 (VS Vanilla JS)
To사용자: 동적으로 변하는 웹서비스에서 UX측면에서 훨씬 뛰어난 서비스를 제공가능
(빠른 렌더링 속도)
To개발자: 컴포넌트 기반 코드 작성으로 가독성과 재사용성, 유지보수의 편리함, 넓은생태계
엘리먼트 타입이 같은 경우, 엘리먼트의 attribute를 비교하고 업데이트한다. 이후 자식 엘리먼트들에 diff 알고리즘을 재귀적으로 적용
2) key 프로퍼티로 같은 엘리먼트임을 명시한다. (같은 level에서 유효)
가상DOM 추가설명
Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요.
먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.
따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
React에서 컴포넌트가 생성, 업데이트, 제거 될 때 특정 메소드를 호출할 수 있는 것 (lifecycleMethod)
렌더이전에는 props를 가져와 state와 동기화하고, 상태변화를 감지하는 동작 수행
첫 렌더링 후, componenentDidMount 실행
업데이트(new props, setState(), forceUpdate())시 렌더링 이후 componentDidUpdate
제거 될 때 componentWillUnmount 실행
Hooks에서의 lifeCycle
useEffect로 초기렌더링, 업데이트, 제거될 때 생명주기메소드 역할 모두 가능
의존성배열 없다면 컴포넌트렌더링 마다 Effect 실행
의존성배열이 [] (빈배열)이면 초기 렌더링에서 딱 1번만 실행
의존성 배열의 값이 있다면, 해당 값의 변화할 때만 Effect 실행
useEffect 내에서 return 문 사용시 componentWillUnmount 역할
(React) Hooks (1회독)
💡
[개념]
Hooks는 클래스 기반 컴포넌트의 장점(예를 들면 내부 state와 생명주기 메소드)을 함수형 컴포넌트로 가져오려는 리액트의 시도입니다.
[장점]
1. 공통 기능을 커스텀 hook로 만들어서 로직을 재사용하기 쉬워집니다.
2. lifecycle method를 관련있는 코드를 모아 사용가능하다. (가독성, 관심사분리가능)
3. 클래스 기반 컴포넌트, lifecycle method, this의 필요성이 사라집니다.
: 컴포넌트 자체에서 로직을 분리할 수 있어서 읽기 쉬운를 작성할 수 있습니다.
useState
this.state는 항상 객체인 반면 useState는 다양한 타입 가능
useEffect
effect는 DOM을 조작하거나, 데이터를 가져오는 등의 렌더링과정에서 할 수 없는 작업들
useMemo
useCallback
Hooks 장점
로직의 재사용 가능, 관리가 쉽다
Hook은 함수형 컴포넌트 이므로 함수 안에서 다른 함수를 호출하는 것으로 새로운 Hook을 만들어 볼 수 있기 때문이다따라서 리액트의 내장되어있는 Hook과 다른 사람들이 만든 여러 custom Hook을 레고처럼 조립해서 쉽게 custom Hook을 만들수 있다
로직을 한 곳으로 모을수 있어서 가독성이 좋다
클래스형 컴포넌트의 라이프사이클 API는 서로 다른 로직이 하나의 메서드에 섞여 있어서 가독성이 좋지 않다. Hook은 같은 로직을 한 곳으로 모을 수 있다
정적 타입언어로 타입을 정의하기 쉽다
상태 관리 방법을 더 쉽게 설명할 수 있다
(React) 불변성을 지켜야 하는 이유 (1회독)
💡
React에서 컴포넌트 렌더링 시 state, props의 얕은 비교를 진행 하기 때문 (계산효율성위해)
state를 setState가 아닌 직접 값을 변경할 경우 이를 감지하지 못하여 리렌더링 되지 않음
불변성 (immutability)이란
어떤 값을 직접 변경하는 것이 아니라 새로운 값을 만들어 내는 것 ( 사본을 만들고 변경시킴)
같은 참조(reference)를 가지지 않도록 설정
React에서는 얕은 복사를 통해 state,props를 비교하기 때문에 참조타입 자료형의 경우 deep copy를 통해 내부의 값까지 똑같이 복사해주어야 한다.
call by value (깊은 비교) , call by reference(얕은 비교- 동일참조인지만 확인)
불변성 지키는 방법
spreadOperator(...)을 통한 복사, Object.assign({}, ) (얕은복사)
concat(), map(), filter(), slice() 등 새로운 객체를 반환하는 메소드 사용
(원본데이터 변경x)
깊은 복사의 경우 lodash의 deepclone, immer 라이브러리 사용
(JS) 객체지향 프로그래밍 (1회독)
💡
객체지향프로그래밍은 공통적인 특징을 가지고 있는 하나의 틀인 '클래스'와 이 공통적인 특징에 특정값을 가지고 있는 '인스턴스'로 데이터구조를 접근하는 하나의 프로그래밍 패턴입니다.
복잡해진 데이터구조를 공통점을 중심으로 쪼개어 생각하는 프로그래밍 패턴이라고 생각
장점
코드 재사용 가능
객체 단위의 코드 생성으로 유지보수/디버깅이 용이
단점
처리속도가 상대적으로 느리다
설계 과정에서 시간과 노력이 필요
객체들이 상태를 공유함에 따라 예상치 못한 버그가능성
4가지 특성
추상화 : 공통 속성을 묶어 하나의 개념으로 표현하는 것
캡슐화 : 관련기능을 한 곳에 모으고, 외부에서 접근하는 것을 제한하고 숨길 수 있도록 함
상속성 : 부모클래스의 속성과 기능을 자식클래스가 상속받을 수 있는 것
다형성 : Overiding, 자식클래스에서 상황에 따라 상속받은 기능을 유동적으로 사용할 수 있는 것
(JS) 함수형 프로그래밍 (1회독)
💡
Side Effect를 최소화하기 위해 순수함수를 사용하는 프로그래밍의 한 기법
sideEffect
함수실행 시 함수 외부의 값이 변경되는 것과 같이 의도하지 않은 모든 동작들
사례
함수내부에서 new Date() 를 선언하면, 실행에 따라 다른 값 가짐- 외부환경
순수함수로 만들기 위해서 Date를 인자로 받도록 수정하여 해결
함수내부에서 외부의 값을 사용하는 것
함수내부에서 외부의 값을 변경하는 것
순수함수는 같은 인자에 대해 항상 같은 값이 리턴되도록 하는 함수
특징
불변성
메모리에 이미 담긴 상태를 변경하지 않는 다는 것
데이터 추가삭제시 재할당하지 않고, 원본을 복사한 별도의 list 생성
map, filter, concat
사용이유(장점)
예측가능한 코드 작성 (작성이외부분 신경쓰지 않아도 되기때문)
이해하기 쉽고 유지보수의 장점
순수함수는 모듈성을 가지고 있어 테스트가 용이하다
(JS) 실행컨텍스트(JS) 이벤트루프 (1회독)
💡
js엔진의 callStack과 Task Queue를 반복해서 검토하며, 작업을 수행하도록 하는 브라우저의 기능
개요
js엔진은 단일 콜스택 사용, 순차적으로 처리한다.
비동기 처리, 동시성 처리는 브라우저(혹은 node.js)에서 처리
이벤트루프란
js엔진과 Web API, Task Queue를 반복해서 검토하며, 작업을 수행하도록 하는 브라우저의 기능
비동기 작업들은 완료되면 콜백함수로 태스크큐에 추가
callStack이 비어있을 때, Task Queue의 작업을 처리
(JS) 클로져 (1회독)
💡
클로저는 '외부함수의 변수에 접근할 수 있는 내부함수, 혹은 그러한 동작'을 뜻합니다.
클로저의 정의는 ' 함수와 함수가 선언된 어휘적환경의 조합'인데, 이는 선언된 환경밖에 존재하는 함수가, 선언된 컨텍스트의 환경을 기억한다고 할 수 있습니다.
예를 들어, 외부함수에 a라는 변수가 있고, a의 값을 증가시키는 내부함수를 리턴한다고 했을 때,
리턴된 내부함수를 실행시키면, 외부함수 밖에 존재하지만 외부함수의 변수에 접근할 수 있음을 알 수 있고, 이 때 이 내부함수를 클로저함수라고 할 수 있습니다.
커링을 통한 패턴의 모듈화와 비공개변수를 가지는 함수를 만들어낼 수 있습니다.
사례
react Hooks
Hook은 자바스크립트의 클로저를 이용하여 React에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결합니다
라이브러리, 모듈들
(JS) 가비지 컬렉션 (1회독)
💡
js에서 가비지콜렉션의 기준은 어떤 다른 객체도 참조하지 않는 객체 이다.
해당 객체를 참조하는 객체가 하나도 없다면, 가비지컬렉션이 수거해간다 (링크)
사용하지 않는 객체에 대해 null을 할당하여, 가비지 컬렉션이 수행되도록 할 수 있다.
mark-and-sweep 알고리즘 (가비지컬렉션 사용 알고리즘)
루트에서 부터 참조하고 있는 객체를 'mark' 한다.
mark된 모든 객체에 방문하여, 해당 객체를 참조하고 있는 객체를 'mark'하는 것을 반복
모든 도달 가능한 객체가 mark 된 이후, mark되지 않은 객체를 메모리에서 삭제(sweep)
최적화기법
세대별 수집
: 생성되지 얼마 안된 객체(새로운객체)를 더 집중적으로 감시
(대부분 생성이후 빠르게 쓸모가 없어지기때문)
: 일정시간 살아남은 객체는 '오래된 객체'로 상대적으로 덜 감시
CPU가 쉬고 있을 때만 가비지컬렉션 실행하도록 함
(JS) this (1회독)
💡
this
this는 함수 실행시 생성되는 실행컨텍스트에 속하며, 함수의 호출방법에 따라 this값이 다르다.
person2.study.call(person1)
: person2가 가지고 있는 study함수를 person1이 사용할 수 있도록 해라
call / apply 첫번째 인자로 this 지정
두번째 인자는 함수호출에 사용할 매개변수를 의미
call은 매개변수의 값을 각각 받음
apply는 매개변수를 배열형태로 받음
실제 사용할 수 없는 method들 사용가능
Array.prototype.join.call(arguments)
함수의 매개변수인 arguments는 유사배열형태이기 때문에 바로 배열메소드 사용불가 → Array.prototype을 빌려서 배열메소드 사용가능
bind
새롭게 binding된 함수를 만들고 반환
반환된 함수에는 this가 바뀌어 있다.
따라서 변수에 할당하고, 호출하는 형태로 사용한다.
let student = person2.study.bind(person1);student()
화살표함수에서의 this
정적으로 항상 상위스코프의 this를 가르키게됨
call, apply, bind 메소드 사용불가
(JS) 이벤트 위임에 대해서 설명하세요.
💡
이벤트 위임이란 다수의 자식요소에 각각 이벤트 핸들러를 바인딩하는 대신에, 하나의 부모요소에 이벤트 핸들러를 바인딩하는 것을 말합니다.
DOM에서 li 요소가 아니라 그것을 포함한 ul에 이벤트를 바인딩하는 것과 같습니다.
이벤트위임을 사용하는 이유는 예를 들어 현재 li가 2개만 존재하여 각각 클릭이벤트를 달아주었다고 가정합니다.
이때 li를 새로 1개 추가한다면, 이 li에 클릭이벤트를 주는 코드를 다시 작성해야합니다.
따라서 매번 새로운 추가요소에 대해 특정 이벤트를 달아주는 작업 대신, 그 부모요소에 클릭이벤트를 넣어주고, 자식요소가 부모요소의 클릭이벤트를 받을 수 있도록 해주는 것입니다.
이벤트 함수안에 e.stopPropagation() 사용 시 이벤트 전파방지하여 클릭된 부분의 이벤트만 실행
(JS) Set, Map, List의 차이
Map
Object와 달리 순서를 가지고 있어 iterative하게 사용가능하다.
key와 data를 저장하기 위한 es6도입된 새로운 자료구조
key에 다양한 자료형을 허용한다는 점에서 기존 객체와 차이
method
new Map, .set(key, value), get(key), has(key), delete(key), clear(), size
Set
value들로 이루어진 집합
array와 달리 같은 value를 2번 포함할 수 없다.
method
.add() .delete .size .has() .clear()
(TS) Typescript
TS란 무엇인지
TS 사용이유/ 사용 후 느낀 장점
1. 정적타입
Typescript를 사용하는 가장 큰 이유중 하나는 정적 타입을 지원하는다는 것이다.
정적 타입을 지원하므로 컴파일 단게에서 오류를 포착할 수 있는 장점이 있다. 개발자의 의도를 명확하게 코드로 기술할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다.
2. 도구의 지원
IDE(통합개발환경)를 포함한 다양한 도구의 지원을 받을 수 있다. IDE와같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense), 코스 어시스트, 타입체크, 리팩토링 등을 지원받을수있으며 이러한 도구의 지원은 대규모 프로젝트를 위해 필수적이다.
d.ts의 역할?
타입추론을 돕기 위해서 전역변수로 선언한 파일에 대해 import없이 사용하지 못하기 때문에, declare 키워드를 통해 타입 선언하는 것
interface와 type의 차이점
기본적으로 타입을 지정하는 방법은 같다.
차이점
interface는 같은 이름으로 타입지정 가능, type은 동일 이름 선언 불가능
제네릭이란?
제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것
함수의 인자로 어떤 것이 들어올 줄 알 수 없을 때, 들어온 인자의 타입을 이용하기 위해 사용
(CSS) CSS에서의 우선순위
모든 엘리먼트들에 z-index가 지정되지 않은 경우, 다음 순서로 아래에서 위로 쌓인다.
C는 Controller로 사용자에게 입력을 받아 Model을 조작하고, View를 업데이트 시킵니다.
간단한 웹사이트에서는 여전히 사용 가능하지만, Facebock같은 많은 Model들이 필요할 때 문제가 생겼습니다. 그 이유는, 양방향 통신으로 코드 하나를 변경하면 루프백되어 전체 코드에 영향을 미쳤습니다. 결국 코드를 디버깅하기 어려워지게 만들었습니다.
Flux 디자인패턴
Flux는 Action, Store, Dispatcher, View가 있습니다.
Action은 type속성과 일부 데이터가 있는 단순한 객체입니다.
Store는 상태값을 저장하고 있는 저장소입니다.
Dispatcher는 일종의 허브역할로 Action의 type 속성을 읽어 Store에 등록된 콜백함수를 호출합니다.
View는 Store가 변경된 상태를 알려주면 해당 부분만 리렌더링합니다.
MVC와 다르게 Component간의 데이터의 흐름을 단방향 통신으로 강제화 했습니다.
차이점
Flux에선 Component간의 데이터의 흐름이 단방향 통신으로 강제적, MVC에서는 흐름이 양방향 통신으로 강제적이지 않습니다.
Flux는 모든 변화는 Action을 거쳐 Dispatcher에서 실행됩니다. MVC는 Model과 View 서로 변화가 이루어집니다.
Store는 Model이 없어도 모든 상태가 저장 가능하며, MVC에서는 객체를 모델링합니다.
MVVM패턴
MVVM (Model-View-ViewModel) 패턴은 Model View, View, Model의 약자로 프로그램의 비지니스 로직과, 프레젠테이션 로직을 UI로 명확하게 분리하는 패턴입니다. 데이터를 관리하는 로직과 UI로직을 깔끔하게 분리하면, 애플리케이션을 보다 쉽게 테스트, 유지보수 할 수 있습니다.
(최적화) throttle, debounce
Throttle
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
스크롤 이동에 따른 이벤트 발생시 주로 사용
몇초에 1번씩만 실행되도록 실행횟수의 제한을 두는 것
debounce
연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
Ajax 검색시 주로 사용 (마지막 입력 이후 2초 동안 입력이 없으면 요청실행) (구매하기btn)
기술(백엔드 및 HTTP 기타)
해시 테이블(Hash Table)에 대해서 설명해 주세요. (1쳌)
💡
해시테이블은 효과적인 데이터의 탐색을 위한 자료구조로, 키(key)와 값(value)을 대응하도록 저장하는 자료구조입니다.
해시테이블은 해시함수를 통해 data를 저장하게 되는데,
해시함수란 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 것을 말합니다.
매핑 전 원래 데이터를 키라고 하며, 매핑 이후의 데이터를 해시 값 이라고 하고, 이러한 매핑과정을 해싱이라고 합니다.
해시테이블 장점
1) 해시함수를 통한 보안성 강화
해시함수를 통하여 원래의 데이터를 그대로 저장하지 않고, 해시값으로 저장하게 하는 방법
2) 기존 직접 주소 테이블의 데이터공간 효율성 저하 문제 해결
: 직접주소테이블은 입력받은 value 가 바로 key 가 되는 방식 (ex arr[5] = 5)
: 입력받은 value가 크다면 사이의 공간 모두가 비게 되는 비효율 발생 (ex arr[999999]=999999)
: 해시함수(데이터저장공간으로 남은 나머지를 반환하게 하는)를 통해 인덱스의 범위를 보장하여 데이터공간 효율 높일 수 있다.
다만 이때, 다른 값을 넣었지만 해시값이 같아지는 경우가 발생하는 해시충돌 발생
해시테이블 문제 (해시충돌)
1) 좋은 해시함수 만들기
좋은 해시함수란
: 해시충돌이 최대한 적게 발생하도록, 해시값을 최대한 균등하게 퍼트리는 것
: 근본적인 해결이 될 수는 없다
2) 개방주소법 (Open Address)
: 충돌이 발생할 경우 비어있는 공간을 찾아서 해당 인덱스에 저장하는 방식
: 선형탐사법, 제곱탐사법, 이중해싱 존재
해시테이블 사례
테이블 크기 재할당(resizing)
: 보통 데이터공간의 70%이상이 찾을 경우 해시테이블크기를 2~3배 늘려주는 방식으로 테이블공간을 확보
컴파일러(번역기)로 작성된 소스코드를 한 번에 번역하는 반면 인터프리터는 소스코드를 한 줄 한 줄씩 번역을 진행하는 실행기입니다.
실행속도 자체는 컴파일러가 빠르지만, 굉장히 큰 소스의 일부를 수정해야한다면 컴파일러보다 인터프리터가 훨씬 효율적이다.
실행파일 생성여부(메모리할당여부)
컴파일러는 해석만 진행하며 해석된 코드를 실행하는 파일이 따로 존재하기 때문에 메모리에 이를 할당하여야한다.
반면 인터프리터는 해석과 실행이 동시에 일어나므로 실행파일이 없으며 메모리할당도 일어나지않는다.
(Network) OSI 7계층
💡
네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것
데이터흐름을 한눈에 파악하기 쉽다
표준화된 규칙의 기반
자신의 계층만 집중하게 하여, 캡슐화 가능
물리- 데이터링크 - 네트워크 - 전송 - 세션 - 표현 -응용
물리 (0,1로 된 전기 신호 전달)
데이터링크 ( MAC 주소지정, 헤더에 다음 목적지 주소 붙임) MAC IP
네트워크 (IP주소를 할당, 최적의 전달경로 설정)
전송 ( 신뢰성 보장 작업, 다른 장비들간의 대역폭 속도 조절)
세션 (인증과 권한 부여를 담당)
표현 ( 데이터압축, 함호화/복호화 작업)
응용 (HTTP, HTTPS와 같이 데이터를 받는 최종점)
(Network) TCP/IP 4계층 프로토콜
💡
TCP/IP 는 인터넷 관련 프로토콜의 집합
TCP/IP 4계층
클라(응용→전송→네트워크→링크) 서버(링크→네트워크→전송→응용) 과정
각 계층을 거칠 때마다, 캡슐화되어 정보를 순차적으로 감싸고 해제하는 과정
링크 → 네트워크 → 전송 → 응용 으로 구성
링크
하드웨어 측면 담당
물리적주소인 MAC 사용
네트워크
패킷(데이터의 최소단위)
패킷의 경로를 설정 (IP 할당)
IP는 배송을 담당
전송
연결되어 있는 두개의 장비의 연결을 제어, 신뢰성 담당
TCP(신뢰성담당)/UDP 속해있다.
응용
사용자가 데이터를 처리하는 계층 (인터페이스 역할)
하위계층으로 받은 메세지 변환 혹은 하위계층으로 메세지 전달
(Network) TCP와 UDP
💡
공통: 모두 데이터를 보내기 위한 하나의 네트워크 규약
차이
TCP는 클라이언트와 서버의 연결을 보장하는 연결형 서비스로 신뢰성을 강조
UDP는 클라이언트와 서버의 비연결형 서비스로, 연속성-전송속도를 강조
TCP
3wayHandshaking
클리이언트와 서버간을 연결하고 확인하는 작업
UDP
신호교환절차 없이 일방적인 데이터 교환이루어짐
속도가 빠르지만 신뢰성떨어진다.
스트리밍 서비스 이용
(Network) Http대해 설명해주세요.
💡
HTTP는 서버와 클라이언트가 데이터를 주고 받기 위한 기본적인 통신규약으로, HTTP서버는 80번 포트를 사용하여 데이터를 주고 받습니다.
HTTPS는 HTTP의 보안의 취약한 부분을 해결하기 위해 등장한 프로토콜로, HTTP에 데이터 암호화기능이 추가된 프로토콜입니다. HTTP와는 다르게 433번 포트를 사용하고, 네트워크에서 중간에 제3자가 데이터를 확인할 수 없도록 공개키 암호화를 지원합니다.
HTTP 프로토콜에 대해 설명해주세요.
💡
HTTP는 서버와 클라이언트가 데이터를 주고 받기 위한 기본적인 통신규약으로, HTTP서버는 80번 포트를 사용하여 데이터를 주고 받습니다.
무상태성과 비연결성은이전에 보낸 요청과 결과에 대한 정보를 기억하지 않는 것을 뜻합니다.
인증정보를 기억하지 못하면 매번 인증을 시도해야 하기 때문에, 상태를 기억하는 방법이 필요하게 되었고 이러한 대표적인 방식이 쿠키, 세션 , 토큰을 이용한 상태저장 방법이 있습니다.
쿠키(클라 요청 시 같이 탑재), 세션(브라우저에 사용자 정보 저장), 토큰(데이터를 토큰화 하여 교환)
비연결성 을 가지기 때문에 무상태성을 가진다
HTTP 메소드
GET
리소스를 조회하고, 가져오는 역할 수행
POST
데이터 전송을 위한 메소드로, 생성을 위해 주로 사용
PUT
전체 데이터의 수정을 위해 사용
(PATCH) 요청데이터만 변경하고, 나머지는 유지하도록 하는 메소드
DELETE
HEAD
GET과 같지만, 메세지의 bodyfmf qkewl dksgsmsek
OPTIONS
사용가능한 메소드 요청
HTTP Status
200 (성공)
204: No Content
: 요청 성공했는데, 돌려줄 리소스가 없을 때
300 (리디렉트)
요청을 정상적으로 종료하기 위해 추가 처리가 필요함을 알림
301
검색엔진에 해당 컨텐츠의 URL이 영구적으로 변경되었음을 알림
302
임시적으로 URL이 변경되었음을 알림
400 (클라이언트 에러)
401 : Unauthorized
: 인증에 실패함을 알림
403 : Forbidden
: 접근이 거부됨을 알림
404 : Not found
: 해당 요청에 대한 리소스가 없음을 알림
500 (서버에러)
503 Unavailable
: 현재 과부하 혹은 점검중으로 사용불가함을 알림
(Network) REST API란
💡
REST API 는 HTTP를 활용하여 데이터를 주고 받는 하나의 API 패턴
특징
통일되고 한정적인 인터페이스(URI)를 사용하도록 함
API 메세지만 보고도 어떤 데이터 통신을 하는 지 누구나 쉽게 이해하도록 함
사용방법
정보의 자원을 URI로 표현
모든 자원에 대한 고유한 ID('/users/:userId')가 존재하고, server에 정의되어 있다.
Security Token 사용 (CSRF Token)
사용자의 세션에 임의의 난수값을 저장하고 사용자의 매 요청마다 해당 난수 값을 포함시켜 전송 후 서버에서 검증
즉, 서버 측에서 CSRF 공격에 보호하기 위한 문자열을 유저의 브라우저와 웹 앱에만 제공
XSS의 정의와 예방법
정의
Cross Site Scripting
공격자가 상대방의 브라우저에 Script를 실행할 수 있게 하여 사용자의 세션을 가로채거나 웹 사이트 변조, 악의적 컨텐츠 삽입, 피싱 공격을 하는 것
예방법
중요한 정보를 쿠키에 저장하지 않는 것
cookie option 중 httpOnly 옵션 활성화
정규표현식을 사용한 <script> 태그 입력 필터 설치
HTML 포맷의 입력 제한
(OS) 프로세스와 스레드, 프록시
CS
JS
eventloop
💡
js엔진의 callStack과 Task Queue를 반복해서 검토하며, 작업을 수행하도록 하는 브라우저의 기능
개요
js엔진은 단일 콜스택 사용, 순차적으로 처리한다.
비동기 처리, 동시성 처리는 브라우저(혹은 node.js)에서 처리
이벤트루프란
js엔진과 Web API, Task Queue를 반복해서 검토하며, 작업을 수행하도록 하는 브라우저의 기능
비동기 작업들은 완료되면 콜백함수로 태스크큐에 추가
callStack이 비어있을 때, Task Queue의 작업을 처리
역질문
generalList VS SpecialList 중 어떤 사람이 더 선호되는지
회사를 다니면서 어떠한 점에서 가장 만족스러우신지. 어떤점들이 좋았는가
(많은 사원분들을 만나셨을텐데) 어떤 사원들이 기억에 남으시고, 책임 리더님들은 사원때 혹시 어떤 마음가짐을 가지셨었는지 궁금합니다.
아직도 개발에 대한 열정이 있으신지
온보딩 과정이 있는지
신입 때 가장 성장하는 것에 도움되었던 방법이 있는지 궁금합니다. (컨퍼런스, 스터디, 사이드프로젝트)
먼저 이렇게 면접 기회를 주셔서 너무 감사하는 말씀드리고 싶습니다.
오늘 긴장한 부분도 있고 스스로 아쉬운부분도 있는데, 저는 군생활 중 수능을 보고 학교에 입학할 때에도, 비전공자이지만 개발을 배운다고 했을 때에도 주변에 의문이 있었지만, 이를 이겨 낸 경험이 있습니다.
충분히 성장할 수 있는 가능성을 가지고 있다고 생각합니다. 예쁘게 봐주셨으면 좋겠습니다. 감사합니다.
