반응형 개발공부/JavaScript&TypeScript7 클로저 Clousure 란? 클로저자바스크립트에서 내부 함수가 외부 항수의 스코프에 접근할 수 있게 해주는 특성입니다. 클로저를 사용하는 경우스코프 범위를 제어하고 변수의 접근성을 제한하여 보안성을 높일 수 있습니다.ex) 개인 정보를 보호하는 캡슐화 / private 변수 및 함수 생성 /고차함수에서 콜백함수 예시 코드function createPerson(name) { let _name = name; return { getName: function() { return _name; }, setName: function(name) { _name = name; } };}const person = createPerson('John .. 2024. 9. 21. [Javascript] Intersection Observer API 브라우저 창 내에서 노출된 리스트 요소들만 로그를 보내기 위한 방법을 찾던중 알게된 교차 관찰자 API. Intersection Observer는 브라우저 API 중 하나로, 웹 개발자가 요소의 가시성에 대한 변화를 감지하고 대응할 수 있게 해주는 기능입니다. 간단히 말하면 특정 요소가 사용자 화면에 보이는지 안보이는지 판단합니다. 이 API는 특히 웹 페이지에서 스크롤링이나 요소의 위치 변경 등에 따른 가시성 변화를 모니터링할 때 유용합니다. 활용 예시 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩 (lazy loading) 무한 스크롤 구현 광고 노출 통계를 쌓고 광고 요금 계산하기 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션 수행하기 1. 동작 원리 Inter.. 2024. 3. 2. import할 때 중괄호를 쓸때 안쓸때 차이 정답은 export 방식의 차이이다. export 할 때 default 를 적었다면 -> 중괄호 없이 import 가능 export 할 때 default 를 적지 않았다면 -> 중괄호 포함해야 import 가능 (없으면 에러발생) 2023. 10. 17. Typescript 인터페이스 인라인 어노테이션 인터페이스 선언 모두 동일한 역할을 한다. 인라인 var myPoint: { x: number; y: number } 인터페이스 interface Point { x: number y: number } var myPoint: Point 인터페이스 장점 인라인으로 작성할 경우 너무 길어진다. 가독성이 떨어짐 인터페이스에 정의된 속성을 선택적으로 사용할 수 있다. 재사용 가능하다. 인터페이스에 정의되어 있지 않은 속성에 대해서 인지할 수 있다. 선택적 사용 예시 interface CraftBeer { name: string; hop?: number; // 선택적 readonly brand: string // 변경불가 } 2023. 10. 15. Typescript annotations Type annotations을 써야하는 때 function 이 'any'타입을 return 하고, 값을 명확하게할 때 변수 선언을 하고 나중에 초기화할 때 변수 선언과 초기화를 동시에 할 때는 타입 추론이 가능하다. ex) const color = 'red'; 어노테이션을 안적어도 에러가 뜨지 않는다. 추측할 수 있는 타입을 가진 변수를 원할 때 json.parse() 를 통해 의도하지 않은 다른 타입들이 나올 수 있다. 값 json.parse() 후 'false' boolean '4' number '{"value":5}' {value: number} '{"name":"alex"}' {name: string} typescript에서는 any로 예측한다. 값 json.parse() 후 'false' an.. 2023. 10. 10. Javascript 헷갈리는 for문 4종류 javascript는 for문이 왜이리많은지 어떤걸써야하는지 까먹을때가 있다. for 문 기본 for문 장점 가장 빠르다 모든 자료형에 대해 사용이 가능하다 continue, break 사용이 가능하다 변수 활용이 가능하다 for (var i = 0; i < 9; i++) { console.log(i); // 기타 등등 } for in 문 객체를 순회할때 사용한다. 장점 객체에 접근할 수 있다. 객체 디버깅을 위해 사용될 수 있다. 단점 continue, break 사용이 가능하지만 루프를 완전히 중단하는 것은 아니다. 제일 속도가 느리다 const object = { a: 1, b: 2, c: 3 }; for (const property in object) { console.log(`${property.. 2023. 10. 10. Typescript 기초 실행해보기 typescript compiler $ npm i -g typescript ts-node $ npm i axios index.ts 코드 생성 import axios from 'axios'; const url = 'https://jsonplaceholder.typicode.com/todos/1'; axios.get(url).then(response =>{ console.log(response); }); 코드 생성 후에 컴파일하고 생겨난 index.js 를 실행할 수 있다. $ tsc index.ts $ node index.js 이를 매번 두번 실행하는것은 비효율 적이라서 ts-node를 사용하면 되는데,, 그냥 실행하면 에러가 발생한다! 해당 패키지들을 설치해주고 $ npm i @types/node --s.. 2023. 9. 29. 이전 1 다음 728x90 반응형
