유령이 나오는 젤리하우스

TIL

(21.09.07) Moment.js의 moment는 mutable하다

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Moment.js의 method들은 원본 객체를 훼손시킨다.(moment 객체들이 mutable하다.)🦄 * mutable과 immutable에 대해서 궁금하다면 여기로 ⬇ 불변객체 - 위키백과, 우리 모두의 백과사전 객체 지향 프로그래밍에 있어서 불변객체(immutable object)는 생성 후 그 상태를 바꿀 수 없는 객체를 말한다. 반대 개념으로는 가변(mutable) 객체로 생성 후에도 상태를 변경할 수 있다. 객체 전체가 ko.wikipedia.org 본문 글을 시작하기 앞서, 본인의 은사님이 알려주신 지식을 공유하겠습니다. moment 객체가 mutable 하기 때문에 사용하지 말라는 말씀을 하셨는데, 이 글을 볼 당시만 해도 나는 moment..

TIL

(21.09.07)React fast-reload

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄React Fast-reload는 cra4 버전부터 hot-reload를 대체한, 페이지 새로고침 없이 바뀐 부분만 교체해주는 라이브러리이다. 🦄 🦄cra로 프로젝트를 만들면 기본적으로 셋팅이 되어있는데, fast-reload가 동작하지 않는다면 아래 조건에 걸리는 부분이 있는지 살펴보자🦄 본문 간혹, 그러나 있으면 매우매우매우 빡치는 일이다. 아니 코드를 바꿨는데 왜 업데이트가 안돼?? 구글에다가 react fast-reload, react hot-reloader not working...등등의 키워드로 열라게 구글링해도 다른 사람들은 이런 일 없는건지 참 아무런 검색 결과가 없다. 일단 개발이 급하니까 새로고침하면서 코딩을 하는데...이거 생각하면 할 ..

TIL

(21.09.05) Promise에 관하여

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Promise란 자바스크립트 비동기 작업을 더 편하게 처리할 수 있도록 ES6에 도입된 기능🦄 🦄굳이 서버로 API 요청을 보내는 작업이 아니더라도 사용 할 수 있음🦄 🦄호출 시 콜백함수를 선언. 성공시 : resolve / 실패 시 : reject 실행🦄 🦄Promise의 상태는 Pending(유예중), Fulfilled(이행중), Rejected(거부중)의 3가지 상태를 가진다.🦄 본문 앞서 말했듯, Promise란 자바스크립트의 비동기 작업을 더 편하게 처리하기 위한 기능이다. * 비동기 작업 : 실행 요청과 실행 결과가 동시에 일어나지 않는 작업 (동시에 일어나지 않는 작업으로 생각) 호랑이 담배피던 시절에는 비동기 작업을 처리하기 위해서 콜백 함수..

TIL

(21.09.05) ParseInt vs Number

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄둘 다 arguments를 Number 타입으로 바꿔주는 함수🦄 🦄 parseInt는 string 타입만을 받아, Number 타입으로 바꿀 수 있는 부분만을 반환한다🦄 🦄Number 함수는 argument의 타입에 신경쓰지 않지만, Number로 변환할 수 없다면 NaN을 반환한다🦄 본문 나는 문자를 숫자로 바꿔야할 때 parseInt만을 써왔다. 뭐 딱히 이유라고 할만한건 없고, 그냥 그거밖에 몰랐기 때문이다. 정확히 말하자면, Number의 존재는 알고 있었는데 굳이?? 라는 생각이였기에, Number의 존재는 내 기억 속에서 잊혀져 갔다. 근데 이번에도 "모든 상황에 들어맞는 황금열쇠는 없다" 라는 말이 적중했다. 회사에서 어떤 요청의 응답을 숫자로..

TIL

(21.09.01) Moment.js

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Moment.js는 date 형식의 데이터를 파싱, 유효성 체크, 조작 하기 위해 도와주는 Javascript 라이브러리 🦄 본문 Moment.js를 설명하기 전에 먼저 말하자면, 이 라이브러리는 공식적으로 사망 선고가 내려졌다. 이유는 다음과 같다. Moment 객체들이 mutable함 워낙 오래된 라이브러리라, 최신 알고리즘인 tree shaking이 잘 동작하지 않음 -> 번들 사이즈가 커짐 Moment 팀은 이 이슈들에 대해 오랫동안 의견을 나눴고, 결국 더 이상 새로운 기능들도 추가하지 않을 것이고, 더 이상의 버전 업도 없을 것이라고 말했다. 추가로, 새로운 프로젝트를 하는 개발자들이 Moment를 사용하지 않았으면 한다는 말도 덧붙였다. 그럼 ..

TIL

(21.08.31)ES6 Class

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Javascript에서 class는 java와 같은 객체 지향 프로그래밍 언어에서 사용하는 것과 유사하게 class를 사용할 수 있게 하는 문법적 설탕으로, 기존의 prototype 문법을 대체해준다🦄 본문 사실 나는 class 문법이 굉장히 낯설다. Python을 배울 때도 클래스 부분은 "뭐 그냥 이런게 있다~"로만 알고 있었고, React는 함수 컴포넌트로 배웠기에 class를 이용할 일은 더더욱 없었다. 와리가리 야매로 달리던 댓가를 치뤘다. 회사 코드가 전부 class로 되어있었기 때문이다. 대충 lifeCycle 부분만 다르겠지~ 라는 안일한 생각을 가지고 있었는데, 기본이 없으니까 상당히 골을 썩혔다. 오늘 클래스 컴포넌트 내부에서 사용할 변수..

웹/일반

[Jest 입문] Jest를 왜 사용할까?? && Jest의 Matcher

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Jest는 페이스 북에서 관리하는 JavaScript 테스트 프레임워크이다.🦄 🦄Jest를 통해 개발자가 작성한 코드가 그 의도대로 동작하는지, 돌발상황에도 대처가 가능한지 확인할 수 있다.🦄 개요 앞서 말했듯, Jest는 페이스북이 만든 프론트엔드 테스트 프레임워크다. 테스트 프레임워크라고 하니 참 감이 안오는데, 말 그대로 코드가 제대로 동작하는 test를 위한 프레임워크라는 뜻이다. 사실 이전부터 Jest가 뭐하는 친구인지는 알고 있었고, 앞으로의 내 개발 커리어에 꼭 필요하다는 사실도 알고 있었지만 막상 별로 배우고 싶지는 않았다. 왜냐하면, 아직까지 이 친구의 필요성을 느끼지 못했기 때문이다. 비록 console.log 하나 하나 찍어가며 낑낑거리..

웹/일반

Javascript에서 ['10','10','10'].map(parseInt) 가 [1,NaN,3]인 이유

TL;DR 🦄자바스크립트가 너무 관대해서 벌어진 일이다.🦄 🦄매개변수를 받는 함수에 아무런 값도 넣어주지 않으면, JS는 자동으로 매개변수를 넣어준다🦄 본문 map이 뭐하는 함수인지도, parseInt가 뭐하는 함수인지도 다 알고 있겠지만, 그래도 다시 한번 하나 씩 살펴봅시다. map은 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 후, 그 결과를 모아 새로운 배열을 만드는 메서드이다 parseInt는 문자열 인자를 숫자로 반환하는 함수이다. 이 정도야 기본 중의 기본이지만, 그럼 혹시 map의 3번째 매개변수는 무엇인지 아는가?? 아니면 parseInt의 2번째 매개변수에 대해서는 아시나요?? 잘 몰라도 괜찮다. 애초에 이 수수께끼가 그것들 때문에 생긴건 아니니까요 그래도 한번 공식 문서를 보고..