타입 가드 Typescript에서 변수의 타입을 좁히는데 사용되는 메커니즘 사용자 정의 타입가드 타입 서술어 사용 function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } 보통 타입 가드는 isFish 와 같이 is를 많이 붙인다. is 는 타입 가드에서 사용되는 키워드이다. pet is Fish 파라미터(pet)가 실재 해당 타입(Fish)인지 구분하는 키워드이다. return (target as Developer).swim !== undefined 는 pet에 swim 프로퍼티가 있으면 Fish 타입으로 취급한다. interface Bird { fly: () => void; layEggs: ()..

개요사내에서 진행 중인 프로젝트에 CSV 파일을 읽어들여서 데이터를 변환하는 프로그램을 제작 중이다. CSV 파일 내용을 가져와서 변환된 모습을 보여주어야 하기 때문에 내가 가장 보편적으로 다루는 형태로 내용을 가지고 있어야만 했다.가장 많이 쓰는 형태, JSON프로젝트를 하면서 가장 많이 쓰이는 데이터 형태가 어떤 형태일지 생각해보니, 객체 형태라는 것이 가장 많이 떠올랐다. 서버로 부터 데이터를 받았을 때도, 혹은 여러 정보를 하나의 객체로 표현할 때도 JSON 모양으로 받아오는 경우가 가장 많았고 이를 사용하기로 했다. 어떤 것을 고려해야할까?해당 파일의 샘플은 아래와 같다. 이 파일의 내용을 문자열 형태로 받을 것이다. 아직 진짜 파일 업로드 기능을 구현한 것은 아니기에, 파일..

Strict mode란? 우리는 개발할때 오타나 문법적 실수를 하곤한다. 이 오류를 줄이고 안정적인 코드를 생산하기 위해서는 조금 더 근본적인 접근이 필요하다. 즉, 잠재적 오류를 발생시키기 어려운 개발환경을 만들고 그 환경에서 개발하는것이 조금 더 근본적인 해결책이 아닐까. 예를 들어 아래와 같은 코드가 있다고 하자. 결과값은 어떻게 될까? function foo() { x = 10; } foo(); console.log(x); // ? 함수 내부에서 변수에 값이 할당되었기 때문에 console.log에는 에러가 발생할거라고 예상했을 수도있지만, 할당 된 값 10이 찍혔다. 그 이유는 자바스크립트의 암묵적 전역때문이다. 암묵적 전역 위 코드와 함께 설명하자면, 코드를 동작시켰을때 자바스크립트 엔진은 값..

필요성 현재 구현하고 있는 기숙사 입소 시스템은 입소 인증 방법에 대한 고민이 많았다. 우리 학교에서 입소를 인증한다는 것은, 다른 대학교에서 출석 인증을 하는 것과 다름 없기 때문에 그만큼 상당히 중요하다. 우회나 조작이 불가능해야 하고, 인증 요청자가 자기 자신이라는 것을 증명해야 한다. 그렇다 보니 인증은 보안에 매우 매우 중요하다. 그래서 여러 방법을 시도해보면서 어떤 방법을 쓰는 것이 적합할지에 대해 생각해보던 중 선생님을 통해 cron에 대해 알게되었다. 어떻게 쓸것인가 요즘 대학생들이 출석하는 모습을 본적 있는데, 이렇게 QR코드를 찍어서 앱에서 인증하도록 한다. 교수님께서 QR을 띄우면 학생들이 출석인증을 하는 방식인데, 우리가 그대로 적용하기엔 몇 가지 문제점이 있다. 우리는 사람마다 오..

개요현재 진행중인 프로젝트 STAYMATE에서 아주 심각한 문제가 발견되었다.이전 글에서 카메라를 사용하기 위해 react-qr-reader라이브러리를 썼는데,호출이 과도하게 많아지는 문제점을 발견하게 되었다.  이러한 문제점을 발견하고 어떻게 해결을 할까 고민하기 시작했다.무한 호출을 막을 수 있는 방법우선 폭포처럼 내리는 무한 호출을 막을 수 있는 방법은, 유한 호출 될 수 있도록 만들면 된다.  연속으로 발생한 호출은 한 번만 인정해주거나 혹은 몇 초에 한 번씩 인식하도록 하거나. 이러한 방법을 해결할 수 있는 개념이 debounce와 throttle이다.Debounce와 throttle이란?Debounce연속적으로 발생한 이벤트를 하나로 처리하는 방식으로,주로 처음이나 마지막에 실행된 함수만 실행..

개요자바스크립트는 싱글스레드 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 이로 인해 블로킹(blocking)이 발생하면 다른 작업이 차단되어 웹 애플리케이션의 성능과 사용성이 저하될 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트는 비동기 처리를 통한 논 블로킹(non-blocking) 방식을 지원하고 있습니다. 이를 위해 async/await과 Promise가 도입되었습니다.블로킹 vs 논블로킹블로킹은 작업이 완료될 때까지 다음 작업이 진행되지 않는 상태를 말합니다. 예를 들어, 네트워크 요청이 끝날 때까지 다음 코드가 실행되지 않는 경우 블로킹이 발생합니다. 이로 인해 웹 애플리케이션의 응답성이 떨어질 수 있습니다. 반면, 논 블로킹은 작업이 진행 중일 때도 다음 작업이 계속..

🚨 본 글은 callback의 개념을 알고있다는 전재하에 작성한 글입니다. 1. Callback 지옥 거기서 나오시라니까요, JavaScript에서 비동기 처리를 위해 콜백(callback) 함수를 사용한다. 콜백 함수는 비동기 함수가 처리를 마친 후 실행되는 함수로, 해당 비동기 함수가 처리를 마친 후에 실행될 코드를 인자로 전달받는다. 하지만, 콜백 함수를 중첩해서 사용하다 보면 코드의 가독성이 떨어지고 유지보수가 어려워지는 문제가 발생할 수 있다. 이러한 상황을 "Callback Hell"이라고 한다. 예를 들어, 웹사이트에서 사용자가 주문한 상품을 서버로부터 받아와 화면에 출력하는 기능을 구현하고자 한다면, 이를 콜백 함수를 사용하여 구현하면 다음과 같이 중첩된 구조를 가지게 된다. functio..

목표 인터페이스의 개념을 이해하고, 어떻게 활용하는 지 알아보기 인터페이스(Interface) 상호 간에 정의한 약속 혹은 규칙이다. 객체 모양의 타입을 정의할 때 유용한 문법이고, 프레임워크에서는 주로 API응답, Props, 변수, 함수를 정의할때 자주 사용한다. interface Person { name: string; age: number; } const vision: Person = { name: '비전', age: 3 }; 선택적 프로퍼티 인자를 넘길때 그 여부를 선택적으로 할 수 있도록 '?'를 활용해 명시해줍니다. interface Person { name: string; age: number; favoriteColor?: string } const vision: Person = { nam..

함수 자바스크립트 형태의 함수에 인자에 대한 타입과 반환하는 값의 타입을 붙여주면 된다. 인자(넘기는 값 == 파라미터) 리액트에서 이벤트를 지정할 때 아래와 같이 사용함. function updateTodo(event: ChangeEvent) { setTodo(event.target.value); } 반환하는 값(리턴 값) 반환되는 값에 대한 타입을 지정함. function updateTodo(event: ChangeEvent):void { setTodo(event.target.value); console.log(e.target.value); } 선택적 파라미터 파라미터를 옵셔널하게 지정할 수 있음 function updateTodo(event: ChangeEvent, todoId?: string):v..

🚨 본 글은 javascript 변수 선언 키워드 var, let, const를 정리한 글입니다. 프로그래밍에서 변수 선언은 중요한 개념 중 하나다. 변수를 잘못 사용할 경우 예기치 않은 버그 혹은 보안 위협이 발생할 수 있다. 그렇기 때문에 우리는 적절한 키워드를 잘 사용해서 변수를 써야한다. 그래서 오늘은 var, let, const이 뭔지, 각각의 차이점과 어떤 키워드를 사용해야하는지에 대해 이야기해 볼것이다. 1. 개념 var var은 ES6 이전에 사용되던 변수 선언 방식으로 JavaScript에서 가장 오래된 변수 선언 방법이다. var은 블록 스코프(block scope)를 지원하지 않고 함수 스코프(function scope)만을 지원한다. 이는 변수가 선언한 함수 내에서만 유효하며, 함수..