본문 바로가기

웹 개발40

36. React란 및 설치 1. 리액트(React)Facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며, 데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴퓨넌트를 정의 2. 라이브러리(library) vs 프레임워크(framework)라이브러리개발자가 필요할 때 함수 또는 모듈을 호출하여 사용하는 방식으로 동작애플리케이션의 전체 구조를 개발자가 직접 설계추가적인 기능을 제공하거나 특정 .. 2024. 5. 13.
35. Sequelize와 MongoDB 1. Sequelizenode.js에서 mysql 등 RDBMS를 쉽게 다룰 수 있도록 도와주는 라이브러리npm i sequelize2. MongoDBMongoDB는 NoSQL 데이터베이스로 문서 기반 데이터 저장 방식을 채택한 오픈소스 DBMS관계형 데이터베이스와는 달리 스키마가 없으며, BSON 형태로 데이터를 저장유연성이 좋고, 대규모 데이터 처리에 용이3. MongoDB AtlasMongoDB의 관계형 클라우드 데이터베이스 서비스관계형 데이터베이스와는 달리 스키마가 없으며, BSON 형태로 데이터를 저장유연성이 좋고, 대규모 데이터 처리에 용이 2024. 5. 9.
34. Socket.IO를 활용한 웹소켓 채팅 및 ORM vs ODM 비교 1. 환경 변수 관리로컬에서 개발 또는 서버에 배포할 때 db연결, 포트 설정, 시크릿 키 등 안전하게 관리하기 위한 환경 변수로 처리.env라는 파일에 환경 변수를 설정 npm i dotenv 2. HTTP 통신요청(request, 클라이언트)과 응답(reponse, 서버)으로 이루어짐클라이언트가 요청을 먼저하고 서버는 수동적으로 응답해주는 구조반이중통신3. 웹소켓(Web Socket)브라우저에서 지원하는 소켓통신실시간 네트워킹이 보장전이중통신웹소켓의 동작 원리최초 연결 요청 시 클라이언트에서 HTTP를 통해 웹서버에 요청    (핸드쉐이크, Handshake: Websocket 프로토콜로 전환)연결이 수립되면 클라이언트와 서버 양측간의 데이터 통신 단계가 시작양방향 통신(전이중통신)상대방에서 p.. 2024. 5. 8.
33. Express 리팩토링 & 유효성 검증 1. 리팩토링소프트웨어 개발 과정에서 코드를 재구성하여 가독성을 높이고 유지보수를 쉽게 만드는 과정코드의 구조를 개선하고 중복을 제거하여 더 나은 설계 패턴을 도입함으로 코드의 품질을 향상코드의 기능을 변경하지 않으면서 코드를 개선하는 방법express-validatorExpress.js를 사용하여 웹 어플리케이션을 개발할 때 입력 데이터의 유효성을 검사하기 위한 패키지설치npm i express-validatorisLength(): 문자열 길이 검증 app.get('/:email', [param('email').isLength({min:3}).withMessage('이메일을 입력하세요'), validate], (req, res, next) => { res.send('📧') }).. 2024. 4. 24.

티스토리툴바