React로 만드는 Single Page App의 특징은 html, js 파일이 하나만 생성된다. 그 안에 모든 내용을 다 넣게되면 파일사이즈가 좀 크고 , 첫 페이지 로딩속도가 매우 느리다. 해결방법으로는 js 파일을 잘게 쪼개면 되는데 import Detail from './routes/Detail.js' import Cart from './routes/Cart.js' //위의 코드를 아래와 같이 수정 import {lazy, Suspense, useEffect, useState} from 'react' const Detail = lazy( () => import('./routes/Detail.js') ) const Cart = lazy( () => import('./routes/Cart.js') )..

Component를 쓰는 이유 ? 반복해서 나오는 Html 덩어리 들을 Component화 하면 좋다. 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다. 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋다. 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다. 위 사항은 함수를 쓰는 이유와 같다. 반복, 자주 변경될 것 같은 등 Component가 함수의 문법을 사용하듯 용도 역시 마찬가지다. Component문법은 복잡한 html을 한 단어로 치환할 수 있다. 제목 날짜 상세내용 function App (){ return ( (생략) //이런식으로 사용하기 ) } function Modal(..

더보기 항해하면서 Node.js라는것도 처음 알았고 , 자바스크립트도 처음 배운 나에게 뭔가 여기서 새로운걸 하나 더 추가한다는건 굉장히 버거운 일이였다. 그래서 최대한 내것에 집중하고 다른 파트에는 눈길을 안줬다. 그런데 이번에 회사에서는 다르다. 따로 프론트엔드가 없는 팀에 있기 때문에 그 말은 곧 다 할 줄 알아야한다는.. 깊게는 아니지만 읽고 수정할 수 있는정도까진 해놓아야 한다는 생각에 기초부터 해보자고 백엔드 담당으로써는 프론트가 뭐라뭐라 하는것만 대충 끄덕거릴뿐 그 용어에 크게 집중하지 않는데(나만그런가) 이번에 리액트 코드를 보면서 그런 것들이 우당탕탕 쏟아지니까 정신이 없었다. UseState부터 알아보자면 let [title, titleFunc] = useState('Starbucks'..