본문 바로가기

분류 전체보기1351

[JavaScript] OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드 만들기 안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다. OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다. api키를 발급 받은 후 index.html 파일에 다음과 같이 코드를 작성해줍니다. 날씨 정보 대시보드 날씨 조회 그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다. async function fetchWeather() { console.log('fetchWeather') let city = document.getElementById('city-input').value.trim(); if (city) { let apiKey = '발급받은 내.. 2024. 2. 12.
[NestJs]NestJs 설치 및 프로젝트 생성 안녕하세요. 오늘은 NodeJs의 백엔드 프레임워크인 NestJs를 설치하고 실행까지 해보겠습니다. NestJs는 express가 구성되어 있고 express의 단점인 로직 구성이 너무 자유롭다는 문제를 해결하기 위해 MVC패턴의 아키텍처를 도입하여 보다 구조화되어 있고 체계적입니다. 그리고 NestJs는 TypeScript 언어 기반이며, javascript와 비교해 보면 정적 타입검사, 객체 지향 프로그래밍 등 다른 언어들이 사용하던 기능을 제공합니다. 이는 개발 단계에서 버그를 사전에 방지하고, 코드 재사용 및 유지 보수성을 높여주는 장점이 있습니다. 그럼 이제 설치를 해보겠습니다. Nodejs가 설치가 되어 있다는 가정하에 npm install @nestjs/cli 위 명령어로 설치가 끝나셨다면 .. 2024. 2. 11.
[Server] letsencrypt 인증서로 HTTPS 적용하기 오늘은 자신의 프로젝트에 https를 적용하는 방법을 알아보겠습니다. 먼저 HTTPS는 Hypertext Transfer Protocol Secure의 약자로 기존 HTTP 방식에 보안을 더하기 위해 클라이언트와 서버가 주고 받는 데이터를 암호화한 방식입니다. 기존 HTTP 방식에서는 데이터 암호화를 따로 해주는 게 아닌 이상 암호화되지 않은채로 서버로 전송되기 때문에 도중에 데이터가 오염될 가능성과 유출될 가능성이 있습니다. 그래서 HTTPS를 적용해야 하지만 꽤나 귀찮은 작업이기 때문에 오늘은 간단하게 HTTPS 인증서를 받아보고 적용하는 방법을 알아보겠습니다. 오늘 저희에게 필요한 것은 nginx 서버와 nip.io , Docker , Let's Encrypt , Cerbot 입니다. 서버를 제외하.. 2024. 2. 10.
[Python] Selenium으로 웹페이지 전체 캡처하기 이번 시간에는 Python으로 Selenium 라이브러리를 사용해서 웹페이지 전체를 캡쳐한뒤 로컬에 저장하는 예제를 진행하겠습니다. 1. Selenium 설치 pip install selenium 2. 소스 코드 이 예제에서는 네이버 메인페이지를 캡쳐했습니다. import time # time 모듈을 임포트하여 sleep 기능을 사용. from selenium import webdriver # Selenium 패키지에서 webdriver 모듈을 임포트. from selenium.webdriver.chrome.options import Options # Chrome 옵션을 설정하기 위해 Options 모듈을 임포트. # 전체 화면 캡처 기능을 정의하는 함수 def full_screenshot(driver,.. 2024. 2. 9.
[Android][Java] 사운드 재생 1. 사운드 다운 wav파일 무료 사운드 다운로드 https://www.soundjay.com/ 2. raw 디렉토리 , 사운드 파일 추가 3. 전체코드 MainActivity public class MainActivity extends AppCompatActivity { Button button; MediaPlayer mediaPlayer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 레이아웃에서 버튼을 찾아 button 변수에 할당합니다. button = findViewById(R.id.butt.. 2024. 2. 8.
[HTML/CSS] 탭 메뉴 만들기 안녕하세요 이번 게시글에서는 탭 메뉴를 만들어 탭 클릭시 하단의 내용이 보여지는 예제입니다. 우선 시연영상입니다. 다음은 전체 코드입니다. 탭1 탭2 탭3 탭1 탭1의 내용을 넣어주세요 탭2 탭2의 내용을 넣어주세요 탭3 탭3의 내용을 넣어주세요 2024. 2. 7.
[HTML/CSS] 세로 드롭다운 메뉴 안녕하세요 오늘은 HTML/CSS/JavaScript 를 활용하여 새로 드롭다운 메뉴를 만들어 볼게요. 우선 사용할 HTML 태그는 table, tr, td 태그입니다. 태그: 목적: 웹 페이지에 테이블을 만들 때 사용합니다. 태그는 테이블의 시작과 끝을 나타내며, 테이블의 전체적인 구조를 정의합니다. 자식 요소: (테이블 행), (테이블 헤더 셀), (테이블 데이터 셀), , , 등을 자식 요소로 포함할 수 있습니다. 태그 (Table Row): 목적: 테이블의 개별 행을 나타냅니다. 각 태그는 테이블의 한 행을 대표하며, 하나 이상의 또는 요소를 포함할 수 있습니다. 자식 요소: 주로 (테이블 데이터 셀) 또는 (테이블 헤더 셀) 태그를 자식 요소로 가집니다. 배치: 태그 내에 순차적으로 배치되어 테.. 2024. 2. 6.
[Python] 실시간 비트코인 거래 데이터를 MariaDB에 저장하기 https://stickode.tistory.com/1038 저번 시간에 이어서, 오늘은 실시간으로 수신한 비트코인 거래 데이터들을 DB(mariaDB)에 INSERT하겠습니다. MariaDB에는 다음과 같은 테이블을 추가하시면 됩니다. CREATE TABLE trades ( type VARCHAR(50), code VARCHAR(20), timestamp BIGINT, trade_date DATE, trade_time TIME, trade_timestamp BIGINT, trade_price DECIMAL(20, 4), trade_volume DECIMAL(20, 8), ask_bid VARCHAR(10), prev_closing_price DECIMAL(20, 8), `change` VARCHAR(1.. 2024. 2. 5.
[PHP] 배열 활용함수 PHP 배열은 데이터를 순차적으로 저장하거나 키-값 쌍으로 저장하는 데 사용되는 유연한 자료구조입니다. 배열은 데이터 컬렉션을 다룰 때 매우 중요한 역할을 합니다. PHP에서 배열을 효과적으로 다루기 위해 다양한 내장 함수들이 제공됩니다. 이러한 함수들은 특정 상황에서 배열을 처리하는 데 매우 유용합니다. 1. `array_push()` 배열의 끝에 하나 이상의 요소를 추가합니다. 예제 이미 정의된 배열에 새로운 요소를 추가할 때 사용합니다. 예를 들어, 사용자가 선택한 항목을 목록에 추가하는 경우 등에 적합합니다. 2. `array_pop()` 배열의 마지막 요소를 제거하고 그 값을 반환합니다. 배열의 마지막 요소를 제거하고 그 값을 사용해야 할 때 사용합니다. 스택 구조의 데이터 관리에 적합합니다. .. 2024. 2. 4.

티스토리툴바