Front-End Study89 CSR, SSR, SSG 렌더링 CSR🔖브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 보편화된 방식이며, 최초에 서버가 보내준 빈 HTML에 브라우저가 요소를 채워 렌더링한다.➡️서버로부터 HTML를 받는 것 이외에 별도의 통신을 할 필요가 없다.(SPA) 따라서 한번 렌더링 후 필요한 부분만 렌더링하여 효율적이다. ✅초기 로딩 후 빠른 렌더링을 통해 UX를 증대시키며, 서버의 부담이 덜하다. 또한 TTV와 TTI의 간극이 없다.🚫모든 파일이 처음에 전부 로드되어야 하므로 초기 로딩속도가 느리고, 검색엔진 최적화에 불리하다. 👍초기 로딩만 제외하면 빠른 속도와 필요한 데이터만 받아와 렌더링한다는 장점이 있어 사용자 간 상호작용이 많고 동적으로 데이터를 받아올 일이 많은 SNS피드, 채팅앱 등과 같은 페이지에서 사용하기 좋.. 2024. 4. 25. 리액트의 라이프사이클 LifeCycle Method 리액트의 라이프 사이클 개념은 컴포넌트가 생기고, 바뀌고, 사라지는 각각의 시점을 통해 리액트를 효율적으로 다루기 위한 일종의 개념이다. 이를 통해 상황에 맞는 다양한 로직을 구현할 수 있고, 사용한 메모리를 효과적으로 반환하여 비용 문제 또한 해결할 수 있다. 🔖 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들의 집합을 의미한다. lifecycle 메서드는 클래스형 컴포넌트에서만 사용하며, 함수형 컴포넌트에서는 useEffect()를 통해 이를 구현 가능하다. 1. Mount 🔖 첫번째 단계는 Mount로, 컴포넌트가 생성될 때 시점의 생명주기를 의미한다. ✅ 이때 호출되는 메서드는 총 4가지이다. // 1. constructor constr.. 2024. 4. 20. React - Virtual DOM DOM 🔖각각의 Element를 담은 웹페이지를 Document라고 하며, 브라우저는 이를 분석하여 화면상에서 보여준다. ✅DOM은 이러한 Element들을 tree 형태로 표현한 것으로 이에 해당하는 Node로 구성되어 있으며, DIM이 제공하는 API를 통해 구조에 접근하고 Element를 관리한다. Virtual DOM 🔖Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라 할 수 있으며, 자바스크립트 객체의 형태로 존재한다. ✅변화를 감지하면 재조정(re-Rendering) 과정을 통해 실제 DOM과 동기화한다. 1. UI 변경 감지 및 Virtual DOM 렌더링 2. 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이 계산(Diffing) 3. 변경된 부분 .. 2024. 4. 8. 이벤트 루프 찍먹용 간단한 비동기 함수 동작원리 예시 코드 let num = 1; setTimeout(() => { num = 2; }, 0); num = 3; console.log(num); 🔖위 코드는 let 키워드로 num 변수에 1을 할당하고, setTImeout()과 단순 할당을 사용해 num의 값이 무엇일지 유추한다. ✅setTimeout의 delay 값을 0으로 설정하더라도, setTimeout과 같은 비동기 함수의 콜백은 결국 콜스택의 코드가 모두 실행된 후에 실행된다. ✅fetch()나 async/await, setTimeout/setInterval과 같은 비동기 동작 함수들은 기본적으로 콜스택에 들어있는 코드들이 모두 실행된 후에 콜스택에 들어가 실행된다. ➡️따라서 setTImeout의 콜백 함수가 실행되는 시점은 이미 consol.. 2024. 4. 8. HTTP 요청 메소드 HTTP 요청 메소드 🔖HTTP는 원하는 행동을 수행하는 각각의 메소드를 가지고 있다. (HTTP 동사라고 부르기도 함) 1. GET - 특정 리소스의 조회를 요청한다. 데이터 조회만 가능하다. - 멱등성의 개념을 가지고 여러번 조회 요청을 해도 변함이 없다. - 쿼리스트링을 통해 서버에 데이터를 전달하지만 무방비 상태로 노출되어 주의가 필요하다.2. POST - 새로운 리소스의 생성을 요청한다. - 데이터를 메세지 바디에 파라미터 형식으로 전달한다. (key, value 형식) - 멱등성이 보장되지 않아 여러번 요청하면 동일하지 않은 결과값이 나올 수 있다.3. PUT - 리소스를 덮어쓰기 형식으로 대체한다. - 클라이언트가 리소스를 식별할 수 있어 URI를 지정한다. - 멱등성을 지니며 부분적인 수정.. 2024. 4. 4. 이벤트 위임과 캡쳐 & 버블링 🔖DOM의 이벤트 흐름은 캡쳐링 단계 -> 타깃 단계 -> 버블링 단계 순서로 이루어진다. 이벤트 버블링 🔖이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 경우, 해당 이벤트가 더 상위(부모) 요소들로 전달되는 특성을 의미한다. ❗특정 태그 전체에 이벤트를 등록하고, 최하위 태그 요소의 이벤트를 동작하면 자식->부모 순서로 이벤트에 해당하는 코드가 실행된다. ✅특정 태그만 선택한 것이 아닌, 모든 태그를 선택하여 이벤트를 부여하고 특정 태그에 이벤트를 동작시키면 브라우저가 해당 태그의 모든 상위 태그에 이벤트를 전파시킨다. 이벤트 캡쳐링 🔖이벤트 버블링과 반대로 부모 요소에서 자식 요소로 이벤트가 전파되는 것을 의미한다. (자주 나오는 개념은 아니다.) const divs = document.que.. 2024. 4. 4. 이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음
