목록

'전체 글' 740건

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

  • ws 모듈로 웹 소켓 사용하기
    프로그래밍 언어/NODE JS · 댓글
    연결 후에는 웹 소켓 서버(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 번역 기능 추가하기
    프로그래밍 언어/Python · 댓글
    DeepL 번역기를 활용하여 이미지에서 인식된 문자를 번역합니다. 웹 브라우저에서 DeepL(https://www.deepl.com)에 접속하고 직접 텍스트를 입력해 다른 언어로 번역해 보세요. 왼쪽 입력란에 텍스트를 입력하고 입력 언어를 선택한 다음, 오른쪽 출력란에 출력 언어를 선택하면 됩니다. DeepL API 사용하기DeepL 번역기를 활용해 와국어를 번역해 봅시다. API 서비슷를 사용하면 DeepL에 직접 접속하지 않아도 외국어 번역 서비스를 이용할 수 있어요. 01 DeepL에 접속하여 오른쪽 상단의 [무료 체험 시작하기] - [DeepL API] - [무료 회원가입] 메뉴를 통해 회원가입한 후, 화면 안내에 따라 'DeepL API Free' 서비스를 신청하세요, 이때 API의 부정 사용을..
  • ws 모듈로 웹 소켓 사용하기
    프로그래밍 언어/NODE JS · 댓글
    먼저 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 객체 사용 실습
    프로그래밍 언어/자바 웹 · 댓글
    pageContext 객체는 javax.servlet.jsp.PageContext 클래스를 상속해 웹 컨테이너가 JSP 실행 시 자동으로 생성해서 제공하는 내장 객체입니다. 이번에는 pageContext 객체의 편리한 기능을 사용해 보겠습니다. 태그를 이용해 다른 서블릿이나 JSP를 요청하는 방법은 다음의 두 가지입니다.첫 번째는 컨텍스트 이름을 직접 입력하는 방법입니다. 회원 가입하기 두 번째는 getContextPath() 메서드를 이용해 컨텍스트 이름을 가져오는 방법입니다./test01/memberForm.jsp">회원 가입하기 그런데 첫 번째 방법은 컨텍스트 이름이 바뀌면 일일이 찾아서 수정해야 한다는 단점이 있고, 두 번째 방법은 자바 코드가 사용되므로 화면 적업이 복잡해진다는 단점이 있습니다...
  • 문자 인식 웹 앱 만들기
    프로그래밍 언어/Python · 댓글
    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("✌ 만들면서 배우는 문자..

ws 모듈로 웹 소켓 사용하기

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

ws 모듈로 웹 소켓 사용하기

먼저 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 객체 사용 실습

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("✌ 만들면서 배우는 문자..