본문 바로가기
728x90

TECH49

this 👆🏻 JavaScript에서 this는 함수나 객체의 문맥(context)을 나타내는 특별한 키워드인데코드가 실행되는 상황에 따라 this가 가리키는 대상은 달라진다.쉽게 말해, 누가 이 코드를 호출했는가에 따라 this가 달라지는 것이다. 상황별 this가 가리키는 대상1️⃣ 전역 컨텍스트 (strict mode 여부에 따라 다름)console.log(this); // 브라우저 환경에서는 window 객체 비엄격 모드 (non-strict, 일반 브라우저): this === window엄격 모드 (strict): this === undefined2️⃣ 객체의 메서드에서의 thisconst user = { name: 'Stella', sayHello() { console.log(this.name); .. 2025. 7. 11.
클로저 (Closure) ⛱ 클로저는 함수가 선언될 당시의 스코프를 기억하여, 함수가 호출되는 시점에 그 스코프에 접근할 수 있게 해주는 강력한 기능 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)을 함께 기억하는 기능이다.자바스크립트에서 함수는 변수에 할당될 수 있고 다른 함수의 인자로 전달되거나 반환될 수 있다.이때 함수가 자신이 선언될 때의 스코프(변수, 상수 등)를 기억하고 있어서 함수가 선언된 스코프 밖에서 실행되더라도 그 스코프의 변수에 접근이 가능한데 이 현상을 클로저라고 한다. ※ 렉시컬 환경(Lexical Environment)에 대한 추가 설명은 아래 참고! 왜 클로저를 사용하는가?데이터 은닉 및 캡슐화상태 유지콜백, 이벤트 리스너, 타이머 등에서 유용모듈 패턴 구현 가능 예제f.. 2025. 7. 9.
css 인라인 조건문 🅸🅵 CSS 인라인 조건문은 2024년에 CSS 언어 사양에 추가된 혁신적인 기능 중 하나인데, CSS 코드 안에서 논리적인 조건식을 직접 작성할 수 있게 해주는 기능이다.기존에는 CSS에서 조건부 스타일링을 하려면 JavaScript, CSS 변수, 또는 특정 클래스 토글 등을 사용해야 했는데, 이제는 CSS 자체에서 이걸 어느 정도 처리할 수 있게 된 것이다. CSS 인라인 조건문이란?인라인 조건문은 CSS 속성 값 안에서 if(), else, case() 등의 조건 구문을 사용할 수 있도록 스타일을 적용할 때 조건을 CSS 코드 내에서 직접 지정할 수 있다.브라우저 렌더링 엔진이 CSS를 계산할 때 이 조건식을 평가하고, 그에 맞는 값을 적용하는 방식이다.즉, CSS 변수, 환경 값 (env()), co.. 2025. 7. 8.
접근성과 인클루시브 디자인 👩🏻‍🎨 접근성(accessibility)과 인클루시브 디자인(inclusive design)은 밀접하게 연관된 개념이지만, 목적과 접근 방식에서 약간의 차이가 있다. 접근성 (Accessibility)접근성은 장애가 있는 사람들도 동등하게 정보와 기능에 접근할 수 있도록 보장하는 것을 의미한다.주요 초점시각, 청각, 운동, 인지 등의 다양한 장애를 가진 사람들도 제품/서비스를 사용할 수 있게 하는 것WCAG(Web Content Accessibility Guidelines) 같은 표준을 준수종종 법적 규제나 표준을 충족시키기 위한 개발의 일환 접근성 개발 시 핵심 원칙시맨틱 태그 사용 (h1~h1까지, header, nav, section, artivle, footer, main 등) 태그와 함께 alt 속성 .. 2025. 7. 7.
728x90

티스토리툴바