목록

'전체 글' 740건

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

  • 보고서 작성하기
    프로그래밍 언어/Python · 댓글
    python-docx 패키지의 기본 기능을 사용해 쇼핑 트랜드 보고서를 작성해 보겠습니다. python-docx 패키지는 매우 복잡한 레이아웃을 구현하기 어렵다는 한계가 있지만 마이크로소프트 워드 문서를 생성하고 텍스트, 이미지, 표 등 객체를 삽입하기에는 충분합니다. 워드 문서 작성하기python-docx 패키지를 사용하여 쇼핑 트렌드 보고서를 워드 문서로 작성해 봅시다. 워드 문서를 만들고 보고서 제목을 입력한 후, 파일로 저장하는 순서로 작성할 것입니다.비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_3_1.py'로 지정하세요. 다음 코드를 입력한 후, 대화형 창에서 실행하세요. 'output' 폴더에 'step_3_1.docx' 워드 문서가 생성됩니다. 이 문서를 열면 소스 코..
  • 자기소개 페이지 만들기
    바이브 코딩/Cursor AI · 댓글
    자기소개 페이지를 좀 더 쉽게 만들기 위해 커서의 @콘텍스트를 이용하여 텍스트 형식으로 정리되어 있는 자기소개서를 커서에게 주어 작업시키도록 하겠습니다. 먼저 실습용 자기소개서 파일을 커서 읽기 좋도록 텍스트 파일을 준비합니다. 줄바꿈이나 형식이 엉망이여도 상관이 없으니 Ctrl+A -> Ctrl+C로 복사하고 븥여넣기 하여 만듭니다. 자기소개서 텍스트 파일: bit.ly/3Hj4Dnz커서로 빈 폴더를 열고 폴더에 자기소개서 파일을 두세요. 그런 다음 커서 채팅방을 열고 @콘텍스트를 이용해서 이렇게 이야기합니다.현재 폴더에 있는 @자기소개서실습용.txt 파일의 내용을 파악하고, 이 내용을 바탕으로 자기소개서 페이지를 만들고 싶어, HTML, CSS, 자바스크립트 기술로만 자기소개 페이지를 만들어줄래? ..
  • 바탕하면 정리시켜 보기
    바이브 코딩/Cursor AI · 댓글
    커서에서 명확한 지시를 하기 위해 바탕화면의 위치를 정확하게 알려주면서 정리를 부탁하겠습니다. 파일 탐색기에서 바탕화면 탐색기에서 바탕화면 위치의 주소를 그대로 복사합니다. 새 채팅을 실행한 다음 기존 콘텍스트를 모두 지우고 정리를 요청합니다. C:\Users\zzang\OneDrive\바탕 화면에 있는 파일들을 보고 적절하게 폴더 이름을 지어서 정리해봐, 그러면 커서는 해당 디렉터의 내용을 확인하겠다고 하면서 곧바로 명령어를 실행하겠다고 합니다. [Run]을 눌러 진행하세요. 정리를 마친 다음 결과를 알려줍니다. 바탕화면으로 이동해 확인해보면 정말 깔끔하게 정리가 되어 있는 것을 확인할 수 있습니다.
  • 프로젝트 마무리하기
    프로그래밍 언어/NODE JS · 댓글
    마지막으로 GIF 이미지를 전송하는 것을 구현합니다. 프런트 화면에서 이미지를 선택해 업로드하는 이벤트 리스너를 추가합니다. views/chat.html{% extends 'layout.html' %} {% block content %}{{title}}방 나가기 채팅 내용 {% for chat in chats %} {% if chat.user === user %} {{chat.user}} {% if chat.gif %} {% else %} {{chat.chat}} {% endif %} {% elif chat.user === 'system' %} {{chat.chat}} {% else %} ..
  • <c:set> 태그를 이용한 실습(2)
    프로그래밍 언어/자바 웹 · 댓글
    이번에는 태그를 이용해 너무 길어서 사용하기 불편한 변수나 속성 이름을 간결하게 만들어 보겠습니다. 먼저 JSP에서 태그를 이용해 다른 페이지로 이동하는 방법입니다. 지금까지는 표현 언어로 pageContext.request.contextPath 같은 긴 속성을 그대로 사용했는데, 태그를 이용하면 긴 이름의 속성이나 변수를 줄여서 사용할 수 있습니다. 회원가입하기 로그인창에서 회원 가입창으로 이동할 때 미리 태그를 이용해 pageContext.request.contextPath 속성 이름을 contextPath로 줄여서 사용하고 있습니다. 복잡한 웹 페아지에서 속성 이름을 짧게 줄이면 코드의 가독성이 좋아집니다. 아이디 : 비밀번호: 회원등록하기 --%> 회원등록하기 ..
  • 기업 소개 웹 사이트 만들기
    바이브 코딩/Cursor AI · 댓글
    왼쪽 사이드바: 파일 탐색기 / 코드 관리 / 확장 도구 관리 창오른쪽 사이드바: 커서 LLM 채팅탕아래쪽 사이드바: 터미널가운데 화면: 코드를 입력하는 코드 편집 화면 오른쪽 사이드바에 위치한 채팅방에는 여러 버튼이 있는데 + 버튼과 @Add context입니다. + 버튼: 챗 GPT와 같은 서비스에서 볼 수 있는 '새 채팅방 열기' 가능입니다. 만약 대화를 진행하다 원하는 답변이 나오지 않으면 버튼을 눌러 다시 채팅을 진행하면 됩니다.@Add context: 파일이나 폴더, 웹 문서를 여기에 포함시키는 기능입니다. 추가한 파일이나 폴더 등 해당 콘텍스트를 바탕으로 커서가 답변합니다. 왼쪽 사이드바에서 [Open Folder]를 눌러 앞으로 실습한 폴더 cursorstudy를 원하는 위치에 만든 다음 ..

보고서 작성하기

python-docx 패키지의 기본 기능을 사용해 쇼핑 트랜드 보고서를 작성해 보겠습니다. python-docx 패키지는 매우 복잡한 레이아웃을 구현하기 어렵다는 한계가 있지만 마이크로소프트 워드 문서를 생성하고 텍스트, 이미지, 표 등 객체를 삽입하기에는 충분합니다. 워드 문서 작성하기python-docx 패키지를 사용하여 쇼핑 트렌드 보고서를 워드 문서로 작성해 봅시다. 워드 문서를 만들고 보고서 제목을 입력한 후, 파일로 저장하는 순서로 작성할 것입니다.비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_3_1.py'로 지정하세요. 다음 코드를 입력한 후, 대화형 창에서 실행하세요. 'output' 폴더에 'step_3_1.docx' 워드 문서가 생성됩니다. 이 문서를 열면 소스 코..

자기소개 페이지 만들기

자기소개 페이지를 좀 더 쉽게 만들기 위해 커서의 @콘텍스트를 이용하여 텍스트 형식으로 정리되어 있는 자기소개서를 커서에게 주어 작업시키도록 하겠습니다. 먼저 실습용 자기소개서 파일을 커서 읽기 좋도록 텍스트 파일을 준비합니다. 줄바꿈이나 형식이 엉망이여도 상관이 없으니 Ctrl+A -> Ctrl+C로 복사하고 븥여넣기 하여 만듭니다. 자기소개서 텍스트 파일: bit.ly/3Hj4Dnz커서로 빈 폴더를 열고 폴더에 자기소개서 파일을 두세요. 그런 다음 커서 채팅방을 열고 @콘텍스트를 이용해서 이렇게 이야기합니다.현재 폴더에 있는 @자기소개서실습용.txt 파일의 내용을 파악하고, 이 내용을 바탕으로 자기소개서 페이지를 만들고 싶어, HTML, CSS, 자바스크립트 기술로만 자기소개 페이지를 만들어줄래? ..

바탕하면 정리시켜 보기

커서에서 명확한 지시를 하기 위해 바탕화면의 위치를 정확하게 알려주면서 정리를 부탁하겠습니다. 파일 탐색기에서 바탕화면 탐색기에서 바탕화면 위치의 주소를 그대로 복사합니다. 새 채팅을 실행한 다음 기존 콘텍스트를 모두 지우고 정리를 요청합니다. C:\Users\zzang\OneDrive\바탕 화면에 있는 파일들을 보고 적절하게 폴더 이름을 지어서 정리해봐, 그러면 커서는 해당 디렉터의 내용을 확인하겠다고 하면서 곧바로 명령어를 실행하겠다고 합니다. [Run]을 눌러 진행하세요. 정리를 마친 다음 결과를 알려줍니다. 바탕화면으로 이동해 확인해보면 정말 깔끔하게 정리가 되어 있는 것을 확인할 수 있습니다.

프로젝트 마무리하기

마지막으로 GIF 이미지를 전송하는 것을 구현합니다. 프런트 화면에서 이미지를 선택해 업로드하는 이벤트 리스너를 추가합니다. views/chat.html{% extends 'layout.html' %} {% block content %}{{title}}방 나가기 채팅 내용 {% for chat in chats %} {% if chat.user === user %} {{chat.user}} {% if chat.gif %} {% else %} {{chat.chat}} {% endif %} {% elif chat.user === 'system' %} {{chat.chat}} {% else %} ..

<c:set> 태그를 이용한 실습(2)

이번에는 태그를 이용해 너무 길어서 사용하기 불편한 변수나 속성 이름을 간결하게 만들어 보겠습니다. 먼저 JSP에서 태그를 이용해 다른 페이지로 이동하는 방법입니다. 지금까지는 표현 언어로 pageContext.request.contextPath 같은 긴 속성을 그대로 사용했는데, 태그를 이용하면 긴 이름의 속성이나 변수를 줄여서 사용할 수 있습니다. 회원가입하기 로그인창에서 회원 가입창으로 이동할 때 미리 태그를 이용해 pageContext.request.contextPath 속성 이름을 contextPath로 줄여서 사용하고 있습니다. 복잡한 웹 페아지에서 속성 이름을 짧게 줄이면 코드의 가독성이 좋아집니다. 아이디 : 비밀번호: 회원등록하기 --%> 회원등록하기 ..

기업 소개 웹 사이트 만들기

왼쪽 사이드바: 파일 탐색기 / 코드 관리 / 확장 도구 관리 창오른쪽 사이드바: 커서 LLM 채팅탕아래쪽 사이드바: 터미널가운데 화면: 코드를 입력하는 코드 편집 화면 오른쪽 사이드바에 위치한 채팅방에는 여러 버튼이 있는데 + 버튼과 @Add context입니다. + 버튼: 챗 GPT와 같은 서비스에서 볼 수 있는 '새 채팅방 열기' 가능입니다. 만약 대화를 진행하다 원하는 답변이 나오지 않으면 버튼을 눌러 다시 채팅을 진행하면 됩니다.@Add context: 파일이나 폴더, 웹 문서를 여기에 포함시키는 기능입니다. 추가한 파일이나 폴더 등 해당 콘텍스트를 바탕으로 커서가 답변합니다. 왼쪽 사이드바에서 [Open Folder]를 눌러 앞으로 실습한 폴더 cursorstudy를 원하는 위치에 만든 다음 ..