실무 첫걸음, 생성형 AI로 배우는 UX/UI & 프론트엔드

1강. 프론트엔드와 서버, 왜 분리되어 있는가?핵심 주제프론트엔드와 서버가 왜 분리되어 있는지, 각각 어떤 역할을 수행하며 협력하는지에 대한 구조적 이해를 제공합니다. 프론트엔드 개발자가 서버 흐름을 모르고도 개발은 가능하지만, 실무에서는 그 차이가 큽니다. 이 강의는 그 첫 출발점으로서, 전체 구조의 큰 그림을 잡는 데 초점을 둡니다.주요 내용프론트엔드와 백엔드의 개념 구분프론트엔드(Front-End): 사용자와 직접 마주하는 화면백엔드(Back-End / 서버): 데이터를 처리하고 응답하는 보이지 않는 처리부서버가 필요한 이유로그인, 회원가입, 게시글, 상품 등은 데이터가 저장되어야 재사용 가능비밀번호 같은 민감한 데이터는 클라이언트에서 다루면 보안 위험결제, 메일 발송, 파일 저장 같은 작업은 브라..

프론트엔드에서 서버는 어떤 역할을 할까? 연역법적 절차로 이해하기 – React와 Vue 개발자를 위한 요청·응답 흐름의 모든 것프론트엔드 개발을 시작하면 어느 순간 서버와의 연결이 필수임을 마주하게 됩니다. 특히 React나 Vue 같은 프레임워크를 사용할 때, 서버는 단순한 백엔드 기술이 아닌 전체 시스템을 연결하는 중추 역할을 합니다. 이 글에서는 서버의 역할을 연역법적 절차로 풀어보고, 이 내용을 강의안 구성으로까지 정리합니다.핵심 요약서버는 프론트엔드가 요청한 데이터를 검증하고, 저장하며, 돌려주는 역할을 합니다.React나 Vue 같은 프론트엔드는 사용자 인터페이스를 담당하지만, 서버 없이는 데이터를 안전하게 처리하거나 저장할 수 없습니다.서버는 데이터를 관리하는 중간 관리자이자 중앙 통제소입..

React에서 상태관리는 데이터의 상태(state)에 따라 UI를 자동으로 갱신(렌더링)하고 관리하는 구조와 행위 전체를 말합니다.즉, 사용자의 입력, 이벤트, 서버 응답 등으로 인해 데이터가 바뀌면 화면도 그에 맞게 바뀌어야 하며, React는 이 과정을 자동화합니다. 이 자동화를 가능하게 해주는 것이 바로 "상태(state)"이고, 이 상태를 효과적으로 관리하는 것이 상태관리입니다.데이터의 상태에 따라 UI를 관리하는 것이 바로 상태관리입니다.상태(state)란?React에서 상태는 화면에 영향을 주는 값입니다.단순히 숫자나 문자열이 있다고 해서 상태인 것이 아니라, 그 값이 useState, useReducer와 같은 리액트의 상태관리 훅을 통해 관리되고 추적 가능한 값이어야 비로소 상태라고 부릅니..

React란?React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. 상태(state)의 변화에 따라 화면을 동적으로 갱신할 수 있어 효율적인 웹 개발이 가능합니다.컴포넌트 (Component)UI를 구성하는 독립적 단위입니다. 하나의 페이지는 여러 개의 컴포넌트로 구성됩니다. 재사용성과 유지보수성을 높입니다.JSX (JavaScript XML)HTML처럼 보이는 JavaScript 문법입니다. React에서 UI를 선언적으로 작성할 수 있게 해줍니다.const title = Hello, React!;상태 (State)컴포넌트 내에서 관리되는 데이터입니다. 상태가 변경되면 해당 컴포넌트가 자동으로 리렌더링됩니다.const [count, setCount] = useState..

React Router란 무엇인가React Router는 SPA(Single Page Application)에서 페이지 이동을 쉽게 구현할 수 있게 도와주는 라이브러리입니다. 페이지를 새로고침하지 않고 URL만 바뀌면서 다른 화면을 보여줍니다.기본 개념BrowserRouter로 라우터 감싸기Route 컴포넌트로 경로 설정Link 컴포넌트로 페이지 이동주요 사용 위치/상황SPA에서 다중 페이지 UI 구현메뉴 클릭 시 화면 전환할 때구체적 코드 예시import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';function Home() { return 홈 페이지;}function About() { return 소개 페이지;}function ..

조건부 렌더링이란 무엇인가조건부 렌더링은 특정 조건에 따라 화면에 요소를 보여주거나 숨기는 것을 말합니다. React에서는 JavaScript의 if문이나 논리 연산자(&&, ||)를 활용합니다.기본 개념JSX 안에서 조건문 사용 가능&& 연산자를 사용해 조건 만족 시 렌더링삼항 연산자(?:)로 조건 분기 처리주요 사용 위치/상황로그인 상태에 따라 화면 다르게 보여주기데이터 존재 여부에 따라 UI 제어구체적 코드 예시function Greeting({ isLoggedIn }) { return ( {isLoggedIn ? 환영합니다! : 로그인 해주세요} );}핵심 요점 정리조건부 렌더링으로 유연한 UI 구현&&, 삼항 연산자 적극 활용상태값에 따른 화면 분기 처리 가능 💬 댓..

리스트란 무엇인가리스트는 여러 개의 데이터를 배열 형태로 화면에 나열하는 것을 말합니다. React에서는 배열의 각 항목을 컴포넌트로 렌더링하며, 각 항목에는 고유한 키(key)를 부여해야 합니다.기본 개념map() 함수를 이용해 배열 렌더링key는 각 항목을 구분하는 고유값key는 리액트가 효율적으로 업데이트하는 데 필요주요 사용 위치/상황게시글 목록, 댓글, 상품 리스트 등배열 데이터를 UI로 변환할 때구체적 코드 예시function TodoList() { const todos = ['청소하기', '공부하기', '운동하기']; return ( {todos.map((todo, index) => ( {todo} ))} );}핵심 요점 정리배열 데이터를 m..

이벤트 처리란 무엇인가이벤트는 사용자가 버튼 클릭, 키보드 입력, 마우스 이동 등으로 발생시키는 동작을 말합니다. React에서는 이벤트 핸들러 함수를 컴포넌트 내에 선언하여 처리합니다.기본 개념이벤트 이름은 camelCase (예: onClick)이벤트 핸들러에 함수 전달JSX에서 직접 이벤트 바인딩 가능주요 사용 위치/상황버튼 클릭 시 동작 수행입력 폼에서 사용자 입력값 처리사용자 인터랙션 기반 UI 제어구체적 코드 예시function Button() { function handleClick() { alert('버튼이 클릭되었습니다!'); } return 클릭;}핵심 요점 정리이벤트 이름은 camelCase 규칙 준수함수형 이벤트 핸들러 사용사용자 행동에 따라 UI 반응 처리 💬 댓글이번..

State란 무엇인가State는 컴포넌트 내부에서 변할 수 있는 데이터를 의미합니다. 예를 들어, 버튼을 눌렀을 때 숫자가 증가하거나 텍스트가 바뀌는 것처럼 사용자와 상호작용하는 데이터가 State입니다. State가 바뀌면 자동으로 화면이 다시 그려집니다.기본 개념React에서 상태 관리를 위해 useState 훅 사용상태 변경 시 컴포넌트가 다시 렌더링 됨State는 컴포넌트 내부에서 선언, 관리됨주요 사용 위치/상황사용자 입력 처리(폼, 버튼 클릭 등)화면에 동적으로 변하는 데이터를 표시할 때구체적 코드 예시import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( ..

Vite란 무엇인가Vite는 모던 프론트엔드 개발을 위한 도구입니다. 여기서 '번들러'란 여러 개의 JavaScript 파일을 하나로 합쳐주는 도구를 말하고, '모듈 핫 리로딩(HMR)'은 코드가 수정되었을 때 전체 페이지를 새로고침하지 않고도 수정된 부분만 실시간으로 반영해주는 기능입니다. Vite는 이러한 기능을 빠르고 효율적으로 제공합니다. 기존의 CRA(Create React App)보다 훨씬 가볍고 빠릅니다.기본 개념개발 시에는 ES Module 방식으로 동작빌드 시에는 Rollup을 활용한 번들링 제공React, Vue, Svelte 등 다양한 프레임워크 지원주요 사용 위치/상황빠른 개발 환경이 필요한 프로젝트React 기반 SPA 또는 MPA 개발 시CRA를 대체할 최신 개발 방식 도입 시구..

1회차: Vite와 React 소개 및 개발 환경 구축Vite란 무엇인가Vite vs CRA 비교Vite + React 프로젝트 생성 실습디렉토리 구조 이해2회차: React의 기본 문법과 JSX 이해JSX 문법 기본JSX에서 JavaScript 표현식 사용법Babel의 역할 간략 소개컴포넌트 기본 구조3회차: 컴포넌트의 구성과 분리함수형 컴포넌트 작성컴포넌트 파일 분리Props 전달과 재사용성실습: 사용자 카드 컴포넌트 만들기4회차: 이벤트 처리와 상태 관리 (useState)이벤트 핸들링 기초useState 훅의 기본 개념실습: 클릭 카운터 만들기컴포넌트 상태의 흐름 이해5회차: 조건부 렌더링과 리스트 렌더링조건부 렌더링 방식: if, 삼항연산자배열 map()을 통한 반복 출력key 속성의 중요성실습..