본문 바로가기

분류 전체보기1416

[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.
[JavaScript] 커스텀 Promise로 비동기 동작 이해하기 안녕하세요.오늘은 비동기 작업이 무엇인지 이해하고, 커스텀 Promise를 구현해보겠습니다. 1. 비동기란 무엇인가?동기(Synchronous)와 비동기(Asynchronous)의 차이동기:작업이 순차적으로 실행됩니다. 하나의 작업이 끝날 때까지 다음 작업은 대기합니다.모든 작업이 완료될 때까지 프로그램의 실행이 멈춰 있을 수 있습니다.비동기:작업이 병렬적으로 실행됩니다. 하나의 작업이 진행되는 동안 다른 작업도 실행됩니다.시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기)이 프로그램을 멈추지 않게 처리합니다.비동기의 필요성비동기는 다음과 같은 상황에서 유용합니다:사용자 경험 개선: 시간이 오래 걸리는 작업(서버 요청, 이미지 로드 등)이 진행되는 동안 사용자와의 상호작용(UI 클릭 등)을 유지할 수.. 2024. 12. 4.
[Kotlin][Android] Jetpack Compose를 이용한 부드러운 막대 그래프 애니메이션 구현하기 안녕하세요 오늘은 안드로이드의 Jetpack Compose 에서 제공하는  애니메이션 API 를 사용해보겠습니다. Jetpack Compose 에서는  애니메이션을 쉽게 구현할 수 있는 api 를 여러가지 제공합니다  오늘은 특정 값에 따라 막대 그래프의 높이가 변하도록 애니메이션을 적용해보겠습니다  사용자에게 1부터  "점수 입력 (0-100)" 칸에  1부터 100까지의 숫자 중 아무 숫자를 입력한 후 적용하기 버튼을 누릅니다. 버튼을 누르면 입력 받은 숫자값(score) 만큼 그래프가 증가, 감소합니다.@Composablefun GraphDemo() { var score by remember { mutableStateOf(0f) } var input by remember { mutable.. 2024. 12. 3.
[Java][Android] Material Design Alert Dialog 사용하기 안녕하세요 오늘은 Material Design에서 제공하는 Alert Dialog를 사용해보도록 하겠습니다. 전체 코드입니다. MainActivity.javapublic class MainActivity extends AppCompatActivity { private Button btn_일반; private Button btn_MD; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btn_MD = findViewById(R.id.btn_MD); btn_일반 = findViewBy.. 2024. 12. 2.
[Java][Android] ArrayList와 LinkedList 차이 안녕하세요, 오늘은 ArrayList와 LinkedList 차이에 대해 알아보겠습니다.  먼저, LinkedList 는 데이터 구조의 한 형태로, 노드가 체인처럼 연결되어 있는 자료구조입니다. 각 노드는 데이터를 저장하고, 다른 노드와의 연결 정보를 가지고 있습니다.  - 노드(Node) : 데이터와 연결 정보를 담고 있는 구조체, LinkedList의 기본 단위 - 노드의 구성요소  1. 데이터: 저장된 값  2. 다음 노드에 대한 참조(주소) LinkedList의 기본 구조 : [HEAD] -> [Node1: Data | Next] -> [Node2: Data | Next] -> [TAIL]  LinkedList 와 ArrayList의 차이는 아래와 같습니다.  특징ArrayListLinkedList.. 2024. 12. 1.
[HTML/CSS] 반응형 웹페이지 만들기 반응형 디자인이 왜 필요할까요?다양한 디바이스에 대응이 가능합니다.스마트폰, 태블릿, 데스크톱 등 다양한 화면 크기를 지원합니다하나의 코드로 모든 디바이스에 최적화된 경험 제공별도의 모바일 웹사이트 개발 불필요사용자 경험 향상디바이스에 맞는 최적화된 레이아웃을 제공합니다가독성과 사용성개선, 모바일 사용 증가에 대응 할 수 있습니다활용 분야기업 웹사이트 회사소개, 제품 카탈로그, 포트폴리오 사이트전자 상거래온라인쇼핑몰, 제품 목록페이지, 결제 페이지블로그/뉴스 사이트콘텐츠 중심 웹사이트개인 블로그교육 플랫폼온라인 강의사이트교육 자료 제공 사이트다양한 이유로 현대 웹 개발에서 필수적인 요소이며 사용자들에게 일관된 요소를 제공하는데 중요합니다. HTMLDOCTYPE html>html lang="ko">head.. 2024. 12. 1.
[Nodejs]동기 방식으로 파일 생성 및 쓰기 예시 만들기 오늘은 fs 모듈을 활용해 동기방식으로 파일 생성 및 쓰기 예시를 만들어 보겠습니다 fs 모듈은 posix 표준 함수를  본보기로 삼아 모방한 방식으로 만든 파일 읽기, 쓰기 등 운영체제의 파일 시스템과 상호작용하는 기능을 제공하는 모듈입니다. fs 모듈 관련 자세한 설명은 아래 링크를 참고해 주세요https://nodejs.org/docs/latest-v22.x/api/fs.html  1.프로젝트 생성 및 초기화mkdir 생성할 폴더명cd 방금 생성한 폴더명npm init -y=> 원하는 경로에 폴더를 생성하고 해당 폴더로 이동 후 프로젝트 생성 및 초기화 시켜줍니다.   2.파일 생성(동기 방식)에 사용할 js 파일 생성touch js파일명 저는 위 이미지와 같이 생성하였습니다.   3.파일 생성(동.. 2024. 11. 29.
[JavaScript] 클로저(Closure)를 활용한 상태 유지 안녕하세요.오늘은 JavaScript의 중요한 개념 중 하나인 클로저(Closure)를 활용하여 상태를 안전하게 관리하는 방법과 이를 활용해 간단한 카운터를 만드는 예제를 함께 진행해 보겠습니다.클로저란?클로저의 정의클로저는 함수와 그 함수가 선언될 당시의 렉시컬 스코프(Lexical Scope)의 조합입니다. 즉, 함수가 선언된 환경(스코프)을 기억하고, 이 환경에 접근할 수 있는 능력을 뜻합니다.클로저를 사용하는 이유클로저는 다음과 같은 상황에서 유용합니다:상태 유지: 함수가 실행된 후에도 변수 상태를 유지할 수 있습니다.데이터 보호: 외부에서 접근할 수 없는 변수를 보호합니다.재사용성: 함수를 독립적인 단위로 만들어 재사용할 수 있습니다. 1. 클로저 없이 상태 관리하기먼저, 클로저를 사용하지 않고.. 2024. 11. 28.

티스토리툴바