TypeScript - class (feat.예시코드)

접근 제한자 - public, private, protected 접근 제한자를 이용해서 class의 멤버의 접근 범위를 제한할 수 있다. 접근 제한자는 public, private, protected 3가지가 있다. 결론부터 말하자면 public : 어디서나 접근이 가능하다. public으로 지정하거나 아무것도 지정하지 않으면 기본적으로 public이다. private : 해당 클래스의 내부에서만 접근이 가능하다. 상속을 하더라도 접근할 수 없다. protected : 해당 클래스, 파생된 클래스 내부에서만 접근이 가능하다. (인스턴스에서 접근이 불가능) 1. public class Car { color : string; public wheel : number; constructor( color : st..

• format_list_bulleted JavaScript/TypeScript
• · 2024. 2. 22.
• textsms

TypeScript - function

this interface User{ name:string; } const Sam:User = { name:'Sam' } function showName(this:User, age:number, gender:'m'|'f') { // this를 사용하기 위해서 매개변수에 this와 this의 타입을 지정한다. console.log(this.name, age, gender) } const a = showName.bind(Sam); a(30, 'm') this를 Sam으로 바인딩하고 this를 사용하기 위해서 Sam의 타입과 같은 User로 명시해 준다. 이렇게 하면 this를 이용할 수 있다. 함수의 첫 번째 매개변수로 'this' 타입을 지정하는 것은 'this'의 컨텍스트를 명시적으로 선언하는 방법이다...

• format_list_bulleted JavaScript/TypeScript
• · 2024. 2. 22.
• textsms

TypeScript - interface

index signature Index Signature은 객체의 속성 이름과 타입이 미리 정의되어 있지 않을 때, 객체에 동적으로 속성을 추가할 수 있는 방법을 제공한다. 기본형태 interface Obj{ [key : T] : U } // T : 인덱스의 타입 (대부분 string 이나 number) // U : 값의 타입 사용 예시 type Score = "A" | "B" | "C" interface User { name: string age: number [grade: number]: Score } let user: User = { name: "xx", age: 30, 1: "A", 2: "B", } index signature를 사용하면 타입 체크 시 유연성이 증가하지만, 해당 객체의 명확한 구..

• format_list_bulleted JavaScript/TypeScript
• · 2024. 2. 22.
• textsms

JavaScript - Closure(클로저)

Closure 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 클로저는 자바스크립트에서 매우 중요한 개념으로 함수가 생성될 때의 환경을 기억하게 해 주며, 이를 통해서 여러 패턴, 기법을 구현할 수 있다. 클로저의 정의와 작동원리 클로저는 함수가 선언된 시점의 스코프에 있는 모든 변수에 대한 참조를 유지한다. 함수가 실행될 때마다 해당 스코프에 접근할 수 있음을 의미한다. 클로저는 함수가 실행되어 외부 스코프에서의 실행이 종료되어도 해당 함수의 스코프 내에 선언된 변수들에 대한 접근을 가능하게 한다. 자바스크립트의 함수는 외부 스코프에 정의된 모든 변수에 접근할 수 있다. 클로저 예시 function outerFunction (arg) { var variableInOuterFunction =..

• format_list_bulleted JavaScript
• · 2024. 2. 21.
• textsms

브라우저 탭간 통신하기 : BroadCast Channel API ( feat. Next.js)

브라우저 탭 사이에 데이터 공유하기 프론트 작업을 하면서 A태그의 target:_blank를 이용해서 새 탭을 열어서 작업을 하는 과정이 있었다. 기존에 열고 있던 페이지가 (A) 새로운 탭이 (B)라고 했을 때, A와 B는 동일한 오리진으로 로컬 스토리지를 공유할 수 있었다. 현재 로컬 스토리지에서 Access Token을 관리하는 로직으로 프로젝트를 만들고 있다. 그래서 처음 진입을 하는 과정에서는 액세스 토큰을 사용할 때 문제가 없었다. 하지만 B에서 작업을 하던 중 Access Token의 만료로 다시 재발급을 받아 로컬 스토리지를 바꿨을 때 A에서는 아직 기존에 있는 Access Token을 들고 있었고 어떠한 작업을 할 때 Access Token이 필요하지만 과거의 Access Token을 가..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 1. 16.
• textsms

StyleXjs : StyleX 세팅 및 기초 (feat. NEXT)

목차 1. StyleX 세팅 및 기초 2. 설치 3. 오류 4. styleX의 핵심 기능 5. 핵심 조건 6. 기본적인 사용법 6.1 stylex.create 6.2 Pseudo-classes 6.3 media queries (반응형) 6.4 여러 스타일 지정하기 6.5 stylex.props 7. 예시 코드 StyleX 세팅 및 기초 공식문서 : https://stylexjs.com/ StyleX stylexjs.com 현재 프론트엔드 개발에서 React는 중요한 역할을 하고 있다. React를 개발한 Metark StyleX 라는 새로운 CSS-in-JS 라이브러리를 만들었는데, 이는 React와 잘 호환될 것으로 추측된다. Next.js 또한 React 기반 프레임워크이므로 Next.js와 Reac..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 12. 26.
• textsms