나만의 코드 공방

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

목록

'전체 글' 740건

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

  • v0 서비스로 더 쉽게 웹사이트 만들기
    바이브 코딩/Cursor AI · 댓글
    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이거나 빈 문자열이면 오류 메시지를 출력합니다. 아이디 비밀번호 이름 ..
  • 메모 앱 디자인 변경해보기
    바이브 코딩/Cursor AI · 댓글
    가장 먼저 부트스트랩을 매모 앱에 적용해보겠습니다.단순한 메모 앱에 부트스트랩 스타일을 적용하기 위해 커서에게 다음과 같이 부탁해보겠습니다. 부트스트랩을 적용해서 메모 앱의 기능은 그대로 두고, 디자인만 더 멋지게 바꿔줘. 그러면 커서는 부트스트랩 설치에 필요한 명령어르 실행하고 이후 전체 코드에 부트스트랩을 적용하기 시작합니다. 실행해야할 명령어 또는 반영해야 할 코드는 [Run]을 클릭하여 적용하세요. 변경을 적용하고 실행해보면 전반적으로 깔끔하면서 정돈된 부트스타일 메모 앱을 바뀐 것을 볼 수 있습니다. 이번에는 테일윈드 CSS를 적용해보라고 할까요? 그러면 테일윈드 CSS를 적용함과 동시에 기존의 부트스트랩을 정리하는 모습을 보입니다. 기능은 그대로 두고 TailwindCSS를 적용해줄래? 설..
  • 종목별 시가총액 데이터 수집하기 - 파이썬 패키지 준비하기
    프로그래밍 언어/Python · 댓글
    시가총액은 기업의 주가에 발생 주식 수를 곱한 지표로, 기업의 시작 가치를 나타내는 중요한 척도입니다. 투자자들은 시가총액을 통해 기업의 규모와 시장에서의 위치를 파악하고, 투자를 할지 말지 결정합니다.시가총액 = 주가 X 발생 주식 수 pathlib 패키지pathlib 패키지를 사용하여 이번 절에서 사용할 폴더를 만들어 보겠습니다. 현재 작업 폴더를 'ch_07'이라고 가정합니다.비주얼 스튜디오 코드에서 새로운 파일을 생성하고 파일명을 'step_1_1.py'로 지정하세요. 다음 코드를 입력한 뒤, 대화형 창에서 실행하세요. 현재 직접 폴더의 하위에 'output' 폴더가 생성됩니다.from pathlib import PathWORK_DIR = Path(__file__).parentOUT_DIR = ..
  • 메모 앱 만들어보기
    바이브 코딩/Cursor AI · 댓글
    다음과 같은 구성의 메모 앱을 만들어보겠습니다.① [새 메모]: 메모지를 새로 만들고, 해당 메모지를 바로 수정할 수 있는 상태로 표시하여 사용자의 입력을 유도합니다.② [수정]: 메모지를 수정 모드로 전환합니다.③ [저장]: 수정 모드에서만 보이는 버튼입니다. 메모를 저장하고, 수정 모드를 종료합니다.④ [삭제]: 메모지를 삭제합니다.⑤ [메모 검색]: 메모를 검색하여 검색한 결과만 보여줍니다. 앱을 만들기 위해 필요한 기술들을 나열하면서 ① ~ ⑤번의 기능을 그대로 입력하는 것입니다. 이때 커서에게 'CRA'로 만들어달라고 하겠습니다. 여기서 CRA는 리액트 프로젝트를 가장 간단하게 시작하는 명령어입니다. CRA로 메모 앱을 만들어줄 수 있어? 다음 기능이 동작하는 매모 앱이어야 해.① [새 메모]:..
  • 실시간 경매 시스템 만들기 - 프로젝트 구조 갖추기(2)
    프로그래밍 언어/NODE JS · 댓글
    모델을 생성한 후에 모델을 데이터베이스 및 서버와 연결합니다. 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" }..

바이브 코딩/Cursor AI

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이거나 빈 문자열이면 오류 메시지를 출력합니다. 아이디 비밀번호 이름 ..

바이브 코딩/Cursor AI

메모 앱 디자인 변경해보기

가장 먼저 부트스트랩을 매모 앱에 적용해보겠습니다.단순한 메모 앱에 부트스트랩 스타일을 적용하기 위해 커서에게 다음과 같이 부탁해보겠습니다. 부트스트랩을 적용해서 메모 앱의 기능은 그대로 두고, 디자인만 더 멋지게 바꿔줘. 그러면 커서는 부트스트랩 설치에 필요한 명령어르 실행하고 이후 전체 코드에 부트스트랩을 적용하기 시작합니다. 실행해야할 명령어 또는 반영해야 할 코드는 [Run]을 클릭하여 적용하세요. 변경을 적용하고 실행해보면 전반적으로 깔끔하면서 정돈된 부트스타일 메모 앱을 바뀐 것을 볼 수 있습니다. 이번에는 테일윈드 CSS를 적용해보라고 할까요? 그러면 테일윈드 CSS를 적용함과 동시에 기존의 부트스트랩을 정리하는 모습을 보입니다. 기능은 그대로 두고 TailwindCSS를 적용해줄래? 설..

프로그래밍 언어/Python

종목별 시가총액 데이터 수집하기 - 파이썬 패키지 준비하기

시가총액은 기업의 주가에 발생 주식 수를 곱한 지표로, 기업의 시작 가치를 나타내는 중요한 척도입니다. 투자자들은 시가총액을 통해 기업의 규모와 시장에서의 위치를 파악하고, 투자를 할지 말지 결정합니다.시가총액 = 주가 X 발생 주식 수 pathlib 패키지pathlib 패키지를 사용하여 이번 절에서 사용할 폴더를 만들어 보겠습니다. 현재 작업 폴더를 'ch_07'이라고 가정합니다.비주얼 스튜디오 코드에서 새로운 파일을 생성하고 파일명을 'step_1_1.py'로 지정하세요. 다음 코드를 입력한 뒤, 대화형 창에서 실행하세요. 현재 직접 폴더의 하위에 'output' 폴더가 생성됩니다.from pathlib import PathWORK_DIR = Path(__file__).parentOUT_DIR = ..

바이브 코딩/Cursor AI

메모 앱 만들어보기

다음과 같은 구성의 메모 앱을 만들어보겠습니다.① [새 메모]: 메모지를 새로 만들고, 해당 메모지를 바로 수정할 수 있는 상태로 표시하여 사용자의 입력을 유도합니다.② [수정]: 메모지를 수정 모드로 전환합니다.③ [저장]: 수정 모드에서만 보이는 버튼입니다. 메모를 저장하고, 수정 모드를 종료합니다.④ [삭제]: 메모지를 삭제합니다.⑤ [메모 검색]: 메모를 검색하여 검색한 결과만 보여줍니다. 앱을 만들기 위해 필요한 기술들을 나열하면서 ① ~ ⑤번의 기능을 그대로 입력하는 것입니다. 이때 커서에게 'CRA'로 만들어달라고 하겠습니다. 여기서 CRA는 리액트 프로젝트를 가장 간단하게 시작하는 명령어입니다. CRA로 메모 앱을 만들어줄 수 있어? 다음 기능이 동작하는 매모 앱이어야 해.① [새 메모]:..

프로그래밍 언어/NODE JS

실시간 경매 시스템 만들기 - 프로젝트 구조 갖추기(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" }..

티스토리툴바