유령이 나오는 젤리하우스

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 부분만 다르겠지~ 라는 안일한 생각을 가지고 있었는데, 기본이 없으니까 상당히 골을 썩혔다. 오늘 클래스 컴포넌트 내부에서 사용할 변수..

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 ..

TIL

(21.08.01) SweetAlert2

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄깜찍한 alert창인 SweetAlert2를 사용하는 방법입니다.🦄 Installation npm install sweetalert2 sweetalert1도 있는데, 1은 업데이트가 끊긴지 3년 정도가 되었고, 2가 1에 비해서 더 다양한 기능을 제공하기에 sweetalert2만 쓰면 됩니다. How to use import Swal from 'sweetalert2' Swal.fire({ position: 'top-end', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500 }) 위와 같이 Swal을 불러온 다음, fire 메소드를 이용해서 각종 ..