'홈' 731건

먼저 gif-chat이라는 새로운 프로젝트를 만듭니다.{ "name": "gif-chat", "version": "0.0.1", "description": "GIF 웹소켓 채팅방", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "Zero Cho", "license": "ISC", "dependencies": { "cookie-parser": "^1.4.4", "dotenv": "^8.2.0", "express": "^4.17.1", "express-session": "^1.17.0", "morgan": "^1.9.1", "nunjucks": "^3.2.0", "ws": "..

pageContext 객체는 javax.servlet.jsp.PageContext 클래스를 상속해 웹 컨테이너가 JSP 실행 시 자동으로 생성해서 제공하는 내장 객체입니다. 이번에는 pageContext 객체의 편리한 기능을 사용해 보겠습니다. 태그를 이용해 다른 서블릿이나 JSP를 요청하는 방법은 다음의 두 가지입니다.첫 번째는 컨텍스트 이름을 직접 입력하는 방법입니다. 회원 가입하기 두 번째는 getContextPath() 메서드를 이용해 컨텍스트 이름을 가져오는 방법입니다./test01/memberForm.jsp">회원 가입하기 그런데 첫 번째 방법은 컨텍스트 이름이 바뀌면 일일이 찾아서 수정해야 한다는 단점이 있고, 두 번째 방법은 자바 코드가 사용되므로 화면 적업이 복잡해진다는 단점이 있습니다...

streamlit 패키지를 사용해서 지금까지 실습만 문자 인식 프로그램을 웹 앱으로 만들어 보겠습니다. 웹 앱에 이미지 파일을 업로드하면, 함수 read_text_and_draw_line()을 사용해서 이미지 속 문자를 인식하고 바운딩 박스를 그린 결과를 출력한 것입니다. 웹 앱의 레이아웃을 간단히 그려 보면 다음과 같습니다.비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_2_4.py'로 지정한 후, 다음 코드를 입력하세요.from pathlib import Pathimport streamlit as stfrom step_1 import OUT_DIRfrom step_2_3 import OUT_2_3, read_text_and_draw_linest.title("✌ 만들면서 배우는 문자..

노드 생태계에서는 웹 소캣이란 말을 들으면 Socket.IO를 먼저 떠올리는 경우가 많습니다. 하지만 Socket.IO는 웹 소켓을 활용한 라이브러리일 뿐이며 웹 소켓 그 자체는 아닙니다. 나중에 Socket.IO를 사용하기 위해서는 기반 기술인 웹 소켓에 대해 먼저 알아야 합니다. 웹 소켓은 HTML5에 새로 추가된 스펙으로 실시간 양방향 데이터 전송을 위한 기술이며, HTTP와 다른 WS라는 프로토콜을 사용합니다. 따라서 브라우저와 서버가 WS 프로토콜을 지원하면 사용할 수 있습니다. 최신 브라우저는 대부분 웹 소켓을 지원하고, 노드에서는 ws나 Socket.IO 같은 패키지를 통해 웹 소켓을 사용할 수 있습니다. 웹 소켓이 나오기 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송을 구현했습니다...

이번에는 request 객체와 동일한 기능을 하는 requestScope를 사용해 보겠습니다. 1. 회원 가입창인 memberForm.jsp의 action 속성을 forward.jsp로 수정하고 회워 정보를 입력한 후 forward.jsp로 전송합니다. 2. forward.jsp를 다음과 같이 작성합니다. 회원 가입창의 requests 객체에 setAttribute() 메서드를 이용해 address를 바인딩한 후 다시 member2.jsp로 포위딩합니다. 3. member2.jsp를 다음과 같이 작성합니다. requestScope를 이용해 바인딩된 address를 접근해서 주소를 출력합니다. 아이디 비밀번호 이름 이메일 주소 ..

문자 인식 코드를 함수 read_text()로 만들아봅시다. 이 함수는 이미지 경로를 입력 받아서, 해당 이미지의 문자 인식 처리 결과를 반환하는 함수입니다. 비주얼 스튜디오 코드에서 새로운 파일을 생성하고, 파일명을 'step_2_2.py'로 지정하세요. 다음과 같이 코드를 코드를 입력한 뒤 대화형 창에서 실행하세요. 앞서 'step_2_1.py'에 실습한 것과 동일한 결과가 화면에 출력됩니다. 문자 인식 함수from pathlib import Pathimport easyocrfrom step_1 import IN_DiR # 이전에 작성한 모듈을 불러옵니다. def read_text(path: Path) -> list: reader = easyocr.Reader(["ko", "en"], ve..

회원 가입창에서 회원 정보를 입력하고 JSP로 전송하면 getParameter() 메서드를 이용하지 않고 param 내장 객체를 이용해 전송된 회원 정보를 출력하는 예제를 실습해 보겠습니다.1. WebContent 폴다 하위에 test01 폴더를 생성한 후 다음과 같이 여러 개의 JSP 파일을 준비합니다. 2. memberForm.jsp를 다음과 같이 작성합니다. 회원 가입창에서 회원 정보를 입력하고 member1.jsp로 전송합니다. 회원 가입창 아이디 비밀번호 이름 이메일 ..

OCR(Optical Character Recognition)은 해석하면 '광학 문자 인식'으로, 이미지에서 문자를 인식하여 추출하는 기술입니다. 이번 절에서는 easyocr 패키지를 사용해서 파이썬 코드로 OCR 기술을 구현해 볼 것입니다. easyocr은 네이버 클로바의 딥러닝 기술을 바탕으로 만든 파이썬 패키지입니다. 이 패키지는 영어를 비롯해 전 세계 80개 이상의 언어를 인식할 수 있습니다. easyocr은 두 단계를 거쳐 문자를 인식합니다. 1. 텍스트 감지: 이미지에서 텍스트가 있는 영역을 감지합니다.2. 문자 인식: 개별 문자를 인식하고 문자열로 변환합니다. 문자 인식 프로그램 만들기머신러닝과 딥러닝 등 인공지능 기술의 발달로 OCR 연구가 활발히 이뤄지고 있습니다. 딥러닝 기을을 바탕으로..

JSP는 기본적으로 내장 객체들을 제공하지만 이 객체들은 표현식에서만 사용할 수 있습니다. 따라서 표현 언어에서는 따로 내장 객체들을 제공합니다. 표현 언어에서 제공하는 내장 객체들을 ${} 안에서만 사용할 수 있습니다.표현 언어에서 제공하는 여러 가지 내장 객체들은 다음 표와 같습니다.구분내장 객체설명스코프pageScopeJSP의 page와 같은 기능을 하고 page 영역에 바인딩된 객체를 참조합니다.requestScopeJSP의 request와 같은 기능을 하고 request에 바인딩된 객체를 참조합니다.sessionScopeJSP의 session과 같은 기능을 하고 session에 바인딩된 객체를 참조합니다.applicationScopeJSP의 application과 같은 기능을 하고 applica..

사용자의 눈에는 보이지 않지만, 웹 브라우저에 페이지를 불러오려면 웹 서버에서 제공하는 데이터인 리소스가 필요합니다. 사용자가 URL을 입력하면 웹 브라우저가 웹 서버에 리소스를 요청하는데, 이때 특정 규칙에 따라 요청 메시지를 작성해야 하며, 이 규칙을 HTTP라고 합니다. 01 웹 브라우저는 서버에 HTTP 요청 메시지를 전달합니다. 02 웹 서버는 브라우저가 보낸 HTTP 요청 메시지를 분석합니다. 요청 메시지가 HTTP 규칙에 따라 잘 작성되었는지, 정당한 요청 권한이 있는지, 요청한 리소스가 웹 서버에 존재하는지 등을 확인하고, 그 결과에 따라 적절한 응답 메시지를 웹 브라우저에 전달합니다. 이렇게 서버가 작성한 응답 메시지를 HTTP 응답 메시지라고 합니다. 03 웹 브라우저는 HTTP 응답 ..

empty 연산자는 자바 빈의 속성이 값으로 설정되었는지 또는 List, Map 같은 저장 객체에 값(객체)이 존재하는지를 판단하는 연산자입니다.1. elTest5.jsp를 다음과 같이 작성합니다. 액션 태그로 생성한 빈 m1은 생성 후 name 속성에 값을 설정했기 때문에 empty 연산자를 적용하면 false를 반환합니다. 액션 태그로 생성한 m2는 생성 후 아무 값도 작성하지 않았기 때문에 empty 연산자를 적용하면 true를 반환합니다. empty 연산자 \${empty m1 } : ${empty m1 } \${not empty m1 } : ${not empty m1 } \${empty m2 } : ${empty m2 } \${not empty m2} : ${..

구글의 크롬(Chrome), 마이크로소프트의 엣지(Edge), 애플의 사파리(Safri) 등 웹 브라우저(Web browser)는 인터넷 웹사이트에편리하게 접속하기 위한 프로그램입니다.대부분 웹 브라우저에는 웹 사이트의 개발 및 디버깅을 돕기 위해 개발자 도구(develop tool)라는 강력한 도구 모음이 내장되어 있습니다. 브라우저와 서버의 양방향 통신 기록을 열람할 수 있으며, 개발자 도구의 검사 모드를 사용하면 웹 문서의 HTML 요소를 분석할 수도 있습니다. 실습 환경 준비하기이번 절의 실습에 필요한 가상환경을 구축하고 외부 패키지를 터미널에서 설치합니다. 가상환경 초기화easyocr 패키지는 PyTorch를 바탕으로 제작되었고, 2024년 12월을 기준으로 PyTorch는 파이썬 3.12.x ..