본문 바로가기

분류 전체보기88

[iframe 사용법 및 속성값 가이드] MDN 문서를 기반으로 작성한 가이드 문서 iframe 태그: 인라인 프레임 요소에 대한 가이드HTML의 요소는 현재 문서 내에 다른 HTML 페이지를 중첩하여 임베딩할 수 있도록 하는 강력한 도구입니다. 이 가이드는 iframe 사용법을 단계별로 설명하며, 각 속성과 기능을 상세히 다룹니다.1. iframe의 기본 개념iframe은 중첩된 브라우징 컨텍스트(browsing context)를 제공하여 별도의 HTML 페이지를 현재 페이지 안에 임베딩합니다. 각 iframe은 독립적인 문서 환경을 가지며, 자체 URL 내비게이션을 지원합니다.최상위 브라우징 컨텍스트: 부모가 없는 브라우징 컨텍스트(일반적으로 브라우저 창).부모 브라우징 컨텍스트: iframe을 포함하고 있는 브라우징 컨텍스트.⚠️ 주의: iframe은 추가적인 메모리와 컴퓨팅 리.. 2024. 11. 19.
webStorm에서 계속 github Token 인증을 다시 하라고 할때... 잘쓰고 있던 webstorm에서 갑자기 github과의 인터랙션이 있을 때마다 (pull 받거나, push 하거나 등) 다시 github 연동을 하라고 시킨다. 토큰을 입력해서 로그인을 시켜놔도 다음 액션에서 또 다시 연동요청을 한다 ...!  찾아봤는데 원격 저장소를 끊었다가 다시 add 하면 된다고해서 해봤는데 여전히 동일하다 뒤져본 결과.... webStorm 설정 > Git 에서 가장 하단의  ☑️ 자격 증명 헬퍼 사용  체크가 해제되어있었고, 요 놈을 체크하고 적용 - 확인한 뒤에 깃헙 로그인을 하면 다시는 뜨지 않는다!!   삽질하고 계신 분들께 도움이 되기 바라며..! ㅎㅎ 2024. 7. 24.
[javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까? 생성자 함수는 인스턴스를 생성하기 위한 '템플릿'처럼 동작한다. 즉 인스턴스를 생성하고, 이 인스턴스에 프로퍼티를 추가하고 초기값을 할당하여 초기화 하는 것이다. 아래와 같은 생성자 함수 정의를 보면, 인스턴스를 초기화하는(값 할당) 부분은 있지만 인스턴스를 생성하고 반환하는 코드가 없다. (그래서 아래 Language를 일반 함수처럼 호출하면 반환값이 undefined이기도 하다. - 참고)function Language(name) { this.name = name; this.getName = function() { return 'my name: ' + this.name ; }}; 그런데 어떻게 생성자 함수를 호출하면 객체(인스턴스)가 생성되어 반환되는 것일까?  new 연산자.. 2024. 4. 25.
[javascript] 생성자 함수에 의한 객체 생성 - 언제 필요하고 어떻게 사용하는가? 객체를 생성할때 아래와 같이 객체 리터럴로 객체를 생성하는 것이 가장 간단한 방식일 것이다. const objectByObjectLiteral = { name: 'javascript'};  하지만 아래와 같이 동일한 구조의 객체를 여러 개 생성해야 할 때 (특히 프로퍼티의 갯수가 많고, 동일한 내용의 메서드들이 있는 경우) 객체 리터럴로 객체를 생성하는 방식은 다소 비효율적일 수 있다. 이런 경우에 생성자 함수로 객체를 생성하는 방법을 사용해볼 수 있다. const js = { name: 'javascript'; getName() { return 'my name: ' + this.name ; }};const html = { name: 'ht.. 2024. 4. 18.
[javascript] this 개념과 this 바인딩 이해하기 아래와 같은 생성자 함수가 있다.function Circle(radius) { ...} 이 생성자 함수를 가지고 new Circle(5) 로 새로운 인스턴스를 생성했을때,  인수로 받은 radius 값 5를 생성한 인스턴스의 radius 값으로 할당하려면 어떻게 해야할까?  또, 아래와 같이 Circle의 prototype으로 지름을 구하는 메서드를 추가해서, Circle 생성자 함수가 생성한 인스턴스의 지름을 구하려면 어떻게 해야할까? Circle.prototype.getDiameter = function () { ...}  닭이 먼저이냐 달걀이 먼저이냐의 문제처럼, 생성자 함수 내에서 생성자 함수가 생성할 인스턴스를 참조할 수는 없다. 왜냐하면, 생성자 함수가 먼저 정.. 2024. 4. 11.
리액트 useEffect 제대로 이해하고 똑똑하게 사용하기 - useEffect의 정의 useEffect는 매일 사용하는 Hooks 중 하나이고, 동작 방식을 어느 정도 이해하고 있다고 생각하지만 제대로 알고 있다고 말하기에는 마음에 걸리는 것들이 많은 Hook 이기에, 제대로 정리해보고자 한다. 모던 리액트 Deep Dive 에서는 useEffect의 정확한 정의를 아래와 같이 말한다. useEffect는 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다. 우리가 일반적으로 이야기 하는 useEffect의 특징, 즉 의존성 배열이 변경되면 콜백함수를 실행한다, 의존성 배열이 빈 배열인 경우 컴포넌트가 마운트 될 때 실행되고, useEffect가 반환하는 클린업 함수는 컴포넌트가 언마운트 될 때 실행된다 등의 특징들을 한 문장으로 설명하려면, 결국 컴.. 2024. 4. 3.
반응형