| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- 컴포넌트설계
- 프론트엔드
- useEffect
- VITE
- pnpm
- flutter
- frontend
- typescript
- 프론트엔드 개발
- styledcomponents
- vue3
- githubactions
- javascript
- 모노레포
- 자바스크립트
- i18n
- capacitor
- ModuleFederation
- turborepo
- styled-components
- 상태관리
- 개발일기
- 웹개발
- reactquery
- Next.js
- 다국어
- ionic
- a11y
- 프론트엔드아키텍처
- react
- Today
- Total
목록전체 글 (55)
yunkogong
2026년 9월 8일. 지난번 SPA를 정리하면서 "페이지를 새로 안 받는데 그럼 화면은 대체 어떻게 바뀌는 걸까"라는 질문을 남겨뒀었다. 오늘 그걸 파봤다.시작은 또 비슷했다. "React는 Virtual DOM을 써서 빠르다"는 말을 나도 수없이 했는데, 막상 "왜 빠른데?"라고 물으면 또 말문이 막힐 것 같았다. 지난번에 한 번 당하고 나니 이번엔 미리 파보고 싶었다. 그래서 오늘 이해한 걸 까먹기 전에 일기처럼 남겨둔다. 한 줄로는 알고 있었다이 정도는 나온다. Virtual DOM은 실제 DOM을 흉내 낸 가벼운 JavaScript 객체고, 바뀐 부분만 골라서 실제 DOM에 반영한다. 여기까진 외운 문장이다.문제는 그다음이다. "그래서 그게 왜 빠른데?"한참 생각하다 알았다. 이 질문에 답하려면..
2026년 7월 22일. React로 매일 앱을 짜면서 "SPA 만든다"는 말을 아무렇지 않게 써왔는데, 오늘 누가 "SPA가 정확히 뭔데? MPA랑 뭐가 달라?"라고 물었을 때 말문이 막혔다. 매일 만들면서 정작 그게 뭔지 설명을 못 한다는 게 좀 부끄러웠다. 그래서 브라우저가 화면을 그리는 과정을 직접 열어보며 정리한 걸, 까먹기 전에 일기처럼 남겨둔다. 거창한 개념 강의가 아니라 그냥 "오늘 이걸 처음 제대로 이해했다"는 기록이다. 한 줄로는 알고 있었다물어봤을 때 이 정도는 나왔다. MPA는 페이지마다 새로 받고, SPA는 한 페이지 안에서 바뀐다. 근데 딱 거기까지였다. "그래서 뭐가 어떻게 다른데?"로 한 발만 더 들어가니 막혔다.MPA (Multi Page Application) — 화면마다..
안녕하세요 🐶반려동물이랑 갈 수 있는 곳만 모아놓은 지도, 가도돼멍을 만들었습니다. 전국 애견동반 장소 10,825곳을 실내/야외 동반 여부, 견종 크기, 목줄·입마개 조건까지 필터로 걸러서 찾을 수 있어요.왜 만들었는지부터 말씀드릴게요.강아지 데리고 어디 좀 나가려고 할 때마다, 검색하다가 시간 다 보내신 적 없으신가요.저는 이게 매번 스트레스였어요.블로그에 "애견동반 가능"이라고 적혀 있어서 갔는데 테라스만 되는 곳이었거나,소형견만 된다는 걸 도착해서야 알게 되거나,결국 출발 전에 하나하나 전화로 물어보고 가거나.그래서 없으면 직접 만들자 싶었어요.그렇게 나온 게 가도돼멍입니다. 가도돼멍은 어떤 사이트인가요전국에 반려동물 동반이 가능한 곳들을 지도에서 바로 찾을 수 있는 사이트입니다.지금 등록되어 ..
2026년 7월 21일. 지금까지 만졌던 프로젝트는 배포·인프라를 담당하는 사람이 따로 있었는데, 이번 프로젝트는 프론트인 내가 배포까지 다 책임져야 하는 상황이었다. 까먹기 전에 일기처럼 남겨둔다. 거창한 인프라 튜토리얼이 아니라 그냥 "오늘 프론트가 서버까지 만진 하루"의 기록이다.⚠️ 아래 도메인·파일명·경로는 전부 예시 값이다. 실제 값은 각자 환경에 맞게 바꿔 쓰면 된다.처음엔 GitHub Actions로 시작했다CI/CD 자체는 다른 프로젝트에서 만져본 경험이 있어서 여기서 크게 막힐 건 없었다. .github/workflows/에 PR CI·개발 배포·운영 배포 세 개를 나눠서 넣었다.PR CI는 tsc·lint만 돌리고 끝. 개발 배포는 develop 브랜치 머지에서, 운영 배포는 GitH..