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를 선택한 이유는 단순하다.섹션 단위로 컴포넌트를 분리해 구조적으로 관리하고 싶었다.청첩장은 단순한 한..

이클립스에서 버전이 업그레이드 되면서 Navigator가 빠졌다고 함 Project Explorer에서 설정을 바꿔 Navigator처럼 사용 가능 Window -> Show View -> Project Explorer 클릭 Project Explorer 창의 오른쪽 상단에 있는 세 개의 세로 점 클릭 "Filters and Customization..." 클릭 "Pre-set filters" 탭에서 "Java output folders" 선택 해제 "Content" 탭에서 "Java Elements" 선택 해제 레퍼런스 https://okky.kr/questions/1497970

힙 완전 이진트리 형태의 최대, 최솟값을 빠르게 찾아내는데 유용한 자료구조 최소 힙 부모 노드의 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)이 ..

[백준] 11055 - 가장 큰 증가하는 부분수열 (Java) 문제 https://www.acmicpc.net/problem/11055 풀이/후기 예전에 풀었던 문제지만, 코테 스터디 문제로 선택되어 다시 풀게 됐다. 문제를 보자마자 dp로 풀어야겠다는 생각이 들었고, 어떻게 구현할지도 대략 그려졌다. 예전에 dp 공부하면서 풀면서도 이걸 어떻게 하라는거지? 했었는데.. 이젠 문제 보자마자 dp로 풀어야겠다, 어떻게 하면 될까? 고민하는 스스로가 아주 뿌듯했다! 비록 초반에 작성한 코드는 오답이었지만, 명확히 이해하고 푼 것 같아 만족스럽다. 코드 import java.io.*; import java.util.*; public class Main { public static void main(String..

[프로그래머스] 콜라 문제 (Java) 문제 https://school.programmers.co.kr/learn/courses/30/lessons/132267 풀이/후기 문제를 보자마자 재귀로 풀어야겠다는 생각이 들었다. 평소 재귀에 약해서 두려움이 있었지만, 최대한 재귀로 풀기 위해 신경썼다. 다른 사람들 풀이를 보니 더욱 간단한 방법도 있는 것 같지만, 그래도 만족스럽다^_^ 코드 class Solution { static int answer = 0; public int solution(int a, int b, int n) { return colla(a, b, n); } static int colla(int a, int b, int n){ if (n < a) return answer; int out..

[프로그래머스] 소수 찾기 (Java) 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12921 풀이/후기 1부터 n까지라는 것을 보고 dp로 풀 수 있지 않을까? 하고 dp로 풀었다. 소수일 때마다 카운트를 하는 것과 성능차이가 날지 궁금해서 풀어보니 확실히 속도는 dp가 빨랐다. 이 문제에서 큰 효율을 본 것은 아니지만...! 예전엔 dp너무 어려워서 엉엉 울었는데,, 이제는 활용 방안을 생각해 낼 수 있어서 뿌듯했다. 코드 dp로 푼 풀이 class Solution { public int solution(int n) { int[] dp = new int[n+1]; dp[1] = 0; dp[2] = 1; for (int i=3; i