동아리, 회사, 스터디 등등 많이 바쁘다.. 멘토링 끝나고 블로그에 회고 작성하려는 큰 포부를 가졌지만.. 요즈음 과제가 어려워서? 시간이 빠듯해서 잘 못했다ㅠㅠ 그렇기에 오랜만에 회고를 작성해보고 복습해보자! 타입스크립트는 어떻게 컴파일할까? 우선 타입스크립트는 TSC 컴파일러를 통해 바로 컴파일되는 것이 아닌 자바스크립트 코드로 변환된다. 이 과정에서 고수준 언어인 타입스크립트가 저수준 언어인 자바스크립트로 변환되어 트랜스파일이라고 부르기도 한다. 상세한 과정은 아래와 같다. 타입스크립트 소스코드를 타입스크립트 AST로 만들고, 타입 검사기가 AST를 확인하여 타입을 확인한다. (TSC) 타입스크립트 AST를 자바스크립트 소스로 변환한다. (TSC) 자바스크립트 소스코드를 자바스크립트 AST로 만든다. (런타임) AST가 바이트 코드로 변환되고 런타임에 바이트 코드가 평가되어 프로그램이 실행된다. (런타임) 타입스크립트 컴파일러의 구성 요소와 동작 방식 Scanner => Pa…

한 주 소감 및 복습 내용 힘들게 1차 과제를 마무리했다. 재사용성과 가독성에 대한 고민을 더 해보라는 피드백으로 코드를 열심히 만져보았다. 격렬하게 다루었던 커밋 기록은 여기를 확인해보시면 됩니다. 평소라면 생각해보지 않은, 상태관리 변경 시점과 브라우저 동작방식 등에 대해서 자바스크립트로 코드를 작성하며 구현해보았다. 구현하기 너무 어려워서 구글링을 해본 결과 좋은 자료들도 발견하게 되어 공유 드리니 확인해보시면 좋겠다! 황준일님의 상태관리 시스템 만들기 DaleSeo의 History API 멘토링을 진행하면서 대답하지 못했거나, 더 공부가 필요한 것들에 관해 공부를 시작해보자! 도대체 자바스크립트 킹짱맨은 언제 될 수 있는 건데..ㅠㅠ 버블링과 캡처링 HTML 문서의 각 엘리먼트들은 계층적 구조로 이루어져있다. 이러한 구조 때문에 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어날 수 있다. 이렇게 HTML 요소에 이벤트가 발생할 경우, 이벤트가 연쇄적으로 …

한 주 소감 및 복습 내용 나 마라톤했다? 10K, 나 회사가 엄청 바빳다, 그리고 Event Loop도 만들었고, History API를 열심히 만들고있다! 추가로 공부할 내용들은 아래와 같다. 상태관리 라이브러리를 내부적으로 구현한다고 가정했을 때 상태는 어떻게 트리거하고 UI 반영하게 할 수 있을지 observer와 flux 구조, re-render 시킨다면 어떻게 접근할지 react-router-dom을 구현한다고 가정했을 때 인터페이스를 어떻게 설계할지 Router guard, 는 각각 어떻게 구현할 수 있을지 composite Layers React Virtual Dom과 탐색 알고리즘 브라우저의 Javascript 엔진이 스크립트를 어떻게 파싱하고 실행하는지 추가로 이번주에 react-router가 어떻게 동작하는지 만들어보고, 분석해보자. 아 그리고 프레임워크와 라이브러리 차이와 CSR과 SSR의 차이를 복습해보자! Composite Layers Reflow…

한 주 소감 및 복습 내용 많은 것을 했고, 많은 것을 하고 있따.. 이것저것 만들고, 공부의 깊이는 더욱 깊어져 주제마다 별도의 페이지로 작성하겠다! 아자아자 화이팅!! 5월 넷째 주 회고 해커톤을 했습니다. 저번에는 참가자로 이번에는 운영진으로 경험해보았습니다. 사람들과 시간이 비어있을 때, CI/CD와 Docker 에 대해 이야기를 나누었습니다. 토요일 점심에 크래프톤에서 코딩테스트가 요청되어 진행했습니다. 주관식 3개 알고리즘 3개 진행했는데, 알고리즘 지식이 부족해 어렵게 느꼈습니다. 이팩티브 디버깅 행사에 다녀왔습니다. 디버깅을 위한 접근 방식에 대해 다른 사람들과 경험을 공유해볼 수 있는 시간이었습니다. 공부를 하다 보니 부족하다고 느껴지는 것이 명확해지고 있습니다. 테스트를 다루는 부분과, 회사에서 현재 다루고 있는데 CI/CD에 대한 지식을 넓히려 합니다. 이번 주 좋은 것과 나쁜 것 이번 주에 개인적으로 잡은 약속 없어서 공부할 수 있는 시간을 많이 가져왔습니…

Promise를 직접 만들어보자. 앞서 나는 Promise()에 대한 글을 2번 정도 게시했다. 자바스크립트 Promise를 퀴즈로 쉽게 익히기 JavaScript 동기와 비동기 완벽 가이드 위 글을 쓰고 나서 몇 달이 지난 현재, Promise의 내부는 어떻게 동작하고, 어떻게 구성이 되어있는지 궁금했다. 아티클을 읽던 와중에 푸만능님의 JavaScript Promise 객체 직접 구현해보기를 알게 되어서, 위 내용을 실습해보며 내가 새롭게 알게 된 내용들에 대해 공부해보려한다. Promise를 어떻게 만들어볼까? Promise를 만들기 전에, Promise에 대해 이해해보기 위해, 기능 구현 목록을 작성해보자 우선 Promise는 실행 상태를 나타내기 때문에, Pending(실행 전), fulfilled(실행 후 성공 => resolve), rejected(실행 후 실패 => rejected)이 필요하다. 그리고 Promise는 JS 이벤트 루프에서 Microtask Queue…

한 주 소감 및 복습 내용 이번 주부터 과제가 엄청나게 많다. 그리고 이전에 했던 과제들에 대한 복습들도 이루어져야 되기 때문에, 개념적인 공부는 위 과제들을 진행하면서 해당 게시글을 여기에 리포스팅할 예정이다. 이번주에 멘토링을 진행하면서 다시 공부해보면 좋을 것 같은 부분은 아래와 같다. 하나씩 차근차근 천천히 준비하면서 폭 깊은 개발자가 되어보자! 자바스크립트에서 함수의 “동적”이랑 “정적”의 의미를 이해하기 const 호이스팅에 대해서 깊이 학습 좋은 함수에 대해 생각해보기 Promise를 만들어보자 useState를 직접 구현해보자! 자바스크립트 이벤트루프 시뮬레이션 도구를 직접 구현해보자! (추후 링크 참조) 브라우저 렌더링에 관한 아티클들 읽어보자 Naver D2 - 브라우저는 어떻게 동작하는가? Toast UI - 성능 최적화 웹 성능 최적화에 필요한 브라우저의 모든 것 자바스크립트의 함수에서 동적과 정적에 대해 자바스크립트에서 동적(Dynamic) 과 정적(Sta…

으아아아ㅏ 멘토링 두번째 회고 및 복습 시작!!! 복습.. 또 복습 복습은 복숭아다.. (복숭아가 너무너무 먹고싶다.) 이번 주도 어김없이 아는 것을 설명하지 못하고, 계속 반복된 이야기만 했다. 아직 잘 몰라서 그런 것 같다. 미숙하지만 더더더더! 공부하자 We Can Do It const, let, var의 호이스팅에서 차이점 우선 호이스팅이란 실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 것을 의미한다. 변수 생성 과정은 선언 단계(Declaration phase) => 초기화 단계(Initialization phase) => 할당 단계(Assignment phase) 이렇게 총 세 단계를 거쳐 생성되고, 변수를 선언 및 초기화 하기전에 사용하게 되는 영역을 TDZ(Temporal Dead Zone)라고 한다. var : 선언한 변수는 호이스팅 시 undefined로 초기화되어, 변수 선언 이전에 해당 변수를 참조할 수 있다. 변수 선언과 동시에 unde…

독학으로 공부를 계속하다 회사에 다닌 지 1년이 넘은 현시점에서, 스스로를 객관적으로 돌이켜보기 위해서 멘토링을 신청하게 되었다! 멘토링을 하면서 느낀 경험을 1주일 단위 회고 형식으로 진행해보려 한다. 첫 번째 주차의 회고를 진행해보겠다 (24.04.30 ~ 24.05.06) 일단.. 다시 공부가 필요한 것들 복습하자 돌이켜 생각해보면 잘 몰랐던 것들은 계속 모르거나 헷갈리고 있다. (나 자신을 똥 멍청이라 생각한다ㅠ.. 그래도 천재가 되기 위해서 차근차근 복습해보자) 1.gif 깊은 복사와 얕은 복사의 차이 얕은 복사(Shallow Copy)는 원본 객체의 최상위 수준의 속성들을 복사하고, 내부의 객체는 참조를 공유한다. 즉, 내부 객체에 대한 변경은 복사된 객체와 원본 객체 양쪽에 모두 영향을 주고, 최상위 수준의 속성이 필요한 경우에 사용한다. Object.assign()을 이용한 얕은 복사 Spread 연산자를 이용한 얕은 복사 깊은 복사(Deep Copy)는 원본 객체의…