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

타입스크립트 프로젝트에서 패키지들을 보면 개발 의존성에 @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..

벌써 2024년이 끝났다.. 여기서도 쓸 줄은 몰랐지만 길었다면 길었고 짧았다면 짧은.. 이런저런 일들이 많았지만 작년 나에게 영향이 많았던 일을 정리해보려 한다.  파트장 관리 경험2022년 11월 입사하고 2023년 12월 파트장이란 직급을 맡았다. 처음에는 거부감이 먼저 들었던 거 같다.부담감도 있었고 아직은 개발을 더 해야 하지 않나 라는 생각이 넘쳤지만,지금 생각해보면 회사 다니면서 잘 한 일중 하나라고 생각이 든다. 파트장을 맡으면서 힘든것도 많았지만 성장도 많이 한 거 같다.특히 일을 어떻게 해야할지에 대해 많이 배웠다. 1. 제가 이해한게 맞을까요? 파트장이란 직급을 달며 결정을 해야 하는 일이 많아졌다.초반에는 결정해야 하는 건 너무 큰 부담으로 느껴지고, 모든 걸 알아야 한다는 압박감이..

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

기술 도입의 이유 진행 중이었던 사이드 프로젝트의 중요 기능은 사용자가 직접 장르의 카테고리와 아이디어를 작성해 서버에 보내면 서버에서는 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 변수를 할..