유령이 나오는 젤리하우스

TIL

(21.11.04) Node.js 요약

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄본문 자체가 요약입니다!🦄 본문 Node.js란? 1. 웹 서버란 요청을 처리하고 적절한 결과를 보내주는 프로그램 2. Node.js는 서버나 프레임워크가 아니라, 자바스크립트의 런타임이다. 쉽게 말해서 웹 브라우저 밖에서 자바스크립트 코드를 실행 할 수 있도록 (특히 서버에서) 도와주는 환경이다. 3. Node.js를 사용하면 좋은 서비스 제작할 앱이 리얼타임일 경우 커스터마이징이 많이 필요한 경우 자바스크립트 API를 사용해야할 경우 빠른 실행과 성능이 중요한 경우 4. Node.js의 특징은, 비동기 방식을 이용한다는 것이다. 한 번에 하나씩 순차적으로 일을 해나가는 동기적 방식과는 다르게, 비동기적 방식은 한번에 여러 일을 시작하고 진행한다. 또한,..

TIL

(21.10.27) TS] Type assertion에 관하여

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄TypeScript에서는 시스템이 추론 및 분속한 타입 내용을 변경 할 수 있는데, 이를 Type assertion이라고 한다.쉽게 말해, 프로그래머가 내가 이 자료의 타입을 잘 알고 있으니, 토 달지 말라고 선언 해주는 것이다.🦄 **Type Casting라고도 하는데, 이보다는 Type assertion이 더 적합한 표현이다. 일반적으로 캐스팅이라는 말은 실행 시간에 어떤 동작이 일어날 것임을 내포하기 때문이다. 본문 1. 타입 어센션을 하는 방법 : 꺽쇠를 변수 앞에 작성 as foo : 변수 뒤에 붙임 * 용례 var foo:any; var bar = foo // 이제 bar의 타입은 string입니다. var bar2 = foo as Boolean..

TIL

(21.09.28) linter와 prettier 설정을 무시하는 방법

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄//eslint-disable-next-line : 아랫줄의 eslint 상충을 무시한다.🦄 🦄//prettier-ignore : 아랫줄의 prettier 상충을 무시한다.🦄 본문 eslint, prettier는 느슨한 자바스크립트를 위한 지원도구입니다. eslint는 정적 분석을 하여 런타임 이전에 코딩 컨벤션에 위배되는 코드나 안티패턴을 감지해주고, prettier는 미리 설정된 형식외의 코드를 다시 작성해주는 코드 포맷터입니다. 순수히 개발의 편의를 위해 사용되는 이 도구들은, 프로젝트 규모가 커질 수록 그 빛을 발합니다. 이 도구들 덕분에 복잡한 코드들을 더욱 가독성 높게, 생산성 높게 만들어주죠. 그러나, 때로는 정말 linter와 prettier..

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

TIL

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

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

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란 자바스크립트의 비동기 작업을 더 편하게 처리하기 위한 기능이다. * 비동기 작업 : 실행 요청과 실행 결과가 동시에 일어나지 않는 작업 (동시에 일어나지 않는 작업으로 생각) 호랑이 담배피던 시절에는 비동기 작업을 처리하기 위해서 콜백 함수..