포스팅 썸네일 이미지

TIL

(21.09.14) 끝내주는 css 속성들

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄css grid는 한 방향 (align, row)만 정렬하던 flex와 다르게, 두 방향 모두를 다루는 레이아웃 시스템이다🦄 🦄css clamp는 min과 max를 조합한 속성으로, 종래의 미디어 쿼리를 사용한 반응형 설계를 대체한다🦄 🦄aspect-ratio는 박스의 가로 세로비를 유지하게 해주는 속성으로, 비율 유지하며 크기 조절할 때 사용한다🦄 본문 1. grid grid의 기본 개념은 flex와 동일하다. 부모 박스에 grid 속성을 부여한 후, 자식 박스의 row와 column을 조절합니다. .wrapper { display: grid; } 부모 박스에 grid를 주면 자식 요소들은 Block 속성이 됩니다. 만약 grid가 아니라 inline-g..

2021.09.14 게시됨

 포스팅 썸네일 이미지

TIL

(21.09.09) 상태관리에 관하여 (feat. react.state && mobx)

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄React.state든, mobx의 observable한 value든, 그 state가 변하게 되면 render가 다시 한번 실행된다.🦄 본문 이놈의 상태관리...진짜 사람 미치고 팔짝 뛰게한다. 오늘도 사수님께 피가되고 살이되는 지식을 다이렉트로 주입받았는데, 이건 썰로 풀기에는 너무 길어서 얻은 지식을 짧게 요약만 하도록 하겠다. Mobx의 @observable와 React.state 둘 다 기본적으로 변화가 생긴다면, 페이지 전체에서 다시 render를 실행시킨다 그렇기 때문에 가급적이면 render 부에 너무 많은 variable / function들을 넣으면 안된다. 클래스 멤버/ 메서드와는 다르게 매 render마다 다시 메모리에 할당되고 실행되..

2021.09.09 게시됨

 포스팅 썸네일 이미지

TIL

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

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

2021.09.07 게시됨

 포스팅 썸네일 이미지

TIL

(21.09.07)React fast-reload

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

2021.09.07 게시됨

 포스팅 썸네일 이미지

TIL

(21.09.05) Promise에 관하여

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

2021.09.06 게시됨

 포스팅 썸네일 이미지

TIL

(21.09.05) ParseInt vs Number

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

2021.09.05 게시됨

 포스팅 썸네일 이미지

TIL

(21.09.01) Moment.js

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

2021.09.01 게시됨

 포스팅 썸네일 이미지

TIL

(21.08.31)ES6 Class

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

2021.08.31 게시됨