퍼블리셔 이야기

1. 웹 접근성이란 ?장애 유무와 관계없이 모든 사용자가 웹을 동등하게 이용할 수 있도록 보장하는 것이다. 대상 장애 유형시각 장애 (전맹, 저시력, 색각 이상)청각 장애운동 장애 (마우스 사용 불가 등)인지 / 학습 장애2. WCAG 2.1 -- 4대 원칙 (POUR) 원칙설명Perceivable인식 가능해야 한다.Operable조작 가능해야 한다.Understandable이해 가능해야 한다.Robust 다양한 환경에서 동작 원칙별 실무 적용 예시❌ 클릭✅ 클릭❌ 입력 오류✅ 이메일 형식이 올바르지 않습니다 (예: name@email.com)❌ ...✅ ... 3. 대체 텍스트 (alt)개념 이미지 정보를 스크린리더 사용자에게 전달한다. 유형처리의미 있는 이미지alt="설명"장식용 이미지alt=""(..

useInterval 커스텀 훅 사용 이유 문제점 : React에서 setInterval을 그냥 쓰면 클로저 문제 발생 한다state가 업데이트되어도 interval 안에서는 옛날 값을 참조하기 때문에메모리 누수 발생할 수 있다.cleanup을 제대로 안 하면 컴포넌트가 unmount 되어도 interval이 계속 실행되기 때문에코드 복잡도가 증가함useEffect 안에서 setInterval과 clearInterval을 매번 작성해야하기 때문에useInterval의 장점 :state 최신값을 항상 참조자동 cleanup으로 메모리 누수 방지delay를 null로 바꾸면 일시정지 가능재사용 가능한 깔끔한 코드 일반 setInterval의 문제점 (예시)function Counter() { const [c..

🌐 자바스크립트가 코드를 실행할 때 필요한 모든 정보를 담고 있는 공간자바스크립트 엔진은 코드 한 줄 한 줄을 실행하기 전에 "코드 실행 준비 완료" 라는 의미로 실행 컨텍스트를 만들고 그 안에 변수, 함수, 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:..