유령이 나오는 젤리하우스

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번째 매개변수에 대해서는 아시나요?? 잘 몰라도 괜찮다. 애초에 이 수수께끼가 그것들 때문에 생긴건 아니니까요 그래도 한번 공식 문서를 보고..

TIL

(21.08.04) Material-ui Default theme의 type

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄import {Theme} from "@material-ui/core/styles🦄 Default Theme material-ui는 Theme Object를 통한 스타일링을 가능하게 한다. 이 Theme라는 것은 일일이 사용자가 withTheme을 이용해서 직접 만들 수 도 있지만, 기본적으로 Default 값을 제공한다. 얘는 사실 makeStyles()를 호출할 때 첫번째 parameter로 들어가고 있다. 얘를 가져다 쓰려면 params에 임시변수를 넣어주고, theme에 맞는 속성 값들을 꺼내쓰면 되는데, 이 속성 값들이라는게 무지무지 길고 복잡하고 어려운 영어로 범벅이 되어있다. 보나마나 오타로 인한 에러가 다량으로 발생하게 될 것이라는 게 예상되..

TIL

(21.08.02) setInterval 함수

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄setInterval 함수는 일정한 시간 간격으로 작업을 수행하는데 사용한다.🦄 setInterval 함수 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval WindowOrWorkerGlobalScope.setInterval() - Web APIs | MDN The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each cal..

TIL

(21.08.02) Typescript에서 React Props를 받기 / React에서 배열 랜더링

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄하위 컴포넌트로 Props를 내려 줄 때, Props를 받는 곳에서 타입을 지정해줘야 한다.🦄 🦄React에서 배열을 랜더링 하려면 map 함수를 사용한다는 것, 잊지 말자.🦄 하위 컴포넌트로 Props를 줘보자. // interface.ts //프로필에 띄울 개별 Article들의 type입니다. export interface ArticleProps { title: string; description: string; imagePaths: any; ingredients: string; createDate: string; } 자주 사용될 타입을 먼저 작성하여 export 하여, 타입을 여러번 타이핑 하는 수고를 덜기 위해 작성했다. 인터페이스를 export ..