리액트4 리액트 - Async&Await&Promise Async/Await/Promise 정리1. 기본 개념Promise비동기 작업의 결과를 담는 객체상태: pending(대기) -> fulfilled(성공) 또는 rejected(실패)체이닝으로 연속 작업 가능async/awaitasync: Promise를 반환하는 비동기 함수 선언await: Promise 완료까지 대기try-catch로 에러 처리2. 실행 패턴순차 실행await로 순서 보장이 필요한 작업 처리예) 질문 조회 후 답변 목록 조회병렬 실행Promise.all()로 독립적인 작업 동시 실행예) 프로필과 작성 글 목록 동시 조회혼합 실행순차 실행과 병렬 실행 조합예) 질문 조회 후 답변/댓글 동시 조회3. Promise 메서드기본 메서드.then() - 성공 처리.catch() - 에러 처리... 2024. 12. 23. 리액트 - Outlet React Router의 Outlet 이해하기Outlet이란?Outlet은 React Router v6에서 도입된 컴포넌트로, 부모 라우트가 자식 라우트 엘리먼트를 렌더링할 수 있게 해주는 도구입니다. 중첩 라우팅을 구현할 때 특히 유용합니다.Outlet의 주요 특징부모 라우트의 레이아웃 내에서 자식 라우트의 컴포넌트를 렌더링할 위치를 지정할 수 있습니다공통 레이아웃을 유지하면서 특정 부분만 동적으로 변경할 수 있습니다코드의 재사용성을 높이고 구조를 더 깔끔하게 만들 수 있습니다기본 사용 예제// App.jsximport { BrowserRouter, Routes, Route } from 'react-router-dom';import Layout from './Layout';import Home from.. 2024. 12. 23. 웹 - DOM 1. DOM의 정의DOM (Document Object Model): HTML 또는 XML 문서의 구조와 내용을 프로그래밍적으로 조작할 수 있게 해주는 인터페이스.HTML 요소를 노드로 변환하여 JavaScript를 통해 접근하고 조작 가능.2. 주요 개념노드 (Node): DOM의 기본 단위로, 요소 노드, 텍스트 노드, 속성 노드 등이 있음.트리 구조: DOM은 계층적인 트리 구조로 구성되며, 최상위 노드는 document 객체.API: JavaScript에서 DOM을 조작할 수 있는 다양한 메서드와 속성을 제공.3. DOM의 변환 과정브라우저가 HTML 문서를 로드할 때 HTML을 파싱하고 DOM 트리를 생성함.이 과정에서 웹 페이지가 화면에 렌더링됨.4. 프론트엔드 조작DOM은 스크립트 언어(주로.. 2024. 12. 3. 테일 윈드 - 자주 사용한 문법 정리 Tailwind CSS 클래스 이름 정리1. p-2요소: div, input, button설명: 패딩을 2단계 적용합니다. 주로 요소의 안쪽 여백을 설정하는 데 사용됩니다.2. flex요소: div설명: 요소를 Flexbox 컨테이너로 만들어줍니다. 요소들을 한 줄 또는 한 열로 정렬할 수 있게 도와줍니다.3. justify-center요소: div (Flexbox 컨테이너)설명: Flexbox 컨테이너 내에서 자식 요소들을 수평 방향으로 중앙에 정렬합니다.4. gap-2요소: div (Flexbox 또는 Grid)설명: Flexbox나 Grid 레이아웃에서 자식 요소들 사이의 간격을 설정합니다. 각 요소 사이에 2단계의 간격을 추가합니다.5. rounded요소: input, button, li설명: 요.. 2024. 11. 26. 이전 1 다음