본문 바로가기

IT213

Web - Largest Contentful Paint 개념 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시점을 측정1 해당 시점에 따라 UX에 엄청난 영향을 끼칩니다. 느리면 느릴 수록 사용자가 메인 컨텐츠를 보기에 많은 시간을 기다려야 하기 때문이죠. 예를 들면, 영상을 보는 페이지에 접근한다고 가정해봅시다. 영상을 보기 위해 페이지에 접근 후 영상은 로딩중이고 그 외의 UI만 노출되고 있다면 사용자는 영상이 보여지기 전까지 기다려야 하는 상황입니다. 다른 UI는 의미가 없죠. 이래서 LCP가 중요합니다. 성능 기준 좋음 ~ 2.5sec 성능 개선 필요 2.5 sec ~ 4.0 sec 나쁨 4.0 sec ~ 개선 방법 SSR CSR로만 되어 있다면 SSR를 고려해볼 필요가 있다. 느린 서버 응답 시간 Time to First Byte를 확인해 볼 필요가 있.. 2023. 6. 23.
React - Code splitting using 'Loadable' 요약 code splitting은 서비스 출시 전에 꼭 챙겨야 하는 기술이다. 이걸 적용하지 않으면, 사용하지 않는 모든 페이지에 대한 코드를 다운로드하고, 페이지가 그려지기 때문에 처음 페이지 접속 시 유저가 오랫동안 기다려야 하기 때문이다. 물론 요즘 인터넷이 빨라서 참을 수 없을 만큼은 아니지만, 해당 기술을 적용하기 전과 후를 비교해보면 확실히 알 수 있을 것이다. 동작 방식 /home 에 접근시, 해당 페이지에서 꼭 필요한 파일들만 받아와서 페이지를 그려준다. 그리고 다른 path로 페이지 이동 시 해당 path에 필요한 파일을 추가로 받아 페이지를 그린다. 적용 위치 해당 기술은 SSR(Server Side Rendering)에서와 CSR(Client Side Rendering) 모두 적용이 .. 2023. 6. 23.
Web - 사용하지 않는 코드 확인하기 기다리는걸 좋아하는 사람은 단 한명도 없습니다. 사용자 중 절반이상이 로드하는데 3초이상 기다리는 경우 웹사이트를 이탈합니다. Intro 사용하지 않는 코드를 제거하여 JS, CSS 파일의 크기를 최소화 하거나, lazy loading 해야합니다. 어떤 코드를 사용하지 않는지 확인하는 방법을 알아보려 합니다. 사용 방법 - Coverage 탭 활성화: DevTools 맞춤 설정 및 제어 > 도구 더보기 > 커버리지 - 녹화 하기 - 페이지 로딩 결과 화면 사용한 코드와 불필요한 코드 구별 파랑색과 빨강색 vertical line으로 구별할 수 있다. 개선 방법 Lazy Loading 현재 사용하진 않고 유저의 행동에 의해 사용되어질 코드라면, lazy loading을 적극 활용해볼만 하다. 이미지 로딩,.. 2023. 6. 23.
Web - First Contentful Paint 개념 페이지가 로드 되는 동안 사용자가 화면에서 볼 수 있는 첫번째 컨텐츠의 시점. FCP가 빠르면 사용자가 페이지에서 뭔가가 진행되고 있음을 인지해 안심할 수 있습니다. 성능 기준 좋음 ~ 1.8sec 성능 개선 필요 1.8 sec ~ 3.0 sec 나쁨 3.0 sec ~ 개선 방법 LCP와 비슷하므로 해당 링크에서 확인 마무리 FCP는 LCP와 너무나 중요한 요소 중에 하나지만, 2022년 기준 core web vitals에는 속해 있지 않다. SSR이 미적용 되어 있고 SPA로 개발 되어 있는 웹사이트는 FCP를 줄이기 위해 온 힘들 다해야할거 같다. web.dev에서 읽은 내용을 내가 필요한 정보들만 정리해 놓았으므로, 자세한 정보를 원한다면 아래의 링크에서 확인해보자. 개선사항들을 직접 테스트해.. 2023. 6. 23.
Web - XSS (Cross Site Scripting) 개념 악의적인 목적을 가진 제 3자가 악성 스크립트를 삽입하여 의도하지 않은 명령을 실행시키거나 세션 등을 탈취할 수 있는 취약점입니다. XSS 통해서 할 수 있는 것 - 유저가 할 수 있는 모든 Action을 악 이용 - 유저가 읽을 수 있는 모든 데이터를 획득 - 유저 로그인 정보를 탈취 가능 공격 방법 Reflected HTTP Request로 URL에 script를 포함시켜 공격 정상적인 상황 Request https://a.a.com/weather?city=seoul Response Seoul: Sunny Reflected 공격 Request https://a.a.com/weather?city= Response Stored DB에 script를 저장하여 공격 - 공격할 사이트의 게시글에 라고 올.. 2023. 6. 23.
Web - CSRF (Cross Site Request Forgery) 개념 공격자가 희생자의 권한을 도용하여 특정 웹 사이트의 기능을 실행 사례 공격자가 희생자의 SNS 계정에 광고를 올림 공격 방법 (광고 올리기) 공격할 사이트에 희생자가 로그인이 되어 있는 상태 회생자가 공격자가 만든 피싱 사이트에 접속 피싱 사이트가 해당 사이트에 광고를 올림 (희생자가 인지 하지 못하는 상황) 대응 방안 1. Same-Site cookie 같은 도메인 일때만 쿠키를 사용할 수 있도록 설정한다. 쿠키를 만들 때 설정 할 수 있다. 2. 로그아웃 사용 하지 않을 때 로그아웃 하는게 보안상 안전하다. 편함과 안전 중 선택하기 바란다. 마무리 개발 잘해놓고 이런 보안 취약점에 노출되어 서비스 평판 안좋게 하지말자. 2023. 6. 23.

티스토리툴바