본문 바로가기

분류 전체보기1350

[NestJs] TypeORM 설치 및 설정하기 안녕하세요. 오늘은 지난 시간에 이어 데이터를 실제 데이터 베이스에 저장을 해볼 겁니다. 데이터베이스는 Mysql을 이용하여 실습할 예정이니 미리 mysql을 설치해주시길 바랍니다. 먼저 설치부터 해볼게요. 아래 명령어를 입력해주세요. npm install @nestjs/typeorm typeorm mysql2 그리고 저희는 환경 변수를 사용해서 설정을 할 건데 미리 설치해야 될게 있습니다. npm install @nestjs/config cross-env dotenv 모두 설치가 완료되었다면 root 경로에 .env파일을 생성해주세요. DB_HOST = 'DB 호스트' DB_PORT = 3306 DB_USERNAME = 'DB 유저 이름' DB_PASSWD = 'DB 비밀번호' DB_DATABASE =.. 2024. 3. 27.
[JAVA] 다양한 컬렉션 타입들을 사용해 학생 데이터 관리 시스템 만들기 안녕하세요. 이번 게시글에서는 컬렉션 프레임워크를 활용해 데이터를 관리할 수 있는 간단한 학생 데이터 관리 시스템에 대해 설명해드리겠습니다. 자바의 ArrayList, HashMap, HashSet과 같은 컬렉션들을 사용하여 데이터를 관리하는 방법을 사용할 것이며 각 학생을 객체로 표현하고, 이를 관리하는 클래스를 통해 객체 지향 프로그래밍을 만들어보려고 합니다. 그럼 ArrayList, HashMap, HashSet 의 차이점에 대해 설명하겠습니다. ArrayList 타입: ArrayList는 List 인터페이스를 구현하는 클래스입니다. 특징: ArrayList는 내부적으로 배열을 사용하여 요소를 저장합니다. 이는 인덱스를 통한 빠른 접근이 가능하게 해주지만, 크기 조정이 필요할 때는 비용이 많이 듭니.. 2024. 3. 26.
[C#][.NET] 윈도우 앱 포커스 안녕하세요, 오늘은 포커스에 대해 알아보고 윈도우 앱에서 포커스를 다루는 법을 배워보겠습니다. 일단 포커스란 현재 사용자가 입력을 받을 수 있는 컨트롤을 가리킵니다. 컨트롤은 윈도우 앱에서 폼을 구성하는 하나의 구성요소입니다. 예를 들어 구글 웹페이지로 이동하면 화면 중앙에 검색창이 있죠. 이 때 이 검색창을 클릭하게 되면 다음과 같이 검색창이 클릭되고 포커스를 갖게 되는데 여기서 검색창의 입력칸이 하나의 컨트롤이라고 생각할 수 있습니다. 이렇게 하나의 컴포넌트가 포커스를 받게 되면 사용자가 구분할 수 있고 그 다음 사용자의 입력이 포커스와 연관될 것이라고 사용자는 예상할 수 있습니다. 이렇듯 포커스는 사용자 경험 향상을 위해 중요한 요소입니다. 그리고 웹페이지 외에도 안드로이드 앱, 윈도우 앱, ios.. 2024. 3. 25.
[JavaScript] 탭 레이아웃 만들기 오늘은 자바스크립트를 활용하여 탭 레이아웃을 만들어 보겠습니다. 코드입니다. DOCTYPE html> 탭 레이아웃 예제 Tab 1 Tab 2 Tab 3 Tab 1 Tab 1의 내용입니다. Tab 2 Tab 2의 내용입니다. Tab 3 Tab 3의 내용입니다. function openTab(evt, tabName) { // 모든 탭 콘텐츠를 숨깁니다. var tabcontent = document.getElementsByClassName("tabcontent"); for (var i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 모든 탭 링크에서 "active" 클래스를 제거합니다. var tablinks = do.. 2024. 3. 24.
[JavaScript] 리뷰 만들기 오늘은 리뷰만들기를 해보겠습니다. 다음은 app.js파일의 설명입니다. 1. reviews 배열은 리뷰 데이터를 저장합니다. 각 리뷰는 사람의 이름, 직업, 이미지 URL, 그리고 리뷰 텍스트를 포함하는 객체입니다. 2. document.getElementById와 document.querySelector를 사용해 HTML 문서의 요소들을 선택합니다. 3. window.addEventListener('DOMContentLoaded', function () {...}); 코드는 문서의 로딩이 완료되었을 때 초기 리뷰를 화면에 표시하기 위해 사용됩니다. 4. showPerson 함수는 주어진 person 인덱스에 해당하는 리뷰 정보를 UI에 표시합니다. 5. nextBtn, prevBtn, randomBtn.. 2024. 3. 23.
[JavaScript] Bootstrap 버튼 클릭 스크롤 위치 이동 기능 만들기 안녕하세요. 이번 예제에서는 Bootstrap을 사용하여 버튼 클릭시 스크롤 위치 이동하는 기능을 만들어보겠습니다. 이 기능을 Scrollspy 라고 합니다. 1. Scrollspy란? Scrollspy는 웹 페이지에서 스크롤 이벤트를 사용하여 사용자가 스크롤할 때 특정 섹션 또는 요소가 화면에 보이는지 감지하는 기능입니다. 이를 통해 페이지 내 탐색을 돕고 사용자 경험을 향상시킬 수 있습니다. 주로 단일 페이지 애플리케이션(SPA) 또는 긴 페이지가 있는 웹사이트에서 사용됩니다. 2. 전체코드 Item 1 Item 2 Item 3 Item 4 Item 1 부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며,.. 2024. 3. 22.
[Java] Java Swing으로 구현하는 날씨 기반 상태 변화 시뮬레이션 자바 스윙을 사용하여 간단한 날씨 기반 상태 변화 시뮬레이션 프로그램을 구현하는 방법을 알아보겠습니다. 이 프로그램은 날씨 상태(Sunny, Cloud, Rain)에 따라 사람(Person) 객체의 체력과 기분이 변화합니다. 날씨는 랜덤으로 변경되며, GUI에서는 날씨에 해당하는 이미지가 표시됩니다. 사람 객체의 상태 변화는 콘솔에 출력됩니다. 날씨가 맑다면 사람객체의 기분이 좋아지고, 체력이 10만큼 높아집니다. 구름낀 날씨라면 사람 객체의 기분은 그저 그렇고, 체력이 5만큼 높아집니다. 비가 오는 날시라면 사람 객체의 기분은 좋지 않고, 체력은 10만큼 줄어듭니다. 객체 지향 프로그래밍의 기본적인 개념과 자바 스윙의 사용법을 이해하는데 도움이 되었으면 좋겠습니다. 우선 시연영상부터 보겠습니다. 다음은.. 2024. 3. 21.
[PHP] MySQL 연결 및 다루기 (MySQLi 방식) PHP와 MySQL을 함께 사용하여 데이터베이스 기반 웹 애플리케이션을 개발할 때, 데이터베이스와의 통신은 필수적입니다. PHP에서 MySQL 데이터베이스와 상호작용하는 주된 두 가지 방법은 MySQL Improved Extension(MySQLi)와 PHP Data Objects(PDO)입니다. 이 글에서는 MySQLi 확장 기능을 사용한 연결 및 데이터베이스 다루기 방법에 초점을 맞추겠습니다. MySQLi를 사용한 서버 연결 객체 지향 방식 절차적 방식 데이터베이스 다루기 레코드 추가 $sql = "INSERT INTO tablename (column1, column2) VALUES ('value1', 'value2')"; if ($conn->query($sql) === TRUE) { echo "새 .. 2024. 3. 20.
[JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 안녕하세요 오늘은 CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화 해보겠습니다. 다음은 index.html 의 코드입니다 Crypto Market Data Bitcoin Ethereum Litecoin Show Data 다음은 script.js 의 코드입니다. // 전역 변수로 차트 인스턴스를 저장 let myChart; document.getElementById('show-data').addEventListener('click', async () => { const cryptoCurrency = document.getElementById('crypto-select').value; const ctx = document.getElementBy.. 2024. 3. 19.

티스토리툴바