node.js4 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. Node.js MVC 패턴 로그인 기능, 방명록 만들기 회고 | 6주차(2) 📂 목차Node.js MVC : 로그인 기능 구현Node.js MVC with MySQL (실제 데이터베이스에 연결하기): 방명록 만들기POSTMAN 사용하기 (UI 없이 post, delete, patch 테스트하기) MVC는 소프트웨어 설계에서 자주 사용되는 디자인 패턴 중 하나로, 데이터를 처리하는 Model, 화면을 담당하는 View, 그리고 Model과 View를 연결하는 Controller의 앞글자를 따서 만들어진 이름이다. 🚀 로그인 기능13.mvc-practice 로그인 페이지 (동적Form MVC 패턴 적용) ver1, 2 `checkValidity()` if (!form.userId.checkValidity() || !form.userPw.checkValidity()) { .. 2024. 12. 3. Node.js Form 전송(get, post 요청) 과제 회고 | 5주차(1) Form 과제Form 유효성 검사정규표현식Form 태그의 onSubmit 속성 📌 Form 과제1개의 결과 페이지를 공통으로 사용하는 2개의 개인정보 입력 페이지를 만들었다.ejs 문법 작성이 익숙하지 않아서 자꾸 헤맨다. 물론 헤매는 이유가 그것만 있는 건 아니지만 하핳! [app.js]// 3. 주소 지정 form GET 요청app.get('/getPractice', (req, res) => { res.render('practice/practice-result', { title: '과제1', userInfo: req.query, addInfo: false, });});//4. 주소 지정 form POST 요청app.post('/postPractice', (req, res) =>.. 2024. 11. 27. Node.js 입문, Express 모듈 서버 만들기 | 4주차(2) 예전에 뭔지도 모르고 package.json 만들고, Npm으로 패키지 설치했는데 그게 다 Node.js 환경에서 작업한 거였다니??! 아무튼 오늘 배운 내용은 10개 중 9.5개가 다 처음 보는 거라 허둥지둥 따라가기 바빴다. ㅜㅜ 📜 1. Node.js 특징, 역할 2. NPM(Node Package Manager)사용법 : 패키지 설치 및 관리package.json : 프로젝트 및 의존성 관리. npm을 통해 설치된 패키지 정보 저장node_moudles와 gitignore : `npm install`명령으로 node_modules 복구3. 서버 만들기http 모듈 서버 만들기Express 모듈 서버 만들기템플릿 엔진(EJS) Express와 함께 사용하기미들웨어와의 연계📌 1. Node.js.. 2024. 11. 21. 이전 1 다음
