리액트
-
[React] styled-components를 사용하는 이유공부 2021. 10. 20. 00:35
리액트 컴포넌트 스타일링 방식 1. CSS 중복되는 클래스명 사용 금지 CSS파일 만들어서 import 2. SASS(Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트) CSS pre-processor 코드의 재활용성과 가독성을 높여 유지보수를 쉽게 해줌 SCSS와 SASS확장자를 지원하는데 주로 SCSS를 더 많이 사용 함 기본문법은 CSS와 동일 Nesting가능 상위 요소 이어쓰기는 "&" 사용(클래스명 등 글자도 이어쓰기 가능) 문자열 치환 가능(변수 쓸 수 있음) 3. styled-components (컴포넌트에 스타일 직접 입히는 방식) CSS-in-JS라고 하는 JavaScript파일 안에서 CSS를 처리할 수 있게 하는 라이브러리 class 이름..
-
[React] CSR과 SSR공부 2021. 9. 28. 18:18
1. CSR (Client Side Rendering) SPA가 사용하는 렌더링 방식. 최초 로딩 시, 브라우저가 서버에 HTML, CSS, JS등 각종 리소스를 받아옴. 이 리소스들은 사용자의 상호작용에 따라 JS를 동적으로 렌더링 하고, 필요에 따라 데이터를 서버에 요청해서 받아옴. 따라서 서버 부하는 줄지만, 초기 로딩이 느리고 SEO(검색어 최적화)불가.(구글 제외) 2. SSR (Server Side Rendering) 서버에서 렌더링을 마치고 완전한 HTML을 브라우저로 전달해서 렌더링. 즉, 서버에서 데이터까지 포함해 페이지를 만들어 브라우저에게 전달함. 따라서 새로운 페이지로 이동할 때마다 서버에 페이지를 요청하고 새로고침이 되어 화면이 깜빡이는 현상 발생. 초기로딩이 빠르고 SEO(검색어..