CoalaCoding (Local Dev)

백엔드 로직없이 로컬스토리지에 간단히 구현하는 방법 https://codesandbox.io/p/devbox/tjkjny

리액트의 컴포넌트 전략 리액트 컴포넌트 전략은 재사용성, 유지보수성, 성능을 극대화하여 효율적으로 애플리케이션을 구축하기 위한 다양한 설계 원칙과 패턴을 의미합니다. 다음은 대표적인 리액트 컴포넌트 전략입니다. 1. 컴포넌트 분리 원칙 단일 책임 원칙(SRP, Single Responsibility Principle): 하나의 컴포넌트가 하나의 역할만 수행하도록 설계합니다. 예를 들어, 데이터 요청 로직과 UI 렌더링 로직을 분리하면 컴포넌트가 더 간결해지고 재사용성이 높아집니다. 원자적 디자인(Atomic … 더 읽기

1. 레시피 앱 소개 이번 클래스는 레시피를 소개하는 앱을 제작할 것이다. 이 리액트 앱에 사용된 기술 스택은 axios , react-router 등 이며 공공API를 연동하는 학습도 하게 될 것이다. 강의는 공공API 데이터를 연동하는 법과 리액트에서 컴포넌트 연결 및 라우터 설정에 촛점을 맞추므로 사용되는 자바스크립트 메서드 나 스타일링 관련 코드는 별도의 설명 없이 진행된다. 본 강의는 초심자를 대상으로 제작 … 더 읽기

1. 시작파일 파일다운로드 파일활용방법 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 시작 파일 #2. App 컴포넌트 비우기 ./src/App.js 컴포넌트를 깨끗하게 정리하자. App.js function App() { return <div className='App'></div>; } export default App; 1 2 3 4 5 index.js 수정 index.js import React from 'react'; import ReactDOM from 'reactdom/client'; import './index.css'; import App … 더 읽기

3차시 컴포넌트의 props 를 기억 할 것이다. props란 컴포넌트 간 주고받는 데이터이며 부모가 자식에게 전달할수 있다고 배웠다. 예시로 여러 친구를 초대하고 한 테이블 위 3개의 동일한 접시에 3종류의 각기 다른 음식을 전달하는 사례를 들어 설명하였다. 🔗 영상링크 18:29 그림 1 을 리액트 컴포넌트로 구현 할 경우 그림 2 의 구조가 될 것 이다. 햄버거,딸기,사과는 컴포넌트로 전달되는 props 즉 속성의 값이 … 더 읽기

Untitled https://www.geeksforgeeks.org/installation-guide/how-to-install-reactjs-on-windows/

1. React Event Listener 이벤트리스너 설명 onClick 마우스 클릭 이벤트를 처리합니다. onChange 인풋 필드나 셀렉트 박스와 같은 폼 요소 값이 변경될 때 발생합니다. onSubmit 폼이 제출될 때 발생합니다. onFocus 요소가 포커스를 받았을 때 발생합니다. onBlur 요소가 포커스를 잃었을 때 발생합니다. onKeyDown 키보드의 키를 누르는 이벤트를 처리합니다. onKeyUp 키보드의 키를 떼는 이벤트를 처리합니다. onScroll 스크롤 이벤트를 … 더 읽기