본문 바로가기

전체 글83

[JS]자바스크립트 - 이론 정리 (this, 클로져, 비동기 , 이벤트, 프로토타입, 클래스 ) 둘다함수 function method = 오브젝트 안에 { } 들어 있다. 실행은 object.메소드네임(); 으로 실행시킨다. ㅡ 객체 자기자신을 가리킴 ㅡ method 의 경우 실행하고 있는 객체를 참조한다. ㅡ 일반 함수의 경우 전역격체 (window , 상위) ckawh ㅇ js 에서 this 는 ? ㅡ 어떤식으로 함수가 호출 되었는지에 따라 다르게 매핑된다. ㅡ 기본적으로는 전역객체 (window객체가 나옴) /오브젝트 안에서는 해당 오브젝트가 나온다. blind() 라는 함수로 this가 가리키는 객체 수동 매핑 가능하다. (=Explicit binding) ㅇ Js 의 strict mode (엄격한) ㅡ 예측 불가 동작들을 명로하게 만들고자 ㅡ 'use.. 2024. 2. 28.
[JS] 자바스크립트 기초- 스코프, 호이스팅, AJax , JSON, Fetch 란 ? ㅇ스코프란 ? (Scope) ㅡ 유효범위, 동일한 식별자 충돌 방지 ㅡ 변순 함수 선언 위치에 따라 스코프를 가진다. ㅇ 스코프의 종류 1) 전역 스코프 ( global scope . 전역 변수? 최상위 변수) : 어디서든 참조 가능하다 ㅡ let , const : 가장 바깥 단에서 재선언 할당이 안됨 . var는 다 가능함 2) 지역 스코프 ( local scope , 함수 또는 블록 안에 선언 된 스코프이다.) : 함수 내 정의 가능하고, 함수내에서만 참조 가능하다. 3) 함수 레벨 스코프 (함수 안에 선언한 변수 , 지역변수 이다 ) ㅡ 함수 외부에서 해당 변수 호출시 오류난다 . 4) 블록 레벨 스코프 ( 블록 { ...} 내에서 접근 가능한 변수) ㅡ let , const : 가장 바깥 단에서 .. 2024. 2. 25.
[IT] animation 최적화 기법 과 반응형 작업에 미디어 쿼리를 최소화로 잡는 방법 애니메이션을 구현하다보면 jank현상 (스크롤 떨림, 지연, 끊김 등)이 나타난다. 이를 해결하기 위해 css 에서 애니메이션 최적화가 필요하다. 1) GPU 가속 사용 will-change속성을 사용하면 css애니메이션을 보다 부드럽게 만들고 웹 페이지가 CPU대신GPU를 사용하여 애니메이션을 더욱 부드럽게 처리할 수 있다. 2) 애니메이션 시간제한 설정 애니메이션의 지속시간을 제한하면 브라우저가 애니메이션을 더욱 부드럽고 빠르게 처리 할 수 있다. 3) 픽셀 값 대신 퍼센트 값 사용 css애니메이션에서 픽셀 값을 사용하면 브라우저가 레이아웃을 다시 계산해야 한다. 따라서 퍼센트 값을 사용하면 브라우저가 더욱 빠르게 애니메이션을 처리할 수 있다. ㅇ T.. 2024. 2. 25.
[IT]noreferrer, noopener, nofollow 무엇인가 ? - 보안이슈, SEO [noreferrer, noopener, nofollow] 해당 속성 등을 사용하는 이유와 보안 이슈에 대해 처리하는 방법, SEO에 연관되는 방법 등에 대해 작성 웹 사이트를 개발할 때 외부 링크로 연결해야 할 때 링크 태그에 noreferrer, noopener, nofollow를 사용할 수 있다. 이 속성들은 무슨 역할을 하고 왜 사용할까요? ㅡ target="_blank" 의 보안 취약점 해결하기 : 링크 태그에 해당 속성을 사용하면 보안 문제가 발생한다. 악의적인 웹사이트가 피싱 공격을 시도할 수 있다는 것 ! 먼저 브라우징 컨텍스트의 상호 관계가 있다. ㅡ 보조 브라우징 컨텍스트 (Auxiliary Browsing Context) "_b.. 2024. 2. 24.