프론트엔드 괴발개발 블로그

현업에서 다른 분들의 코드를 보다보면 자주 보이는 T 외에도 K, V, S 등 다양하게 사용되는 제네릭 타입을 볼 수 있다.개인적으로 주니어로서 사수나 팀장 없이 일을 하면서 해당 내용이 늘 궁금했었는데 최근 다른분의 코드를 보다가 E를 또 발견하면서 다시 궁금증이 생겨 정리하고 가고자 한다. 해당 내용은 단순히 타입스크립트에 제한되지 않고 Java, C#등 다른 언어에서도 관용적으로 사용되는 표현으로 보인다.아래 내용이 절대적인 것은 아니니 혹시 해당 글을 보게 된다면 참고용으로만 사용하길 바란다. 약자의미사용 예시TTypefunction identity(value: T): T KKeyK extends keyof T VValueRecord EElementArrayRReturnReducerPProps/P..

최근 프론트엔드를 개발하면서 AI와 동료들의 코드에서 자주 보았고 잘 활용한 것이 제네릭 타입이다.하지만 주로 간단하게 변수에만 사용하게 되어 이참에 다시 한 번 정리하고 가려고 한다. 제네릭에 대한 설명제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 사용되는 타입이다.타입스크립트에서 보면 특정 타입을 상속하거나 사용할 때 타입을 매개변수로 전달 받아서 사용한다.즉, 제네릭으로 선언된 타입은 사용할 때 타입을 추론하여 사용하고, 타입을 변수처럼 사용한다. 제네릭의 주요 사용방법 1. 제네릭 함수 함수의 파라미터와 반환값의 타입을 호출하는 시점에 결정한다. function identity(value: T): T { let newValue: any; if (typeof..

기존에 개발할 때 unknown 타입은 "as unknown as Type" 형태로만 활용했는데,"우아한 타입스크립트 with 리액트" 를 읽으면서 any보다 안전하고 더 다양한 쓰임새가 있다는 것을 알게 되어두 타입을 다시 정리하게 되었다. any 타입이란any는 모든 타입의 값을 허용하는 특수한 타입이다.(단, never 타입은 예외)any로 선언된 변수는 타입 검사를 건너뛰기 때문에, 어떤 연산을 해도 오류가 발생하지 않는다.let value: any;value = 123;value = "Hello";value = { name: "Hyon" };console.log(value.toUpperCase()); // 오류 없음 (런타임 에러 가능) any의 주요 사용방법1. 임시로 타입을 유연하게 처리할..

새로 프로젝트를 받아 설치를 마쳤는데 import문과 html 요소들, tsconfig.node.json 파일의 moduleResolution, allowImportingTsExtensions에서 빨간 줄이 나오고 있었다.하지만 서버는 정상적으로 빌드가 되고 실행이 되고 있었다. 이럴 때는 내 디바이스(vscode)에 설치된 타입스크립트 버전과 프로젝트의 타입스크립트 버전이 다른지 체크해주면 된다. vscode를 사용 중이라면 'cmd(alt) + shift + p'를 눌러서 'Typescript 버전 선택'을 눌러서 '작업 영역 버전 사용'을 눌러주면 된다.   만약 설정에서 보고 싶다면 설정에서 typescript를 찾아보면 아래와 같이 확인 할 수 있다.아래 변경된 항목(4번째)를 체크해주면 된다.

JQuery(제이쿼리) 존 레식에 의해 개발된 경량 javascript 라이브러리로 javascript를 손쉽게 구현하기 위해 개발되었다. 장점 DOM 관련 처리를 손쉽게 한다. Ajax 통신, 이벤트 처리 등을 폭넓게 지원한다. 별도의 플로그인을 통해 차트, 슬라이드쇼, 테이블 등을 간단히 구현할 수 있다. 사용 방법 페이지 상단에 script 태그 내 src를 이용하여 추가할 수 있으며, 총 두 가지 방법이 있다. 1. 페이지 로드 인터넷이 연결된 상태라면 페이지 주소를 입력하여 연동할 수 있다. 아래 예시는 압축타입(min)을 로딩하였다. 2. 파일 저장 홈페이지에서 js 파일을 저장하여 경로를 지정한 뒤 사용할 수 있다. (jquery.com/)

정규 표현식 특정한 규칙을 가진 문자열을 집합을 표현하는데 사용하는 형식이다. 예를 들면 회원 가입 시, 개인정보 보호 및 보안정책을 준수하기 위하여 비밀번호를 일정 글자 수 이상, 특정 문자를 포함한 조건으로 만들어야 하는 경우가 있는데, 이 규칙도 정규 표현식에서 정해진 규칙이다.     function test1() { // 1. 정규 표현식 객체 선언 (2가지 방법) // var regExp = new RegExp("script"); // 찾을 문자열: 'script' var regExp = /script/; // 2. 문자열 var str = "javascript jquery aj..