투두리스트에 날짜를 불러오는 컴포넌트이다. 변경 전 코드는 함수를 만들어 if 매칭을 통해 날짜를 불러온다. 이 코드에서 나의 문제점은 1. 많은 조건을 매칭할 때는 if 보다는 switch/case문을 사용하자! if는 하나하나 앞에 있는 조건을 다 검사하고 타고타고 내려온다 하지만 switch case 문은 점프가 가능하다! 조건을 메모리에 들고 있기 때믄에 특정 조건을 만났을 때 위에서 부터 아래로 내려가서 하나하나 검사하는 것이 아닌 그 조건 케이스로 점프가 가능해진다. 하지만 보통 1:1 매칭이 가능한 것은 객체 혹은 배열로 사용하는 것이 더 좋다! 2. state의 필요성 함수 안에 있는 상수들은 변하지 않는 값들이다. 이것은 state가 변경될 때 함수가 다시 실행이 되어 불필요한 함수 생성..
lazy? lazy는 React에서 Suspense컴포넌트와 함께 사용되는 함수. lazy는 코드 스플리팅(Code splitting)을 쉽게 구현할 수 있게 도와주는 함수이다. *** 코드 스플리팅이란? 애플리케이션의 번들 크기를 줄이고 초기 로딩 시간을 최적화하기 위해 사용된다. 애플리케이션을 여러 개의 작은 청크로 분할하여 필요한 경우에만 로딩할 수 있도록 해준다. 이를 통해 사용자는 초기 로딩 시간을 줄이고 페이지를 빠르게 볼 수 있다. const OpenStage = lazy(() => import("./../pages/opening/OpenStage")); 위 OpenStage는 ./../pages/opening/OpenStage 경로에 있는 파일로부터 import해온다. 이 컴포넌트는 애플리..
SPA란 Single Page Application으로 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식이다! 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다. 어떻게 하나의 페이지 요청으로 전체 웹앱을 사용한다는 걸까?? 하지만 SPA의 경우 렌더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 방식이다. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하게 된다. 페이지가 변경되어도 HTML은 변경되지 않는 것을 볼 수 있습니다. 이처럼 SPA방식에서는 MPA와 달리 페이지가 바뀌더라도 HTML을 다시 서버에 요청하지 않습니다. SPA 장점 새로운 페이지 요청 시 전체를 렌더링 하..
강의를 듣고 구현하다보면 왜인지 몰라도 컴포넌트를 많이 쪼개서 만들게 된다. 이런식으로.. 하지만! 컴포넌트를 너무 잘게 쪼개는 것보다 재사용 가능성이 있는 컴포넌트만 분리하는 것이 좋다는 피드백을 받았다!! props으로 넘겨야하는 값들이 많이 생기게되기 때문!! 현업에서는 props 나눌 필요가 있는 애들만 나눈다! props를 최소한으로 해주기 위해서!! 앞으로 컴포넌트 만들 때 유의하자!!
