(22.01.09) Debounce && Throttle 포스팅 썸네일 이미지

TIL

(22.01.09) Debounce && Throttle

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

2022.01.09 게시됨

(22.01.03) Vite로 놀아보기 포스팅 썸네일 이미지

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가 깔려있으면 패키지 매니저를 통해 간단하게 시작할..

2022.01.03 게시됨

(22.01.01) Vite 포스팅 썸네일 이미지

TIL

(22.01.01) Vite

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

2022.01.01 게시됨

(21.12.28) What the hack is RSS?? 포스팅 썸네일 이미지

TIL

(21.12.28) What the hack is RSS??

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

2021.12.28 게시됨

1일 1 커밋. 포스팅 썸네일 이미지

공략

1일 1 커밋.

1일 1커밋을 시작한 이유 많은 선배 개발자들이 1일 1커밋을 하는 습관을 가지라고 한다. 조금이라도 좋으니 꾸준히 공부하기를 장려하며 하는 말이다. 그러면서 나중에 취업할 때도 면접관들이 제일 먼저 보는 것이 깃헙 잔디밭이라며, 너의 스펙을 위해서라도 1일 1커밋은 귀중한 개발 자산이라고 말들도 덧붙여 나오곤 한다. 그 말에 감명 받은 나는 print('hello world!')를 주피터 노트북에 찍은 이래로 하루도 빠짐없이 잔디를 심었고, 그 공로(?)를 인정받아 취뽀에 성공했고, 이제 공부를 막 시작하는 친구에게도 1일 1커밋의 효과를 강력히 어필했다. 이렇게 나의 1일 1커밋 여정은 탄탄대로일것만 같았다. 위기 취준생 시절에는 1일 1커밋이 어렵지 않았다. 남는게 시간이였고, 내가 공부한 것이 곧..

2021.12.27 게시됨

[리눅스] 자주 쓰는 쉘 명령어들 포스팅 썸네일 이미지

컴퓨터 공학/운영체제

[리눅스] 자주 쓰는 쉘 명령어들

쉘(Shell) 명령어와 프로그램을 실행할 때 사용하는 인터페이스 리눅스의 핵심부인 리눅스 커널과 사용자간의 다리 역할을 하는 것으로, 사용자의 명령을 해석하고 실행하는 역할을 한다. 특징 자체적으로 프로그래밍 기능이 있어서 프로그램 작성 가능. 쉘로 만든 프로그램을 쉘 스크립트라고 한다. 사용자와 커널 사이에서 명령을 해석해 전달하는 명령어 해석기 기능이 있다. 리눅스의 명령어는 결국 쉘이 제공하는 명령어이다. 기본 쉘이 bash 이므로, bash 쉘 명령어를 배우면 다른 쉘 명령어도 쉽게 익힐 수 있다. ps 프로세스의 상태를 확인하는 명령어 Process Status의 약어이다. 옵션 옵션 내용 -a 시스템을 사용하는 모든 사용자의 프로세스 출력 a(BSD 계열) 터미널과 연관된 프로세스를 출력 -..

2021.12.13 게시됨

(21.12.02)chmod, Node_ENV 포스팅 썸네일 이미지

TIL

(21.12.02)chmod, Node_ENV

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

2021.12.03 게시됨

(21.11.16) Antd Input value를 mobx store로 관리하기 포스팅 썸네일 이미지

TIL

(21.11.16) Antd Input value를 mobx store로 관리하기

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄antd의 Input 컴포넌트가 깊게 nest된 mobx observable 값을 감지 못할 수 도 있다.🦄 🦄Input 컴포넌트와 mobx를 동시에 사용한다면, React.state를 사용하거나, Form 컴포넌트에 Input의 관리를 위임하는 것이 낫다.🦄 본문 목표: 회원 정보 테이블에 등록지를 수기로 입력하고, 입력 결과를 저장할 수 있게 하는 Input 요소 넣기 엊그제 회사에서 개발 요청이 들어왔다. 내용은 다른게아니라, 관리자 계정이 열람할 수 있는 테이블에 회원들의 등록지를 수기로 입력할 수 있는 column을 만들어 달라는 것이였는데, 나름 antd 짬바가 생겼다고 생각해서 금방 끝날 것이라 생각했는데, 예상 외로 훨씬 복잡하고 어려운 점이..

2021.11.16 게시됨