(수근수근)

1편에서 pure component에 대해서 이야기 했다. pure component란 PureComponent is similar to Component but it skips re-renders for same props and state로 리액트 공식 사이트에서 설명되어있다. state와 prop가 동일하면 리렌더링을 건너뛰는 컴포넌트라는 것이다. 리액트 최적화 툴 중 하나인 React.memo는 사용자가 해당 컴포넌트가 pure component임을 인지하고 사용하는 최적화 함수이다. React.memo React.memo pure component를 최적화하는 escape hatch function Decoration() { return ( ⛵️ ); } const PureDecoration =..

최적화가 사실 몸으로 와닿은적이 아직 없다. 따라서 공부도 제대로 안한 경향이 있고, 단순히 리렌더링 안해도되는 것은 최적화 툴(useMemo, useCallback)을 쓰면된다 이정도의 지식이었는데, 제대로 알지도 못하는데 어떻게 쓸 수 있는가 하는 생각이 들었고 좋은 강의(josh)를 통해서 해당 툴이 리액트에서 필요한 이유를 좀 더 깊게 이해할 수 있었다. 일단 왜 해당 같은 툴이 만들어졌을까? 리액트는 자동으로 최적화 할 수 없었을까? 최적화 툴이 만들어진 이유는 다음과 같다. 리액트는 불필요한 부분에도 리렌더링이 되기 때문이다. 리액트 리렌더링의 기본적인 규칙에 대에서 봐보자! The Basic rule 모든 리렌더링은 state value 변경으로 시작되고, 이는 유일한 트리거입니다. 따라서 ..

Async Effect Gotcha gotcha : 프로그래밍에서 문제는 문서화된 대로 작동하지만 호출하기 쉽고 결과가 예상치 못하거나 불합리하기 때문에 직관에 반하고 실수를 거의 유발하는 시스템, 프로그램 또는 프로그래밍 언어의 유효한 구성입니다. 모두 알다시피, await키워드를 사용할 때, async함수 내부여야만 사용할 수 있다. 리액트를 개발하면, useEffect내부에서 비동기 함수를 사용해야하는 일이 꽤나 빈번하다. 특히 컴포넌트가 mount될 때, api를 불러오고 싶은경우가 많을 것이다.(react query, swr을 처음부터 쓰면, 알아서 해줍니다..) 예를 들어보자, React.useEffect(async () => { const response = await fetch(ENDPOI..

문제 - 현재 react-datepicker library를 활용하고 있는데 input에 날짜를 입력할 때 자동으로 MM-dd-yyyy형태로 작성되게 하고싶은데 mmddyyyy로 들어감 - locale에 따라 자동으로 formating형태에 따라 대쉬를 넣어주고 싶음 해결방법 - datepicker에서 열어둔 props의 customInput을 활용한다. - 자동으로 masking을 도와주는 라이브러리(react-text-mask) 사용 (https://github.com/text-mask/text-mask/tree/master/react) 필요한 부분 코드만 작성 (나머지 불필요한 부분들은 삭제함) - locale에 따라 다르게 mask부분의 배열을 변경해주면 됩니다. import ReactDatePi..

🌞 HTTP이 발전 이해하기 🌞 HTTP/0.9 GET메소드만 존재 HTML만 읽을 수 있고 클라이언트 정보 X 하지만 WWW의 근간이 되어 더욱이 발전할 수 있었음 HTTP/1.0 헤더를 통해 클라이언트와 서버 정보 전달이 가능해졌다. 또한, content-type헤더를 통해서 HTML뿐만 아니라, 이미지 동영상같은 다양한 정보를 주고 받을 수 있게 되었다. POST가 추가되어 클라이언트의 정보를 웹으로 전달할 수 있게 되었다. content-Encoding을 통해서 클라이언트와 서버간의 압축정보를 공유가 가능해졌다. HTTP/1.1 HTTP의 첫 번쨰 공식 표준버전이다 GET, POST, PUT, DELETE의 함수를 모두 지원 하나의 TCP 연결을 지속적 연결을 추가함으로 재사용해 많은 콘텐츠 전달..

Vanilla CSS 장점 도구가 필요하지 않아 덜 복잡하고, 런타임 성능비용이 없음 단점 범위가 지정되지 않는 단점이 있다. 한 곳에 작성한 CSS는 모든 곳에 진행되기 때문에 BEM과 같은 명명법을 통해서 해결해 나갈 수 있으나, 이는.. 엄청난 노력이 필요함 최적의 브라우저 지원을 위해 많은 CSS에 대해서 브라우저의 접두서를 추가해야함 JS와의 공유가 어려움 Sass / Less Scss는 바닐라 CSS로 컴파일 되는 전처리기 입니다. 중첩, 변수 및 iteration의 기능으로 바닐라 CSS를 커버합니다. 작동방식은 타입스크립트와 비슷합니다. Less 도 Sass와 방식이 아주 유사한데, 차이점이라고 하면 변수에 지정을 다르게 한다 잠점 for-loop, mixin nesting 같은 강력한 도..