FrontEnd9 React란 무엇인가? React는 공홈에서 아래와 같이 웹, 네이티브 유저 인터페이스를 위한 라이브러리라고 정의합니다.리액트 다음으로 유명한 Vue, Angular는 어떨까요?뷰는 웹 유저 인터페이스를 만들기 위한 프레임워크앵귤러는 웹 개발 프레임워크라고 정의하고 있습니다. 리액트는 라이브러리, 뷰와 앵귤러는 프레임워크라고 하는데 둘의 차이점이 있을까요?# 프레임워크와 라이브러리 차이점프레임워크와 라이브러리는 모두 소프트웨어 개발을 돕는 재사용 가능한 코드 집합이지만, 주요 차이점은 다음과 같습니다.1. 제어 흐름 라이브러리: 애플리케이션 코드가 라이브러리를 호출하고 제어 흐름을 가집니다. 프레임워크: 프레임워크가 제어 흐름을 가지며, 특정 지점에서 애플리케이션 코드를 호출합니다. 2. 통합 및 확장성 라이브러리: 필요한 기.. 2024. 5. 16. CWV (Core Web Vital) 이란? 최근 웹를 쉽게 구성할 수 있게 돕는 라이브러리 React, Vue, Svelte, Lit, Solid 웹 프레임워크 이면서 SSR을 제공하는 Nextjs, Nuxtjs, Remix, SvelteKit ... 등 Nextjs에서는 서버 사이드 렌더링과는 별도의 개념인 Server Component, Client Component를 구분하는 등 다양한 변화와 새로운 방향을 제시하고 있습니다. 이러한 빠르고, 수 많은 변화들을 보면서 당장 웹을 더 효율적으로 만드는 방법은 무엇일까 고민하게 되었습니다. 웹을 방문했을 때 더 빠르게 렌더링하여 사용자들에게 보여지고 싶고 코드를 더 간결하게 작성하여 사용자의 상호작용에 효율적으로 반응하고 싶었습니다. 웹 프레임워크를 도입하거나 라이브러리를 변경하기엔 작업 공수가.. 2023. 12. 1. ::before & ::after CSS에서 :hover, :active, :disabled 등등 이와 같은 형태를 사용하는 경우가 있습니다. 이들은 가상클래스(pseudo-class, 슈도-클래스)라고 합니다. 가상클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다. - mdn web docs(https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes) /* Any button over which the user's pointer is hovering */ button:hover { color: blue; } selector:pseudo-class.. 2023. 9. 5. Fetch / Axios 비교 Fetch를 주로 사용하다 Axios를 왜 쓰는걸까 궁금해하던 차에 특징을 비교해보고자 합니다. 자바스크립트에서 HTTP 통신을 위해 Fetch API를 제공합니다. 이전에는 XMLHttpRequest 객체를 통해 AJAX 를 했습니다. AJAX란,서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것입니다. (Asynchronous JavaScript And XML) 웹 2.0이 시작되면서 AJAX를 사용하여 동적인 웹이 되었고 비동기 처리를 위해 콜백함수를 사용했습니다. 콜백지옥으로 문제가 되니 비동기 데이터를 다루는 객체인 Promise가 나타났습니다. Fetch 와 Axios Fetch는 HTTP통신을 할 수 있도록 자바스크립트에서 제공하는 API로 Promise값을 반환하여 통신결과.. 2023. 4. 14. 브라우저 렌더링 과정 브라우저란? 웹 브라우저(Web browser) 혹은 브라우저 는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램. 브라우저는 사용자 에이전트의 가장 친숙한 유형이다. (참고. MDN) 우리가 많이 사용하는 Chrome, Safari, Edge, Firefox 등등이 있다. 브라우저 구조 User Interface - 사용자가 접근할 수 있는 영역으로 주소표시줄, 뒤로가기/앞으로가기 버튼, 새로고침 버튼 등 브라우저 자체의 GUI를 구성하는 부분이다. Browser engine - 사용자 인터페이스, 렌더링 엔진 사이의 동작을 제어하는 엔진. 사용자가 주소표시줄에 URI를 입력하면 브라우저 엔진이 자료 저장소에서 해당 URI에 알맞는 자료를 찾고.. 2023. 1. 31. 콜백 함수란? 알고 있다고 생각하는 개념도 설명하라고 하거나 정의를 물어보면 명확하게 얘기하지 못하는 경우가 많다. 그래서 이번 기회에 정리하여 머리 깊게 개념을 넣고자 한다. 콜백 함수란? Callback function A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. 해석하자면, 콜백함수는 다른 함수에 argument(인수)로 전달되는 함수이다, 외부함수의 내부에서 invoked(호출)되어 어떤 종류의 루틴이나 동작을 완료한다. 함수 인수로 함수가 전달되어 외부.. 2023. 1. 20. 이전 1 2 다음
