codingapple

Single Page Application(SPA) 구현 📱HTML 파일 1개만 사용페이지 전환 시 HTML 일부만 교체하여 새로고침 없이 부드러운 사용자 경험 제공예시: Naver Vibe, Flipkart, Instagram 등개발 효율성 증대 ⚙️HTML 재사용

Node.js 설치 🌐LTS 버전 설치 (ARM CPU 사용자는 ARM64 버전 다운로드)Chocolatey 설치는 불필요Visual Studio Code 설치 📝맥북과 윈도우 동일한 설치 과정작업용 폴더 생성바탕화면에 영문명으로 폴더 생성 권장OneDrive 내부

JSX는 React에서 HTML을 대체하는 문법으로, 기존 HTML/CSS 지식을 활용하여 웹페이지를 만들 수 있습니다. App.js가 메인 페이지이며, 여기서 레이아웃을 구성합니다.HTML의 class 대신 className을 사용이유: JSX가 JavaScript

이 강의는 React에서 버튼에 기능을 추가하고 state를 변경하는 방법을 다룹니다. 좋아요 버튼을 통해 실습해 봅니다.터미널이나 브라우저에 표시되는 노란색 warning은 개무시 가능eslint는 코딩 관습을 교정해주는 도구무시하려면 파일 최상단에 /\*eslint

이 강의는 React에서 배열(Array)과 객체(Object) 타입의 state를 올바르게 변경하는 방법에 대해 다룹니다. 특히 참조 타입 데이터의 특성과 불변성(Immutability) 원칙을 이해하는 것이 중요합니다.배열/객체는 메모리에 저장되고, 변수는 해당 위

이 강의는 React에서 복잡한 HTML 코드를 재사용 가능한 단위로 만드는 컴포넌트(Component) 문법에 대해 다룹니다. 모달창 UI를 예제로 컴포넌트의 개념과 활용법을 설명합니다.return() 내부에는 하나의 최상위 태그만 존재해야 함여러 요소를 나란히 배치

React에서 모달창, 탭, 서브메뉴 등의 동적인 UI를 만들기 위한 체계적인 접근법을 알아봅니다.HTML/CSS로 UI 디자인을 먼저 완성보이고 숨겨야 할 모든 요소를 미리 디자인UI의 현재 상태를 표현할 state 생성boolean, 숫자, 문자열 등 상황에 맞는

반복 실행: 배열 요소 개수만큼 코드 반복배열 요소 접근: 첫 번째 파라미터로 배열 요소 하나씩 전달새 배열 반환: return 값을 모아 새 배열 생성jsx 에서는 for 반복문 사용 불가위 코드는 <div>안녕</div>을 3번 반복 생성글제목 배열의 각

컴포넌트 간 데이터 전송: 자식 컴포넌트가 부모 컴포넌트의 state를 사용하려면 props로 전달해야 함 🔄변수 스코프 제한: 자바스크립트에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없음 🚫부모-자식 관계: React에서는 부모 컴포넌트에서 자식 컴포넌

클릭한 글의 제목이 모달창에 표시되게 하기0번 글 클릭 → 0번 글제목 표시1번 글 클릭 → 1번 글제목 표시모달창은 이미 디자인되어 있으므로 패스 ✅모달창에 표시할 글 번호를 state로 관리숫자형 state로 현재 보여줄 글의 인덱스 저장props.글제목\[titl

필요에 따라 다양한 타입의 input 사용 가능 🎛️onChange 또는 onInput: 입력값 변경될 때마다 코드 실행 📊다른 이벤트 핸들러: onMouseOver, onScroll 등 다양하게 존재 🖱️이벤트 객체 e를 통해 현재 입력값에 접근 📝e.targ

틀딱 자바스크립트 방식: "버튼 누르면 유저 입력 가져와서 HTML 생성" ❌리액트 방식: "버튼 누르면 유저 입력 가져와서 state에 추가" ✅리액트는 state를 변경하면 UI가 자동으로 업데이트되는 원리 활용 🔄새로고침 시 데이터가 사라지는 것은 정상 (브라우

예전 React 프로젝트를 읽고 이해하기 위해 필요 🔍레거시 코드를 유지보수할 때 필요한 지식 🛠️현재는 Function 컴포넌트 사용을 권장 ✅class 선언: class 컴포넌트명 extends React.Componentconstructor: 컴포넌트 초기화

웹브라우저는 HTML, CSS, JS만 해석 가능 💻React의 JSX, state 등은 브라우저가 직접 이해할 수 없음 ❌빌드 과정을 통해 브라우저 친화적인 파일로 변환 필요 🔄변환된 파일을 서버에 올려야 사용자가 접근 가능 🌐콘솔/터미널에 에러가 없어야 함 (

오늘부터 쇼핑몰 프로젝트를 새로 만들어봅시다! CSS 작성이 귀찮으니 React-Bootstrap 라이브러리를 사용해서 레이아웃을 쉽게 복사붙여넣기 방식으로 만들어보겠습니다.작업폴더에서 Shift + 우클릭 → PowerShell/터미널 열기터미널에 명령어 입력:프로젝

React는 자유로운 프레임워크로, 이미지를 넣는 방법도 여러 가지가 있습니다!메인페이지에 큰 배경 이미지를 넣어봅시다.HTML 구조:CSS 스타일링 (App.css):핵심: CSS 파일에서 src 폴더 안의 이미지를 사용할 때는 ./이미지경로 형식 사용HTML 안에서

상품목록을 컴포넌트로 만들기컴포넌트에 데이터바인딩하기반복적인 HTML에 map 반복문 사용하기중요: JSX를 export하는 컴포넌트용 파일은 .js 말고 .jsx로 만들어야 Vite 환경에서 잘 작동합니다! ⚠️실제 서비스에서는 서버에서 받아올 데이터를 미리 준비해봅

/detail로 접속하면 보여줄 상세페이지를 컴포넌트를 이용해서 만들어오십시오.중요: 컴포넌트용 파일은 .js 말고 .jsx 확장자로 지어야 Vite 환경에서 잘됩니다! ⚠️일반 HTML 사이트: HTML 파일 여러 개 = 여러 페이지React: HTML 파일 하나만

/event/one 페이지와 /event/two 페이지를 nested routes를 사용해서 만들어봅시다!React는 HTML을 이쁘게 만들어주는 작은 라이브러리일 뿐입니다. 만들 파일들의 95%가 .js 파일이므로 비슷한 .js 파일끼리 묶어서 폴더를 구성하면 됩니다

임시 텍스트만 있으면 밋밋하니까 실제 상품 정보를 넣어봅시다!App.js:Detail.js:props 사용 이유: Detail.js에서 shoes state를 또 만들면 나중에 두 군데 수정해야 해서 비효율적데이터 일관성 유지를 위해 props 사용 권장 ⚠️문제점:

Path Parameter: "무엇을" (리소스 식별) 🏷️Query String: "어떻게" (리소스 처리 방식) ⚙️리소스 자체를 식별할 때 사용합니다./page?type=product&id=123 /search?category=electronics \`\`

Detail 페이지 안에 노란 박스 하나 만들고, Detail 페이지 방문 후 2초 후에 박스가 사라지게 해보십시오.팁: 동적인 UI 어떻게 만든다고 했나요? 🤔컴포넌트도 인생이 있습니다! 사람처럼 태어나고, 살다가, 죽습니다.생성 (Mount) 🎂 - 컴포넌트가

Detail 페이지에서 2초 후 박스가 사라지게 만들기 🕐동적인 UI 만들 때의 기본 원칙:1\. UI 상태를 저장할 state 만들기 🔧2\. state에 따라 UI가 어떻게 보일지 작성하기 🎨alert state가 true면 노란박스 보임 ✅false면 안보임