너와 나의 프로그래밍

웹 어플리케이션을 만들때 검색 기능을 많이 만들곤 한다. 간단하게 filter 함수와 match함수, 정규식을 통해 간단하게 구현할 수 있다. (위 예제는 Vue.js로 구현한 화면입니다.) 리스트(array)에 filter Method로 간단하게 해결하는 방법입니다. 위 예제는 title, headline, subtitle 모두 대소문자를 구분하지 않고 검색을 하는 코드입니다. 정규식의 "i" 플래그쉽을 통해 보다 고급적인 검색이 가능합니다. 입력을 할 때 마다 '입력 값'이 정규식으로 대소문자를 구분하지 않는 방식을 match 함수로 통해 return 됩니다. (리스트 BBQ의 검색을 하는 화면) 이런식으로 javascript로 간단하게 정규식을 표현 할 수 있습니다. (정규식의 대한 사용법은 정말 ..

[Typescript] 배열 안 타입을 정의하는 방법 타입스크립트를 사용하면서 항상 빼놓을 수 없는 순간은 '타입 정의(Type Definition)'다. 보통 Interface나 Type Alias를 사용하면서 타입 정의를 하지만 배열 안 Type을 정의 할 때 어떻게 해야하는지 궁금해서 찾아봤다. 예를 들어, 이러한 코드가 있다고 가정해보자. const arr: Array = [{ name : 'test', age : 12, isShowing: true }] 선언된 매개변수를 그대로 사용할 시 아래와 같은 오류를 마주할 수 있다. 말 그대로 arr에 매개변수 안에 isShowing이라는 프로퍼티가 object 안에 없다는 얘기다. 이럴 때는 Custom하게 Interface를 사용하여 직접 objec..

평소에 Vue.js로 개발을 하면서 ElementUI를 주로 사용했었지만, 이번에는 Vuetify를 사용해보고 싶어서 Vuetify Third Party Libaray를 사용하는 도중 정말 황당한 경험을 겪었다. (모듈 추가 후 바로 우측에 원치 않은 스크롤이 생김;;) 전혀 원하지도 않는 페이지에 알 수 없는 스크롤이 생겨버려서 도저히 어느쪽에서 해결을 해야할 지 모르는 상황에 알고보니 HTML Style에 'overflow-y: scroll'이 적용되어 있었다. (기존에 없었던 HTML Tag CSS에 'overflow-y:scroll'이 생김) 이 문제는 예전부터 있었던 Vuetify의 대한 이슈라고 한다. 이 이슈를 해결하기 위해서는 HTML Tag에 강제적으로 'overflow-y: auto !..

[Typescript] Type의 대해 Typescript의 가장 기본이자 기초적인 Type의 대한 사용법을 간략하게 정리하려고 한다. 맨 처음 프로그래밍을 Java로 접하신 분들이라면 빠르게 이해가 갈 수도 있다고 생각한다. Type 선언은 간단해 보이면서도 Typescript로 프로젝트를 개발할 때 굉장히 스트레스가 되기도 한다. 마치 애증의 관계가 아닐까 생각든다. 대표적인 Type의 종류 number : 모든 숫자와 숫자에 적용할 수 있는 모든 연산.(253 이하의 정수만 가능) string : 문자열 타입. bigint : number와 같은 정수지만 100이상의 값을 선언 할 때 사용하는 타입. object : 객체의 대한 타입. Array : 배열의 대한 타입. any : 타입들의 어머니. ..

[Typescript] 타입스크립트로 개발하기 Typescript 관련 글을 쓰면서 제일 먼저 써야될 '타입스크립트로 개발하는 방법'의 대해서 쓰지 않았었다. 뭔가 밥을 짓기 전 쌀을 씻지 않은 듯한 기분이 든다. 타입스크립트가 무엇인지, 어떻게 동작하는지, 또 타입스크립트를 사용할 때 무엇을 해야하는지 간략하게 쓰려고 한다. What is Typescript 제일 처음 타입스크립트를 접했을 당시에 도대체 '타입스크립트가 뭐지?'라는 생각이 많이 들었다. 개인적으로 지금까지 개발을 하면서 타입스크립트가 어떤지의 대해 느낀건 딱 3가지다. 타입스크립트는 자바스크립트의 변수나 class에 'Type'을 선언하면서 사용하는 것! 기존 자바스크립트와는 달리 마치 Java를 사용하는 것 처럼 사용하는 것! 굉장히..

[Typescript] 써드파티 라이브러리 타입 정의 방법(.d.ts) Typescript를 사용하는 도중 항상 부딛히는 문제중 하나는 타입의 대한 정의라고 생각한다. 그 중 서드파티 라이브러리를 사용하면서 타입스크립트를 지원하지 않는 라이브러리를 사용할 때 타입을 직접 선언을 해야하기 때문에 정말 골머리가 깨지는 경우가 많다고 생각한다. 타입스크립트를 지원하지 않는 서드파티 라이브러리는 index.d.ts 파일을 생성해 직접 타입을 선언해 해결 할 수 있다. 1. index.d.ts를 만들어보자. index.d.ts를 만들기 전에 몇 가지 설정을 해야될 부분이 있다. 첫번째로 'tsconfig.ts' 파일을 수정해준다. "compilerOptions"에 "typeRoots" 속성을 추가해 주고 배열 안..