목록

'전체 글' 740건

코드로 놀고, 언어로 성장하는 공방.

  • 실시간 GIF 채팅방 만들기(3)
    프로그래밍 언어/NODE JS · 댓글
    채팅방 생성 화면을 담당하는 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() 메서드에 속성 이름을 인자로 하여 값을 가져옵니다. 그리고 두 번째 방법으로 표현 언어에서 자바 코드를 사용하지 않고 바로 속성 이름으로 회원 정보를 가져와 출력합니다. 아이디 비밀번호 ..
  • 웹상의 동작 자동화하기
    프로그래밍 언어/Python · 댓글 1
    playwright는 웹 앱 테스트를 위한 패키지입니다. 테스트 외에도 앱에서 사용할 수 있는 강력한 자동화 도구를 제공하며, 데이터 수집, 웹 사이트 로그인, 댓글 작성, 예약 매매 등 자동화에도 폭넓게 사용됩니다. 여기서는 playweight의 코드 녹화 기능을 이용해서 웹상의 다양한 동작을 자동화해 볼것입니다.playweight는 구글의 오픈소스 웹 브라우저 크로미움(Chromium)을 기본으로 사용합니다. 크롬(Chrome)에 비해 다소 생소한 이름이지만 구글 크롬과 마이크로소프트 에지(Edge) 역시 크로미움을 기반으로 만든 브라우저이며, 새로운 기능이 추가될 때도 크로미움에 우선 적용한 뒤 안정성이 검증되면 크롬에 반영됩니다. 파이썬 패키지 준비하기pathlib 패키지pathlib 패키지를 ..
  • 실시간 GIF 채팅방 만들기(2)
    프로그래밍 언어/NODE JS · 댓글
    채팅 웹 메인 화면과 채팅방 등록 화면을 만들어보겠습니다. 채팅뿐만 아니라 채팅방도 실시간으로 추가되거나 제거됩니다.화면의 레이아웃을 담당하는 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 관계라고 합니다. 사용 형식은 다음과 같이 '속성 이름'과 .(마침표) 연산자로 자식 속성에 접근하면 됩니다.${부모빈이름.자식속성이름.속성이름}그러면 has-a 관계를 가지는 빈의 자식 속성에 접근하여 값을 출력하는 예제를 실습해 보겠습니다.1. sec01.ex02 패키지를 만들고 MemberBean 클래스의 Address 클래스를 준비합니다. 2. MemberBean 클래스를 다음과 같이 작성합니다. 이번에는 회원의 주소를 지정하는 Address 클래스 타입으로 선언된 addr을 속성으로 가집니다. 이처럼 속성으로 다른 자바 빈을 가지는 경우를 ha..
  • 번역 기능이 추가된 문자 인식 웹 앱 만들기
    프로그래밍 언어/Python · 댓글
    비주얼 스튜디오 코드에소 새로운 파일을 만들고, 파일명을 '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 채팅방 만들기(3)

채팅방 생성 화면을 담당하는 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 패키지를 ..

실시간 GIF 채팅방 만들기(2)

채팅 웹 메인 화면과 채팅방 등록 화면을 만들어보겠습니다. 채팅뿐만 아니라 채팅방도 실시간으로 추가되거나 제거됩니다.화면의 레이아웃을 담당하는 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 관계라고 합니다. 사용 형식은 다음과 같이 '속성 이름'과 .(마침표) 연산자로 자식 속성에 접근하면 됩니다.${부모빈이름.자식속성이름.속성이름}그러면 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("인식할 이미지를 선택하세요.") # 웹 앱 제목..