프론트엔드15 [CSS] CSS 최적화 기법 기법 1. Remove unused CSS 사용하지 않는 CSS 제거 2. Eliminate render-blocking resources 렌더 차단 리소스 제거 1. Remove unused CSS CSS = 렌더 차단 리소스 브라우저가 CSS 파일을 해석하는 동안 웹 페이지 렌더링은 차단된다. 즉, CSS는 페이지 렌더링을 차단하는 리소스임. 사용하지 않는 CSS가 많을 수록 브라우저가 스타일을 계산하는데 잠재적으로 더 많은 시간을 소비한다. Lighthouse 미사용 CSS가 포함된 2KB 이상의 파일을 검출해서 오류로 보고한다. Remove unused CSS 라는 항목을 클릭해서 보면 된다. # 주의사항 - font-face 규칙을 사용하지 않는 CSS로 보고하는 오류가 있음 (사용하는데 미사용.. 2023. 2. 21. [GraphQL] 5. fragment Fragment - 여러 쿼리에 사용될 수 있는, 재사용 가능한 필드셋 - 중복을 줄임으로써 전체 코드 간소화 Usage - 재사용되는 요소들 fragment로 분리 const Names = gql` fragment names on People { first_name last_name } `; const HealthInfo = gql` fragment healthInfo on People { sex blood_type } `; const WorkInfo = gql` fragment workInfo on People { serve_years role team } `; - 쿼리 적용 const GET_PEOPLE = gql` query GetPeople { people { id ...names ...heal.. 2023. 2. 16. [GraphQL] 4. local only field 노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 강의를 보고 정리한 글입니다. 목표 Apollo client로 local state를 어떻게 다루는지 이해하기 API에서 제공되는 remote data와 local state를 병합하기 local only field Apollo의 cache에서만 활동하고, API로 가지 않는 field Apollo는 local only field를 제외한 모든 field의 정보를 API에 요청한다. 활용 사례 다크모드 사용자의 타임존 사용자가 원하는 볼륨 크기를 User Profile에 저장 (ex. youtube) 선언 방법 @client Apollo에게 이 field는 cache에만 있다고 알려준다. const GET_MOVIE = gql` query getMov.. 2023. 2. 15. [GraphQL] 3. useQuery 노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 강의를 보고 정리한 글입니다. 장점 GraphQL의 useQuery hook을 사용하면 선언형으로 코드를 작성할 수 있다. 선언형 코드 : 원하는 걸 설명하기 위한 코드만을 적는다 명령형 코드 : 모든 단계의 코드를 적는다. 명령형 - 쿼리 요청을 보내고 -> state에 저장한다 function Movies() { const [movies, setMovies] = useState([]); const client = useApolloClient(); useEffect(() => { client .query({ query: gql` { allMovies { title id } } `, }) .then((result) => setMovies(result... 2023. 2. 15. 이전 1 2 3 4 다음
