2. FrontEnd/TypeScript

Tab 삭제 중, 리다이렉트 안되는 경우

문제Tab을 삭제하면 바로 전 탭으로 이동해서 전페이지를 보여줘야하는데 탭만 삭제되고 페이지는 그대로 남는 현상이 생긴다코드를 자세히 보니 전탭 path로 리다이렉트하는 코드가 없어서 생겼다해결전코드 const removeTab = useCallback( (targetKey: string) => { let newActiveKey = activeKey; let lastIndex = -1; tabArray.forEach((tab, i) => { if (tab.key === targetKey) { lastIndex = i - 1; } }); const newPanes = tabArray.filter((tab) => t..

2024. 9. 10. 14:34

2. FrontEnd/TypeScript

[TS] 타입스크립트 동작 원리

대부분의 프로그래밍 언어는 사실 컴퓨터보단 인간에게 더 친화적이다. 컴퓨터는 인간과는 달리 바이트코드나 기계어, 이진수 같은 아주 단순한 형태의 언어를 기반으로 동작한다 따라서 프로그래밍 언어를 컴퓨터가 바로 이해하고 실행할수는 없다. 컴파일 = 컴퓨터는 우리가 작성한 코드를 실행하기 위해서 해석하기 쉬운 형태로 변환 하는 과정 우리가 작성한 프로그래밍 언어로 작성한 코드를 컴파일하면 코드가 컴퓨터가 이해할 수 있는 기계어 같은 형태로 변환된다 컴퓨터가 이걸 읽어서 실행하고 결과적으로 코드가 실행됨 자바나 자바스크립트 프로그래밍 언어를 컴파일하면 바이트코드(기계어) 형식으로 변환된다 컴파일러 동작 과정 우선, 컴파일러는 프로그래밍언어를 바로 바이트코드로 변환하는것이 아니라 그 전에 추상문법트리(AST)..

2023. 5. 30. 18:33

2. FrontEnd/TypeScript

[TS] JS의 한계점, TS 차이점

목표 - 자바스립트에는 어떤 한계점? - 타입스크립트는 이 한계점을 어떻게 극복함? - 타입스크립트가 다른 언어 대비 갖는 차별점은? ✅ 모든 프로그래밍 언어에는 타입 시스템이 있다. 자바스크립트를 포함해서 우리가 알고 있는 모든 프로그래밍언어에는 사실 타입 시스템이라는게 존재한다. ✅ 타입 시스템이란? 언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계입니다. 즉, 언어의 타입 관련된 문법 체계 라고도 볼 수 있습니다. 이 타입 시스템은 크게 두가지로 나눌 수 있는데요 - 정적 타입 시스템 : 코드 실행전에 모든 변수의..

2023. 5. 26. 17:39

2. FrontEnd/TypeScript

[TS] TypeScript의 탄생

✅ TypeScript 의 탄생 타입스크립트는 2012년에 마이크로소프트의 개발자이자 C#의 창시자로도 알려진 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)의 손에서 처음으로 탄생했습니다. (* C#의 창시자가 타입스크립트도 만들었기 때문에 둘이 비슷한점이 꽤 있다.) ✅ TypeScript는 오픈소스이다. 또 타입스크립트는 오픈소스로 공개되어있다. 그래서 현재도 많은 프로그래머들이 이 언어의 개발과 유지보수에 참여하고 있고 다양한 토론을 이어가고 있어서 앞으로도 발전 가능성이 아주 창창한 언어라고 볼 수 있습니다. ✅ TypeScript는 JavaScript의 확장판 타입스크립트는 기존의 자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련된 여러가지 기능들을 추..

2023. 5. 23. 15:02

2. FrontEnd/TypeScript

[TS] Union Type, Literal Type, Type Aliases

✅ Union Type 자바스크입트의 OR연산자(||)와 같은 의미의 타입 변수값이 숫자타입 혹은 문자열 등 여러타입을 가지는 경우 주로 사용 (BackEnd에서 매핑 데이터가 문자열 | 브라우저 입력값이 문자열인 경우, 변수 age는 string 타입 가능하게 해야함.) `|`연산자를 이용하여 타입을 여러개 연결하는 방식을 Union 타입 정의방식이다. 함수내에서 수행하는 작업과 관련하여 보다 유연하게 활용하는 방법 코드에 하드코딩할 수 있는 정확한 값만 허용하는 것이 아닌 두개이상의 가능한 값을 가지려는 경우 사용 Union타입 대신 any타입을 대체가능하지만, 타입을 추론할 수 없는 경우에 사용되므로 타입스크립트의 강점이 없어진다 (any를 사용하는 경우 마치 JS로 작성하는것처럼 동작하고, Uni..

2022. 8. 31. 17:18

2. FrontEnd/TypeScript

[TS] 타입스크립트란?

✅ TS = JS + Type (* TS는 개발자만의 타입을 작성할 수 있게 해줌) JS는 몇가지 데이터 타입을 갖고 있는데, TS는 더 많은 타입을 지님 TS를 사용하면 타입을 이용하면서 명시적이고 예상하지 못한 에러를 미리 보여주어 런타임시 에러를 피할 수 있다. TS 코드를 작성한 후에 컴파일하여 JS코드로 변환하여 사용해야한다. +a) JS input요소의 value속성은 문자열으로 반환된다. ✅ JS 타입과 TS 타입의 공통점 number 1, 2.3, -9 Allnumbers, no differentiation between integers or floats 다른 프로그래밍언어들에는 특별한 정수형과 실수형 또는 이중형이 있지만, JS와 TS에는 number타입 하나만 존재 string 'im'..

2022. 8. 25. 19:50