분류 전체보기1414 [Java][Android] AlphaAnimation을 활용하여 글자 페이드 인/페이드 아웃 애니메이션 적용 안녕하세요, 오늘은 AlphaAnimation을 활용하여 텍스트에 페이드 인 / 페이드 아웃 애니메이션을 적용해보도록 하겠습니다. AlphaAnimation은 안드로이드에서 제공하는 애니메이션 클래스 중 하나로, 뷰(View)의 투명도(Alpha 값)를 조정하여 페이드 인(Fade In) 또는 페이드 아웃(Fade Out) 효과를 구현할 때 사용됩니다. 전체 코드 입니다. MainActivity.javapublic class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); .. 2024. 12. 12. [Nodejs]비동기, 콜백 방식으로 파일 생성 및 쓰기 예시 만들기 오늘은 fs 모듈을 활용해 비동기 콜백 방식으로 파일 생성 및 쓰기 예시를 만들어 보겠습니다 fs 모듈 관련 자세한 설명은 아래 링크를 참고해 주세요https://nodejs.org/docs/latest-v22.x/api/fs.html 1.프로젝트 생성 및 초기화mkdir 생성할 폴더명cd 방금 생성한 폴더명npm init -y=> 원하는 경로에 폴더를 생성하고 해당 폴더로 이동 후 프로젝트 생성 및 초기화 시켜줍니다. 2.파일 생성(비동기 콜백 방식)에 사용할 js 파일 생성touch js파일명 저는 위 이미지와 같이 생성하였습니다. 3.파일 생성(비동기 콜백 방식)에 사용할 js 파일 코드 작성// fs 모듈 importconst fs = require('node:fs');// path.. 2024. 12. 11. [JavaScript] 구조 분해 할당(Destructuring Assignment)으로 API 응답 처리하기 안녕하세요.오늘은 구조 분해 할당에 대해 이야기해보겠습니다. 프론트엔드 개발에서 API를 호출하여 데이터를 받아오는 작업은 매우 흔합니다. 이때 응답 데이터는 보통 객체나 배열 형태로 제공되는데, 이를 처리할 때 자바스크립트의 구조 분해 할당(Destructuring Assignment) 을 사용하면 코드를 더욱 간결하고 읽기 쉽게 작성할 수 있습니다. 이 글에서는 구조 분해 할당이 무엇인지와 API 응답 데이터를 구조 분해 할당으로 처리하는 방법을 단계별로 알아보겠습니다.1. 구조 분해 할당(Destructuring Assignment)이란?1.1 정의구조 분해 할당은 자바스크립트 ES6에서 도입된 문법으로, 배열(Array)이나 객체(Object)의 값을 분해하여 변수에 간단히 할당할 수 있게 해줍니.. 2024. 12. 10. [Kotlin][Android] 슬라이더와 애니메이션을 활용한 RGB 색상 조합기 만들기 오늘은 슬라이더를 움직여 RGB 값을 조정하면 실시간으로 색상이 변경되는 RGB 색상 조합기를 만들어보겠습니다. 1) RGBColorPickerDemo @Composablefun RGBColorPickerDemo() { var red by remember { mutableStateOf(0f) } var green by remember { mutableStateOf(0f) } var blue by remember { mutableStateOf(0f) } val animatedColor by animateColorAsState( targetValue = Color(red / 255, green / 255, blue / 255) ) 각 red, green, blue는 .. 2024. 12. 9. [HTML/CSS]스탑워치 기능을 활용한 10초 클릭 게임 만들기 타이머 관리를 통해 누가 10초 동안 클릭을 많이 하는 게임을 만들어 보겠습니다 타이머 관리 setInterval() - 게임 타이머 구현 setTimeout() - 애니메이션 효과이벤트 처리 클릭 이벤트 키보드 이벤트 (스페이스바)로컬 스토리지 활용 최고 기록 저장 데이터 지속성 구현DOM 조작 요소 생성 및 수정 클래스 조작 스타일 동적 변경DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>10초 클릭 게임title> style> bod.. 2024. 12. 9. [Java][Android] SeekBar 사용하여 값 나타내기 안녕하세요.이번에는 SeekBar를 사용하여 숫자를 조절하고 이를 TextView로 표시하는것을 구현해보도록 하겠습니다. SeekBar는 슬라이더와 유사한 UI 컴포넌트로, 숫자 값의 범위를 시각적으로 조절할 때 유용합니다. 전체 코드입니다. MainActivity.javapublic class MainActivity extends AppCompatActivity { private SeekBar seekBarValue; private TextView valueLabel; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.. 2024. 12. 8. [JavaScript] OpenStreetMap지도에서 두 지점의 경로 출력 안녕하세요, 오늘은 OpenStreetMap 지도에서 두 지점의 경로를 출력해보도록 하겠습니다. DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>OSM Route without API Keytitle> link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> style> #map { height: 100vh; width: 100%; } s.. 2024. 12. 8. [HTML/CSS/JS] 웹페이지 스탑워치, 타이머 만들기 JavaScript의 시간 관련 API와 상태 관리를 활용하여 타이머와 스톱워치를 만들어보도록 하겠습니다. html:먼저 타이머와 스톱워치의 기본 구조를 HTML로 작성하겠습니다. 각 섹션은 시간을 표시할 디스플레이와 제어 버튼들로 구성됩니다.css: 사용자가 직관적으로 사용할 수 있도록 깔끔하고 모던한 디자인을 CSS로 구현하겠습니다.js:타이머와 스톱워치의 기능을 클래스로 구현하여 효율적으로 상태를 관리하고 코드를 구조화하겠습니다.Date.now()를 사용하여 정확한 시간을 계산, setInterval로 실시간 업데이트를 구현해보겠습니다.DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content=.. 2024. 12. 7. [Nodejs] async await를 사용해 파일 생성 및 쓰기 예시 만들기 오늘은 fs/promises 모듈, async await 구문을 활용해 파일 생성 및 쓰기 예시를 만들어 보겠습니다 fs 모듈은 posix 표준 함수를 본보기로 삼아 모방한 방식으로 만든 파일 읽기, 쓰기 등 운영체제의 파일 시스템과 상호작용하는 기능을 제공하는 모듈입니다. fs/promises 모듈은 promise 객체를 리턴해주는 fs 모듈의 메소드를 제공합니다 fs 모듈 관련 자세한 설명은 아래 링크를 참고해 주세요https://nodejs.org/docs/latest-v22.x/api/fs.html 1.프로젝트 생성 및 초기화mkdir 생성할 폴더명cd 방금 생성한 폴더명npm init -y=> 원하는 경로에 폴더를 생성하고 해당 폴더로 이동 후 프로젝트 생성 및 초기화 시켜줍니다. 2.파.. 2024. 12. 5. 이전 1 ··· 4 5 6 7 8 9 10 ··· 158 다음
