본문 바로가기
반응형

Frontend, Client24

[Nextjs] SSR vs CSR CSR의 장점:더 나은 상호작용성: 클라이언트 측에서 UI 갱신이 빠르고 반응적이므로 사용자 상호작용에 대한 응답성이 향상됩니다.자원 효율성: 서버 측에서 렌더링을 처리하지 않으므로 서버 부하가 줄어듭니다.CSR의 단점:검색 엔진 최적화 (SEO) 문제: 초기 페이지 로드 시에는 빈 페이지가 표시되고, 검색 엔진 크롤러가 페이지 콘텐츠를 이해하는 데 어려움이 있을 수 있습니다.초기 로딩 속도: 자바스크립트 파일 다운로드와 실행 시간이 필요하므로 초기 로딩 속도가 SSR에 비해 느릴 수 있습니다. SSR의 장점:SEO 개선: 서버에서 완전한 HTML을 생성하므로 검색 엔진이 페이지 콘텐츠를 쉽게 파악할 수 있습니다.더 빠른 초기 로딩: 완전한 HTML이 서버에서 제공되므로 초기 로딩이 빠릅니다.SSR의 단.. 2024. 7. 20.
[React] 재렌더링 최적화 1. 재렌더링이 발생하는 경우컴포넌트의 state 업데이트컴포넌트의 props 변경재렌더링된 컴포넌트의 모든 하위 컴포넌트 2. 재렌더링 최적화 - 컴포넌트 메모이제이션메모이제이션: 이전 처리 결과를 저장해둠으로써 처리 속도 향상 및 불필요한 처리 실행xconst Component = memo(()=>{});위와 같이 함수를 memo로 감싸주면 해당 컴포넌트는 props에 변경이 있을때만 재렌더링된다. 3. 재렌더링 최적화 - 함수 메모이제이션근데 props로 함수를 넘겨주는 경우에는 코드가 실행될 때마다 함수가 항상 새롭게 생성되기 때문에 이를 props가 변했다고 간주하여 재렌더링이 된다. 이때는 함수를 메모이제이션 해주어야 재렌더링이 발생하지 않는다.함수의 메모이제이션은 useCallback을 사용.. 2024. 7. 20.
[React] 다양한 CSS 적용 방법 1. Inline Styles기본적인 방법이지만, 앱이 복잡해질수록 사용하기 어려움// 방식 1: 직접 기술return ( )// 방식 2: 사전 정의const containerStyle = { width: "100%", padding: "16px",};return ( ) 2. CSS Modules.css 또는 .scss 파일을 정의하는 방법*.scss 파일 작성을 위해선(npm install node-sass)가 필요scss 파일 작성.container { border: solid 1px #aaa; border-radius: 20px; padding: 8px; margin: 8px;}사용import classes from "./CssModules.module.scss"; // 임의의 이름 지정 가능ex.. 2024. 7. 20.
[React] 리액트 기본 개념 1. JSX 표기법함수의 반환값으로 HTML 태그 사용, 그것을 컴포넌트화하여 화면을 구성반환값은 무조건 하나의 태그로 감싸져있어야함여러 줄일 때는 괄호()를 활용import ReactDOM from "react-dom";const App = () =>{ return 안녕하세요!;}ReactDOM.render(, document.getElementById("root"));컴포넌트화 예시src 하위에 App.js 파일 작성export const App = () => { return 안녕하세요!;} 임포트하여 사용import { App } from "./App"; 2. Props함수에 넘겨주는 인자와 같은 역할을 한다.export const ColoredMsg = (props) => { const conte.. 2024. 7. 20.
[Flutter] bloc을 이용한 상태 관리 1. Bloc이란?*bloc : Business Logic Componentbloc은 비즈니스 로직과 프레젠테이션 영역을 분리하기 위해 도입된 패턴이다. 계층을 분리함으로써 코드의 재사용성을 높이고, 테스트를 더 쉽게 진행할 수 있게 한다.bloc은 UI 이벤트를 받아 State를 변경한다.2. Bloc 패턴 작성과 사용a. bloc 생성이벤트와 bloc을 작성abstract class CounterEvent {}// eventclass CounterIncrementPressed extends CounterEvent {}// blocclass CounterBloc extends Bloc { CounterBloc() : super(0);} 처리하고자 하는 이벤트에 대한 이벤트 핸들러를 등록emit() :.. 2024. 7. 20.
MUI 까다로운 커스텀 모음 tooltipconst StyledTooltip = styled(({ className, ...props }) => )( ({ theme }) => ({ [`& .MuiTooltip-tooltip`]: { backgroundColor: theme.palette.primary.dark, color: theme.palette.text.primary, fontSize: '13px', boxShadow: theme.shadows[4], padding: theme.spacing(2), }, [`& .MuiTooltip-arrow`]: { color: theme.palette.primary.dark, }, }),)scrollconst S.. 2024. 7. 20.
반응형

티스토리툴바