'홈' 731건

채팅 웹 메인 화면과 채팅방 등록 화면을 만들어보겠습니다. 채팅뿐만 아니라 채팅방도 실시간으로 추가되거나 제거됩니다.화면의 레이아웃을 담당하는 layout.html 파일을 작성하고 views/error.html을 수정합니다. views/layout.html {% block content %} {% endblock %} {% blockscript %} {% endblock %} views/error.html{% extends 'layout.html' %}{% block content %} {{message}} {{error.status}} {{error.stack}}{% endblock %} main.css를 추가하여 간단히 디자인합니다. public/m..

이번에는 표현 언어에서 has-a 관계를 가지는 빈의 자식 빈 속성에 접근하는 벙법을 알아보겠습니다.객체가 다른 객체를 속성으로 가지는 경우를 has-a 관계라고 합니다. 사용 형식은 다음과 같이 '속성 이름'과 .(마침표) 연산자로 자식 속성에 접근하면 됩니다.${부모빈이름.자식속성이름.속성이름}그러면 has-a 관계를 가지는 빈의 자식 속성에 접근하여 값을 출력하는 예제를 실습해 보겠습니다.1. sec01.ex02 패키지를 만들고 MemberBean 클래스의 Address 클래스를 준비합니다. 2. MemberBean 클래스를 다음과 같이 작성합니다. 이번에는 회원의 주소를 지정하는 Address 클래스 타입으로 선언된 addr을 속성으로 가집니다. 이처럼 속성으로 다른 자바 빈을 가지는 경우를 ha..

비주얼 스튜디오 코드에소 새로운 파일을 만들고, 파일명을 'step_3_4.py'로 작성한 후, 다음 코드를 입력하세요. 그러고 나서 터미널을 열고 'stream run ch_05/step_3_4.py'라고 입력하면 번역 기능으 추가된 문자 인식 웹 앱을 사용할 수 있습니다. from pathlib import Pathimport streamlit as stfrom step_1 import OUT_DIR # 이전에 작성한 모듈을 불라옵니다.from step_3_3 import OUT_3_3, read_text_and_fill_areast.title("✌ 만들면서 배우는 문자 인식 웹 앱") # 웹 앱 제목uploaded = st.file_uploader("인식할 이미지를 선택하세요.") # 웹 앱 제목..

사람들이 익명으로 생성하고 자유롭게 참여하면서 GIF 파일을 올릴 수 있는 채팅방을 만들어보겠습니다.몽고디비와 몽고디비 ODM인 몽구스를 사용할 것입니다. 몽구스를 설치한 후, 몽구스 스키마를 생성하겠습니다. 채팅방 스크마와 채팅 내역 스키마만 있으면 됩니다. 사용자는 익명이니 딱히 저장할 필요가 없습니다. 사용자의 이름은 랜덤 색상으로 구별하겠습니다.먼저 필요한 모듈을 설치합니다. 이미지를 업로드하고 서버에 HTTP 요청을 할 것이므로 multer와 axios를 같이 설치합니다. color-hash 모듈은 조금 전에 언급했던 랜덤 색상을 구현해주는 모듈입니다.$ npm i mongoose multer axios color-hash 먼저 채팅방 스키마를 만들어보겠습니다. schemas/room.jsco..

다음은 표현 언어에서 자바 HashMap에 저장된 객체에 접근하는 방법입니다.${HashMap 객체 이름.키이름} HashMap에 객체를 저장한 후 다시 출력해 보겠습니다.1. memberForm.jsp의 action 값을 member3.jsp로 수정합니다.2. member5.jsp를 다음과 같이 작성합니다. 전송된 회원 정보를 첫 번째 빈 m1 속성에 설정합니다. 태그를 이용해 HashMap 객체인 membersMap를 생성하고 membersMap에 회원 정보를 key/value로 저장합니다. memberMap에 ArrayList를 저장한 다음 membersMap에 key로 접근하여 value를 출력합니다. 아이디 비밀번호 이름 이메일 ${m..

이미지 위에 바운딩 박스를 그려 불투명한 색으로 채우고 그 위에 번역된 문자를 출력해 봅니다. pillow 패키지를 사용할 것입니다.비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_3_3.py'로 지정하세요. 다음 코드를 입력한 뒤 대화형 창에서 실행하세요. 이미지 위에 바운딩 박스와 번역 결과가 표시됩니다.from pathlib import Pathfrom PIL import Image, ImageDraw, ImageFont # 02from step_1 import IN_DIR, OUT_DIRfrom step_3_2 import read_text_translatedOUT_3_3 = OUT_DIR / f"{Path(__file__).stem}.jpg"PROB = 0.75def read..

이전 절의 ws 패키지는 간단하게 웹 소켓을 사용하고자 할 때 좋습니다. 하지만 구현하려는 서비스가 좀 더 복잡해진다면 Socket.IO를 사용하는 것이 편합니다. Socket.IO가 할 수 있는 일을 ws 패키지가 못한다는 뜻은 아닙니다. Socket.IO에 편의 기능이 많이 추가되어 있다는 뜻입니다.먼저 Socket.IO를 설치합니다.$ npm i socket.io@2 그리고 ws 패키지 대신 Socket.IO를 연결합니다. socket.jsconst SocketIO = require("socket.io");module.exports = (server) => { const io = SocketIO(server, { path: "/socket.io" }); io.on("connection", (so..

표현 언어에서 Collection 객체에 접근하는 방법을 알아보겠습니다. Collection 객체에 접근할 때는 다음과 같은 형삭울 사용합니다.${Collection(객체이름[index].속성이름} 지금부터 Collection 객체 중 가장 많이 사용하는 ArrayList에 회원 정보 빈을 작성한 후 다시 출력해 보겠습니다.1. memberbeanForm.jsp의 action 값을 member4.jsp를 수정합니다.2. 다음과 같이 member4.jsp를 작성합니다. 회원 가입창에서 전송된 회원 정보를 빈 m1에 저장한 후 다시 ArrayList에 작성합니다. 그리고 자바 코드를 두 번째 MemberBean 객체를 생성한 후 회원 정보를 설정하여 ArrayList에 저장합니다. 그리고 인덱스로 각 속성에..

소스 코드 'step_3_1.py'를 활용하여 외국어 번역 함수를 만들어 봅시다. 비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_3_2.py'로 지정하세요. 다음 코드를 입력한 후, 대화형 창에서 실행하면 문자 인식 결과가 한국어로 변역됩니다.from pathlib import Pathimport deeplfrom step_1 import IN_DIRfrom step_2_2 import read_textdef read_text_translated(path: Path) -> list: # 06 text_list = read_text(path) # 문자 인식 함수 # 07 DEEPL_KEY = "37d1c222-b030-40a9-86e2-8635b079ea62:fx" # DE..

연결 후에는 웹 소켓 서버(wss)에 이벤트 리스너를 붙입니다. 웹 소켓은 이벤트 기반으로 작동한다고 생각하면 됩니다. 실시간으로 데이터를 전달받으므로 항상 대기하고 있어야 합니다. connection 이벤트는 클라이언트가 서버와 웹 소켓 연결을 맺었을 때 발생합니다. req.headers['x-forwarded-for'] || req.connection.remoteAddress는 클라이언트의 IP를 알아내는 유명한 방법 중 하나이므로 알아두는 게 좋습니다. 익스프레스에서는 IP를 확인할 때, proxy-addr 패키지를 사용하므로 이 패키지를 사용해도 괜찮습니다. 로컬 호스트로 접속할 경우, 크롬에서는 IP가 ::1로 뜹니다. 다른 브라우저에서는 ::1 외의 다른 IP가 뜰 수 있습니다. 익스프레스 서..

표현 언어에서 빈 속성에 접근하는 방법을 알아보겠습니다. 빈의 속성에 접근힐 때는 다음과 같은 형식을 사용합니다.${빈이름.속성이름} 그럼 빈에 회원 정보를 저장한 후 표현 언어를 이용해 빈의 회원 정보를 출력해 보겠습니다.1. memberForm.jsp의 action 값을 member3.jsp로 수정합니다.2. 다음과 같이 member3.jsp를 작성합니다. 표현 언어에서는 getter를 사용하지 않고, 바로 빈 id 다음에 .(마침표) 연산자를 사용하여 속성에 바로 접근할 수 있습니다. 아이디 비밀번호 이름 이메일 ..

DeepL 번역기를 활용하여 이미지에서 인식된 문자를 번역합니다. 웹 브라우저에서 DeepL(https://www.deepl.com)에 접속하고 직접 텍스트를 입력해 다른 언어로 번역해 보세요. 왼쪽 입력란에 텍스트를 입력하고 입력 언어를 선택한 다음, 오른쪽 출력란에 출력 언어를 선택하면 됩니다. DeepL API 사용하기DeepL 번역기를 활용해 와국어를 번역해 봅시다. API 서비슷를 사용하면 DeepL에 직접 접속하지 않아도 외국어 번역 서비스를 이용할 수 있어요. 01 DeepL에 접속하여 오른쪽 상단의 [무료 체험 시작하기] - [DeepL API] - [무료 회원가입] 메뉴를 통해 회원가입한 후, 화면 안내에 따라 'DeepL API Free' 서비스를 신청하세요, 이때 API의 부정 사용을..