개발자 강화/프론트엔드 (42) 썸네일형 리스트형 🌟[매일메일] 자바스크립트의 Event Loop와 테스트 큐란? (FE.250122/241218) (개발자 강화/프론트엔드) 2025. 1. 28. 00:05 Javascript는 싱글 스레드 언어.한 번에 한 작업만 처리할 수 있는 단일 콜 스택을 가짐. (원래 동기적 언어)브라우저나 Node.js 환경이 제공하는 비동기 처리 매커니즘을 활용해 여러 작업을 동시에 수행 가능함.브라우저: 자바스크립트 엔진은 setTimeout, fetch 등을 WebAPI에 넘겨 비동기 처리. 완료 시 테스크 큐로 이동. Node.js: 이벤트 루프가 콜 스택이 비어있는 지 확인하고 테스트 큐에서 대기중인 작업을 콜 스택으로 옮겨 실행.콜 스택: 현재 실행 중인 코드가 쌓임, 테스크 큐: 비동기 작업이 완료되면 그 결과를 대기시키는 곳이벤트 루프 덕에 UI 업데이트나 사용자 입력 처리를 수행하면서도, 비동기 작업을 블로킹 없이 병렬적 처리 가능함.setTimeout(callb.. [매일메일] undefined와 null의 차이점? (FE.250127) (개발자 강화/프론트엔드) 2025. 1. 27. 22:12 undefined: 자바스크립트에서 자동으로 할당되는 값. 아직 값을 할당하지 않은 상태.- 변수가 선언된 후 값 할당이 되지 않으면, 자바스크립트에서 변수에 undefined를 자동으로 부여함- let a;가 선언되면, 자바스크립트는 자동으로 a에 undefined 할당함 null: 개발자가 의도적으로 할당하는 값. 의도적으로 값을 비워 둔 상태를 나타냄.- 변수에 값이 없음을 명확히 표현하기 위해 개발자가 null을 할당함- let b = null; b라는 변수에 값이 비어있음을 의도하기 위해 null을 할당한 것 느슨한 비교(==)에서는 null과 undefined가 같게 처리되지만엄격한 비교(===)에서는 null과 undefined가 다르게 처리됨 메모리 관리에서 undefined와 nullnu.. 🌟[공부] React의 트리 쉐이킹이란? (개발자 강화/프론트엔드) 2025. 1. 26. 22:13 React의 트리 쉐이킹(Tree Shaking)?자바스크립트에서 사용하지 않는 코드를 제거해 번들 크기를 줄이는 최적화 기법ES6의 모듈 시스템(ESM)에서의 정적 분석(Static Analysis)을 기반으로 이루어짐* 정적 분석(Static Analysis)- 프로그램을 실행하지 않고, 코드 자체의 문법 구조(Syntax Tree)를 분석함.- 프로그램 구조, 흐름, 의존성 이해하고 최적화 또는 오류 탐지 수행함.- 어떤 모듈이 다른 모듈에 의존하는지, 어떤 함수나 변수가 실제로 사용되는지 추적함.- ES6 모듈의 import/export 키워드는 정적으로 정의되어, 분석기가 전체 코드를 미리 파악할 수 있음. *정적으로 정의- 코드가 런타임에 결정되지 않고, 컴파일 시점이나 분석 시점에 구조와 동.. [매일메일] CommonJS와 ES Module(ESM) 차이점이란? (FE.250103) (개발자 강화/프론트엔드) 2025. 1. 26. 21:35 CommonJS, ES Module(ESM) 자바스크립트에서 모듈을 관리하고 불러오는 방식 CommonJSES Module사용 환경Node.js 환경브라우저, Node.js 환경모듈 로드동기적SSR 환경에서 유리함(모든 모듈 로드 후 실행)비동기적(브라우저에서 모듈 로드 , 페이지 로딩 속도 저하 X)모듈 키워드(가져옴/내보냄)require / module.exportsimport / export트리 셰이킹어려움(사용되지 않는 코드 제거하기 어려움)유리함(사용되지 않는 코드 제거하고 번들 크기 줄임)예시const moduleA = require('./moduleA'); moduleA.sayHello(); module.exports = { sayHello: function() { c.. [매일메일] 시맨틱 마크업이란? (FE.250124) (개발자 강화/프론트엔드) 2025. 1. 24. 20:10 시맨틱 마크업이란?HTML 요소를 사용하는 방식시각적 목적이 아닌 "요소의 의미를 잘 나타내도록" 작성하는 방식비시맨틱 태그: , 시맨틱 태그: , , , 시맨틱 마크업이 중요한 이유?접근성을 개선하기 위해접근성 도구(스크린 리더)에서 콘텐츠의 구조를 더 잘 해석할 수 있음웹 접근성을 개선해 다양한 사용자층(노인, 시각장애인)이 사이트 탐색을 도움SEO(검색 엔진 최적화)에 유리함HTML 시맨틱 태그로 페이지 구성을 파악함.검색 엔진이 페이지를 올바르게 파악하므로, 검색 결과에서 페이지가 더 잘 노출될 수 있음CSR(Client Side Rendering)에서도 시맨틱 마크업이 SEO에 영향을 미치는가?원래 CSR에서 대부분의 콘텐츠가 클라이언트 측에서 렌더링되므로, 검색엔진은 크롤링 시 초기 로딩 콘텐.. [매일메일] 타입스크립트의 타입과 인터페이스 차이? (FE.250123) (개발자 강화/프론트엔드) 2025. 1. 23. 23:52 타입스크립트(TypeScript)란?자바스크립트의 슈퍼셋(자바스크립트의 모든 기능을 포함하면서, 추가 기능을 제공한다.) 이다.정적 타입을 제공함. (변수나 함수의 타입을 코드가 실행되기 전 컴파일 단계에서 미리 확인할 수 있음.)코드의 안정성과 가독성을 높여줌.정적 타입을 정의하기 위해 타입과 인터페이스를 사용하고, 데이터 구조와 타입을 명시함.타입(Type)이란?복잡한 타입 정의 및 조항을 표현하는 데 용이함.type으로 선언한 경우, 동일한 이름을 중복 선언하면 에러가 발생함.튜플 같은 복잡한 타입 표현이 가능하고, 복잡한 타입 조합을 위해 인터섹션(&)과 유니온(|) 연산자 지원.type BasicInfo = { name: string; age: number;};type ContactInfo .. 🌟[상상개발] 무한스크롤을 어떻게 구현하는 게 좋을까? (개발자 강화/프론트엔드) 2025. 1. 23. 13:32 * 주의: 실제 개발하면서 정리한 것이 아니라, 구현을 어떻게 할 수 있을지 찾아보고 생각을 정리한 글입니다. React Query 사용특징QueryClient라는 객체에서 관리하고, 이는 브라우저 메모리에 존재함.Query Key를 기준으로 저장함. 데이터+상태(status, fetching, updateAt)을 메모리 캐시에 보관함.staleTime으로 캐시된 데이터가 오래된 상태인지 확인하고, 오래됐으면 서버로 데이터 갱신useInfiniteQuery: 페이지네이션 데이터 관리할 때, 각 페이지 데이터를 구분해 메모리 캐시에 저장함.invalidateQueries: 서버 데이터가 변경된 경우, React Query는 invalidateQueries를 통해 캐시를 무효화.Garbage Collecti.. [매일메일] 낙관적 업데이트란? (FE.250121) (개발자 강화/프론트엔드) 2025. 1. 21. 19:17 낙관적 업데이트성공적인 상태 업데이트가 이루어 질 것이라는 가정 하에 서버 응답 전 UI를 미리 업데이트 해둠. 대표적인 예시 - 좋아요 기능사용자가 좋아요 버튼을 눌렀을 때, 서버 응답을 기다리지 않고 화면에 바로 버튼 누름 상태 반영함.서버 응답이 성공적으로 돌아오면 유지하고, 실패하면 UI에서 해제하거나 오류 메시지를 보여줌 장점서버 응답 속도와 상관 없이 즉각적인 피드백을 제공해서 사용자가 시스템을 빠르게 쓸 수 있음네트워크 상태가 좋지 않거나 응답 시간이 길어도 사용자 경험에 영향이 덜 미침 단점서버에서 오류가 발생하면 잠시동안 화면에 잘못된 정보가 표시될 수 있음이를 대비해 오류 핸들링(rollback) 로직을 같이 설계해줘야 함 낙관적 업데이트를 사용해야 하는 경우요청이 성공할 가능성이 높고.. [매일메일] 자바스크립트의 호이스팅(feat. 인터프리터 언어)(FE.250110/241230) (개발자 강화/프론트엔드) 2025. 1. 20. 22:12 호이스팅이란?- 변수와 함수 선언이 실행 전에 scope의 맨 위로 끌어올려지는 것처럼 보이는 동작- 변수를 선언하기 전에 호출해도 에러가 발생하지 않음. 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보임. 인터프리터 언어란?- 한 줄씩 읽어서 즉시 실행하는 언어. 소스 코드를 직접 실행함..- runtime에 에러 감지- Python, JavaScript, Ruby, PHP 등 반의어: 컴파일러 언어. - 실행 전에 전체 코드를 기계어로 변환하는 컴파일을 거친 후, 실행 파일로 실행. - compile 단계에서 에러 감지 - C, C++, Java 등 자바스크립트에서 호이스팅이 가능한 이유?[1] 컴파일 단계: 함수 및 변수 선언을 한 부분이 메모리에 할당 .. [매일메일] React의 Controlled Component와 Uncontrolled Component의 차이점? (FE.241220) (개발자 강화/프론트엔드) 2025. 1. 20. 21:55 Controlled ComponentUncontrolled Component정의React state(상태)로 입력값을 제어함DOM 자체가 입력값을 제어함입력값 관리value(입력 요소 값)을 React state와 동기화onChange로 사용자 입력 시 state 업데이트.상태와 ui가 동기화됨. 예측 가능성 높음.value(입력 요소 값)은 DOM에서 직접 관리함.React는 관여하지 않음.간단한 입력 폼이나 초기값 설정 및 DOM 접근에 용이.방식useState로 input value 제어하는 경우.value는 React state로 관리onChange 이벤트 발생하면 state 업데이트ref를 사용해 DOM 요소에 직접 접근해 값 읽기/쓰기예시실시간 유효성 검증(이메일 형식 확인)폼 데이터를 동적으.. 이전 1 2 3 4 5 다음