React3 Socket.io with React MVC 패턴 채팅 앱 | 15주차(3) 📂 오늘 배운 내용MVC 패턴 채팅앱을 위한 초기 세팅 가이드- useEffect내 socket 이벤트를 등록하는 이유 (feat. 컴포넌트 생애주기) React 컴포넌트 내 ID 사용을 지양해야 하는 이유그 외 기억할 내용 📝MVC 패턴 채팅 앱을 위한 초기 세팅 가이드클라이언트 (React)React에서는 socket.io를 CDN으로 불러오지 않고, npm을 이용해 설치한다.이번 프로젝트에서는 Bootstrap을 사용할 예정이므로 함께 설치 후 src/App.js에서 import 해준다. npx create-react-app clientnpm i socket.io-client bootstrap react-bootstrap// src / App.js import 'bootstrap/dist/css.. 2025. 2. 9. React Style 적용 방법 | 12주차 (2) 왜 React는 기존 방식이 아닌 다음과 같은 새로운 방법으로 스타일을 적용하는지 알아보자: 1. CSS module2. Styled components 라이브러리3. SASS 0. 기존의 방식# 기존 방식인라인 스타일: 자바스크립트 문법이라서 속성 이름 camelCase 이용해서 작성 css 파일 import 방식: 반드시 src 폴더 내부에 생성. 보통 컴포넌트와 같은 이름의 css 파일 생성 # 기존 방식을 사용하지 않는 이유:css 클래스 이름 중복 가능성이 높음app.js에 적용하면 전역적으로 적용되어 컴포넌트 기반 react에는 적합하지 않은 방식 1. CSS module# 특징리액트 내장 기능`이름.module.css` 확장자로 css 파일 생성자동으로 클래스명이 생성됨 # 클래스 여러 개 .. 2025. 1. 14. React Event Handling | 11주차 (3) React Event 주의 사항 { console.log(e); // React 이벤트 객체}} />// 함수에 인자가 없는 경우더하기// 함수에 인자 있는 경우 alertMSg('매직 패드 사고싶다!!')}>alert 출력 consoleMSg(e, '매직 패드 사고싶다!!')}>console 출력 1. 기본 DOM 요소(HTML 태그)에만 이벤트 설정 가능2. 리액트 이벤트는 SyntheticEvent로 wrapping* 된다. (아래 합성이벤트에서 설명)*wrapping: 기본 기능을 감싸는 새로운 기능 3. 사용자 정의 컴포넌트는 기본 DOM 요소가 아니기 때문에 직접적으로 이벤트 핸들러 부착 불가능 >예제 (더보기)더보기문제 상황>function MyComponent() { return My .. 2025. 1. 14. 이전 1 다음
