JavaScript/REACT (7) 썸네일형 리스트형 그외 알아야 하는 것들 Fetch와 Promise.then 이해하기자바스크립트에서 데이터를 비동기적으로 처리할 때 자주 사용하는 fetch 함수에 대해 알아보도록 하자. 이 함수는 서버로부터 데이터를 가져올 때 사용되며, Promise를 반환한다. 그래서 then() 메서드를 활용해 응답을 처리할 수 있다고 한다. 즉, fetch 함수의 위치에 다른 Promise.then() 형태를 사용할 수도 있다는 점을 기억하자. 리액트는 화면만 담당한다고?리액트는 사용자 인터페이스를 구축하는 데 특화된 라이브러리라고 한다. 따라서 데이터 처리는 서버의 역할이며, 리액트는 이 데이터를 활용해 화면에 렌더링하는 일을 담당한다. 이렇게 분업화된 구조 덕분에 각자의 역할에 집중할 수 있다고 할 수 있다. 리액트에서 MyApp 함수를 살펴보자Ne.. CDD CDD(Clustered Data Distribution)는 데이터베이스에서 데이터를 클러스터 형태로 분산 저장하는 기법이다. 이 방법은 데이터를 특정 기준에 따라 그룹화하여 저장함으로써, 관련 데이터들이 물리적으로 가까운 위치에 배치된다. 이는 데이터 접근 시간을 줄이고, 전체 조회 성능을 향상시키는 데 목적을 두고 있다. CDD의 주요 장점은 관련된 데이터가 가까이에 위치함으로써 데이터베이스의 I/O 효율을 증가시키고, 복잡한 쿼리 작업 시 응답 시간을 개선할 수 있다는 점이다. 또한, 이 기법은 데이터 관리 및 유지 관리를 효율적으로 할 수 있도록 도와준다. 데이터가 잘 조직되어 있기 때문에, 백업, 복구, 업데이트 등의 작업도 보다 쉽게 수행할 수 있다. CDD를 활용하면 높은 성능과 더 나은 데.. JSX JSX는 자바스크립트의 문법을 확장한 형태이다.이는 브라우저가 직접 해석할 수 없으므로, 브라우저에서 실행 가능한 순수 자바스크립트 코드로 변환하기 위해 바벨과 같은 컴파일러를 필요로 한다.JSX는 HTML 태그를 포함할 수 있는 자바스크립트 코드로 보이지만, 실제로는 HTML이 아니다. 리액트에서 자주 사용되며, JSX를 사용하면 다음과 같이 UI 컴포넌트를 보다 직관적으로 작성할 수 있다:const element = Hello, world!;위의 코드는 HTML과 유사해 보이지만, 실제로는 JSX로 작성된 것이다.이 코드를 브라우저에서 실행하기 위해서는 바벨이 JSX 코드를 순수 자바스크립트 코드로 컴파일해야 한다.이 과정에서 HTML과 자바스크립트 코드가 결합되어 실행 가능한 자바스크립트 파일이 생.. Custom Component 리액트에서의 커스텀 컴포넌트와 스타일드 컴포넌트커스텀 컴포넌트는 리액트에서 특정 기능이나 레이아웃을 가진 컴포넌트를 사용자 정의로 만들어 재사용할 수 있도록 하는 것이다. 예를 들어, 여러 페이지에서 반복적으로 사용되는 헤더, 푸터, 버튼 등을 커스텀 컴포넌트로 만들어 관리할 수 있다.스타일드 컴포넌트는 CSS-in-JS 라이브러리 중 하나로, 컴포넌트의 스타일을 자바스크립트 파일 안에서 관리할 수 있게 해준다. 이 방식은 각 컴포넌트에 고유한 스타일을 적용할 수 있게 하며, 스타일 시트 충돌을 방지하고, 스타일 관련 코드를 찾기 쉽게 만든다.예를 들어, 버튼 컴포넌트를 만들 때 다음과 같이 스타일드 컴포넌트를 사용할 수 있다:import styled from 'styled-components';cons.. React State & Props 리액트에서의 props와 state는 컴포넌트의 핵심 개념이다.이 두 가지를 이해하는 것은 컴포넌트 기반 개발에서 매우 중요하다. 각각의 역할과 사용 방법을 자세히 알아보자.Props (Properties)Props는 컴포넌트 외부로부터 전달받는 값이다. 이는 주로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. Props의 특징을 살펴보면:불변성: Props는 전달받은 후 내부에서 수정될 수 없다. 이는 리액트의 데이터 흐름이 단방향임을 의미한다.객체 형태: Props는 자바스크립트 객체 형태로 전달되며, 키-값 쌍을 통해 각 값에 접근할 수 있다.읽기 전용: 자식 컴포넌트는 props를 직접 변경할 수 없으며, 값을 사용하기 위해 중괄호 {}를 활용하여 접근한다. 예를 들어, prop.. SPA SPA(Single Page Application)와 그 특징SPA란 Single Page Application의 약자로, 웹 애플리케이션의 한 종류다. 전통적인 멀티 페이지 웹사이트와 달리, SPA는 하나의 웹 페이지로 구성되어 사용자와의 상호작용을 통해 동적으로 컨텐츠를 갱신한다. 이 구조는 웹 애플리케이션의 반응 속도를 크게 향상시키지만 몇 가지 단점도 존재한다.SPA의 단점초기 로딩 지연: SPA는 첫 로딩 때 애플리케이션에 필요한 대부분의 자원을 한 번에 불러와야 하기 때문에 초기 로딩 시간이 길어질 수 있다.SEO 문제: SPA는 페이지의 내용이 자바스크립트에 의존적으로 렌더링되므로 검색 엔진이 페이지의 내용을 제대로 크롤링하고 인덱싱하는 데 어려움이 있을 수 있다. 이는 검색 엔진 최적화(S.. Ajax - 이벤트 훅 📌 Ajax 이벤트 훅(Ajax Event Hooks)이란?Ajax 이벤트 훅(Ajax Event Hooks) 은 jQuery에서 Ajax 요청이 실행될 때 특정 이벤트를 가로채서 원하는 작업을 수행할 수 있도록 하는 기능이다.즉, Ajax 요청의 시작, 성공, 실패, 완료 등의 이벤트를 감지하여 특정 로직을 실행할 수 있다.✅ Ajax 이벤트 훅 종류jQuery에서는 전역 이벤트(Global Events)와 개별 이벤트(Local Events) 두 가지 방식으로 Ajax 이벤트를 처리할 수 있다.1️⃣ 전역 이벤트 (Global Events)전역 이벤트는 모든 Ajax 요청에 대해 동일한 이벤트 핸들러를 실행할 때 사용된다.이벤트 메서드 설명ajaxStartAjax 요청이 시작될 때 실행ajaxSen.. 이전 1 다음