Dazzling 개발 노트

모바일 청첩장은 결국 “공유”가 핵심이다.링크 복사 버튼만 두는 것도 방법이지만,현실적으로 가장 많이 쓰이는 경로는 카카오톡이다.그래서 이번에는 카카오톡 공유하기 기능을 붙여보았다. Kakao developers의 존재를 모바일 청첩장을 제작하며 알게되었는데,생각보다 체계적으로 다양한 기능을 제공하고 있었다.이번 기회에 사용해보게 되어서 더 재미를 느낄 수 있었다^^문서 제공이 잘 되어있긴 하지만 몇 가지 삽질을 겪었다.기록 차원에서 정리해둔다.1. 카카오톡 공유 방식 선택카카오에서 제공하는 JavaScript SDK를 이용하면카카오톡 공유(카카오링크) 기능을 붙일 수 있다.React + Vite 환경에서는index.html에 SDK 로드앱 시작 시 Kakao.init()버튼 클릭 시 Kakao.Shar..

GitHub Pages를 이용해 모바일 청첩장을 제작하면서 이미지 최적화의 중요성을 체감하게 되었다.처음에는 단순히 웨딩 사진 원본을 그대로 사용하였다.그러나 배포 후 Network 탭을 확인해 보니 초기 전송량이 20MB를 초과하였다.이 게시글에서는 GitHub Pages 환경에서 이미지 최적화를 어떻게 설계하고 적용했는지, 그리고 전/후 성능 비교 결과를 중심으로 정리해 보겠다.1. 문제 상황프로젝트 환경은 다음과 같다.Frontend: React + Vite + TypeScriptHosting: GitHub Pages이미지: 웨딩 촬영 원본 JPG (8~12MB)초기 상태에서 Network 탭을 확인한 결과는 다음과 같았다.총 전송량: 21.5MBHero 이미지: 12MBGallery 이미지: 8M..

모바일 청첩장을 직접 만들면서 오랜만에 포스팅을 해본다. 결혼식에 대한 욕심이 있는 것은 아니지만, 준비하는 과정도 의미 있는 시간으로 보내고 싶었다.그래서 업체가 아닌, 단순한 템플릿을 사용하는 대신, 내가 설계하고 내가 배포하는 청첩장을 만들어보고자 한다.기술적으로도 의미 있고, 개인적으로도 오래 기억에 남을 작업이 될 것 같았다.이번 글에서는 모바일 청첩장을 어떤 구조로 설계했고, 어떤 방식으로 배포하고 있는지 정리해보려고 한다.1. 기술 스택 구성Frontend: React + Vite + TypeScript이번 프로젝트는 React + Vite + TypeScript 기반으로 구성했다.React를 선택한 이유는 단순하다.섹션 단위로 컴포넌트를 분리해 구조적으로 관리하고 싶었다.청첩장은 단순한 한..

힙 완전 이진트리 형태의 최대, 최솟값을 빠르게 찾아내는데 유용한 자료구조 최소 힙 부모 노드의 key가 자식 노드의 key보다 작거나 같은 완전 이진트리 최대 힙 부모 노드의 key가 자식 노드의 key보다 크거나 같은 완전 이진트리 JAVA로 힙 구현하기 우선순위 큐인 PriorityQueue를 통해 구현할 수 있다. 최대 힙은 내림차순 정렬이어야 하므로, Collections.reverseOrder 옵션을 추가해서 사용한다. PriorityQueue q = new PriorityQueue(Collections.reverseOrder()); 예제 문제 https://www.acmicpc.net/problem/11279 11279번: 최대 힙 첫째 줄에 연산의 개수 N(1 ≤ N ≤ 100,000)이 ..

자바에서 우선순위 큐(Priority Queue)는 각 요소가 우선순위에 따라 정렬되며, 우선순위가 가장 높은 요소부터 접근할 수 있는 특별한 형태의 큐를 말한다. 이 구조는 특정 요소의 처리 순서를 우선순위에 따라 결정해야 할 때 유용하게 사용된다. 우선순위 큐의 특징 자동 정렬 기능: 우선순위 큐에 요소를 추가하면, 자동으로 우선순위에 따라 내부적으로 정렬된다. 이 정렬 과정은 힙(Heap)이라는 데이터 구조를 사용하여 효율적으로 이루어진다. 우선순위 결정 방식: 우선순위는 요소의 자연적인 순서(예를 들어, 숫자의 경우 낮은 수에서 높은 수로의 순서) 또는 개발자가 제공하는 Comparator를 통해 결정될 수 있다. 효율적인 요소 추가 및 제거: 요소를 큐에 추가하거나 우선순위가 가장 높은 요소를 ..

주요 키워드 extends 클래스 상속 시 사용 클래스 상속에만 사용, 인터페이스 상속 시 미사용 implements 인터페이스 구현 시 사용 클래스가 인터페이스의 모든 추상 메서드를 구현하도록 함 여러 인터페이스 나열 가능 클래스가 인터페이스를 구현할 때 사용, 클래스 상속 시 미사용 throws 메서드나 생성자에서 발생할 수 있는 예외 선언 시 사용 라이브러리 import java.util.*; import java.io.*; Arrays int arr[] = {10, 8,11, 2, 3, 0}; // 오름차순 정렬 Arrays.sort(arr); // 내림차순 정렬 Arrays.sort(arr, Collections.reverseIrder()); // 일부만 정렬 : 0~4만 정렬 Arrays.so..

작업 순서 : 동기와 동기 동기 여러 작업을 처리할 때 작업 순서를 보장함 비동기 여러 작업을 처리할 때 작업 순서를 보장하지 않음 작업 대기 : 블로킹과 넌블로킹 블로킹 작업 수행 시 대기할 수 있음, 작업 순서 보장 넌블로킹 작업 수행 시 대기 없음

스케줄링 스케줄링 목적 멀티 프로세스 환경에서 모든 프로세스를 공평하게 실행하는 것 CPU 사용률 : CPU를 놀리지 않고 사용하는지 판단 처리량 : 단위 시간 당 실행한 프로세스 수 응답 시간 : 요청 발생 후 응답까지 걸린 시간 반환 시간 : 로드 후 종료까지 걸린 시간 대기 시간 : 대기 큐에서 대기한 시간의 총합 스와핑 Swapping 프로세스를 통으로 메모리 영역과 저장 공간으로 옮기는 것 메모리 공간보다 많은 프로세스를 실행할 수 있음 스왑 아웃 이벤트 요청 대기중인 프로세스를 통으로 저장 공간으로 이동 스왑 인 스왑 아웃한 프로세스에서 이벤트 요청 발생 시 프로세스를 통으로 다시 메모리에 로드 비선점형 스케줄링 실행중인 프로세스가 종료될 때까지 다른 프로세스를 실행할 수 없음 FCFS 스케줄..