동찬 코드 일지

JS는 싱글 스레드(single thread) 방식으로 동작된다.싱글 스레드를 사용하므로 항상 하나의 테스크만을 처리할 수 있다.앞서 알아보았던 실행 컨텍스트는 Stack 구조로 쌓이며 실행 될 수 있는 컨텍스트는 최상위 컨텍스트 항상 오직 하나이다.나머지 아래에 쌓인 실행 컨텍스트는 작업 테스크큐에 남아 있다.소스코드가 실행 순서대로 (위에서 아래로) 해당 코드를 처리 후 다음 코드를 실행하는 기존의 동작 방식동기 sychronous소스코드의 실행 순서가 보장된다. 일반적인 소스코드의 동작 방식이다.하나의 작업이 실행되면 이후 작업은 진행되지 않는다. 이를 블로킹 (blocking)이라 한다.비동기 asynchronous현재 실행 중인 작업이 있더라도 이후 작업을 블로킹하지 않고 곧바로 실행한다. 이를..

바인딩 : 식별자와 값을 연결하는 과정this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.함수는 4가지 방식으로 호출 될 수 있다.일반 함수 호출메서드 호출생성자 함수 호출Function.prototype.apply/call/bind 메서드에 의한 간접 호출this는 기본적으로 함수를 호출한 주체(객체)를 가리킨다.일반 함수 호출엄격모드가 아닐 때어떠한 함수도 일반 함수로 호출되면 this에는 전역 객체 (window) 가 바인딩 된다.node.js에서는 global 객체엄격모드일 때엄격 모드에서는 일반 함수로 호출된 함수의 this가 window가 아닌 undefined가 바인딩 된다..메서드 호출메서드를 호출할 때 메서드 이름 앞에 마침표 연산자 앞에 기술한 객..

https://2025.feconf.kr/ FEConf 2025국내 최대 프론트엔드 개발 컨퍼런스, FECONF 2025가 8월 23일 오프라인으로 찾아옵니다.2025.feconf.kr 25년 8월 23일세종대학교 광개토관 11시 2025 FE Conf에 참석했던 후기이다. 웹 FE 개발자 취준생으로써 현직자들의 고민과 개발과정을 경험하고 이를 통해 좀더 몰랐던 부분을 개선시키고자 참석. 전반적으로 프론트엔드 지식 및 경험이 어느정도 있어야 얻어갈 수 있는 컨퍼런스였다. - 12:00 - 12:30 스벨트를 통해 리액트 더 잘 이해하기https://ssgoi.dev/ko기존 React, Next 프레임워크를 중심으로만 프로젝트를 진행했었는데 Svelt 프레임워크의 특징 (FGR) 및 리엑트와의 차별점 ..

https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html코드를 실행하기 전에 이러한 버그를 미리 발견할 수 있는 도구가 있다면 좋을 것입니다. TypeScript와 같은 정적 타입 검사기의 역할이 바로 그것입니다.정적 타입 검사기프로그램이 실행되기 전, 즉 컴파일 타임에 코드의 타입 안전성을 검사하는 도구입니다.런타임 환경과 컴파일 환경컴파일 타임(Compile Time)컴파일 타임은 소스 코드가 기계어나 중간 코드로 변환되는 시점을 의미합니다. 이 단계에서는:코드의 구문 오류를 검사합니다 (예: 세미콜론 누락, 괄호 짝 맞추기 등)타입 검사(정적 타입 언어의 경우)가 수행됩니다코드 최적화가 이루어집니다실제 코드 실행은 아직 일어나지 않습니다..

객체지향 프로그래밍에서 “객체”는상태를 나타내는 프로퍼티와동작을 나타내는 메서드를하나의 논리적인 단위로 묶은 복합적인 자료구조왜 this가 쓰여?동작을 나타내는 메서드는자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다.이때 메서드가 자신이 속한 객체의 프로퍼티를 “참조”하려면자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 생성자 함수를 정의하는 시점 → 아직 인스턴스 생성 전이므로 생성자 함수는 자신이 생성할 인스턴스를 가리키는 식별자를 “알 수 없다”→ 따라서 자신이 속한 객체 또는 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다 → 이로 인해 this 식별자를 제공 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.thi..

상태 State를 안전하게 변경하고 유지하기 위해 사용만약 모든 상태가 전역 상태를 통해 관리된다면?다른 함수 및 코드에서 모두 접근/변경 가능 → 의도치 않은 동작 및 버그 발생 가능성→ 해당 예측 가능한 동작을 위해 해당 변수는 특정 변수만 접근 및 수정 하도록 개발자가 “인지”해야 한다.하지만, Clouser을 활용한다면?해당 함수만이 데이터 접근 및 변경 가능 → 원천적으로 외부 접근/변경 차단 가능이로인해 가변을 피하여 불변성을 지향하는 함수형 프로그래밍에서 부수 효과를 억제하여 오류를 피하는 안정적인 프로그래밍이 가능해진다.예시 코드function createAccount(initialBalance) { // 1. 'balance'는 외부에서 접근할 수 없는 비공개 상태입니다. let ba..

" 왜 이름이 렉시컬 스코프인가?" 렉시컬 스코프(Lexical Scope)에서 '렉시컬(Lexical)'은 '소스코드의 텍스트 자체' 또는 '어휘'를 의미.쉽게 말해, 변수의 유효 범위(스코프)가 코드가 실행되는 방식이나 함수가 호출되는 순서가 아닌, 코드가 작성된 시점의 '물리적인 구조'에 의해 결정된다는 뜻!'Lexical'의 의미 파헤치기 🧐'Lexical'은 '어휘'나 '사전'을 의미하는 'Lexicon'이라는 단어에서 유래했습니다.프로그래밍 언어의 컴파일러가 소스코드를 분석하는 첫 단계를 '어휘 분석(Lexical Analysis)'이라고 합니다.이 단계에서 컴파일러는 소스코드를 단어와 같은 의미 있는 조각(토큰)으로 나눕니다.이처럼 '렉시컬'이라는 단어는 코드의 실행(runtime) 단계..

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 “조합”이다.외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라고 부른다.중첩 함수가 존재하는 한, 외부 함수는 존재한다. ” 외부 함수의 실행 컨텍스트는 제거되지만, 렉시컬 환경까지 소멸되지는 않는다.”클로저는 중첩 함수가 외부 함수보다 더 오래 유지되어 상위 스코프의 생명주기가 끝나 실행컨텍스트가 제거되더라도, 내부 렉시컬 환경을 통해 참조값을 사용할 경우를 말한다.예시 코드 - React의 useState 내부 구현function myUseState(initialValue) { // 1. 상태(state)를 은닉합니다. // 이 state 변수는..

취업 준비 핵심 전략1. 기본기: "왜?"를 설명할 수 있는 깊이V8 엔진 동작 원리 이해 (콜 스택, 메모리 힙, 이벤트 루프)React를 Vanilla JS로 구현해보기 (가상 DOM, 상태 변화)SPA 등장 배경과 MPA 대비 장단점 설명 가능JS 내부 동작 원리 최소 1개는 "내 언어"로 설명2. 자소서와 포트폴리오: "최선의 논리" 증명기술 나열 X → 선택 이유, 대안, 결과를 논리적으로 설명레거시 코드 유지 이유(트레이드오프) 이해모든 기능과 선택에는 이유가 있어야 함논리 구조: "왜 필요했는가 → 어떤 문제 해결 → 당시 최선의 판단"3. 현실적인 마음가짐: 운과 통계의 게임학벌·스펙 크게 중요하지 않음취업은 확률 게임, 최소 100개 이상 지원서류 탈락에 흔들리지 말고 꾸준히 지원

JS 는 어떤 방식으로 동작하는가? 어떤 흐름으로 동작할까?자 실행 컨텍스트를 이해한다면? →스코프 기반 식별자, 바인딩 값, 호이스팅 이유, 클로저 동작 방식, 테스크 큐 + 이벤트 핸들러, 비동기 처리 모두 이해 가능실행 컨텍스트란 ?코드가 실행될 때 필요한 정보들의 모여 만들어진 “환경”→ 실행 컨텍스트는 식별자()를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.코드는 크게 4가지의 스코프 영역을 가지며 이 스코프에 따라 컨텍스트가 만들어진다( 다만 각 스코프는 항상 독립적인 컨텍스트를 만들지는 않는다.)"모든 스코프가 컨텍스트를 만들지 않는다"의 의미function myFunction() { // (A) myFunct..