동아리, 회사, 스터디 등등 많이 바쁘다.. 멘토링 끝나고 블로그에 회고 작성하려는 큰 포부를 가졌지만.. 요즈음 과제가 어려워서? 시간이 빠듯해서 잘 못했다ㅠㅠ 그렇기에 오랜만에 회고를 작성해보고 복습해보자! 타입스크립트는 어떻게 컴파일할까? 우선 타입스크립트는 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…

화면 UI는 yiseo0님의 오픈소스를 참고했습니다. 감사합니다! 왜 만들었어!? JavScript을 이용해 Event Loop를 동작해보는 사이트를 만들어보았다. 왜!? 그냥 내가 공부하려고!! 우선은 간단하게 만들어보았는데, 점차 리팩토링도 하면서 해당하는 것들에 관해서 공부하며 추가할 것이다!!! 시연해보기 👉 Event Loop with JavaScript 직접 만들어보고 싶으면 Github Code를 참조하세요 많은 분이 Event Loop에 관해서 공부했을 것으로 생각한다. 그렇기에 내가 이벤트 루프를 만들기 위해서 어떤 내용을 참조했는지, 링크를 남겨두겠다! 추후 업데이트 기록 추가로 공부할 내용을 적어보겠다. 우선은 코드를 더 직관적으로 리팩토링할 예정이다. 6/3 업로드 완료 1차 배포 및 업로드 완료!!! 출처 및 도움되는 링크들 Promise를 만들어보자 JavaScript 동기와 비동기 완벽 가이드 Inpa Dev 왜 만들었어!? 추후 업데이트 기록 6/3…

한 주 소감 및 복습 내용 많은 것을 했고, 많은 것을 하고 있따.. 이것저것 만들고, 공부의 깊이는 더욱 깊어져 주제마다 별도의 페이지로 작성하겠다! 아자아자 화이팅!! 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…

Promise에 대해서 공부해보자 나는 개인적으로 프론트엔드의 꽃은 Promise와 비동기라고 생각한다. 백엔드를 공부하는 친구들이 가장 어려워하는 부분이기도 하고, 나의 러닝 커브가 가장 길었기 때문이다! 어차피 해당하는 내용은 공부를 미리 진행한 적 있어서 블로그 링크를 첨부하고 퀴즈를 통해 작동에 방법을 익히고, 활용해볼 예정이다!! Promise를 이해하기 위한 선행학습자료는 여기에 첨부하니 확인해보시길 권장드립니다. Promise.all() 위 코드의 결과값에서 3번째 Promise.all()에서 1,2,3이 출력되지 않고 error만 출력된 이유는 Promise.all()에서 입력 값으로 들어온 프로미스 중 하나라도 거부당하면 즉시 거부하기 때문이다. Promise.all()의 개념이 더 궁금하면 MDN 자료를 확인해보시면 됩니다. ✔️ Promise Order 위 코드는 어떤 순서로 값이 출력될까? 우선 동기식 코드(synchronous code) 1이 출력되고나서 3,…

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

Singleton Pattern 싱글톤 패턴은 특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하며, 이 인스턴스에 전역적으로 접근할 수 있게 하는 디자인 패턴이다. 싱글톤 패턴은 전역 변수를 사용하지 않고도 전역적인 접근을 제공하여, 공유 자원에 대한 동시 접근을 제어할 수 있어, 자원 관리와 동시성 제어에 중요한 시스템이다. 자바스크립트에서는 클래스를 사용하지 않고도 싱글톤 패턴을 구현할 수 있다. 왜냐하면 자바스크립트는 프로토타입 기반 언어이기 때문에 일반적인 함수와 객체, 클로저를 사용하여 싱글톤 패턴을 구현할 수 있다. 위 예시에서 클래스는 처음 생성될 때만 새로운 인스턴스를 생성하며, 이후에는 기존 인스턴스를 반환한다. 와 메서드를 통해 데이터를 가져오고 설정할 수 있다. 또한 자바스크립트의 함수와 프로토타입을 사용하여 싱글톤 패턴을 구현할 수 있다. 그리고 즉시 실행 함수 표현식(IIFE)을 사용하여 싱글톤 패턴을 구현할 수 있다. 위 예시는 IIFE를 사용하여…

Dependencies (종속성) 목적: 애플리케이션이 프로덕션에서 실행되기 위해 필수적 설치 방법: 명령어를 플래그 없이 실행할 때 설치 사용 사례: 웹 프레임워크, 유틸리티 라이브러리 등 애플리케이션이 정상적으로 작동하는 데 필요한 패키지를 포함 예시: DevDependencies (개발 종속성) 목적: 개발 및 테스트에만 필요 설치 방법: 또는 명령어를 실행할 때 설치 사용 사례: 테스트 라이브러리, 빌드 도구, 린터 등 프로덕션 환경에서는 필요하지 않은 패키지를 포함 예시: PeerDependencies (피어 종속성) 목적: 패키지를 사용하는 소비자가 특정 종속성을 제공해야 함을 명시 설치 방법: 자동으로 설치되지 않으며, 패키지를 사용하는 프로젝트에서 설치 사용 사례: 플러그인이나 라이브러리가 호스트 애플리케이션이 특정 버전의 종속성을 사용하도록 보장할 때 유용하며, 여러 버전의 동일한 패키지가 사용되는 것을 피할 수 있다. 예시: 요약 Dependencies: 런…

모듈은 현대 소프트웨어 개발에서 코드의 재사용성과 유지보수를 높이기 위해 필수적인 요소다. 그리고 자바스크립트에는 CommonJS와 ES 모듈이 있다. 두개가 어떤 차이가 있는지 비교해보자! CommonJS Node.js의 기본 모듈 시스템으로 CommonJs를 사용한다. 를 사용하여 모듈을 로드하고 를 사용하여 변수와 함수를 내보낸다. 동기적 로딩: 모듈을 하나씩 순차적으로 로드하고 처리하므로 성능에 민감한 애플리케이션에서 블로킹이 발생할 수 있다. 유연성: 는 코드의 어디서나 호출할 수 있어 조건부 또는 동적으로 모듈을 로드할 수 있다. ES 모듈 표준화된 포맷: ES 모듈은 자바스크립트 코드 재사용을 위한 공식 표준 문법: 와 문을 사용 비동기적 로딩: 모듈을 비동기적으로 로드하여 고성능 웹 애플리케이션의 성능을 향상시킬 수 있다. 네이티브 브라우저 지원: 모든 최신 웹 브라우저에서 지원하여 서버와 클라이언트 환경 간에 코드를 쉽게 공유할 수 있다. 파일 확장자: 일반적으로…

What is Single Thread? javascript 는 Single Thread 기반 언어 ⇒ 한 번에 하나의 작업만 수행 가능 하지만! 동시에 병렬처리 해야 될 때가 있다 그럴 때 javascript는 비동기 함수(setTimeout, ajax, Promise 객체 등)를 이용 동기와 비동기 동기(Synchronous) : 먼저 시작된 작업이 끝날 때까지 기다리다가 새로 시작(한번에 여러작업이 아닌 하나씩) 비동기(Asynchronous): 작업이 끝날때까지 기다리지 않고 다음 작업 수행(한번에 여러작업을 처리함) 자바스크립트의 비동기 내장함수 자바스크립트는 비동기 내장함수를 제공함 ⇒ setTimeout, XMLHttpRequest, fetch() XMLHttpRequest 현재는 잘 사용하지 않음 관련 링크 : https://7942yongdae.tistory.com/67 setTimeout / clearTimeout setTimeout() 함수는 특정 코드를 바로…