프론트엔드37 RESTful API란? 🤔 RESTful API란? 📝 정의 RESTful API는 Representational State Transfer의 약자로, 웹 상의 자원을 HTTP 프로토콜을 이용하여 전송하는 것을 의미한다. RESTful API는 일관적인 인터페이스를 제공하며, 서버와 클라이언트 간의 통신을 가능하게 해준다. ❓ 사용하는 이유 RESTful API는 다음과 같은 이유로 많이 사용된다. HTTP 프로토콜을 이용하여 간단하게 자원을 전송할 수 있다. 서버와 클라이언트 간의 인터페이스를 일관적으로 제공한다. 클라이언트와 서버가 독립적으로 개발될 수 있다. 캐싱 처리가 용이하여 서버의 부하를 줄일 수 있다. 😎 적용방법 RESTful API를 적용하기 위해서는 다음과 같은 요소들을 고려해야 한다. ✅ HTTP 메소드 R.. 2023. 4. 21. [FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항) 🙌 소개 웹 브라우저는 인터넷에서 다양한 정보를 제공하고, 사용자가 이를 시각적으로 확인할 수 있도록 하는 중요한 도구다. 하지만, 대용량의 웹 페이지를 불러올 때 브라우저의 성능이 느려지거나 멈추는 경우가 발생할 수 있다. 이러한 문제를 해결하기 위해서는 브라우저 렌더링 원리와 성능 최적화 방법을 이해하면 도움이 될 수 있다 판단해 시간을 내어 찾아보았다. 🤔 브라우저 렌더링 원리란 무엇인가 브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지의 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 브라우저 렌더링 원리는 크게 렌더링 엔진, 렌더 트리, 레이아웃, 그리고 페인팅으로 구성된다. .. 2023. 4. 11. 브라우저 저장소 정리(feat.localStorage, sessionStorage, IndexedDB) localStorage, sessionStorage 및 IndexedDB는 최신 웹 브라우저에서 사용할 수 있는 세 가지 웹 저장소 기술이다. 사용자의 브라우저에 로컬로 데이터를 저장한다는 동일한 목표를 공유하지만 용도, 용량 및 성능이 다르다. 재밌어보이니 각각의 스토리지 기술의 차이점과 장점/단점에 대해 정리했다. ✅ localStorage localStorage는 브라우저에 키-값 쌍을 저장할 수 있는 간단하고 가벼운 스토리지 기술이다. 최대 10MB의 데이터를 저장할 수 있으며 사용자가 브라우저를 닫은 후에도 데이터를 계속 사용할 수 있다. localStorage에 저장된 데이터는 도메인에 따라 다르다. 즉, 한 도메인에 저장된 데이터는 다른 도메인에서 접근 할 수 없다는 걸 말하며, 다른 사용자.. 2023. 3. 20. animation 최적화 정리 애니메이션은 웹 사이트를 좀 더 화려하게 만들어 사용자들의 이목을 끌 수 있는 좋은 기능이지만 잘못 사용할 경우 사이트가 느려지는 성능 저하 문제로 이어져 사용자가 기피하는 사이트로 만들 수도 있는 사용자 경험에 있어 민감한 기능이다. 기본적으로 알려진 애니메이션이 사용자 경험에 불편함을 느끼는 수치는 초당 60 프레임 미만으로 알려져 있다. 애니메이션을 주는 방식은 CSS와 JS 둘 다 가능하며 사용자 경험에 불편함을 주지 않게 신경 쓰고, 최적화하는 방법을 조사하고 정리해 보았다. 💪 CSS 애니메이션과 VS JavaScript 애니메이션 ✅ CSS로 만든 애니메이션 : 선언적 애니메이션 그림과 스타일링을 담당하는 CSS 애니메이션은 메인 스레드가 아닌 브라우저의 컴포지터 스레드에 의해 처리된다. 컴.. 2023. 3. 11. 이전 1 2 3 4 5 ··· 10 다음
