'홈' 731건

쇼핑 트렌드 보고서에는 인기 상품의 이미지도 삽입되어 있습니다. 이번에는 카테고리 메뉴 아래 개별의 상품의 미리보가 이미지를 캡처하는 코드를 작성해 봅시다. 상품 목록을 가리키는 CSS 셀럭터를 찾고, 이미지를 캡처하는 순서로 진행하겠습니다. 상품 목록 셀럭터 탐색비주얼 스튜디오 코드에서 'step_1_3_.py' 파일을 열고 실행 아이콘을 클릭하면, 크로미움 웹 브라우저와 인스펙터가 생성됩니다. '베스트상품' 페이지에서 크로미움 개발자 도구를 엽니다. 앞서 카테고리 셀렉터를 찾던 방식과 동일하게 상품 목록을 가리키는 셀렉터를 찾겠습니다. 01 검사 모드 아이콘을 클릭하고 상품의 미리보기 이미지를 클릭하세요. 02 개발자 도구의 [요소(Elements)] 탭에서 상품 이미지를 둘러싼 테그 구조를 태그 구..

이제 라우터 부분을 작성합니다. 라우터에서 몽고디비의 웹 소켓 모두에 접근할 수 있습니다.const express = require("express");const Room = require("../schemas/room");const Chat = require("../schemas/chat");const router = express.Router();router.get("/", async (req, res, next) => { try { const rooms = await Room.find({}); res.render("main", { rooms, title: "GIF 채팅방" }); } catch (error) { console.error(error); next(error); ..

기본 기능을 제공하는 코어 라이브러리를 사용해 보겠습니다. 아직 JSP에서는 변수 선언, 조건식, 반복문 기능은 자바 코드를 이용해서 구현합니다. 코어 라이브러리를 사용하면 이런 자바 기능을 태그로 대체할 수 있습니다. 톰캣에서는 JSTL 라이브러리를 기본으로 제공하지 않고 외부 라이브러리에서 가져와 기능을 수행합니다.따라서 자바의 import문처럼 코어 태그 라이브러리를 사용하려면 반드시 JSP 페이지 상단에 다음과 같이 taglib 디렉티브 태그를 추가해서 톰캣에게 알려주어야 합니다. 만약 선언하지 않으면 JSP 실행 시 오류가 발생합니다. 아래 표에 Core 태그 라이브러리의 기능을 수행하는 태그의 종류와 각각의 기능에 대해 정리했습니다. Core 태그 라이브러리 기능기능태그설명변수 지원JSP 페이..

동일한 역할과 이름을 가진 요소가 여러 개 있을 경우, 인스펙터의 코드 녹화 기능이 제대로 작동하지 않을 수 있습니다. 복잡한 HTML 요소를 찾을 때는 CSS 셀렉터를 사용해야 합니다.CSS는 HTML 요소를 디자인하는데 사용되며 CSS 셀렉터는 스타일일 적용할 특정 요소를 찾는 규칙을 의미합니다. 아래 표에서 몇 가지 중요한 CSS 셀렉터를 소개합니다. 참고로 표에 나오는 클래스는 HTML 태그의 class 속성 값으로 사용하는 CSS 셀럭터를 의미하며, 파이썬의 클래스와는 다른 개념입니다. CSS 주요 셀럭터 CSS 셀렉터 규칙 사용 예시 의미 태그 이름imgimg 태그 전체[태그 속성][href]href 속성이 있는 태그 전체[태그 속성="문자열"][role="button"]role 속성 값이..

방에 입장할 때와 퇴장할 때 채팅방의 다른 사람에게 '#12C6B8님이 입장하였습니다' 같은 시스템 메시지를 초대하려고 합니다. 그런데 사용자의 이름은 세션(req.session.color)에 들어있습니다. socket.IO에서 세션에 접근하려면 추가 작업이 필요합니다.Socket.IO도 미들웨어를 사용할 수 있으므로 express-session을 공유하면 됩니다. 추가로 채팅방 접속자가 0명일 때 제거하는 코드도 같이 넣어보겠습니다.const express = require("express");const path = require("path");const cookieParser = require("cookie-parser");const session = require("express-session");..

JSTL(JSP Standard Tag Library)이란 커스텀 태그 중 가장 많이 사용되는 태그를 표준화하여 라이브러리로 제공하는 것을 말합니다. JSTL에서는 여러 가지 태그를 지원하는데, 이를 표에 정리했습니다. 여러 가지 JSTL 태그 종류라이브러리세부 기능접두어관련 URI코어변수 지원, 흐름 제어, 반복문 처리, URL 처리chttp://java.sun.com/jsp/jstl/core국제화지역, 메시지 형식, 숫자 및 날짜 형식fmt http://java.sun.com/jsp/jstl/fmtXMLXML 코어, 흐름 제어, XML 변환x http://java.sun.com/jsp/jstl/xml데이터베이스SQLsql http://java.sun.com/jsp/jstl/sql함수컬렉션 처리, 문자..

이제 서버의 socket.js에 웹 소켓 이벤트를 연결합니다. websocket.jsconst SocketIO = require("socket.io");module.exports = (server, app) => { const io = SocketIO(server, { path: "/socket.io" }); app.set("io", io); // ❶ const room = io.of("/room"); // ❷ const chat = io.of("/chat"); room.on("connection", (socket) => { // ❸ console.log("room 네임스페이스에 접속"); socket.on("disconnect", () => { console.log("..

request, session, application 내장 객체에서는 데이터를 바인딩해서 다른 JSP로 전달합니다. 그런데 각 내장 객체에 바인딩하는 속성 이름이 같은 경우 JSP에서는 각 내장 객체에 지정된 출력 우선순위에 따라 순서대로 속성에 접근합니다. 이번에는 각 내장 객체에 같은 속성 이름으로 바인딩할 떄의 출력 우선순위를 알아보겠습니다.1. forward4.jsp를 다음과 같이 작성합니다. request에 address를 바인딩한 후 다시 member4.jsp로 포워딩합니다. 2. member4.jsp를 다음과 같이 작성합니다. session에 다시 동일한 속성 이름 address를 바인딩합니다. 만약 표현 언어로 address 값을 출력하면 session보다 request가 우선선위가 높으..

이번 절의 실습 목표는 쇼핑 트렌드 보고서를 작성하는 것입니다. 먼저, 트렌드 분석을 위한 데이터를 수집하기 위해 네이버플러스 스토어(https://shopping.naver.com/ns/home)에 접속하는 과정을 자동화하는 코드를 작성합니다. 다음 순서로 진행합니다. 1. 객체 playwright, Browser, Page를 생성하는 함수 run_playwright()를 실행합니다.2. Page 객체에 URL을 전달하여 네이버플러스 스토어에 접속합니다.3. playwright 인스펙터를 실행해 웹 브라우저의 동작을 일시 중지합니다. 비주얼 스튜디오 코드에서 새로운 파일을 생성하고, 파일명을 'step_1_2.py'로 지정하세요. 그리고 나서 다음 코드를 입력한 뒤 실헹 아이콘을 클릭하여 실행하세요.f..

채팅방 생성 화면을 담당하는 room.html 파일을 작성합니다.{% extends 'layout.html' %} {% block content %} 채팅방 생성 생성 {% endblock %} 채팅방 화면을 담당하는 chat.html 파일을 작성합니다.{% extends 'layout.html' %} {% block content %}{{title}}방 나가기 채팅 내용 {% for chat in chats %} {% if chat.user === user %} {{chat.user}} {% if chat.gif %} {% else %} ..

먼저 request, session, application 내장 객체에 바인딩된 속성 값을 표현 언어를 이용해 JSP에서 출력해 보겠습니다. 1. 첫 번째 JSP인 forward1.jsp를 다음과 같이 작성합니다. 브라우저에서 요청 시 request, session, application 내장 객체에 회원 정보를 바인딩한 후 다시 member1.jsp로 포워딩합니다. 2. 두 번째 JSP인 member1.jsp를 다음과 같이 작성합니다. 우선 첫 번째 방법으로 getAttribute() 메서드에 속성 이름을 인자로 하여 값을 가져옵니다. 그리고 두 번째 방법으로 표현 언어에서 자바 코드를 사용하지 않고 바로 속성 이름으로 회원 정보를 가져와 출력합니다. 아이디 비밀번호 ..

playwright는 웹 앱 테스트를 위한 패키지입니다. 테스트 외에도 앱에서 사용할 수 있는 강력한 자동화 도구를 제공하며, 데이터 수집, 웹 사이트 로그인, 댓글 작성, 예약 매매 등 자동화에도 폭넓게 사용됩니다. 여기서는 playweight의 코드 녹화 기능을 이용해서 웹상의 다양한 동작을 자동화해 볼것입니다.playweight는 구글의 오픈소스 웹 브라우저 크로미움(Chromium)을 기본으로 사용합니다. 크롬(Chrome)에 비해 다소 생소한 이름이지만 구글 크롬과 마이크로소프트 에지(Edge) 역시 크로미움을 기반으로 만든 브라우저이며, 새로운 기능이 추가될 때도 크로미움에 우선 적용한 뒤 안정성이 검증되면 크롬에 반영됩니다. 파이썬 패키지 준비하기pathlib 패키지pathlib 패키지를 ..