기본 콘텐츠로 건너뛰기

추천 가젯

리액트 + 비트(Vite)로 모바일 청첩장 만들기 — 1편

모바일 청첩장 시리즈 1편 · 기획/스택/배포 리액트 + 비트(Vite)로 모바일 청첩장 만들기 — 1편 안녕하세요, 이번에 결혼 준비를 하면서 여자친구와 같이 모바일 청첩장 을 만들고 있어요. 여자친구가 디자인을 해서 전달해주면 제가 개발을 진행하고 있어요. 이 글은 구현기 1편 으로, 전체 흐름과 스택, 배포 구성까지 “부담 없이” 훑어봅니다. (코드는 여러 버전 테스트 중!) 이 글에서 보는 것 왜 SPA 모바일 청첩장인가? 기본 스택 & 폴더 구조 라우팅 선택: HashRouter가 편한 이유 Cloudflare Pages로 자동 배포 현재 진행 중인 UI 버전들(테스트 기록) 1) 왜 SPA 모바일 청첩장인가? 모바일 청첩장은 핵심이 명확해요. 가볍고 빠르고 끊김이 없어야 하고, 사진/지도/일정이 터치에 친화적 이어야 합니다. 그래서 React + Vite 로 싱글 페이지 앱(SPA)을 구성했고, 정적 호스팅(CDN)인 Cloudflare Pages 에 올려 GitHub 푸시 → 자동 배포 까지 한 번에 묶었습니다. UX 팁 · 이미지 WebP, loading="lazy" 기본 · 큰 터치 타깃 · BGM은 “사용자 탭 후” 재생(모바일 정책) 2) 기본 스택 & 폴더 구조 서버는 따로 두지 않았고, 정적 빌드 결과물( dist/ )만 올립니다. 현재 의존성은 아래와 같아요. package.json(요약) { "name": ...

파이썬 리스트 컴프리헨션 심화: 조건문과 중첩 사용법까지

파이썬 리스트 컴프리헨션 심화: 조건문과 중첩 사용법까지 🛠️

리스트 컴프리헨션은 파이썬 개발자의 생산성을 높여주는 대표적인 문법입니다. 이번에는 기본 사용법을 넘어, 조건문 추가와 중첩 for문까지 심화 내용을 함께 정리해보겠습니다.

리스트 컴프리헨션 아이콘

✅ 기본 리스트 컴프리헨션

리스트를 간결하게 생성하는 가장 기본적인 방법입니다.

# 기본 리스트 컴프리헨션
numbers = [x for x in range(5)]
print(numbers)  # [0, 1, 2, 3, 4]

✅ 조건문 추가하기

특정 조건을 만족하는 값만 리스트에 추가할 수 있습니다.

# 조건문 추가하기
even_numbers = [x for x in range(10) if x % 2 == 0]
print(even_numbers)  # [0, 2, 4, 6, 8]

✅ 중첩 for문 사용하기

2차원 리스트를 1차원으로 평탄화하거나, 복잡한 데이터 구조를 간결하게 처리할 때 유용합니다.

# 중첩 for문 사용하기 (2차원 리스트 평탄화)
matrix = [[1, 2], [3, 4], [5, 6]]
flat = [num for row in matrix for num in row]
print(flat)  # [1, 2, 3, 4, 5, 6]

리스트 컴프리헨션은 간결한 코드 작성뿐만 아니라 가독성까지 크게 향상시킬 수 있습니다. 하지만 너무 복잡하게 중첩하면 오히려 읽기 어려워질 수 있으니, 적절한 균형을 유지하는 것이 중요합니다.

코드는 짧을수록 강력하다. 짧지만 명확한 코드를 작성하는 개발자로 성장해나가세요. TechVerse가 언제나 당신의 여정을 응원합니다 🚀

Icons by Flaticon

댓글

가장 많이 본 글

Icons by Flaticon