파송송의 개발자 공부

vscode extension 열린 파일 view tree에 추가하기

파일이 열렸을 때, 닫혔을 때, 활성화 되었을 때 exporer의 tabs에 파일이 추가 될 수 있는 부분을 구현해보았습니다. 사용 API현재 열려있는 파일의 정보를 가져오는 방법https://code.visualstudio.com/api/references/vscode-api#TextDocument VS Code APIVisual Studio Code extensions (plug-in) API Reference.code.visualstudio.comvscode.workspace.textDocuments  절대 경로를 작업 공간 내의 상대 경로로 변환vscode.workspace.asRelativePath("d:\code\extendtions\TabAndGroup\src\TabProvider.ts")/..

vscode extension Tree view 추가

개요사이드바에 아이콘을 클릭했을 때, Explorer에 "Tabs"와 "Bookmarks" 영역이 트리 형식으로 표시를 하고자합니다. 탭과 북마크 영역을 Explorer에 표시하려면, 탭과 북마크 각각을 VS Code의 트리 뷰로 구현해야 합니다. 두 개의 view를 TreeDataProvider를 등록하고, 이를 views에 연결해야합니다. Tree View APIhttps://code.visualstudio.com/api/extension-guides/tree-viewvscode.window.registerTreeDataProviderVS Code extension 개발에서 트리 뷰(Tree View)를 등록하는 함수입니다. VS Code의 탐색기(Explorer)나 사이드바 같은 UI에 트리 형식으..

vscode extension Activity Bar 아이콘 생성

개요Activity Barhttps://code.visualstudio.com/api/ux-guidelines/activity-barvscode의 왼쪽의 아이콘 영역을 Active Bar 라고합니다.여기에 새로운 아이콘을 추가해보고자 합니다. 구현먼저 root 경로에 images 폴더에 svg 아이콘을 추가합니다.📦images ┗ 📜my-icon.svg  package.json파일에 contributes에 viewsContainers, views를 수정합니다.이때 iewsContainers.activitybar에서 정의한 ID가 "vscode-tabgroup-and-bookmark"이고,views에서 정의한 뷰들도 이 ID를 기반으로 참조합니다.views.vscode-tabgroup-and-bookm..

브라우저 디버깅과 VSCode 디버깅에서 사용되는 단축키들을 비슷한 기능으로 묶음

자주하는 브라우저 디버깅은 잊어버리지 않지만,가끔 하는 vSCode의 디버깅이 헷깔려서 기록 하도록 하겠습니다.VSCode / 브라우저디버깅 시작 및 계속 진행  - VSCode: F5  - 브라우저: F8 브레이크포인트 설정/해제  - VSCode: F9  - 브라우저: F9 코드 라인 넘기기 (Step Over)  - VSCode: F10 (현재 코드 줄을 넘김)  - 브라우저: F10 (Step Over next function call) 코드 라인 안으로 들어가기 (Step Into)  - VSCode: F11  - 브라우저: F11 함수 밖으로 빠져나오기 (Step Out)  - VSCode: Shift + F11  - 브라우저: Shift + F11 디버깅 중지  - VSCode: Shift ..

vscode Extention 간단한 샘플 만들어보고 마켓플레이스에 등록하기

시작하기 전리액트의 CRA 처럼 익스텐션을 만드는 키트같은 것이 존재합니다.yo generator-code 설치를 합니다.npm install -g yo generator-code 설치가 완료되면 아래 명령어를 실행합니다.yo code extention을 만들기 위해, 기본 설정을 고르라고 하는데 New Extention (TypeScript) 를 고르겠습니다. extention의 이름을 입력하라고 합니다, hello 지었습니다. 나머지는 기본 설정을 따릅니다. 프로젝트 시작 및 실행프로젝트가 설치되었습니다. 프로젝트 내부의 폴더와 파일의 구조는 아래와 같이 구성됩니다. 기본적으로 package.json에 익스텐션 설정을 작성하고, 실제 동작 로직은 extention.ts에 작성합니다. 왼쪽 사이드 메뉴..

리액트에서 컴포넌트 렌더 스택 찾기

// 파이버 노드를 시작점으로 하여 루트 노드까지 이동하며// 각 노드의 컴포넌트 함수 또는 클래스를 로그 출력function traceReactParentsFromFiber(startingNode) { while (startingNode) { const componentFn = getComponentFn(startingNode); if (componentFn) { console.log(componentFn); } startingNode = startingNode.return; }}// 컴포넌트 함수 또는 클래스를 가져옴function getComponentFn(node) { if (!node) return; if (typeof node.type === 'functi..

window.open, window.opener, Cross-Origin-Opener-Policy

개요window.open, window.opener관련한 에러를 수정하기 위해서,브라우저에서 새 창을 열기 위해서 사용되는 window.opner, window.opner와 Cross-Origin-Opener-Policy 정책에 대해서 알아보았다. window.open, window.openerwindow.open과 window.opener는 JavaScript에서 웹 브라우저 창 또는 탭을 조작하는 데 사용하는 네이티브 객체이다. window.openwindow.open 메서드는 새로운 브라우저 창 또는 탭을 연다.// 새로운 창 열기let newWindow = window.open('', 'exampleWindow', 'width=600,height=400');// 빈 창 열기let emptyWind..

타입스크립트 제네릭

제네릭이란 타입을 매개변수화하여 코드의 재사용성을 높이고 타입 안정성을 강화하는 기능이다. 사용방법 함수 함수 이름 뒤에 꺾쇠 괄호() 안에 제네릭 타입 매개변수를 넣어 정의한다. function identity(arg: T): T { return arg; } const output1 = identity("myString"); const output2 = identity(100); 인터페이스 인터페이스 이름 뒤에 제네릭 타입 매개변수를 추가한다. interface GenericIdentityFn { (arg: T): T; } function identity(arg: T): T { return arg; } //myIdentity에 identity 함수 자체를 할당한다. let myIdentity: Gene..

타입스크립트 interface 인덱서블 타입

인덱서블 타입 (Index Signatures(Indexable types)) 기본적인 인터페이스는 직접 속성의 타입을 지정해주었다. 그러나 객체, 배열과 같은 경우 속성이 많이 들어갈 경우 하나하나 타이핑을 해줄 수는 없는 경우도 존재한다. 이런거 하나하나 다 어떻게 지정할건데 ㅠㅠ [ { '2024-03-11':{date:11, month:3, year:2024}, '2024-03-12':{date:12, month:3, year:2024}, '2024-03-13':{date:13, month:3, year:2024} }, ] 또는 어떤 속성이 들어갈 지 확정지을 수 없는 경우도 있다, 이 경우에는 인덱서블 타입을 활용하는 것이 좋다. [인덱서]의 타입은 string과 number만 지정할 수 있다...

타입스크립트란?

세 종류의 자바스크립트 자바스크립트는 현재 세 가지 종류가 있다. es5 : 웹 브라우저에서 동작하는 표준 자바스크립트 esNext : 2015년부터 매년 새로 버전 발표하는 자바스크립트 타입스크립트 : esNext에 타입을 추가 esNext 자바스크립트란? 자바스크립트의 공식 표준은 ECMAScript(ES)이다. 2009년 발표된 ES5 버전이 있는데, 2015년 발표된 ES6 버전에 큰 변화가 있어 ES6 이후 버전을 통틀어 ‘새로운 자바스크립트’라는 뜻에서 ‘ESNext’ 라고 한다. 타입스크립트란? Microsoft에서 개발한 오픈 소스 언어 자바스크립트의 상위 집합 자바스크립트의 한계를 해결 타입스크립트를 사용하는 이유 타입을 정적으로 선언할 수 있다. 타입 추론를 통한 타입 제어가 가능하다...

ts-node로 타입스크립트 파일 바로 실행

ts-node ts-node는 명령행에서 직접 TypeScript 코드를 실행할 수 있는 패키지이다. 일반적으로 개발 환경에서 사용되며, 먼저 자바스크립트로 변환하는 과정을 거치지 않고도 빠르게 TypeScript 코드를 테스트할 수 있다. 설치 ts-node를 사용하려면 먼저 ts-node와 TypeScript 컴파일러를 설치해야 한다. npm i -g ts-node typescript 사용 ts-node와 TypeScript 컴파일러가 설치되면 ts-node 명령을 사용하여 명령행에서 직접 TypeScript 코드를 실행할 수 있다. ts-node app.ts 사용 예시 에러 만약 실행하는데 아래와 같은 에러가 나는 경우 1 D:\\typeScript\\basic-ts-practice\\src\\te..

타입스크립트 declare 사용법

declare 키워드 기능 환경 선언(ambient declarations) 만들 때 사용 네임스페이스 확장으로 특정 모듈이나 변수, 함수, 클래스 등이 존재한다는 것을 TypeScript 컴파일러에게 알릴 때 사용 d.ts를 통한 분리 관리 1. 환경 선언(Ambient Declarations) declare를 사용하는 환경 선언은 TypeScript에게 특정 변수나 모듈이 존재한다고 알리기 위해 사용된다. 주로 외부 자바스크립트 라이브러리나 환경에 존재하는 변수들에 대한 타입 정보를 제공할 때 사용한다. 예시 전역 변수 선언 전역 변수 MY_GLOBAL이 자바스크립트 환경에서 이미 존재한다고 가정할 때, 다음과 같이 TypeScript에게 이 변수의 존재와 타입을 알릴 수 있다. TypeScript ..

상태관리 라이브러리 zustand, 리덕스처럼 사용, 클래스로 만들어서 사용

공식 문서 Zustand Documentation Zustand Documentation Zustand is a small, fast and scalable bearbones state-management solution, it has a comfy api based on hooks docs.pmnd.rs 설치하기 npm install zustand 스토어 생성하기 import { create } from 'zustand' const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), ..

자바스크립트 클래스 표현식으로 익명 클래스 사용하기

회사 코드를 보니 요상하게 클래스에 이름 없이 인스턴스를 생성하는 패턴을 사용하고 있었다. 클래스 이름 없이 바로 생성하는 방법을 공부해보자. 자바에서는 익명 클래스는 이름 없이 선언하고 바로 객체를 생성할 수 있는 구조로, 주로 인터페이스나 추상 클래스를 즉석에서 구현하거나 확장할 때 사용된다. 하지만 자바스크립트에는 인터페이스나 클래스를 익명으로 구현하는 정확히 같은 개념이 없다. 자바스크립트에서 비슷한 구조를 만들 때는, 보통 익명 클래스라기보다는 클래스 표현식이나 함수 표현식을 사용한다. 익명 클래스는 클래스 표현식을 사용해 유사하게 동작하게 할 수는 있다. 클래스 표현식이란? 자바스크립트에서 클래스를 정의하는 한 가지 방법으로, 함수 표현식과 유사한 형태를 가진다. 클래스 표현식을 사용하면 클래..

자바스크립트 캡슐화 및 모듈 패턴 예시

모듈 패턴을 이용한 캡슐화 모듈 패턴은 즉시 실행 함수(IIFE)를 사용하여 구현할 수 있으며, 이를 통해 프라이빗 멤버와 퍼블릭 멤버를 분리할 수 있다. counter 변수가 계속 유지될 수 있는 이유는 자바스크립트의 클로저(closure) 때문임 클로저는 함수가 선언될 때의 렉시컬 환경을 기억하는 기능하다. 이를 통해 함수가 선언된 환경 외부에서 호출되어도, 그 함수가 선언될 때의 환경에 접근할 수 있음 var CounterModule = (function () { var counter = 0; //퍼블랙 api 반환 return { incrementCounter: function () { return ++counter; }, resetCounter: function () { console.log("..

자바스크립트 모듈로드 방식

자바스크립트 모듈로드 방식 회사에서 자바스크립트 모듈을 로드하는 코드를 보고 있는 중입니다. 하여 자바스크립트 모듈 로드하는 방법에 대해서 공부하고자 합니다. CommonJS Node.js가 가장 널리 알려진 CommonJS 모듈 시스템을 사용하는 환경 CommonJS 모듈은 자바스크립트에서 재사용 가능한 코드 모듈을 생성하고 사용하기 위한 방법을 제공 CommonJS 모듈의 주요 특징 모듈 정의 파일 하나가 모듈 하나 각 모듈 파일은 자체 스코프를 가지며, 모듈 외부에서 접근할 수 있는 내보내기(Exports)만이 모듈 외부에서 사용 require 다른 모듈을 현재 모듈에 가져오기 위해 require 함수를 사용 이 함수는 모듈의 경로를 인자로 받아 모듈의 내보내기를 반환 exports 객체 모듈이 공..