목록

'홈' 731건

  • 포매팅 태그 라이브러리 사용 실습
    프로그래밍 언어/자바 웹 · 댓글
    1. 다음과 같이 formatTest.jsp 파일을 준비합니다. 2. 다음과 같이 formatTest.jsp를 작성합니다. 변수 price를 태그를 이용해 숫자를 포맷팅하고 price 값을 각각의 형식에 맞게 출력합니다. 이때 price의 값을 새 자리마다 콤마(,)로 구분해서 표시합니다. 단, groupingUsed를 false로 설정한 경우는 콤마(,)를 표시하지 않으며 태그의 var 속성에 설정한 priceNumber로 포매팅한 숫자를 표현 언어에서 출력합니다. fmt의 number 태그를 이용한 숫자 포맷팅 예제. 통화로 표현 시 : 퍼센트로 표현 시 : 일반 숫자로 표현 시 : ${priceNumber} for..
  • 연관 키워드 경쟁 강도 분석 및 웹 앱 만들기
    프로그래밍 언어/Python · 댓글
    streamlit 패키지를 사용해서 지금까지 분석한 연관 키워드 경쟁 강도 분석 데이터를 웹 앱으로 만들어 봅시다.비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_3_1.py'로 저장하세요. 다음 코드를 입력한 후, 비주얼 스튜디오 코드에서 터미넣을 열고, 'streamlit run ch_08/step_3_1.py' 명령어로 웹 서버를 실행합니다.ch_08/step_3_1.pyimport pandas as pdimport streamlit as stfrom step_2_1 import rel_kwd_to_csv # 이전에 작성한 모듈을 불러옵니다.from step_2_2 import data_cleaningfrom step_2_3 import shop_cnt_to_csvfrom ste..
  • 카드 뒤집기 게임에 보안 챙기기
    바이브 코딩/Cursor AI · 댓글
    01 커서에게 다음과 같이 요청합니다. 그러면 관련 내용을 인지하고 중요한 설정 정보를 환경변수라는 것으로 분리하겠다고 할 겁니다. 이렇게 환경변수로 분리하면 중요한 정보는 로컬에만 남고, 깃허브와 같은 온라인 저장소에는 업로드하지 않게 됩니다. 보안에 유출되지 않도록 수파베이스 접근 키 관련 내용을 분리해줘. 프로젝트 폴더에서 다음과 같이 파일이 분리된 것을 확인했다면 보안을 챙긴 카드 뒤집기 게임 프로젝트가 거의 완성된 것입니다. 02 이제 분리된 상태로 깃허브에 올려 이력을 덮으면 됩니다. 현재 폴더의 파일 목록을 보면 .gitignore라는 파일이 있습니다. 이 파일은 깃허브에 올리면 안 되는 파일을 기록해두는 곳입니다. 03 확인을 완료했다면 이제 깃허브에도 반영해야겠죠? 커서에게 반영된 내용..
  • commander, inquirer 사용하기(2)
    프로그래밍 언어/NODE JS · 댓글
    commander가 기본적으로 제공하는 옵션인 -v와 -h를 입력해보겠습니다.$ cli -v$ cli -h$ npx cli template -h$ npx cli template 명령어에 -h 옵션을 붙이면 명령어 설명서가 나옵니다. 조금 전에 usage나 name, description, option 메서드에 적었던 설명이 그대로 표시됩니다.cli template 명령어를 입력했을 때는 필수 요소인 을 빠뜨렸으므로 에러를 표시합니다. 이렇게 설명과 에러 검증을 자동으로 해줘서 편리합니다.이제 실제로 동작하는 코드를 작성해보겠습니다. template.js의 코드를 대부분 가져옵니다.#!/usr/bin/env nodeconst { program } = require("commander");const fs =..
  • 리더보드가 있는 카드 뒤집기 게임 만들기
    바이브 코딩/Cursor AI · 댓글
    01 먼저 빈 폴더를 커서로 연 다음, 간단한 계획을 새우며 시작해봅시다. 커서에게 Sequential Thinking Tools를 활용하여 개발 계획을 세워보라고 합니다. 가장 간단한 웹 기술로 카드 뒤집기 게임을 만들 거야. Sequential Thinking으로 잘 생각해서 개발 계획을 세워봐. 데이터베이스는 Supabase를 사용할 생각이야. 02 이후 작업은 커서의 안내를 따라 설계부터 프로토타입 작성까지 진행하면 됩니다. 여기서는 커서에게 구현까지 쭉 진행하라고 지시했습니다.그래 구현 까지 쭉 진행해 03 중간 프로토타입 구현이 끝나면 게임을 한 번 실행해보라고 합니다. 실제로 실행했을 때 이상이 없는지 확인합니다. 04 문제가 없다면 수파베이스의 데이터베이스 구조를 설계하고 연동까지 마무..
  • 포매팅 태그 라이브러리
    프로그래밍 언어/자바 웹 · 댓글 1
    JSTL 포매팅 라이브러리를 사용하면 쉽게 원하는 형태로 숫자, 날짜, 문자열을 표시할 수 있습니다.숫자 또는 날짜와 관련된 포매팅 태그 라이브러리의 종류입니다. 포매팅 태그 라이브러리 종류분류태그설명포매팅둘 다 지정한 국가의 시간을 지정하는 태그입니다. 그러나 태그의 경우 태그를 열고 닫는 영역 안에서만 적용된다는 차이점이 있습니다.표시할 숫자의 형식을 지정합니다.지정한 형식의 날짜를 표시합니다. 그리고 각각의 포매팅 태그 라이브러리들은 여러가지 속성을 가집니다. 태그의 여러 가지 속성속성설명value출력될 숫자를 지정합니다.type출력된 타입을 지정합니다. percent인 경우 %, number인 경우 숫자, currency인 경우 통화 형식으로 출력됩니다.dateStyle날짜의 출력 형식을 지정..
  • Supabase MCP Server 설치하고 데이터베이스 사용하기
    바이브 코딩/Cursor AI · 댓글
    01 수파베이스 MCP를 사용하려면 먼저 수파베이스 홈페이지에서 회원가입 후 액세스 토큰을 발급받아야 합니다. 커서는 이 액세스 토큰을 이용해 웹에 있는 수파베이스에 접근하고, 데이터를 읽거나 쓰는 등 다양한 조작을 할 수 있습니다. 다음의 수파베이스 홈페이지에 들어가 회원가입 후 로그인을 한 다음 프로필 아이콘에서 [Account preferences]를 누릅니다.수파베이스 홈페이지: https://supabase.com/ Supabase | The Postgres Development Platform.Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, ..
  • Context7 설치하고 간단한 카드 뒤집기 게임 만들어보기
    바이브 코딩/Cursor AI · 댓글
    01 Context7은 Sequential Thinking과 마찬가지로 동일한 방식으로 설치하면 됩니다. 별 어려움이 없으니 설치가 완료된 후 커서 설정에서 MCP Tools의 해당 MCP에 초록불이 제대로 들어오는지 꼭 확인하기 바랍니다.스미더리 Context7 설치 링크: https://smithery.ai/servers/upstash/context7-mcp 02 프롬프트에 'use Context7' 또는 'Context7을 사용해서~'라는 내용을 넣으면 Context7을 사용할 수 있습니다. 이렇게 하면 LLM 특유의 기존에 학습한 데이터로만 답변하거나 코딩하는 것이 아니라, 최신 문서를 기반으로 코드를 작성하므로 오류가 크게 줄어듭니다. 그럼 커서에게 최신 문서만 참고해서 간단한 카드 뒤집기 게임..
  • 연관 키워드 경쟁 강도 분석하기 - 키워드별 경쟁 강도 분석하기
    프로그래밍 언어/Python · 댓글 1
    키워드별 상품 개수 수집비주얼 스튜디오 코드에서 새로운 파일을 생성하고, 파일명을 'step_2_3.py'로 저장합니다. 다음 코드를 입력한 후, 대화형 창에서 실행하면, 'output' 폴더에 키워드별 상품 개수가 포함된 'step_2_3.csv' 파일이 생성됩니다. ch08/step_2_3.pyimport timefrom pathlib import Pathimport pandas as pdfrom tqdm import tqdm # 진행 표시줄 관리를 위한 tqdm 클래스from step_1_1 import OUT_DIR # 이전에 작성한 모듈을 불러옵니다.from step_1_2 import query_naver_shopfrom step_2_2 import OUT_2_2OUT_2_3 = OUT_DIR..
  • MCP 설치를 위한 스미더리 회원가입
    바이브 코딩/Cursor AI · 댓글
    MCP는 스미더리라는 사이트에서 설치할 수 있습니다. 스미더리를 잘 이용하면 유용한 MCP를 쉽게 찾을 수 있을 뿐만 아니라 설치도 쉽게 할 수 있습니다. 01 스미더리에 접속하면 다음 화면이 보입니다. 오른쪽 위에 있는 [Login]을 누르세요. 그러면 깃허브와 구글로 로그인하라는 안내창이 뜹니다. [Continue with Github]를 눌러 깃허브 계정을 이용하여 로그인을 진행하겠습니다. 만약 깃허브 계정이 없다면 회원가입 후 여기로 돌아오세요.스미더리 홈페이지: https://smithery.ai/ 02 깃허브로 로그인한 후에 가장 먼저 할일은 자신의 계정 아이콘을 누르고 [Profile & API Keys]에서 스미더리 API 키를 생성하는 것입니다. 여기서 사용할 API 키는 코드에 사용할 ..
  • commander, inquirer 사용하기(1)
    프로그래밍 언어/NODE JS · 댓글
    commander를 사용하여 예제 프로그램을 제작합니다. commander와 더불어 CLI 프로그램과 사용자 간의 상호작용을 돕는 inquirer 패키지, 콘솔 텍스트에 스타일을 추가하는 chalk 패키지도 함께 사용합니다.commander와 inquirer, chalk을 설치합니다.$ npm i commander@5 inquirer chalk 프로그램을 commander와 inquirer로 재작성할 것입니다. 먼저 commander 사용법부터 간단히 알아봅시다.#!/usr/bin/env nodeconst { program } = require("commander");program.version("0.0.1", "-v, --version").name(cli);program .command("templa..
  • JSP 페이지에 다국어 표시하기
    프로그래밍 언어/자바 웹 · 댓글
    1. 먼저 프로젝트의 WebContent 폴더에 test05 폴더를 만든 후 message1.jsp 파일을 저장합니다. 2. message1.jsp 파일을 다음과 같이 작성합니다. 태그를 이용해 표시할 locale(언어)을 지정한 후 태그를 이용해 resource 패키지의 프로퍼티 파일을 읽어옵니다. 그리고 태그를 이용해 프로펴티 파일의 키(key)에 대한 값을 각각 출력합니다. --%> 회원정보 이름: 주소: 직업: 3. http://localhost:8080/pro14/test05/message1.jsp로 요청합니다. 최초 요청 시 한글로 회원 정보를 출력합니다. 4. message1.jsp에서 한글 locale을 주석 처리하고 영어 locale..

포매팅 태그 라이브러리 사용 실습

1. 다음과 같이 formatTest.jsp 파일을 준비합니다. 2. 다음과 같이 formatTest.jsp를 작성합니다. 변수 price를 태그를 이용해 숫자를 포맷팅하고 price 값을 각각의 형식에 맞게 출력합니다. 이때 price의 값을 새 자리마다 콤마(,)로 구분해서 표시합니다. 단, groupingUsed를 false로 설정한 경우는 콤마(,)를 표시하지 않으며 태그의 var 속성에 설정한 priceNumber로 포매팅한 숫자를 표현 언어에서 출력합니다. fmt의 number 태그를 이용한 숫자 포맷팅 예제. 통화로 표현 시 : 퍼센트로 표현 시 : 일반 숫자로 표현 시 : ${priceNumber} for..

연관 키워드 경쟁 강도 분석 및 웹 앱 만들기

streamlit 패키지를 사용해서 지금까지 분석한 연관 키워드 경쟁 강도 분석 데이터를 웹 앱으로 만들어 봅시다.비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_3_1.py'로 저장하세요. 다음 코드를 입력한 후, 비주얼 스튜디오 코드에서 터미넣을 열고, 'streamlit run ch_08/step_3_1.py' 명령어로 웹 서버를 실행합니다.ch_08/step_3_1.pyimport pandas as pdimport streamlit as stfrom step_2_1 import rel_kwd_to_csv # 이전에 작성한 모듈을 불러옵니다.from step_2_2 import data_cleaningfrom step_2_3 import shop_cnt_to_csvfrom ste..

카드 뒤집기 게임에 보안 챙기기

01 커서에게 다음과 같이 요청합니다. 그러면 관련 내용을 인지하고 중요한 설정 정보를 환경변수라는 것으로 분리하겠다고 할 겁니다. 이렇게 환경변수로 분리하면 중요한 정보는 로컬에만 남고, 깃허브와 같은 온라인 저장소에는 업로드하지 않게 됩니다. 보안에 유출되지 않도록 수파베이스 접근 키 관련 내용을 분리해줘. 프로젝트 폴더에서 다음과 같이 파일이 분리된 것을 확인했다면 보안을 챙긴 카드 뒤집기 게임 프로젝트가 거의 완성된 것입니다. 02 이제 분리된 상태로 깃허브에 올려 이력을 덮으면 됩니다. 현재 폴더의 파일 목록을 보면 .gitignore라는 파일이 있습니다. 이 파일은 깃허브에 올리면 안 되는 파일을 기록해두는 곳입니다. 03 확인을 완료했다면 이제 깃허브에도 반영해야겠죠? 커서에게 반영된 내용..

commander, inquirer 사용하기(2)

commander가 기본적으로 제공하는 옵션인 -v와 -h를 입력해보겠습니다.$ cli -v$ cli -h$ npx cli template -h$ npx cli template 명령어에 -h 옵션을 붙이면 명령어 설명서가 나옵니다. 조금 전에 usage나 name, description, option 메서드에 적었던 설명이 그대로 표시됩니다.cli template 명령어를 입력했을 때는 필수 요소인 을 빠뜨렸으므로 에러를 표시합니다. 이렇게 설명과 에러 검증을 자동으로 해줘서 편리합니다.이제 실제로 동작하는 코드를 작성해보겠습니다. template.js의 코드를 대부분 가져옵니다.#!/usr/bin/env nodeconst { program } = require("commander");const fs =..

리더보드가 있는 카드 뒤집기 게임 만들기

01 먼저 빈 폴더를 커서로 연 다음, 간단한 계획을 새우며 시작해봅시다. 커서에게 Sequential Thinking Tools를 활용하여 개발 계획을 세워보라고 합니다. 가장 간단한 웹 기술로 카드 뒤집기 게임을 만들 거야. Sequential Thinking으로 잘 생각해서 개발 계획을 세워봐. 데이터베이스는 Supabase를 사용할 생각이야. 02 이후 작업은 커서의 안내를 따라 설계부터 프로토타입 작성까지 진행하면 됩니다. 여기서는 커서에게 구현까지 쭉 진행하라고 지시했습니다.그래 구현 까지 쭉 진행해 03 중간 프로토타입 구현이 끝나면 게임을 한 번 실행해보라고 합니다. 실제로 실행했을 때 이상이 없는지 확인합니다. 04 문제가 없다면 수파베이스의 데이터베이스 구조를 설계하고 연동까지 마무..

포매팅 태그 라이브러리

JSTL 포매팅 라이브러리를 사용하면 쉽게 원하는 형태로 숫자, 날짜, 문자열을 표시할 수 있습니다.숫자 또는 날짜와 관련된 포매팅 태그 라이브러리의 종류입니다. 포매팅 태그 라이브러리 종류분류태그설명포매팅둘 다 지정한 국가의 시간을 지정하는 태그입니다. 그러나 태그의 경우 태그를 열고 닫는 영역 안에서만 적용된다는 차이점이 있습니다.표시할 숫자의 형식을 지정합니다.지정한 형식의 날짜를 표시합니다. 그리고 각각의 포매팅 태그 라이브러리들은 여러가지 속성을 가집니다. 태그의 여러 가지 속성속성설명value출력될 숫자를 지정합니다.type출력된 타입을 지정합니다. percent인 경우 %, number인 경우 숫자, currency인 경우 통화 형식으로 출력됩니다.dateStyle날짜의 출력 형식을 지정..

Supabase MCP Server 설치하고 데이터베이스 사용하기

01 수파베이스 MCP를 사용하려면 먼저 수파베이스 홈페이지에서 회원가입 후 액세스 토큰을 발급받아야 합니다. 커서는 이 액세스 토큰을 이용해 웹에 있는 수파베이스에 접근하고, 데이터를 읽거나 쓰는 등 다양한 조작을 할 수 있습니다. 다음의 수파베이스 홈페이지에 들어가 회원가입 후 로그인을 한 다음 프로필 아이콘에서 [Account preferences]를 누릅니다.수파베이스 홈페이지: https://supabase.com/ Supabase | The Postgres Development Platform.Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, ..

Context7 설치하고 간단한 카드 뒤집기 게임 만들어보기

01 Context7은 Sequential Thinking과 마찬가지로 동일한 방식으로 설치하면 됩니다. 별 어려움이 없으니 설치가 완료된 후 커서 설정에서 MCP Tools의 해당 MCP에 초록불이 제대로 들어오는지 꼭 확인하기 바랍니다.스미더리 Context7 설치 링크: https://smithery.ai/servers/upstash/context7-mcp 02 프롬프트에 'use Context7' 또는 'Context7을 사용해서~'라는 내용을 넣으면 Context7을 사용할 수 있습니다. 이렇게 하면 LLM 특유의 기존에 학습한 데이터로만 답변하거나 코딩하는 것이 아니라, 최신 문서를 기반으로 코드를 작성하므로 오류가 크게 줄어듭니다. 그럼 커서에게 최신 문서만 참고해서 간단한 카드 뒤집기 게임..

연관 키워드 경쟁 강도 분석하기 - 키워드별 경쟁 강도 분석하기

키워드별 상품 개수 수집비주얼 스튜디오 코드에서 새로운 파일을 생성하고, 파일명을 'step_2_3.py'로 저장합니다. 다음 코드를 입력한 후, 대화형 창에서 실행하면, 'output' 폴더에 키워드별 상품 개수가 포함된 'step_2_3.csv' 파일이 생성됩니다. ch08/step_2_3.pyimport timefrom pathlib import Pathimport pandas as pdfrom tqdm import tqdm # 진행 표시줄 관리를 위한 tqdm 클래스from step_1_1 import OUT_DIR # 이전에 작성한 모듈을 불러옵니다.from step_1_2 import query_naver_shopfrom step_2_2 import OUT_2_2OUT_2_3 = OUT_DIR..

MCP 설치를 위한 스미더리 회원가입

MCP는 스미더리라는 사이트에서 설치할 수 있습니다. 스미더리를 잘 이용하면 유용한 MCP를 쉽게 찾을 수 있을 뿐만 아니라 설치도 쉽게 할 수 있습니다. 01 스미더리에 접속하면 다음 화면이 보입니다. 오른쪽 위에 있는 [Login]을 누르세요. 그러면 깃허브와 구글로 로그인하라는 안내창이 뜹니다. [Continue with Github]를 눌러 깃허브 계정을 이용하여 로그인을 진행하겠습니다. 만약 깃허브 계정이 없다면 회원가입 후 여기로 돌아오세요.스미더리 홈페이지: https://smithery.ai/ 02 깃허브로 로그인한 후에 가장 먼저 할일은 자신의 계정 아이콘을 누르고 [Profile & API Keys]에서 스미더리 API 키를 생성하는 것입니다. 여기서 사용할 API 키는 코드에 사용할 ..

commander, inquirer 사용하기(1)

commander를 사용하여 예제 프로그램을 제작합니다. commander와 더불어 CLI 프로그램과 사용자 간의 상호작용을 돕는 inquirer 패키지, 콘솔 텍스트에 스타일을 추가하는 chalk 패키지도 함께 사용합니다.commander와 inquirer, chalk을 설치합니다.$ npm i commander@5 inquirer chalk 프로그램을 commander와 inquirer로 재작성할 것입니다. 먼저 commander 사용법부터 간단히 알아봅시다.#!/usr/bin/env nodeconst { program } = require("commander");program.version("0.0.1", "-v, --version").name(cli);program .command("templa..

JSP 페이지에 다국어 표시하기

1. 먼저 프로젝트의 WebContent 폴더에 test05 폴더를 만든 후 message1.jsp 파일을 저장합니다. 2. message1.jsp 파일을 다음과 같이 작성합니다. 태그를 이용해 표시할 locale(언어)을 지정한 후 태그를 이용해 resource 패키지의 프로퍼티 파일을 읽어옵니다. 그리고 태그를 이용해 프로펴티 파일의 키(key)에 대한 값을 각각 출력합니다. --%> 회원정보 이름: 주소: 직업: 3. http://localhost:8080/pro14/test05/message1.jsp로 요청합니다. 최초 요청 시 한글로 회원 정보를 출력합니다. 4. message1.jsp에서 한글 locale을 주석 처리하고 영어 locale..