목록
'홈' 729건
-
실시간 경매 시스템 만들기 - 프로젝트 구조 갖추기(3)경매 시스템은 회원가입, 로그인, 경매 상품 등록, 방 참여, 경매 진행으로 이루어져 있습니다. 회원가입, 로그인, 경매 상품 등록 페이지와 라우터를 만들어보겠습니다. views폴더에 error.html을 작상합니다.{% extends 'layout.html' %}{% block content %} {{message}} {{error.status}} {{error.stack}}{% endblock %} views/layout.html {% if user and user.id %} 안녕하세요 {{user.nick}}님 보유 자산: {{user.money}}원 로그아웃 ..
-
v0 서비스로 더 쉽게 웹사이트 만들기v0 서비스를 사용해서 웹사이트를 만들어보겠습니다. v0는 버셀에서 만든 AI 기반 웹 페이지 디자인 생성 도구입니다. 무료로 5달러의 크레딧을 제공하므로 간단한 웹 사이트를 디자인하는데 유용합니다. 기업 소개 페이지를 v0을 통해 다시 한 번 구상해보겠습니다. 먼저 v0 홈페이지에 접속하여 [Sign Up]을 눌러 회원가입을 한 다음 로그인합니다.v0 홈페이지: https://v0.app/ v0 by Vercel - Build Agents, Apps, and Websites with AIYour collaborative AI assistant to design, iterate, and scale full-stack applications for the web.v0.app 로그인하면 챗GPT와 유사한 ..
-
<c:choose> 태그를 이용한 실습태그는 JSP 페이지에서 switch문의 기능을 수행하며, 사용 형식은 다음과 같습니다. 본문내용1 본문내용2 ... 본문내용n 첫 번째 태그의 조건식1을 체크해서 참이면 본문내용1을 수행하고 만약 거짓이면 다음 의 조건식2를 체크해서 참이면 본문내용2를 수행합니다. 모든 조건이 거짓이면 태그의 본문 내용을 수행합니다.그럼 실습을 통해 알아보겠습니다. 1. 다음과 같이 member5.jsp를 작성합니다. 태그를 이용해 name 값의 유무에 따라 다른 결과를 표시합니다. 만약 name 값이 정상적이면 회원 정보를 출력하고 name이 null이거나 빈 문자열이면 오류 메시지를 출력합니다. 아이디 비밀번호 이름 ..
-
메모 앱 디자인 변경해보기가장 먼저 부트스트랩을 매모 앱에 적용해보겠습니다.단순한 메모 앱에 부트스트랩 스타일을 적용하기 위해 커서에게 다음과 같이 부탁해보겠습니다. 부트스트랩을 적용해서 메모 앱의 기능은 그대로 두고, 디자인만 더 멋지게 바꿔줘. 그러면 커서는 부트스트랩 설치에 필요한 명령어르 실행하고 이후 전체 코드에 부트스트랩을 적용하기 시작합니다. 실행해야할 명령어 또는 반영해야 할 코드는 [Run]을 클릭하여 적용하세요. 변경을 적용하고 실행해보면 전반적으로 깔끔하면서 정돈된 부트스타일 메모 앱을 바뀐 것을 볼 수 있습니다. 이번에는 테일윈드 CSS를 적용해보라고 할까요? 그러면 테일윈드 CSS를 적용함과 동시에 기존의 부트스트랩을 정리하는 모습을 보입니다. 기능은 그대로 두고 TailwindCSS를 적용해줄래? 설..
-
종목별 시가총액 데이터 수집하기 - 파이썬 패키지 준비하기시가총액은 기업의 주가에 발생 주식 수를 곱한 지표로, 기업의 시작 가치를 나타내는 중요한 척도입니다. 투자자들은 시가총액을 통해 기업의 규모와 시장에서의 위치를 파악하고, 투자를 할지 말지 결정합니다.시가총액 = 주가 X 발생 주식 수 pathlib 패키지pathlib 패키지를 사용하여 이번 절에서 사용할 폴더를 만들어 보겠습니다. 현재 작업 폴더를 'ch_07'이라고 가정합니다.비주얼 스튜디오 코드에서 새로운 파일을 생성하고 파일명을 'step_1_1.py'로 지정하세요. 다음 코드를 입력한 뒤, 대화형 창에서 실행하세요. 현재 직접 폴더의 하위에 'output' 폴더가 생성됩니다.from pathlib import PathWORK_DIR = Path(__file__).parentOUT_DIR = ..
-
메모 앱 만들어보기다음과 같은 구성의 메모 앱을 만들어보겠습니다.① [새 메모]: 메모지를 새로 만들고, 해당 메모지를 바로 수정할 수 있는 상태로 표시하여 사용자의 입력을 유도합니다.② [수정]: 메모지를 수정 모드로 전환합니다.③ [저장]: 수정 모드에서만 보이는 버튼입니다. 메모를 저장하고, 수정 모드를 종료합니다.④ [삭제]: 메모지를 삭제합니다.⑤ [메모 검색]: 메모를 검색하여 검색한 결과만 보여줍니다. 앱을 만들기 위해 필요한 기술들을 나열하면서 ① ~ ⑤번의 기능을 그대로 입력하는 것입니다. 이때 커서에게 'CRA'로 만들어달라고 하겠습니다. 여기서 CRA는 리액트 프로젝트를 가장 간단하게 시작하는 명령어입니다. CRA로 메모 앱을 만들어줄 수 있어? 다음 기능이 동작하는 매모 앱이어야 해.① [새 메모]:..
-
실시간 경매 시스템 만들기 - 프로젝트 구조 갖추기(2)모델을 생성한 후에 모델을 데이터베이스 및 서버와 연결합니다. nodeauction 데이터베이스를 생성해야 하므로 config.json을 데이터베이스에 맞게 수정합니다.config/config.json{ "development": { "username": "root", "password": "1234", "database": "nodeauction", "host": "127.0.0.1", "dialect": "mysql" }, "test": { "username": "root", "password": "1234", "database": "nodeauction_test", "host": "127.0.0.1", "dialect": "mysql" }..
-
<c:if> 태그를 이용한 실습태그는 이름에서도 알 수 있듯이 JSP 페이지에서 조건문을 대체해 사용하는 태그이며, 사용 형식은 다음과 같습니다. ... 여기서 test는 표현 언어를 이용해 수행할 조건식 위치를, var은 조건식의 결괏값을 저장합니다. 또한 scope는 변수의 scope를 지정(page, request, session, application 중 하나)합니다. 그럼 태그를 이용해 조건문을 사용해 보겠습니다. 1. 다음과 깉이 member4.jsp를 작성합니다. 태그의 test 속성에는 표현 언어 안에 비교 연산자나 논리 연산자로 조건식을 수행합니다. 조건문 실습 두 값은 같습니다. 두 값은 같습니다. 두 값은 같지 않습니다. 아이디는 ${id}이고, 이름은 ${name}입니다. ..
-
인스타그램과 비슷한 사이트 만들어보기프로필 이미지 2개와 게시물 이미지로 활용할 10개의 이미지를 미리 준비헤두세요.이미지 파일을 커서의 파일 탐색기로 옮기고, 커서에게 적당히 이미지들을 폴더를 만들어 정리해줘라고 지시합니다. cursorstudy에 있는 이미지 파일들을 적당히 폴더 이름 만들어 정리해줘. 그러먼 커서가 알아서 명령어를 실행하여 현재 폴더에 images 폴더를 만들고 그 안에 파일을 정리해줍니다. 이제 리액트를 이용해서 인스타그램과 유사한 화면을 만들 차례입니다. 화면에 표시할 이미지는 images 폴더에 있는 img01~10를 사용하고 프로필에 사용할 이미지는 man, woman인 각각 적절히 사용하라고 하겠습니다. 리액트로 인스타그램 화면처럼 보이는 앱을 만들어봐. 이때 각 피드에 표시할 이미지는 images 폴더에 있..
-
워드 문서에 표와 이미지 삽입하기이제 워드 문서에 표와 이미지를 삽입하는 코드를 만듭니다. add_table() 함수를 정의하여, 데이터 수집, 표 생성 및 이미지 삽입까지 모든 한 번에 처리할 수 있게 만들겠습니다.비주얼 스튜디오 코드에서 새로운 파일을 생성하고, 파일명을 'step_3_2.py'로 변경하세요. 다음과 같이 코드를 입력하고, 실행 아이콘을 클릭하세요. 'output' 폴더에 'step_3_3.docx' 파일이 생성됩니다. ch06/step_3_2.pyimport jsonfrom pathlib import Pathfrom docx.document import Document as DocumentObject # Document 객체from docx.enum.text import WD_PARAGRAPH_ALIGNMENT #..
-
실시간 경매 시스템 만들기 - 프로젝트 구조 갖추기(1)프로젝트 이름은 NodeAuction입니다. 먼자 node-auction 폴더를 만든 후 그 안에 package.json 파일을 작성합니다.{ "name": "node-auction", "version": "0.0.1", "description": "노드 경매 시스템", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "Sally", "license": "ISC", "dependencies": { "bcrypt": "^3.0.7", "cookie-parser": "^1.4.4", "dotenv": "^8.2.0", "express": "^4.17.1", "express-session":..
-
자기소개서 페이지를 다른 사람에게 공유하고 싶다면?커서에게 가장 간단한 방법으로 자기소개서 페이지를 공유하는 방법이 무엇인지 물어본다면 몇 가지 제안할 텐데 그 제안에는 반드시 깃허브 페이지를 이용하라는 내용이 포함되어 있을 것입니다.가장 간단한 방법으로 이 자기소개서 페이지를 공유하는 방법이 뭐야? 커서가 이야기한 방법 중 깃허브 페이지에 공유하는 방법이 무엇인지 자세히 물어봅니다.깃허브 페이지에 공유하는 방법이 뭐야? 알려줘. 커서가 알려준 대로 깃허브 홈페이지에 접속하여 깃허브 계정을 만든 후 화면에서 오른쪽에 있는 + 에서 New repository를 눌러 깃허브에 저장소를 만듭니다.이때 주의할 내용은 자신의 아이디에 github.io에 븥여서 주소 형태로 만들어야 한다는 것입니다. 주소를 자세히 확인하고 [Create repository]를 눌..