꽃 같은 인생 https://dmswl6304.tistory.com/ 디자인과 졸업생의 웹 개발자 도전기 ko Sun, 26 Jul 2026 14:32:57 +0900 TISTORY 100 flo-jee 꽃 같은 인생 https://tistory1.daumcdn.net/tistory/7544990/attach/d9546f0b4f1a47f0934cf7dbf289f4ce https://dmswl6304.tistory.com React&Redux ✨ React - 상태관리 심화 https://dmswl6304.tistory.com/13 React 전역 상태관리 개념 정리 노트 1. 전역 상태관리의 장점 리액트는 대표적인 SPA라이브러리이고 SPA구현방법은 상태변경 → 리렌더링 이기에 상태를 잘 관리 하는 것이 매우 중요하다. 리액트 전역 상태 관리 개념 리액트 전역 상태 관리는 여러 컴포넌트 간 데이터 공유를 효율적으로 처리하는 방법. 로컬 상태(useState)로는 관리하기 어려운 글로벌 데이터(예: 사용자 정보, 테마 설정, 로그인 상태 등)를 전역에.. flo-jee https://dmswl6304.tistory.com/13 https://dmswl6304.tistory.com/13#entry13comment Thu, 27 Feb 2025 22:03:39 +0900 React&Redux ✨ React - 스타일링 https://dmswl6304.tistory.com/12 SCSS 개념 및 활용 노트 1. SCSS 개념 SCSS(Sassy CSS)는 Sass(Syntactically Awesome Stylesheets)의 문법 중 하나로, CSS와 호환되는 확장된 문법을 제공해. SCSS는 CSS보다 더 강력한 기능(⭐️ 변수, 중첩, 재사용 등)을 지원하여 스타일링 작업을 효율적이고 유지보수하기 쉽게 만들어준다. SCSS의 장점: 코드 재사용성 증가 유지보수 용이 가독성 높은 구조화된 .. oz코딩스쿨/React&Redux flo-jee https://dmswl6304.tistory.com/12 https://dmswl6304.tistory.com/12#entry12comment Thu, 27 Feb 2025 21:59:09 +0900 HTML&CSS HTML5 & CSS3 정리 노트 https://dmswl6304.tistory.com/11 HTML5 & CSS3 정리 노트 HTML5와 CSS3는 최신 웹 표준으로, 보다 효율적이고 의미론적인 마크업과 스타일링을 제공한다. HTML5 마크업 정리 HTML5의 기본 구조 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic.. oz코딩스쿨/HTML, CSS flo-jee https://dmswl6304.tistory.com/11 https://dmswl6304.tistory.com/11#entry11comment Wed, 12 Feb 2025 22:03:17 +0900 HTML&CSS HTML5 마크업 언어 정리 https://dmswl6304.tistory.com/10 HTML5 마크업 언어 정리 HTML5는 최신 웹 표준으로, 보다 효율적이고 의미론적인 마크업을 제공한다. HTML5의 기본 구조 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .. oz코딩스쿨/HTML, CSS flo-jee https://dmswl6304.tistory.com/10 https://dmswl6304.tistory.com/10#entry10comment Wed, 12 Feb 2025 21:36:22 +0900 React 6. React 컴포넌트 생명주기, Hooks https://dmswl6304.tistory.com/9 React 컴포넌트 생명주기 (Lifecycle) 정리 1️⃣ 컴포넌트 생명주기란? React 컴포넌트는 탄생(Mount) → 업데이트(Update) → 소멸(Unmount) 과정을 거칩니다. 클래스형 컴포넌트에서는 생명주기 메서드를, 함수형 컴포넌트에서는 useEffect()를 사용하여 특정 시점에 작업을 수행할 수 있습니다. ✅ 컴포넌트 생명주기 주요 과정 마운트(Mount): 컴포넌트가 처음 생성되어 화면에 나타날 때 .. oz코딩스쿨/React&Redux flo-jee https://dmswl6304.tistory.com/9 https://dmswl6304.tistory.com/9#entry9comment Wed, 12 Feb 2025 20:05:05 +0900 React 5. React의 상태 변경, 조건부 렌더링, Router https://dmswl6304.tistory.com/8 React의 상태 변경 (State Update) 개념 정리 1️⃣ React에서 상태(State)란? *State(상태)**는 React 컴포넌트 내부에서 관리하는 변경 가능한 데이터입니다. 상태가 변경되면 자동으로 해당 컴포넌트가 다시 렌더링됩니다. ✅ React에서 State의 특징 useState() 훅을 사용하여 선언 상태가 변경되면 자동으로 UI가 업데이트됨 직접 변경(state = newValue)할 수 없으며, setState.. oz코딩스쿨/React&Redux flo-jee https://dmswl6304.tistory.com/8 https://dmswl6304.tistory.com/8#entry8comment Wed, 12 Feb 2025 20:04:05 +0900 React 4. MPA와 SPA, Props와 State https://dmswl6304.tistory.com/7 MPA(Multi Page Application) 개념 정리 1️⃣ MPA란? *MPA(Multi Page Application, 다중 페이지 애플리케이션)**는 사용자가 새로운 페이지로 이동할 때마다 서버에서 새로운 HTML 파일을 로드하는 웹 애플리케이션 구조입니다. ✅ 기본 개념: 사용자가 요청할 때마다 서버에서 새로운 HTML, CSS, JavaScript 파일을 다운로드 페이지 이동 시 전체 페이지가 새로고침됨 과거 웹사이트에서 .. oz코딩스쿨/React&Redux flo-jee https://dmswl6304.tistory.com/7 https://dmswl6304.tistory.com/7#entry7comment Wed, 12 Feb 2025 20:02:25 +0900 React 3. JSX란? https://dmswl6304.tistory.com/6 JSX란? JSX (JavaScript XML)은 React에서 UI를 구성할 때 사용하는 문법 JavaScript 코드 안에서 HTML과 비슷한 문법을 사용할 수 있도록 도와준다. JSX는 JavaScript의 확장 문법이라서 브라우저가 직접 이해하지 못하지만, Babel 같은 트랜스파일러가 JavaScript로 변환해 주기 때문에 문제없이 사용할 수 있다! JSX의 기본 문법 1. HTML처럼 보이지만 JavaScript! const.. oz코딩스쿨/React&Redux flo-jee https://dmswl6304.tistory.com/6 https://dmswl6304.tistory.com/6#entry6comment Wed, 12 Feb 2025 20:00:40 +0900 React 2. React 첫걸음 https://dmswl6304.tistory.com/5 React 첫걸음! React가 뭔지 알아보기 React는 페이스북(메타)에서 만든 프론트엔드 라이브러리야. 컴포넌트 기반으로 재사용이 쉽고, 가상 DOM을 사용해서 빠르게 동작해! React 개발 환경 설정하기 Node.js가 설치되어 있어야 해! (혹시 설치 안 했다면, 도와줄게! ) create-react-app 또는 Vite로 React 프로젝트를 만들 수 있어. 프로젝트 생성 후, npm start로 실행하면 웹 브라우저에서 확인.. oz코딩스쿨/React&Redux flo-jee https://dmswl6304.tistory.com/5 https://dmswl6304.tistory.com/5#entry5comment Wed, 12 Feb 2025 20:00:07 +0900 React 1. Node.js, nvn, npm, npx 개념 정리 https://dmswl6304.tistory.com/4 Node.js  Node.js가 등장한 이유 과거에는 JavaScript가 브라우저에서만 실행되었어! 즉, 클라이언트(사용자의 웹 브라우저)에서만 동작하는 언어였지. 그런데, 개발자들은 JavaScript를 서버에서도 실행하고 싶어 했어! 왜냐하면: 프론트엔드 & 백엔드 통합 → JavaScript 하나로 웹사이트 전체 개발 가능! 빠른 처리 속도 → 기존 서버 언어(PHP, J.. oz코딩스쿨/React&Redux flo-jee https://dmswl6304.tistory.com/4 https://dmswl6304.tistory.com/4#entry4comment Wed, 12 Feb 2025 19:53:37 +0900