Opal1031

비동기 통신Axios를 사용하여 서버와 HTTP 통신을 수행하고 데이터를 주고받을 수 있다. 1️⃣ 비동기 통신 개요동기 vs 비동기구분동기 통신비동기 통신처리 방식요청 → 응답 대기 → 다음 작업요청 → 다른 작업 진행 → 응답 처리적합한 경우은행 서비스 (정확성 중요)SNS 타임라인 (속도 중요)사용자 경험응답 대기 중 화면 멈춤응답 대기 중에도 다른 작업 가능동기 통신: 브라우저가 서버에 요청을 보낸 후 응답이 올 때까지 다음 동작을 실행하지 않음비동기 통신: 브라우저가 서버에 요청을 보낸 후 응답을 기다리는 동안 다른 작업을 수행할 수 있음웹 브라우저는 HTTP 요청을 통해 서버와 통신한다.서버는 JSON, HTML, 이미지 등의 형식으로 응답을 반환한다.웹 페이지에서는 사용자 경험을 고려하여 비..

React Router와 전역 상태 관리React Router를 사용하여 SPA를 구현하고, useContext로 전역 상태를 관리할 수 있다.1️⃣ React RouterReact는 SPA(Single Page Application) 방식으로 동작한다.SPA는 하나의 HTML 파일로 여러 화면을 구현하기 때문에, URL과 화면을 연결하는 라우팅 관리가 필요하다.React Router는 URL 경로에 따라 적절한 컴포넌트를 렌더링해주는 도구다.페이지 새로고침 없이 화면을 전환할 수 있다. 설치npm install react-router-dom 기본 설정import { BrowserRouter, Routes, Route } from 'react-router-dom';import Home from './pa..

State와 HooksReact Hooks를 사용하여 함수형 컴포넌트에서 상태 관리와 부수 효과를 처리할 수 있다.1️⃣ State (useState)State는 컴포넌트 내부에서 관리되는 동적인 데이터다.State가 변경되면 React는 자동으로 컴포넌트를 리렌더링한다.일반 변수는 변경되어도 UI가 업데이트되지 않지만, State는 변경 시 자동으로 화면을 갱신한다.import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 초기값 0 return ( 현재 카운트: {count} setCount(count + 1)}>증가 setCount(count - ..

들어가면서...React는 처음 다뤄보는 내용이었기에, 제공된 학습 자료 이외에도 Github Copilot등을 통해 다양한 예제를 알아보는 방식으로 공부하였다.ReactReact는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리다.React 소개React는 Facebook(현 Meta)에서 개발한 오픈소스 JavaScript 라이브러리로, 컴포넌트 기반으로 UI를 구성하고 상태 관리를 효율적으로 수행한다.SPA(Single Page Application) 개발에 주로 사용되며, Virtual DOM을 통해 빠른 렌더링 성능을 제공한다.React의 주요 특징컴포넌트 기반 구조: 재사용 가능한 독립적인 UI 조각으로 구성단방향 데이터 흐름: 상태 변화를 명시적으로 관리하여 인과 관계 파악이..

들어가면서...JS는 생활코딩 및 제출했던 과제를 예제로 삼아 문법 위주로 복습하려고 한다.1️⃣ JavaScriptJavaScript는 동적인 웹 페이지를 만들기 위한 필수 스크립트 언어다. JavaScript 소개JavaScript는 HTML과 CSS로 구성된 정적인 페이지에 동적인 기능을 추가하는 언어다. 브라우저에서 실행되는 클라이언트 기반 언어로, 사용자와의 상호작용을 관리하거나 서버와 데이터를 주고받는 데 주로 사용된다.JavaScript의 주요 특징인터프리터 언어: 브라우저가 즉각적으로 소스를 해석하여 실행.이벤트 기반: 사용자와의 이벤트(클릭, 입력 등)에 반응.크로스 플랫폼: 어떤 운영체제에서든 브라우저를 통해 실행 가능.자바스크립트 포함 방법HTML 내부에 자바스크립트를 작성하거나 외부..

들어가면서...기존에도 알고 있었던 HTML/CSS는 생활코딩을 참고하여 간단하게 짚고 넘어가는 방식이었기에, 제출했던 과제를 돌아보며 기본 문법 및 구조를 다시 한 번 짚고 넘어가려고 한다. 1️⃣ HTML (HyperText Markup Language)HTML은 웹 페이지의 구조를 정의하는 언어다.HTML의 기본 구조: 문서가 HTML5임을 명시: HTML 문서의 최상위 태그 Welcome to My Page This is an example of an HTML structure. 태그(Tag)HTML은 여러 태그를 사용하여 내용을 구분하고 역할을 정의한다. 제목 태그: ~ 제목 1제목 2 단락 태그: 이것은 단락입니다. 링크 태그: Click Here 이미지 태그: 리스트 태..