유령이 나오는 젤리하우스

TIL

[예전 글 다시쓰기] .d.ts 파일이란?

과거에 썼던 글 https://spookyjelly.tistory.com/39 을 다시 쓴 글입니다. 0. 들어가는 말 약 1년 전에 d.ts 파일에 관해 글을 적었는데, 지금 와서 다시 읽어보니 글의 깊이가 없고 거의 위키 글을 복붙한 수준이라 다시 한번 작성합니다. 놀랍게도 저 글이 지금 제 블로그 인기 글 중 하나라는 건데, 계속 방치 해두고 있다가는 블로그의 신용을 마구 깍아 먹을 것 같습니다. 제대로 된 지식을 공유하고자 하는 목적과 블로그의 신용 회복이라는 두 마리 토끼를 잡기 위해 .d.ts 파일에 대한 지식이 어느 정도 쌓인 지금, 다시 한 번 .d.ts 파일에 대한 글을 써보려고 합니다. 1. d.ts 파일이 필요한 이유 .d.ts 파일은 JS 모듈을 TS에서도 사용할 수 있도록 타입만을..

TIL

(22.02.13) Flutter 프로젝트에 Google Map API 연동 (사진 짱 많음)

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄 잘 보고 따라 하면 됩니다. 🦄 🦄 플러그인 공식 문서 를 같이 띄워놓고 보시면 더욱 편합니다.🦄 들어가는 말 회사에서 지금 제공 중인 서비스를 모바일 앱으로도 제공하자는 말이 나와, 나에게 플러터를 공부하도록 지시하였다. 왜 플러터가 채택되었는지를 설명하자면 너무 길고, 게시글 본연의 목적과 거리가 멀어지므로 생략하겠습니다.여하튼 나는 업무 시간에 플러터를 공부할 수 있는 시간을 부여받았다. 당연히 무작정 시간을 부여받은 건 아니고, 간단한 토이 프로젝트를 완성해 제출하기로 했다. 곰곰이 생각해보던 나는 예전에 친구가 심심풀이로 제작한 회사 근처의 식당을 추천해주는 웹 앱을 참조하여 같은 기능의 모바일 앱을 만들기로 하였다. 원래는 이 친구와 동일하게 ..

TIL

(22.02.06) Intellij - Javascript heap out of memory 오류

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄힙 메모리 : 사용자가 동적으로 할당하고 해제하는, 직접 관리할 수 있는 영역🦄 🦄Intellij 같은 IDE는 VScode와는 다르게 프로젝트마다 사용할 수 있는 힙 메모리를 제약하는데, 프로젝트의 메모리 크기가 설정된 힙 메모리보다 커지면 터지는 오류이다. (여기서 "vscode는 IDE 처럼 쓸 수 있는 텍스트 에디터이다." 라는 말이 조금 다가왔다.) 🦄 들어가는 말 항상 vscode 만을 쓰는 나였지만, 팀장님께서 intellij가 좋다며 전환을 강력히 주장하시는 바람에 얼떨결에 intellij로 넘어오게 되었다. 인텔리제이는 그냥 java 전용 IDE 인줄 알았는데 왠걸, 자스 기반 프로젝트도 커버해주고, flutter 프로젝트도 관리해주는 짱짱..

TIL

(22.01.09) Debounce && Throttle

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄쓰로틀링과 디바운싱은 언어에 종속된 것이 아닌, 디바이스의 부담을 덜기 위한 프로그래밍 기법이다🦄 🦄두 기법 모두 이벤트가 짧은 시간 내에 복수 발생했을때 사용할 수 있는 기법이다🦄 🦄이벤트가 반복적으로 발생하는 상황에서 쓰로틀링은 중간중간에 한번씩 이벤트를 실행하고, 디바운싱은 이벤트가 끝날때만 (혹은 이벤트가 시작할때만) 한번 실행함으로서 성능향상을 꾀한다. 🦄 본문 요즘 Vue를 메인으로한 사이드 프로젝트를 진행하고 있는데, Vue를 놓은지 꽤 되어서 다시 한번 공식 문서를 찬찬히 읽어보고 있었다. "확실히 SPA에 익숙해지니 예전 초짜시절보다 이해가 잘되는군~" 라고 뿌뜻해하고 있었는데, 오잉? 처음 보는 개념이 나왔다. 이게 뭔가 싶어서 검색해보니..

TIL

(22.01.03) Vite로 놀아보기

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Vite는 dotenv를 이용하여 사용자가 지정한 환경변수를 가져올 수 있다🦄 🦄Vite는 react-ts 템플릿 프리셋을 제공하는데, 이는 vite.config.js에 React 프로젝트와 호환되는 plugin이 설치된 템플릿이다. 🦄 개요 몇일 전 Vite를 정말 빠른 빌드 툴이라고 설명했는데, 이게 얼마나 빠른지 직접 체험해보고 싶었습니다. 공식 문서를 확인해보니, create-vite는 타입스크립트를 사용한 React 프로젝트 템플릿도 지원한다고 합니다. 쇠뿔도 단김에 빼라고. 바로 간단한 프로젝트를 만들어서 실험에 돌입했습니다. Create-Vite vite는 버전 12.2.0 이상의 Node.js가 깔려있으면 패키지 매니저를 통해 간단하게 시작할..

TIL

(22.01.01) Vite

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Vite는 브라우저에서 지원하는 ESModules를 활용한 Javascript 모듈화 도구로서, 빠른 개발서버 실행과 프로덕션 생산을 브라우저를 통해 제공한다🦄 모듈 번들러 웹 프론트엔드를 배우다보면, 번들러라는 단어는 한 번쯤은 들어봤을겁니다. 프로젝트 전역에 걸쳐 파편화 되어있는 javascript 파일들을 한데 뭉쳐, 하나의 파일로 만들어주는 도구라는 뜻으로 말입니다. 이런 모듈 번들러들은 파편화 된 파일들을 하나의 거대한 파일로 만들어 네트워크 비용을 줄이고, 글로벌 변수의 충돌의 위험도 줄여준다. 뿐만 아니라, 각종 로더들을 사용해 브라우저가 이해하지 못하는 scss 파일등을 css로 전환해주는 역할도 겸하고 있어 프론트엔드 개발에 필수 불가결한 ..

TIL

(21.12.28) What the hack is RSS??

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄RSS란, 어떤 사이트의 새로운 콘텐츠를 방문 없이 취득할 수 있는 방법🦄 RSS 추가 부탁드립니다 awesome-devblog라는 구독 서비스가 있다. 우준혁님이 운영하는 이 서비스는 매일 아침 10시에 전날 올라온 IT 블로거들의 최신 글을 모아 메일로 쏴주는 서비스인데, 나는 우연한 기회에 이를 알게 되어 아주 유용하게 쓰고 있다. 그러던 어느 날, 나 역시 이 프로젝트에 참여하고 싶다는 생각이 들었다. 나 역시 새로운 것을 배우면 블로그에 기록하는 습관이 있고 ( 품질은 그리 높지 않지만 ), 최근 새로이 다짐한 1일 1커밋활동과 더불어 블로그도 꾸준히 쓰고 싶었기 때문이다. 쇠뿔도 단김에 빼라고, 그 날 저녁에 바로 신규 블로그 요청 request..

TIL

(21.12.02)chmod, Node_ENV

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄chmod는 유닉스 계통에서 쓰는 셸 명령어로, 파일이나 디렉터리의 파일 시스템 모드들을 바꾼다.🦄 🦄NODE_ENV는 개발/배포 모드를 구분 지을 때 흔히들 사용하는 값이다. process.env에 있는 값이 아니라 사용자가 직접 셋팅해줘야한다. 🦄 chmod(change mode) 리눅스에서 파일을 사용해서 할 수 있는 작업은 크게 3가지이다. 파일에 저장된 데이터를 읽기 (read) 파일에 데이터를 쓰기 (write) 파일 실행 (execute) 윈도우가 주력 OS인 나에게는 굉장히 생소한 이야기지만, 리눅스는 각 파일 및 디렉토리에 읽기(r), 쓰기(w), 실행(x) 권한을 파일 개별적으로 지정할 수 있게 하였다. 더욱 재미있는 점은, 이 세 가지 ..