자는게 좋지만 개발 해야지 자는게 좋지만 개발 해야지

타입스크립트 프로젝트에서 패키지들을 보면 개발 의존성에 @types/.. 패키지들이 있는 것을 주로 볼 수 있다.이런 패키지들이 라이브러리의 type을 제공 해준다는것은 어렴풋이 알고 있어서 이번 기회에왜 생기게 되었고 어떤 문제를 해결 하는지에 대해 한번 알아보자어떤 문제를 해결하려 했을까 ?타입스크립트가 출시되기 이전 많은 라이브러리들은 자바스크립트로만 작성되었고, 동적 타입 언어인 자바스크립트는 정적 타입 정보를 기본적으로 제공하지 않았다. 이로 인해 TypeScript 환경에서 해당 라이브러리를 사용할 경우, 타입 안정성과 자동 완성 등의 TypeScript 이점을 온전히 활용하기 어려운 것이다. 이 문제를 해결하기 위해, 커뮤니티 주도의 타입 정의 저장소인 DefinitelyTyped가 등장한 ..

Rule of three(세 가지 법칙)는 디자인, 프로그래밍 등 여러 분야에서 적용되는 개념이다.“세 개가 모이면 패턴이 된다 “는 아이디어로 기반이 되었다고 한다.프로그래밍에서 Rule of three 개념은 “같은 코드가 두 번 반복은 괜찮으나 세 번째 반복이면 추상화를 해라 “이다.개념은 쉽고 명료하다. 말 그대로 세 번 반복되었을 때 리팩토링 하는 것이니까하지만 만약 이 개념을 모르고 개발을 하고 있었다면 많은 어려움이 있었을 것이다.Rule of Three를 몰랐을 때 벌어질 수 있는 실수맡은 프로젝트에서 쇼핑몰을 개발한다고 가정해 보자.당연히 상품을 보여주는 Card 컴포넌트는 필수적이다. 그러니 이걸 미리 공통 컴포넌트로 추상화하기로 했다. 개발하다 보면 이것저것 생각하며 추가하게 되었다...

지인분들과 시나브로 자바스크립트 강의를 보면서 새로 배웠거나 부족한 부분을 공부하며 공유하기로 했다. 스터디 레포 : https://github.com/The-survivor-is-strong/sinabro-js 1주차 강의를 보면서 번들러에 대해 잠깐 소개가 나오는데,조금이나마 번들링을 통해 어떤 문제를 어떻게 해결해주고 있는지 간략하게 알아보자. 먼저 번들러인 Vite로 프로젝트를 만들고 신규 파일들을 추가한다.  추가한 파일들은 main.js에서 아래처럼 사용하고 있다.이제 npm run build ( package.json > "scripts" > "build")를 실행해 보면,아래 처럼 dist 폴더가 생기면서 빌드된 파일들이 포함 되어 있다.파일을 확인해보면 빌드를 하기전 스크립트 파일(mod..

자바스크립트는 싱글 스레드 언어이다. 싱글 스레드에서는 한 번에 하나의 작업만 수행이 가능하다. (자바스크립트 엔진은 콜 스택이 하나만 있기 때문이다.) 우리는 네트워크 요청이나, 이벤트 처리 작업을 처리해야 하는 경우가 많은데, 위에서 말한 싱글 스레드라면 네트워크 요청을 보낸 후에 처리가 완료될 때까지 동작이 멈춘다는 것이다. 하지만 우리는 보통 이벤트, 네트워크 요청을 하는 동시에 다른 동작도 가능한 걸 봤을 것이다. 이게 가능한 이유가 바로 이벤트 루프 때문인 것이다. 이벤트 루프란 무엇인가? 이벤트 루프란 싱글 스레드인 자바스크립트의 작업을 멀티 스레드처럼 동작하기 위해 설계된 기능이다. 즉, 한 번의 한 가지 일만 처리하는 것에서 여러 작업을 동시에 할 수 있게 해주는 것이다. 이벤트 루프에는..

기술 도입의 이유 진행 중이었던 사이드 프로젝트의 중요 기능은 사용자가 직접 장르의 카테고리와 아이디어를 작성해 서버에 보내면 서버에서는 AI 프롬포트 서버를 통해 gpt가 만든 이야기 내용을 받아와 실시간으로 클라이언트에게 보내줘야 했습니다. 목적은 실시간으로 스토리를 제공하여 사용자가 스토리를 기다리는 경험을 최소화하는 것이 목적이었습니다. 그러기 위해서는 Socket-IO를 사용해 실시간 통신을 이용하기로 하였고, 여기서 Tanstack-query를 이용해 서버의 상태 처리하는 건 어떨까라는 생각이 들었습니다. Tanstack-query를 이용해 편리한 에러, 로딩 처리 또는 Tanstack-query에서 제공하는 여러 옵션들을 사용할 수 있다면 유저에게 더 좋은 로딩, 에러 처리나 작업자에게도 재..

타입 강제변환은 말 그대로 어떤 값의 타입을 변환시키는 것이다. 변환을 시킬때 두 가지로 분리하여 말을 할 수 있는데, 바로 암시적 강제변환(강제변환), 명시적 강제변환(타입 캐스팅)으로 분리하여 말 할 수 있다. 암시적, 명시적 강제변환의 차이 본 글에서 말 하는 명시적, 암시적은 아래와 같다. 명시적 강제변환 : 코드만 봐도 의도적으로 타입 변환을 일으킨다는 사실이 명백한 타입 변환 암시적 강제변환 : 다른 작업 도중 불분명한 부수 효과로 부터 발생하는 타입 변환 코드를 보며 확인해 보자. const a = 42 const b = a + "" // "42" 암시적 강제변환 const c = String(a) // "42" 명시적 강제변환 위 코드에서 변수 b, c 모두 결과는 string 타입에 42..

먼저 자바스크립트 타입은 크게 2가지로 나눌 수 있다. 원시 타입 undefined null string number boolean symbol(ES6 추가) 객체 타입 function array object 타입에 대해서 먼저 알아본 이유는 자바스크립트는 값의 타입으로 값-복사, 레퍼런스-복사를 결정하기 때문이다. 예를 들어보자. var a = 2; var b = a; // b가 a에 값을 복사한다. b++; a; // 2 b; // 3 var c = [1,2,3] var d = c; // d는 공유된 [1,2,3] 값의 레퍼런스다. d.push(4); c; // [1,2,3,4] d; // [1,2,3,4] 예제에서 a 변수에 할당한 값 2에 타입은 number로 원시값이다. b 변수에 a 변수를 할..

자바스크립트 이벤트란? 자바스크립트에서 이벤트는 웹 페이지에서 발생하는 상호작용이나 특정 작업의 결과로 일어나는 알림같은 것이다. 이벤트는 상용자의 행동(클릭, 키보드 입력, 마우스 이동 등)이나 브라우저의 행동(페이지 로드 완료, 오류 등)에 의해 발생 할 수 있다. 버블링 이벤트란? 이벤트 버블링은 이벤트가 발생한 요소에서 상위 요소로 전달이 되는 과정이다. 코드로 예를 들어보자 function App() { const handleEvent1 = () => { alert('이벤트 1') } const handleEvent2 = () => { alert('이벤트 2') } const handleEvent3 = () => { alert('이벤트 3') } return ( 이벤트 1 이벤트 2 이벤트 3 ..