웹개발16 [this] 5년만에 다시보는 자바스크립트의 this 개요많은 시간이 지나고 나는 this가 지칠하는게 뭔지 잘 알고있는가에 대해서 물어봤을때 잘 모르는게 맞다! 라는 판단이 들었다.그 이유는 면접에서 털렸기때문이다 예제를 보다 구체적으로 알아보면서 컨텍스트에 따라서 this가 어떤 객체를 가리키는가에 대해서 한번 더 알아보고자 한다. 1. 글로벌 컨텍스트 글로벌 컨텍스트에서 this는 전역 객체를 가리킵니다.브라우저 환경에서는 window 객체를, Node.js 환경에서는 global 객체를 참조합니다. // 글로벌 컨텍스트console.log(this); // 브라우저에서는 'window' 객체, Node.js에서는 'global' 객체const person = { name: 'Alice', greet: function() { console.l.. 2024. 8. 28. HTML 텍스트 스타일링 태그 HTML에서는 텍스트의 스타일과 의미를 명확하게 전달하기 위해 다양한 태그를 제공합니다.웹 페이지를 구성할 때 텍스트의 가독성과 표현력을 높이는 텍스트 스타일링을 할 때 주로 사용하는 HTML 태그들을 알아보겠습니다. 1. strong 태그: 강한 강조strong 태그는 텍스트를 강하게 강조할 때 사용됩니다. 이 태그로 감싸진 텍스트는 대부분의 브라우저에서 굵게 표시되지만, 시맨틱적으로 중요한 내용을 강조한다는 의미를 가집니다. 예를 들어, 경고 메시지나 중요한 사실을 표현할 때 사용합니다.이 제품은 절대 먹어서는 안 됩니다.이 태그는 아래와 같이 표현됩니다. 더 굵게 보이는 텍스트를 보세요이 제품은 절대 먹어서는 안 됩니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 이.. 2024. 8. 21. HTML의 a 태그 가이드 a 태그란?a 태그는 앵커(anchor) 태그라고도 불리며, 주로 하이퍼링크를 생성하는 데 사용됩니다.이 태그를 사용하면 사용자가 한 웹 페이지에서 다른 웹 페이지로, 또는 같은 페이지 내의 다른 위치로 쉽게 이동할 수 있습니다.기본 문법a 태그의 기본 문법은 다음과 같습니다:링크 텍스트 여기서 href 속성은 하이퍼링크의 목적지 URL을 지정하고, "링크 텍스트"는 사용자가 클릭할 수 있는 텍스트입니다.예제1. 외부 웹사이트로 링크:Example 사이트로 이동2. 같은 사이트 내의 다른 페이지로 링크:About 페이지로 이동 3. 같은 페이지 내의 다른 위치로 링크섹션 1섹션 1으로 이동 속성a 태그에는 href 외에도 여러 가지 유용한 속성이 있습니다:target: 링크를 열 때 브라우저의 동작을 지.. 2024. 8. 6. 호이스팅이란? 구형 자바스크립트 호이스팅은 구형 자바스크립트에서 발생하는 것이며, 현재 이런 코드가 있다면 개선해야 합니다. 호이스팅의 사전적 의미는 다음과 같다. hoisting 명사 1.끌어 올리기; 들어올려 나르기. 자바스크립트에서 발생하는 호이스팅은 변수를 끌어올린다 라고 생각하고 아래 내용을 보시면 도움이 되겠다. 변수 선언 호이스팅이라는 개념을 알기 전 변수 선언에 대한 개념이 필요하다. ECMA6에 들어오면서 JavaScript에는 'let'과 'const'라는 변수선언 예약어가 추가되었다. 이는 var가 가지고 있는 문제를 해결하기 위해서 만들어진 것이라고 한다. var 변수선언의 가장 큰 특징은, 블록 스코프가 없다는 것이다. 블록 스코프가 없다는 것은, 변수의 영향범위를 산정하기 어렵다는 의미이다. .. 2021. 1. 11. this this : 메서드 내부에서 객체에 접근할 수 있는 지시자? 예약어? let company = { name: "nhn", where: "pangyo", companyName() { alert(this.name); // this 는 현재 메소드의 객체인 company를 나타낸다. } }; company.companyName(); 동일한 코드는 다음과 같이 작성할 수 있다. let company = { name: "nhn", where: "pangyo", companyName() { alert(company.name); return company.name; // this. 대신 user 사용 } }; company.companyName(); 다만 후자의 경우, 원하지 않는 형태의 동작을 할 수도 있다. 예를.. 2020. 12. 31. DI(Dependency Injection : 의존성 주입) 의존성이란? 한 객체가 다른 객체와 상호참조하고 있다면, 현재 객체는 다른 객체에 의존성을 가진다. 의존성 주입이란? DI 를 간단히 말해 외부에서 의존 객체를 생성하여 넘겨주는 것을 의미합니다.따라서 의존 관계가 내부가 아닌 외부의 설정 파일에 의해서 결정되게 됩니다. 소프트웨어 프로그래밍의 관점에서 Dependency Injection 즉 의존성 주입을 간단히 설명한다면 하나의 객체(C)가 다른 객체(B)를 필요로하는 특정 객체(A)에게 의존성을 대신 간접적으로 전달해주는 역할이라고 말할 수 있습니다. 아래의 예시를 보겠습니다. A라는 특정 객체가 B라는 다른 객체를 참조하고 싶다면 이전 같은 경우에는 A가 B를 직접적으로 참조하였습니다. 그러나 의존성 주입을 활용한다면 C라는 하나의 객체가 A라는 .. 2020. 11. 10. 싱글턴 디자인 패턴 싱글턴 패턴이란 ? 전역변수를 사용하지 않도록 객체 하나만을 생성하도록 하며, 생성된 객체는 어디서든 참조할 수 있도록 하는 디자인패턴 싱글톤 패턴은 다음과 같은 상황에 적용할 수 있다. 프로그램 내 에서 어떤 객체가 단 1개만 존재해야 한다. 프로그램 내부의 여러 부분에서 이 객체를 공유하며 사용한다. 위와 같은 상황에서, 싱글톤 패턴은 객체가 프로그램 내부에서 단 1개만 생성됨 을 보장한다. 멀티 스레드에서 이 객체를 공유하며 동시에 접근하는 경우에 발생하는 동시성 문제도 해결할 수 있다. class Node { private static Node singleton; // 싱글톤의 특성은 생성자가 private이다. // 그러므로 외부에서 new로 선언할 수가 없다. private Node() { }.. 2020. 11. 10. Web Pack이란 무엇인가 단순 정의 WebPack이란 모듈을 번들링하는 도구다. WebPack 공식 홈페이지의 메인화면에서 돌아가는 이미지를 보면 보다 쉽게 이해가 될 것이다. 대충봐도 복잡한 의존성 모듈들을 묶어서 정적 요소로 합쳐주는 것이다. 다음은 공식 홈체이지에 잇는 예제이다. src/index.js import bar from './bar'; bar(); src/bar.js export default function bar() { // } webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle... 2020. 11. 6. 타입스크립트 정리하기 6. 함수 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 6. 함수 6-1. 기본 파라미터와 옵션 파라미터 옵션 파라미터 타입스크립트에서는 모든 파라미터가 사용되어야한다. 파라미터 이름 끝에 ?를 추가하면 해당 파라미터를 옵션 파라미터로 설정할 수 있다. 단, 첫 번째 파라미터는 항상 반드시 사용되어야 하는 파라미터이며, 옵션 파라미터로 설정할 수 없다. function buildName(firstName:string, lastName?:string){ //.... } function buildNameInvalid(firstName?.. 2020. 4. 19. 이전 1 2 다음 반응형
