Eunseo Choi

이미지 사이즈 최적화 웹 페이지는 다양한 이미지를 담고 표현합니다. 그러나 너무 큰 사이즈의 이미지를 로딩하기에는 트래픽이 증가되어 성능을 저하시킬 수 있습니다. 실제 몇몇의 웹 페이지를 방문하면 이상하게 이미지가 늦게 그려지는 현상을 발견할 수 있습니다. 그렇다고 이미지 사이즈를 작게 만들면 화질이 깨져 오히려 UI에 부정적인 영향을 미칩니다. 그렇기 때문에 이미지 사이즈 최적화 기법은 웹 성능 최적화에 중요한 요소 중 하나입니다. 비효율적인 이미지 분석 먼저 해당 이미지가 현재 웹페이지에 적합한 사이즈인지 분석해야 할 필요성이 있습니다. 크롬 개발자 도구 Lighthouse를 통해 이미지 최적화 여부를 확인할 수 있습니다. 아래 이미지는 저의 개인 포트폴리오를 측정한 결괏값을 보여주고 있습니다. 검사..

성능 최적화, 왜 필요할까? 현재 웹 개발은 빠른 속도로 성장하고 있습니다. 지금까지 새로운 기술에 집중했다면 이제는 성능 최적화 이슈에 집중하고 있는 추세입니다. 프론트엔드 개발자라면 아마 한 번씩을 고민하게 되는 성능 최적화, 도대체 성능 최적화가 무엇이고 어떻게 해야 하는 것일까요? 실제 기업 JD를 살펴보면 "최적화 기법을 이해하고 활용할 수 있는 개발자"를 요구하고 원하고 있습니다. 이러한 지원자격에 충족하고자 성능 최적화 기법을 배우고 실습을 통하여 최적화 경험을 쌓아보고자 합니다. 저는 "프론트엔드 성능 최적화 가이드" 책을 통해 최적화 기법을 학습하고자 하며 해당 도서 정보는 링크로 남겨놓겠습니다. 성능 최적화는 어떻게 이루어질까? 웹 성능을 결정하는 요소는 로딩 성능와 렌더링 성능로 구분..

OAuth란 무엇인가? OAuth란 Open Authorization으로 허가된 다른 서비스를 통해 기존 서비스의 권한을 위임하는 것이다. OAuth는 다양한 인터넷 서비스에서 사용되며, 사용자는 자신의 계정 정보를 안전하게 보호하면서 다른 서비스에 대한 접근 권한을 획득할 수 있다. OAuth 주체 Resource Owner 웹 페이지를 사용하고자 하는 유저. 플랫폼에서 리소스를 소유하고 있는 사용자. 이때 Resource는 개인정보를 포함한 자원이다. Client Resource Server의 자원을 이용하고자 하는 서비스로 보통 자사 또는 개인이 만든 애플리케이션 서버이다. Authorization Server 권한을 부여해 주는 서버로, Resource Owner를 인증하고, Client에게 Ac..

CORS 에러란 (Cross-Origin Resource Sharing) 웹 개발을 하다 보면 API 요청을 보내고 응답을 받는 동작을 수행하는데, 특정 사이트에서 다른 도메인의 서버로 AJAX 요청을 보내면 CORS 에러가 발생하는 경우를 자주 접하게 된다. 이상하게 Postman 등과 같이 개발 환경에서 오류 없이 잘 실행되지만 브라우저에서 CORS 오류가 발생한다. 이는 웹 브라우저에서 발생하는 보안 정책을 의미하며, 보안상의 이유로 동일 출처 정책을 적용하여, 동일한 출처에서만 리소스를 요청할 수 있도록 제한한다. CORS란 웹 브라우저에서 동작하는 보안 메커니즘 중 하나이다. 웹 브라우저에서는 보안 상의 이유로 동일 출처(same origin)에서만 리소스에 접근할 수 있다. 이때 동일 출처란,..

로그인과 토큰 사용자가 서비스를 이용하는 동안, 예를 들면 A페이지에서 B페이지로 이동하는 등의 작업을 수행할 때마다 로그인을 요구한다면 사용자 입장에서 불편함을 야기할 수 있다. 그렇기 때문에 실제 로그인 구조에서는 로그인 후에 로그인 상태를 유지하거나, 자동 로그인 등과 같은 기능이 필요하다. 이를 위해 토큰을 도입하여 토큰 기반의 로그인 로직이 구성되었다. 인증(Authentication) vs 인가(Authorization) 인증 (Authentication) 사용자가 자신의 신원을 확인하는 과정. 사용자가 누구인지 사용자의 아이디와 비밀번호, 토큰, 인증서 등을 사용하여 자신을 주장함을 확인한다. 예를 들어, 로그인 과정에서 사용자가 입력한 아이디와 비밀번호가 유효한지 검증하는 것이 인증의 예이..

Sass란? Sass는 Syntactically Awesome Style Sheets(문법적으로 멋진 스타일 시트)의 약자로, CSS의 확장된 기능을 제공하는 CSS 전처리기(preprocessor)이다. 스타일시트의 크기가 커지면 복잡성이 높아지며, 결국 유지 보수가 어려워진다. Sass는 CSS에 존재하지 않는 nesting, mixins, inheritance 등과 같은 기능을 제공하기 때문에 간결하고 효율적으로 작성할 수 있으며 유지보수하기 쉽도록 도와준다. Sass와 Scss의 차이 Sass와 Scss는 모두 CSS 전처리기로 css를 확장하여 효율적으로 스타일 시트를 작성할 수 있는 도구이다. 그러나 Sass와 Scss는 문법적인 차이가 존재한다. Sass는 들여 쓰기로 구분되어 간결한 문법을..