테크톡 자료
헬스체크
김은수
- 수요일에는 제가 운영하고 있는 프론트엔드 소모임이 있는데, 무신사에서 열려가지고 준비하느라 좀 바빴어요.
- 윈터테크 인턴십 포지션이 열려서 관련해서 얘기를 팀 내에서 진행했네요
정다윤
- 바쁘게 흘러갔다. 과제를 못해서 급하게 오늘 하고,, 과제를 하느라 강의를 못 듣고 ㅋㅋㅋ 밀려가지고 해치우느라 정신없었음.
하송희
이승민
- 강의 듣고 과제하면서 보냈음. 특별한건 없었다!
김민수
- 머리를 잘랐어요!! 핸섬
- 운동하는 걸 제외하곤 밖에 나가는 시간이 하루 평군 5분..!! ⇒ 편의점에 감. 날씨 좀 보고 햇살 좀 쬐주고.
- 과제 좀 하고 강의 듣고 공모전 좀 하고. 돌리니까 시간이 뚝딱 갔습니다.
안재현
- 과제하고 강의 듣고 채용 열린게 많아서 밀린 이력서 수정도 하고. 포폴도 만들어보고. 벌써 금요일..! 이번 주는 시간이 빨리 간 것 같아요.
- 주말에 대구 놀러가요!! 용돈 받아서 대구 신세계!! 대구 신세계가 엄청 크다!! 동대구역 내리면 바로 왼쪽에 틀면 있다. 웅장해진다… 우와..
- 대구는 당일치기! 신세계 ⇒ 무신사 스탠다드가 대구에 있구나1!! ⇒ 더 현대 ⇒ 집
다윤님의 테코톡 시간~~!!
프로세스 하위 → 여러 개의 스레드
- 알아보기
웹 콘솔은 동기, 노드.js는 비동기
이벤트 루프는 6단계 별로 스택이 있다. → 스텝 별로 큐가 있는 것이다.
- 컴포넌트 이름만 보고도.. 예측할 수 있어야 좋은 컴포넌트 분리
- 구현 전에 일단 인터페이스만 짜
- initialState, onlick 등등만 적고,
- 나중에 구현 들어가자
- → … TDD
- 상태관리..
주제: 이벤트 루프 동작 구조와 원리
- JS는 싱글스레드
- 싱글스레드? ⇒ 한 번에 하나의 작업만 수행할 수 있는 것.
- 하나의 스레드 = 하나의 콜 스택 = 한 번에 하나의 작업
- 질문) 힙은? ⇒ 객체 타입 데이터가 할당이 되어야 할 때 확보되는 메모리 공간. JS의 객체는 어떤 타입이든 들어갈 수 있으니까. 객체의 크기가 어떻게 될지 모르기 때문에.
- 질문) 힙은 프로세스에 할당? 스레드에 할당?
- 요거슨 사실은 그냥 물어봤습니다.
- JS 엔진 V8
- V8 엔진 = 메모리 힙 + Call Stack
- Blocking
- 오래 걸리는 작업에 의해 blocking이 발생 ⇒ 사용자 경험에 좋지 않음
- 브라우저 내부 구성
- Web API + Callback Queue + Event Loop
- Web API
- 브라우저에서 제공하는 API의 모음(ex. setTimeout, DOM, fetch)
- Callback Queue
- 실행 되어야하는 콜백 함수의 대기 공간
- Event Table
- 이벤트 발생 시 어떤 콜백 함수가 호출되는지를 저장한 자료구조
- Event Loop
- 오래 걸리는 작업은 V8 엔진이 아닌 Web API가 대신 처리
- 완료된 작업은 콜백 큐로 들어가 대기
- 콜 스택이 비면 콜백 큐에 있던 컨텍스트가 콜 스택으로 들어가 실행됨
- 이를 모니터링 하면서 비동기적으로 실행되는 작업들을 관리하고, 순서대로 처리하여 프로그램의 실행 흐름 관리
- Web API 종류
- DOM, XMLHTtpRequest, Timer, Console, Canvas, Geolocation API 등등
- 질문) 콘솔 비동기 ? 동기?
- Callback Queue 우선순위
- Micro Task Queue ⇒ 얘가 우선순위 더 높음
- Promise, Process.nextTick, Object.observe, MutationObserver
- Task queue
- setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링 etc.
- 요약
- Javascript의 비동기 동작의 핵심은 런타임(브라우저, Node.js)에 있다!
- JS는 싱글스레드 언어다. 하지만 JS 런타임은 싱글스레드가 아니다.
- 브라우저 환경: Web API + Callback Queue + Event Loop
- Node.js 환경: Libuv 라이브러리
- 기술/문화/협업 어떤 주제로 한번 얘기해볼까요?
- https://greppkdt-frontend.slack.com/archives/C0296TEJPRU/p1699407237550789
- 요거 읽어보셨나용?
- 민수님 PR 리뷰
- React state colocation(state 어디다 두지? 할때 보면 좋습니다)
- 고민/질문 이런것 있으시다면 자유롭게 얘기해주세요!
- 인턴 공고
- 계획이 있으신지?? 어떻게 준비하고 계신가요?
- 다윤) 무지성으로 뜨면 다 지원한다. 하나만 걸려라!! 일단 지원.
- 재현) 무지성 작전!! 뜨는대로 다 넣기.
- 민수) 리액트부터 배워야 뭘 할 것 같아서. 배운 담에 해보려고 합니다.
- 다윤) 정규직 vs 인턴 채용에서 중요하게 생각하는게 뭘까??
- 은수) 기준은 동일한데 전체적으로 바가 내려간 느낌?? 결국 함께 일하고 싶은지(역량, 소프트스킬, 어떤 경험을 했는데 우리가 당면한 문제를 해결해줄 수 있을 것 같다.) ..가 결정 요소!!
- 이력서 포폴 준비 ⇒ 제가 도움드릴테니 지원하시기 전에 꼭 말씀 한번 주셔요!!!
- 인터뷰 준비 ⇒ 꼭!!! 말씀 주셔요.. 컬쳐핏 인터뷰는 더더욱 말씀 주셔요..!!!
- 마지막으로 20일에 언제/어디서 볼지 얘기해봅시다
- 재현님은 기차 타고 올라와서 친구집에서 묶으실 예정. 다음날 귀가
- 승민님도 기차 타고 올라와서 아마 당일에 내려갈 예정. 애매하면 하루 더 있을 수도 있음.
- 기차 타고 오시면 서울역 아니면 영등포역
- 후보지
- 삼각지 or 신용산
- 기차 타시는 분들은 여기가 좋으시려나요?
- 강남
- 제가 맛있는 밥과 커피를 대령하겠습니다!!!!
- 식사 장소+카페 몇 군데 정해서 슬랙에 공유드리겠습니다!! 이거 정하면 예약까지 싹 할게요. (기대기대)
- 제가 좋아요 ㅎ,,,
- 고속터미널
- 시간대는
제가 반차내고) 오후에 모여서 저녁 먹고 여유롭게 시간 보내기- 제가 퇴근하고 나서) 7시 7시 반쯤 모인다면 괜찮으려나요? 이때 저녁 먹고 카페가서 좀 얘기하다 바이바이
- 좀 더 일찍 볼 수 있으면 일찍 모이는 것으로!!
- 코어타임(1시~7시)
- 소피아 매니저님께 싹싹 빈다(봐주세요..!) ⇒ 요거 제가 말씀드려서 어떻게 빠질 수 있나 확인해볼게요.
- 2차팀 첫 날..!
- 조금 일찍 시마이 가능..?! ⇒ 확인해봅시다
정리
- 다음 주 커피챗 일정 다음주 초에 한번 잡아봐요
- 제가 three.js 사용기 들고갈게요
프롱이들의 궁금한 점
가나다 순으로 정렬했어요 !!