웹 개발자 도전기

🌐 자바스크립트가 코드를 실행할 때 필요한 모든 정보를 담고 있는 공간자바스크립트 엔진은 코드 한 줄 한 줄을 실행하기 전에 "코드 실행 준비 완료" 라는 의미로 실행 컨텍스트를 만들고 그 안에 변수, 함수, this, 외부 정보 등을 전부 정리해 둔다. ⚙️ 실행 컨텍스트가 만들어 질때자바스크립트 코드 시작할 때 -> 전역 실행 컨텍스트함수가 호출될 때마다 -> 새 함수 실행 컨텍스트# 함수가 중첩되어 있으면 실행 컨텍스트도 쌓이고 끝나면 빠진다. 🛖 실행 컨텍스트 내부 구조구성 요소설명VariableEnvironment변수와 함수 선언 정보 저장 (var , function)LexicalEnvironmentlet , const 같은 블록스코프 변수 저장thisBinding현재 컨텍스트에서의 thi..

브라우저 동작 원리나 웹 성능 최적화, Node.js의 동작 방식 등을 이해하려면 이 두 개념을 아는 게 중요하다. 프로세스란?실행 중인 프로그램 하나를 프로세스라고 부른다.프로그램을 실행하면, 운영체제(OS)가 그 프로그램을 위해 독립된 메모리 공간을 만들어준다.그 공간이 바로 프로세스이다.예시 :크롬을 열면 하나의 프로세스가 생기고 탭을 하나 더 열면 탭마다 별도의 프로세스가 생긴다.탭 하나가 멈춰도 다른 탭은 잘 작동하는 이유가 바로 이 구조 덕분이다. 스레드란?프로세스 안에서 실제 작업을 수행하는 실행 단위다.하나의 프로세스는 여러 개의 스레드를 가질 수 있다. (멀티스레드)스레드들은 같은 프로세스 내 메모리를 공유하면서 각자 다른 일을 병렬로 처리할 수 있다.예시 :하나의 브라우저 탭(프로세스)..

✅ this란 ?this는 "누가 호출했는지" 에 따라 가리키는 대상이 달라지는 키워드 이다.다만 화살표 함수는 예외로 자기만의 this를 갖지 않고 바깥에 있는 this를 그대로 따라간다. ✅ 상황별 this 1. 전역에서의 thisconsole.log(this) // 브라우저 : window 2. 일반 함수에서의 thisfunction khj() { console.log(this);}khj(); // window (strict mode에선 undefined) 3. 객체의 메서드에서의 thisconst nice = { name:'KHJ', say() { console.log(this.name); }};nice.say(); // KHJ 4. 함수만 따로 const hj = nice.say;h..

CORS (Cross-Origin Resource Sharing) 는 브라우저가 보안을 위해 다른 출처의 요청을 막는 기능 이다.서버가 허락한 경우에는 요청을 허용해준다. 다른 출처란?출처는 프로토콜 + 도메인 + 포트번호 로 구성된다.예를 들어 http://localhost:3000 [ 프론트 ] http://localhost:5000 [ 백엔드 ]포트가 다르기 때문에 출처가 다르다 - CORS 발생 CORS 에러는 왜 생길까?브라우저는 다른 출처로 요청할 때 보안상의 이유로 막는다.이때 서버가 "이 프론트 주소는 허용" 라고 응답해야 요청이 정상적으로 처리된다. 해결 방법 (서버에서)Node.js(Express)에서의 설정const cors = require('cors');app.use(cors..

클로저란?함수가 선언될 당시의 외부 변수를 기억하고 함수가 실행이 끝난 후에도 그 변수에 접근할 수 있는 함수입니다.*일반적으로 함수는 실행이 끝나면 내부 변수는 사라지지만 클로저는 그 값을 기억해서 다시 사용할 수 있는 특별한 함수클로저의 동작 방식함수 안에 내부 함수가 정의되어 있고내부 함수가 외부 함수의 변수를 참조하고 있으며외부 함수가 return으로 내부 함수를 반환할 경우반환된 내부 함수는 외부 함수가 종료된 이후에도 외부 변수에 접근할 수 있게 됩니다. 이를 클로저라 부릅니다.클로저가 중요한 이유값을 기억하고 유지할 수 있다.클로저를 이용하면 함수 외부에서도 내부 값을 유지할 수 있다.예로 카운터처럼 누적되는 숫자값을 기억해야 할 때 유용하다.변수를 외부에서 숨길 수 있다.자바스크립트는 pr..

스코프 체인이란?스코프 체인이란 자바스크립트가 변수를 찾을 때 안쪽 스코프에서 바깥쪽 스코프로 차례대로 찾아 올라가는 구조를 말한다.즉 내부 함수가 외부 스코프의 변수에 접근할 수 있는 이유가 바로 스코프 체인 덕분이다. 예시let a = 1;function nice() { let b = 2; function khj() { let c = 3; console.log(a); // 전역에서 찾음 console.log(b); // nice에서 찾음 console.log(c); // khj 에서 찾음 } khj();}nice(); 스코프 체인의 실제 흐름위 예시에서 khj() 함수는 a,b,c 라는 세 가지 변수를 각각 다른 스코프에서 찾는다.c -> 자기 스코..

1. 선언 방식 비교구분varletconst 스코프함수 스코프블록 스코프블록 스코프 재선언가능불가능불가능 재할당가능가능불가능 호이스팅됨됨됨셋 다 호이스팅은 된다.단 let/const는 TDZ 존재함TDZ없음있음있음 ※TDZ (Temporal Dead Zone) 란? : TDZ는 변수 선언(let , const)이 호이스팅은 되었지만 아직 초기화되지 않은 구간 이 구간에서는 변수에 접근하려 하면 ReferenceError가 발생함. - 초기화란? 변수에 값을 처음으로 할당하는 것 2. 선언 시 동작 비교 (호이스팅 + TDZ 포함)예시코드결과설명console.log(x);var x = 1;출력 : undefinedvar는 호이스팅되며 undefined 로 초기화되기 때문에 에러 없..

HTTP 헤더란 ?HTTP 헤더는 클라이언트와 서버가 요청이나 응답시에 추가적인 정보를 주고 받는 부분이다.요청 방식(GET, POST) 외에도 데이터 형식, 인증 정보, 응답 형식 등 부가 정보가 여기에 포함된다. 자주 사용하는 HTTP 헤더 종류 1. Content-Type클라이언트가 서버에게 보낸 데이터를 예시로 보여주는 헤더 예시 : application/json -> JSON 형식 ( 가장 많이 쓴다. )multipart/form-data -> 파일 업로드application/x-www-form-urlencoded -> 폼 데이터프론트 코드 예시axios.post('/api/user',{name : 'NiceKHJ' , email : 'NiceKHJ@tistory.com'},{ headers:..

🌐 TCP와 UDP란?TCP와 UDP는 인터넷에서 데이터를 주고 받을 때 사용하는 전송 방식(프로토콜) 이다.말 그대로 데이터를 어떻게 보낼지 약속한 규칙둘 다 IP위에서 동작하지만 어떻게 데이터를 보내는지 방식이 다르다. 🌐 TCP (Transmission Control Protocol)안전하고 정확하게 데이터를 보내는 방식데이터를 보내기 전에 연결부터 확인한다.받았는지 확인하면서 주고 받는다.데이터가 누락되면 다시 요청하고 다시 보내준다.순서도 보장 (1,2,3 순서대로 보내면 1,2,3 순서대로 도착)속도는 느리지만 신뢰성이 좋다. ✅ 사용예시 :웹페이지 접속 (HTTP / HTTPS)파일 다운로드 (FTP)메일 전송 (SMTP)은행 거래 (정확해야 하는 데이터) 🌐 UDP (User Dat..

DNSDNS (Domain Name System) 는 사람이 기억하기 쉬운 도메인을 컴퓨터가 이해할 수 있는 IP 주소로 변환해주는 시스템예) www.google.com -> 142.250.206.68DNS가 없다면 매번 사이트에 접속할 때마다 IP 주소를 직접 입력해야 한다.예시)브라우저 주소창에 www.naver.com 입력DNS 서버에서 IP 주소(223.130.195.200)를 찾아서 반환해당 IP로 접속 IPIP 주소 (Internet Protocol Address) 는 인터넷에서 컴퓨터의 위치를 나타내는 고유한 주소예) 네이버 : 223.130.195.200 , 구글 : 142.250.206.68IP는 네트워크 상에서 컴퓨터를 구분하기 위해 사용한다.예시)React 개발 서버 : localho..