서론 유튜브에서 굉장히 흥미로운 영상을 보게되었습니다. 바로 최근 가장 핫한 프로그램인 chatGPT로 책의 내용을 요약해서 유튜브 쇼츠 영상을 만드는 인공지능을 구현하는 영상입니다. 아래는 해당 영상 링크입니다. 요약하면 책의 내용을 AI가 인식하고 이 내용을 chatGPT가 요약한 후 이것을 AI가 만든 이미지와 캐릭터가 담긴 영상의 tts기술로 삽입하여 읽어주는 것입니다. 너무 신기하지 않나요? 본 게시글에선 셋팅만 진행하고 천천히 클론코딩을 진행해보도록 하겠습니다. (게시글 작성 허락해주신 원작자분께 너무나도 감사합니다.) 출처 : https://www.youtube.com/@bbanghyong 유튜브(빵형의 개발도상국) 빵형의 개발도상국 신기하고 재밌는 인공지능을 쉽게, 짧게, 내손으로 만들어 ..
테트리스 고전 게임인 테트리스를 Javascript를 사용하여 구현하였습니다. 주요 기능 시작 버튼 시작 버튼 클릭 시 테르리스 게임이 시작됩니다. 점수 계산 한 줄을 완성할 경우 스코어가 1점 오르고 해당 줄을 삭제합니다. 소스 코드 전체 소스는 https://github.com/wonseok22/ToyProjects/tree/main/tetrisGame 를 참고하세요. const tetrisInner = document.querySelector(".tetris__inner > ul"); const tetrisS = document.querySelector(".tetris__wrap .s"); const game_rows = 20; const game_cols = 10; let gameScore = 0..
이번 포스팅에서는 지난 포스팅에 이어 DELETE와 PUT를 사용한 데이터의 수정, 삭제 기능을 구현해보겠습니다. https://recordofwonseok.tistory.com/363 Django로 RESTful API 서버 구축해보기 (2) - 가상 데이터를 사용한 REST API의 동작방식의 이해 이번 포스팅에서는 지난 포스팅까지 구축된 API 서버와 간단한 가상 데이터를 이용하여 Client가 CRUD 작업을 요청하면 API서버에서 어떤 방식으로 동작하는지 알아보겠습니다. API 서버 구축은 이전 recordofwonseok.tistory.com pk를 이용한 단건조회 기능 구현 REST API를 사용한 수정과 삭제를 구현하기 위해, 먼저 단건 조회를 구현해야 합니다. 지금까지 구현한 GET 방식..
이번 포스팅에서는 지난 포스팅까지 구축된 API 서버와 간단한 가상 데이터를 이용하여 Client가 CRUD 작업을 요청하면 API서버에서 어떤 방식으로 동작하는지 알아보겠습니다. API 서버 구축은 이전 포스팅을 참고하세요. Django로 RESTful API 서버 구축해보기 (1) - API서버 구축과 API Test tool 벌써 두 번째 포스팅입니다. 지난 포스팅에서 Django를 설치하고 기본적인 가상환경 셋팅을 마쳤습니다. Django로 RESTful API 서버 구축해보기 (0) - Django 설치와 가상환경설정 작년 졸업프로젝트를 할 recordofwonseok.tistory.com 데이터를 관리할 App 생성 가장 먼저 할 일은 데이터를 생성하고 관리해줄 App을 하나 생성하는 것입니다..
벌써 두 번째 포스팅입니다. 지난 포스팅에서 Django를 설치하고 기본적인 가상환경 셋팅을 마쳤습니다. Django로 RESTful API 서버 구축해보기 (0) - Django 설치와 가상환경설정 작년 졸업프로젝트를 할 때 Django Framework를 사용하여 웹 서비스를 하나 구현했었습니다. Django의 MTV구조와 같은 기본적인 개념들은 얼추 이해가 되었지만, 베이스 지식이 많이 부족한 상태로 진 recordofwonseok.tistory.com 이번 포스팅에서는 REST API 서버를 테스트하기 위한 REST API Client tool인 insomnia를 설치하고 request를 생성하고 Django REST framework를 설치하여 REST API 서버를 기본적으로 구축해보겠습니다...
카드 뒤집기 게임 뒷면으로 놓아진 카드를 두 장씩 선택하여 짝을 맞추는 간단한 게임입니다. 주요 기능 카드 뒤집기 카드를 선택하면 해당 카드를 뒤집어 앞면으로 바꿉니다. 카드 비교 두 번째 카드를 선택했을 때, 선택된 두 카드를 비교하여 같으면 앞면으로 유지하고 다르면 카드에 shake효과를 주고 다시 뒤집습니다. 연속 클릭시 버그 픽스 카드를 빠르게 연속하여 선택할 경우 eventListener가 중첩 실행되어 버그가 발생하였습니다. 이 버그를 해결하기 위해 카드를 선택중인 상태와 flag를 사용하였습니다. 소스 코드 전체 소스는 https://github.com/wonseok22/ToyProjects/tree/main/cardGame 를 참고하세요. const cards =document.queryS..
작년 졸업프로젝트를 할 때 Django Framework를 사용하여 웹 서비스를 하나 구현했었습니다. Django의 MTV구조와 같은 기본적인 개념들은 얼추 이해가 되었지만, 베이스 지식이 많이 부족한 상태로 진행했던터라 결과물도 많이 엉성하고 Django의 장점을 충분히 활용하여 구현하지 못했던 것 같습니다. 이제는 졸업하고 취업준비기간(사실상 백수)을 가지며 자꾸 뭔가 해보고싶은 욕구가 샘솟고 있습니다.... 시간도 꽤 널널한지라 토이프로젝트로 간단하게 Django를 사용해 RESTful API 서버를 하나 구축해보도록 하겠습니다. 1. 프로젝트 주제 위에서 언급했던 대로 이번 토이프로젝트의 주제는 "Django를 사용한 RESTful API 서버의 구축"입니다. 공부하며 진행하는 프로젝트인지라 무언..
mp3 플레이어 유튜브 API를 받아와 영상을 재생해주는 웹 서비스 개발을 구상하고 있습니다. 영상을 재생하기 위한 플레이어를 구현해 보았습니다. 주요 기능 음악 재생 플레이 버튼 클릭 시, 음악이 재생되고 음악의 총 재생시간과 현재 재생시간을 게이지바로 나타내었습니다. 정지 버튼 음악 플레이 중에는 재생 버튼이 일시정지 버튼으로 바뀌고 이 버튼을 클릭할 시 음악이 일시 정지되게 하였습니다. 음악 변경 좌, 우 버튼 클릭시 다음 노래 또는 이전 노래를 선택할 수 있게 구현하였습니다. 현재 노래 반복, 랜덤 셔플 현재 노래 반복과 랜덤 셔플 기능을 추가하여 해당 기능을 선택 시 기능에 맞게 현재 음악이 반복재생되거나 다음 노래를 선택할 때 자동 셔플되도록 하였습니다. 플레이리스트 플레이리스트 버튼을 추가하..
영타 연습 게임 영타를 연습할 수 있는 웹 게임입니다. 기능은 심플합니다. 페이지 로드시 저장되어있는 영어 글귀들이 랜덤하게 전시되고 게임을 시작하면 됩니다. 따로 시작버튼은 존재하지 않으며 아무 키나 입력하면 시작됩니다. 주요 기능 오탈자 검수 기능 오탈자가 발생할 경우 mistakes 카운트 1이 증가하고, 해당 문자가 붉은색으로 바뀌어 틀렸다는 것을 알려줍니다. 타이머 기능 제한시간 1분의 타이머 기능을 구현하였습니다. 게임 종료 조건은 타이머의 종료 또는 모든 문장 입력입니다. 타수 디스플레이 cpm과 wpm 수치를 실시간으로 갱신하여 사용자의 타수를 확인할 수 있습니다. 다시하기 버튼 try again 버튼을 구현하여 언제든 다시 시작할 수 있습니다. 소스 코드 전체 소스는 https://git..