개발 기간 2023/05/03 ~ 2023/06/07 개발한 트위터 웹 링크 https://imdaxsz.github.io/twitter 계기 React와 TypeScript 강의를 듣고 난 후, 작은 프로젝트를 만들어봐야겠다고 생각했다. 그런 생각을 하던 찰나 Nomad Corder(노마드 코더)에서 React + Firebase로 트위터를 클론 코딩하는 강좌를 발견하게 되었다. Firebase는 학부 시절에도 백엔드로 종종 사용했던 적이 있었고(거의 기억이 나지 않았지만), 아직은 프론트엔드에 좀 더 집중하고 싶었기 때문에 백엔드는 최대한 쉽고 가볍게 하고 싶다는 생각이 있었다. 그래서 이 강좌를 수강하며 Firebase를 React에서 사용하는 방법을 배우고, 아직은 익숙하지 않은 React도 온전..
memo 컴포넌트가 재렌더링되면 내부에 있는 자식 컴포넌트는 항상 함께 재렌더링된다. 컴포넌트가 props로 동일한 결과를 렌더링한다면, memo를 호출하고 결과를 메모이징(Memoizing) 하도록 래핑하여 경우에 따라 성능을 향상할 수 있다. memo를 사용하면 react가 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. const MemoizedComponent = memo(SomeComponent, arePropsEqual?) import { memo } from 'react'; const Song = memo(function Song({ title, singer }) { return ( Song title: {title} Singer: {singer} ); }); export ..
lazy import 리액트로 만드는 Single Page Application의 특징은 빌드 시 html, js 파일이 하나만 생성된다. 그 안에 지금까지 만든 모든 내용이 들어있어 파일 사이즈가 약간 크다. 이런 이유에서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있다. 이를 개선하기 위해 코드를 분할할 수 있다. import 할 컴포넌트가 바로 렌더링 되지 않을 때, 컴포넌트가 처음 렌더링 될 때(필요할 때)까지 import를 미루는 것이다. import MarkdownPreview from './MarkdownPreview.js'; 위 코드를 아래와 같이 바꿀 수 있다. import { lazy } from 'react' const MarkdownPreview = lazy(() => i..
1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 자바스크립트 if문은 return () 안의 JSX 내에서는 사용할 수 없다. if (조건) {실행문} => (X) 그래서 보통 return + JSX 전체를 가지는 if문을 사용한다. + 주로 else 생략 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } 2. JSX안에서 쓰는 삼항연산자 (ternary operator) function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : nu..
