shine.log

2025 연말 회고 — '작게 쌓더라도 끊기지 않게'

shinejung — Wed, 31 Dec 2025 21:33:27 +0900

2025년은 회사 프로젝트에 집중하면서도 재충전도 할 수 있었던 해였다. 그전에는 대학생활을 하면서 파트타임 외주 개발도 하고, 교육 프로그램과 동아리 활동도 하고, 팀 프로젝트도 하며 한 시즌에 여러 일을 병행해 왔다. 그런데 이렇게 1년 내내 한 조직을 위해서만 일해본 건 의외로 처음이라, 지금 생각해도 조금 신기하다.

회사에 들어온 지 2년째가 되면서 서비스에 대한 책임이 커졌고, 신경 써서 끝내야 하는 일도 많아졌다. 하지만 그만큼 내 역량을 보여줄 기회도 많았다. 계속되는 FE 프로젝트 개발 속에서, FE에 대한 내 기준과 판단도 선명해졌다.
일상에서는 아내와 강아지와 여행을 다니고 취미 생활도 즐기면서 숨을 고를 수 있었다. 지금까지 쉼 없이 달려왔다면, 올해는 퇴근 후의 즐거움도 많이 누렸던 것 같다.

올해의 대표 세 키워드는 실내 위치추적, 경험으로 쌓여가는 FE 전문성, 재충전이다.

올해 가장 큰 하이라이트는 자산 관리 서비스(실내 위치추적 + 도면 뷰)를 성공적으로 만든 일이다. 이 프로젝트에 차출되어 TF팀에 합류했지만, 기존 서비스개발팀 업무도 계속 병행했다. 한 해 내내 컨텍스트가 자주 바뀌었고, 그래서 1년이 더 정신없고 빠르게 지나간 느낌이 들었다. 그래도 팀과 함께 배포까지 마무리했다. 그 과정과 결과가 인정으로 돌아왔고, 승진과 보상도 따라왔다.

학생 때도 웹 서비스를 많이 만들었지만, 실무에서 제품을 굴려보는 경험은 확실히 달랐다. B2B 환경에서는 장애나 문제가 고객과 우리 모두의 손실로 이어질 수 있어서, 개발 스타일이 더 보수적이고 신중해졌다. 선택의 기로가 생기면 어떤 결정이 장기적으로 팀에 유리한지와 로드맵까지 함께 보게 됐다. 기능을 추가하거나 남이 만든 도구를 쓸 때도 어디서 문제가 날 수 있는지, 어떤 엣지 케이스를 먼저 막아야 하는지부터 생각하게 됐다.

사이드 프로젝트에서도 좋은 순간이 있었다. 삼촌들이 사업을 하시는데 홍보와 웹사이트 유지 비용을 고민하신다는 걸 알고, 주말을 활용해 직접 수정할 수 있는 웹사이트를 만들어 드렸다. 자세한 내용은 LinkedIn 글에 적어뒀다.
이번에는 처음으로 구글 광고도 직접 세팅해봤다. 키워드 설정만으로도 노출이 달라지는 게 신기했고, 견적 문의 완료를 전환으로 측정해 광고가 실제 문의로 이어지는 흐름을 확인한 것도 새로운 경험이었다. 어떻게 해야 광고가 더 잘 될 수 있는지 공부해보고 싶어졌다.

개인적으로 올해는 재충전이라는 말이 잘 어울린다. 아내와 제주도에서 자유여행을 하면서, 커리어가 중요하긴 해도 20대를 일만으로 채우지는 말아야겠다는 생각이 들었다. 일정 시간은 일부러 가정과 즐거움을 위해 남겨두는 것도 중요하다고 느꼈다. 또 골든 리트리버 해피를 키우면서 매일 산책을 하게 됐는데, 그 시간 덕분에 디지털에서 벗어나 자연스럽게 생각을 정리하고 리프레시도 할 수 있었다.

아쉬운 점도 있었다. 병행 업무가 많아 컨텍스트 스위칭이 잦았고, 공부와 기록을 꾸준히 이어가지 못했다. 특히 회고의 필요성을 느낀 지 얼마 안 돼서, 올해는 기록이 부족한 편이다.

2026 계획 (Continue / Start / Stop)

Continue
- 병행 상황에서도 맡은 일을 끝까지 마무리하는 태도
- 사용자가 만족할 만한 경험을 만들기 위해 디테일을 끝까지 챙기는 태도
- 가정에 집중하는 시간 지키기
Start
- 월말 회고를 루틴으로 만들고, 기록을 쌓아 연말 회고까지 자연스럽게 이어가기
- 아내와 함께 만든 '월간 목표' 룰을 꾸준히 운영하기
Stop
- 기록을 미루다가 몰아서 쓰려다 포기하는 패턴
- 과한 단기 목표로 시작했다가 무너지는 패턴
- 컨텍스트 스위칭에 끌려다니는 일(우선순위/타임박스로 줄이기)

아내와 함께 '월간 목표' 룰도 만들었다. 매달 5개의 목표를 정하고, 하나를 지킬 때마다 용돈 1만 원을 추가로 받는 방식이다.

월간 목표 5개

월말 회고 글 작성
구매한 강의 수강 4시간
책 200페이지
프론트엔드 기술 글 4개
앱 1개 개발

2026년은 '작게 쌓더라도 끊기지 않게' 보내보자.

프론트엔드 개발자가 북마크해야 할 리소스 모음 (3/3) - 개발 & 테스트편

shinejung — Wed, 12 Nov 2025 18:15:34 +0900

프론트엔드 개발을 하면서 어떤 에디터, 테스트 도구 쓸까 라는 고민해 보신 적 있으신가요?

개발 환경 구축부터 테스트, 최적화에 필요한 도구들을 정리해 봤습니다. 필요할 때마다 찾아보세요!

개발자 도구

코드 에디터 & IDE

VS Code - 마이크로소프트 코드 에디터
WebStorm - JetBrains JavaScript IDE
Cursor - AI 기반 코드 에디터

코드 스니펫 & 템플릿

30 seconds of code - 짧은 코드 스니펫
CodePen - 프론트엔드 코드 공유
HTML5 Boilerplate - HTML5 템플릿

API & 모킹

JSON Placeholder - 가짜 REST API
Random User Generator - 랜덤 사용자 데이터
Lorem Ipsum - 더미 텍스트 생성기
MSW - Mock Service Worker

브라우저 테스트 & 호환성

BrowserStack - 크로스 브라우저 테스트
Can I Use - 브라우저 호환성 확인
Browserslist - 타겟 브라우저 쿼리 도구

버전 관리

GitHub - Git 저장소 & 협업
GitLab - DevOps 플랫폼
Bitbucket - Git 저장소

코드 품질 관리

린터 & 포매터

ESLint - JavaScript 린터
Prettier - 코드 포매터
Stylelint - CSS 린터

Git Hooks

Husky - Git hooks 관리
lint-staged - Staged 파일 린트

코드 분석

SonarQube - 코드 품질 분석
CodeClimate - 코드 리뷰 & 분석

AI 코드 리뷰

CodeRabbit - AI 기반 PR 리뷰
Codium AI - AI PR 분석 & 테스트 생성
Qodana - JetBrains 코드 품질 플랫폼

테스트 & 디버깅

테스트 프레임워크

Vitest - Vite 기반 테스트 프레임워크
Jest - JavaScript 테스트 프레임워크
React Testing Library - React 테스트 라이브러리

E2E 테스트

Playwright - 모던 E2E 테스트
Cypress - JavaScript E2E 테스트

비주얼 테스트

Chromatic - Storybook 비주얼 테스트
Percy - 비주얼 리뷰 플랫폼

디버깅 도구

React DevTools - React 디버깅
Redux DevTools - Redux 디버깅
Chrome DevTools - 브라우저 개발자 도구

API 테스트

Postman - API 개발 & 테스트
Insomnia - API 클라이언트

CI/CD & 배포

CI/CD 플랫폼

GitHub Actions - GitHub CI/CD
GitLab CI - GitLab CI/CD
CircleCI - 클라우드 CI/CD

배포 플랫폼

Vercel - Next.js 최적화 배포
Netlify - JAMstack 배포
Cloudflare Pages - 엣지 배포
Railway - 풀스택 배포

♿ 접근성 도구

접근성 검사

WAVE - 웹 접근성 평가 도구
Axe DevTools - 접근성 테스트 확장 프로그램
Pa11y - 자동화된 접근성 테스트

색상 대비 확인

WebAIM Contrast Checker - 색상 대비 검사
Contrast Ratio - 대비율 계산기
Color Oracle - 색맹 시뮬레이터

접근성 라이브러리

React Aria - Adobe의 접근성 후크
Radix UI - 접근성 우선 UI 컴포넌트

⚡ 성능 & 최적화

성능 측정

Lighthouse - 웹 성능 감사
WebPageTest - 웹 성능 테스트
PageSpeed Insights - Google 성능 분석

번들 분석

Webpack Bundle Analyzer - Webpack 번들 분석
Vite Bundle Visualizer - Vite 번들 분석
Bundle Phobia - npm 패키지 크기 확인

이미지 최적화

Squoosh - 이미지 압축 도구
TinyPNG - PNG/JPG 압축
ImageOptim - 이미지 최적화 앱

모니터링 & 분석

Sentry - 에러 모니터링
LogRocket - 세션 재생 & 모니터링
Google Analytics - 웹 분석
Vercel Analytics - Web Vitals 모니터링

학습 리소스

문서화

MDN Web Docs - 웹 기술 문서
Web.dev - Google의 웹 개발 가이드
JavaScript.info - 모던 JavaScript 튜토리얼

코딩 챌린지

Frontend Mentor - 프론트엔드 챌린지
Codewars - 코딩 문제
LeetCode - 알고리즘 문제

도움이 되셨나요? 유용한 리소스가 있다면 댓글로 공유해 주세요!

프론트엔드 개발자가 북마크해야 할 리소스 모음 (2/3) - UI & 인터랙션편

shinejung — Wed, 12 Nov 2025 18:10:02 +0900

프론트엔드 개발을 하면서 어떤 CSS 프레임워크, 애니메이션 라이브러리 쓸까 라는 고민해 보신 적 있으신가요?

UI 구현과 시각적 표현에 필요한 도구들을 정리해 봤습니다. 필요할 때마다 찾아보세요!

️ 디자인 & 프로토타이핑 도구

디자인 도구

Figma - 협업 디자인 도구
Sketch - macOS 전용 디자인 도구

프로토타이핑 도구

Framer - 인터랙티브 프로토타이핑
ProtoPie - 코드 없는 프로토타이핑

디자인 to 코드

Figma Dev Mode - Figma 디자인을 코드로
Anima - 디자인을 React/Vue 코드로 변환

온라인 디자인 도구

Canva - 온라인 디자인 도구

애니메이션 & 모션

JavaScript 애니메이션 라이브러리

GSAP - 고성능 JavaScript 애니메이션
Motion - React 모던 모션 라이브러리 (구 Framer Motion)
React Spring - React 기반 물리 애니메이션
Anime.js - 경량 JavaScript 애니메이션

CSS 애니메이션

Animate.css - 즉시 사용 가능한 CSS 애니메이션
Animista - CSS 애니메이션 생성기

로티 & 벡터 애니메이션

Lottie Files - 로티 애니메이션 라이브러리
Lottie React - React용 Lottie

마이크로 인터렉션 & UI 효과

Pre-made 컴포넌트

Aceternity UI - 고급 인터렉션 컴포넌트
Magic UI - React 애니메이션 컴포넌트
shadcn/ui - 복사 가능한 컴포넌트 라이브러리

CSS 효과 라이브러리

Hover.css - 호버 효과 모음

로딩 & 인디케이터

UI Ball - 로딩 애니메이션 컴포넌트
SpinKit - CSS 스피너 모음
CSS Loaders - 순수 CSS 로더

예제 & 영감

CodePen Micro Interactions - 실전 예제
Dribbble Micro Interactions - 디자인 영감
UI Movement - UI 애니메이션 갤러리

3D 프로그래밍

Three.js 학습 리소스

Three.js Documentation - 공식 Three.js 문서
Three.js Manual - Three.js 매뉴얼 가이드
Three.js Journey - Bruno Simon의 Three.js 완전 강의

React Three Fiber

React Three Fiber - React용 Three.js
Drei - React Three Fiber 헬퍼 라이브러리
Leva - React GUI 컨트롤

WebGL & 3D 라이브러리

Babylon.js - 웹 3D 게임 엔진
A-Frame - WebVR 프레임워크

️ CSS & UI 도구

CSS 프레임워크

Tailwind CSS - 유틸리티 퍼스트 CSS
Bootstrap - UI 컴포넌트 프레임워크
Bulma - 모던 CSS 프레임워크

CSS-in-JS

Styled Components - React CSS-in-JS
Emotion - CSS-in-JS 라이브러리

CSS 생성기

CSS Grid Generator - CSS Grid 레이아웃 생성기
Neumorphism - 뉴모피즘 CSS 생성기
Fancy Border Radius - border-radius 생성기
Glassmorphism - 글래스모피즘 생성기

그림자 & 효과

Shadow Palette Generator - 그림자 팔레트 생성기
Box Shadows - box-shadow 예제 모음
CSS Clip-path Maker - clip-path 생성기

레이아웃 학습 도구

Grid.layoutit - CSS Grid 시각화 도구
Flexbox Froggy - Flexbox 학습 게임
Grid Garden - CSS Grid 학습 게임
CSS Battle - CSS 챌린지 게임

UI 컴포넌트 라이브러리

React UI 라이브러리

MUI (Material-UI) - Material Design 컴포넌트
Ant Design - 엔터프라이즈급 UI 라이브러리
Chakra UI - 접근성 우선 컴포넌트
Mantine - 풀스택 React 컴포넌트

Headless UI 라이브러리

Radix UI - 무헤드 UI 컴포넌트
Headless UI - Tailwind 팀이 만든 컴포넌트
React Aria - Adobe의 접근성 후크

SVG & 벡터 도구

SVG 편집 & 최적화

SVGOMG - SVG 최적화 도구
Boxy SVG - 온라인 SVG 편집기
SVG Path Editor - SVG 패스 편집기

SVG 애니메이션

SVGArtista - SVG 애니메이션 도구
Vivus - SVG 선 그리기 애니메이션

도움이 되셨나요? 유용한 리소스가 있다면 댓글로 공유해 주세요!

프론트엔드 개발자가 북마크해야 할 리소스 모음 (1/3) - 디자인 에셋편

shinejung — Wed, 12 Nov 2025 18:05:20 +0900

프론트엔드 개발을 하면서 좋은 아이콘, 이미지, 폰트 어디서 구하지 라는 고민해 보신 적 있으신가요?

무료 또는 CC0 라이선스로 사용 가능한 디자인 에셋을 정리해 봤습니다. 필요할 때마다 찾아보세요!

일러스트레이션 & 아이콘

벡터 일러스트레이션

Illustroke - AI 기반 벡터 일러스트레이션 생성
Storyset - 무료 편집 가능한 일러스트레이션
Blush - 믹스 앤 매치 일러스트레이션
Open Peeps - 손으로 그린 일러스트레이션 라이브러리
unDraw - 오픈소스 일러스트레이션
ManyPixels - 2,500개 이상의 무료 일러스트레이션

아이콘 & 일러스트레이션 마켓플레이스

IconScout Illustrations - 일러스트레이션 마켓플레이스
IconScout 3D - 3D 일러스트레이션 모음
IconScout AI - AI 기반 아이콘 생성
Freepik - 벡터, 일러스트레이션, 사진 마켓플레이스
Flaticon - 아이콘 전문 사이트

무료 아이콘 라이브러리

Heroicons - Tailwind CSS 팀이 만든 깔끔한 아이콘 세트
Lucide Icons - 아름답고 일관된 아이콘 라이브러리
Iconify - 150,000개 이상의 아이콘 통합 플랫폼

AI 일러스트레이션 도구

Krea.ai - AI 기반 크리에이티브 도구
Icons8 Illustration Generator - AI 일러스트레이션 생성기

️ 사진 & 이미지

고품질 무료 사진

Unsplash - 고품질 무료 사진 라이브러리
Pexels - 무료 사진 & 비디오 리소스

이미지 도구

TinyPNG - 이미지 압축 도구
Remove.bg - 배경 제거 도구
Lorem Picsum - 더미 이미지 생성기

비디오 & 영상

무료 스톡 비디오

Pixabay Videos - 무료 스톡 비디오
Pexels Videos - 무료 영상 리소스
Coverr - 무료 배경 영상
Videvo - 무료 비디오 클립

폰트 & 타이포그래피

무료 웹 폰트

Google Fonts - 무료 웹 폰트 라이브러리
Font Squirrel - 상업용 무료 폰트
DaFont - 폰트 아카이브

폰트 도구

FontPair - Google Fonts 조합 추천
Type Scale - 타이포그래피 스케일 생성기

사운드 & 오디오

무료 사운드 라이브러리

Freesound - 무료 사운드 라이브러리
Zapsplat - 사운드 이펙트 라이브러리
BBC Sound Effects - BBC 사운드 이펙트 아카이브

무료 음악

YouTube Audio Library - 로열티 프리 음악
Free Music Archive - 무료 음악 아카이브

3D 아바타 & 캐릭터

아바타 생성 & 커스터마이징

Ready Player Me - 크로스 게임 아바타 플랫폼
Avatar SDK - 리얼리스틱 아바타 생성 SDK
Deep Motion - 3D 캐릭터 애니메이션
Mixamo - 3D 캐릭터 애니메이션 (Adobe)

3D 모델 & 에셋

AI 기반 3D 생성

Meshy AI - 텍스트/이미지에서 3D 모델 생성 (AI 기반)

3D 모델 마켓플레이스

PMND Market - React Three Fiber 에셋
Sketchfab - 3D 모델 다운로드
Poly Pizza - 무료 low-poly 3D 모델
Kenney Assets - 게임 개발 에셋

무료 3D 모델 리소스

CGTrader Free - 무료 3D 모델
TurboSquid Free - 무료 3D 모델
BlenderKit - Blender 애드온 에셋
Quaternius - 무료 CC0 3D 모델
Clara.io Library - 온라인 3D 모델 라이브러리

텍스처 & 패턴

무료 텍스처 리소스

Poly Haven - 고품질 무료 HDRI, 텍스처, 3D 모델
CC0 Textures - 무료 PBR 텍스처

색상 & 그라디언트

색상 팔레트 생성

Coolors - 색상 팔레트 생성기
Adobe Color - 색상 조합 도구
Realtime Colors - 실시간 색상 미리보기
Paletton - 색상 조합 도구

그라디언트 도구

CSS Gradient - CSS 그라디언트 생성기
Gradient Hunt - 그라디언트 컬렉션
uiGradients - 그라디언트 모음

색상 영감

Muzli Colors - 색상 팔레트 영감
Color Hunt - 트렌디한 색상 팔레트

️ 배경 & 패턴

배경 패턴 생성

Hero Patterns - SVG 배경 패턴
pattern.css - CSS 기반 배경 패턴
BGJar - 무료 SVG 배경 생성기
Haikei - 웹 디자인용 배경 생성기

그래픽 요소

Get Waves - SVG 웨이브 생성기

디자인 영감

디자인 포트폴리오 & 커뮤니티

Dribbble - 디자인 영감 & 포트폴리오 플랫폼
Behance - 크리에이티브 포트폴리오 플랫폼
Awwwards - 웹 디자인 어워드 & 영감

디자인 시스템 & 파일

Figma Community - 무료 디자인 파일 & 플러그인

목업 & 프로토타입

목업 생성 도구

Mockuuups - 제품 목업 생성기
Smartmockups - 온라인 목업 도구
Shots - 디바이스 목업 생성기
Screely - 브라우저 목업 생성기

추가 정보

저작권 주의사항

각 리소스의 라이선스를 확인하고 사용
상업적 프로젝트에서는 유료 라이선스 고려
CC0 라이선스는 자유롭게 사용 가능

도움이 되셨나요? 유용한 리소스가 있다면 댓글로 공유해 주세요!

나는 왜 개발을 좋아할까?

shinejung — Tue, 14 Oct 2025 17:20:44 +0900

구현의 DNA

초등학생 때 내 방은 늘 레고 블록과 과학상자로 어질러져 있었다. 침대에 누워 방 불을 끄는 장치를 고안해 보기도 했고, 유치하지만, 변신하는 자동차도 만들어봤다. 한동안은 루브 골드버그 장치 만들기에 빠져 있던 기억도 난다. 머릿속에 있는 복잡한 것들을 만들다 보면 시간 가는 줄 몰랐고, 그게 나에겐 최고의 놀이였다.

마인크래프트 속 코딩 경험

중학생이 되어 친구들과 마인크래프트를 하던 때, '더 편하고 빠르게 건물을 지을 수 없을까?' 하는 생각이 들었다. 그러다 공간 채우기, 공간 복사하기 같은 명령어를 찾아보고 능숙하게 쓸 수 있게 되었다. 전투 미니 게임을 만들고 싶어서 팀을 나누고 각 진영으로 순간이동 시키는 명령어, 게임을 초기화하고 다시 시작할 수 있는 명령어를 짜서 커맨드 블록에 저장했고, 원했던 대로 게임을 만들 수 있었다. 명령어를 짜는 과정 자체가 게임의 일부처럼 느껴져 재미있었다. 그때는 그게 코딩인 줄 몰랐지만, 지금 생각해 보면 스크립트로 코딩을 경험한 첫 순간이었다.

코딩을 배운 첫 수업

고등학교 1학년 정보 시간에 처음으로 정식 코딩 수업을 들었다. 선생님이 초심자도 따라가기 쉽게 차근차근 설명해 주셔서 코딩에 대한 좋은 인상을 가질 수 있었고, 실습으로 C 언어 기초 100제를 풀며 프로그래밍의 기본기를 익혀 갔다.

실습 문제집을 미리 다 풀어낸 뒤에는 친구들을 도와주며 설명해 주는 시간이 즐거웠다. 정보 과목에서 총점 만점을 받으면서 컴퓨터공학을 전공해도 되겠다는 생각이 들었다.

첫 프로젝트에서 마주한 격차

소프트웨어 인재 전형으로 대학에 입학하고 개발 동아리에 가입했다. 1학년 여름방학에 앱 개발 프로젝트에 참여했는데, UI 구현, 서버 구축, 크롤링, 깃 협업 등 무엇 하나 제대로 할 줄 몰라 막막했다. 선배들이 물리 서버를 다루고 앱을 완성해 스토어에 배포하는 모습을 보면서 실력 차이를 크게 실감했다. 결국 프로젝트에 뚜렷한 기여를 하지 못한 채 끝났고, 본격적인 개발 공부의 필요성을 느꼈다.

밤을 새웠던 이유

온라인 강의를 듣고 개인 프로젝트를 하나씩 완성해 가면서, 개발에 대한 자신감이 조금씩 생겼다. 방학 동안에는 주로 웹 서비스를 만들었는데, 개발이 너무 재미있어서 밥 먹는 시간과 잠자는 시간조차 아까웠다.

개발 자체도 재미있었지만, 나만의 멋진 결과물을 만들어 간다는 점이 더 큰 행복이었다. 그래서 멈출 수 없었고, 몰입할 수 있었다.
이틀 연속 밤을 새우자, 어머니가 강제로 컴퓨터를 끄셨던 기억도 있다.

완성한 서비스를 배포했을 때 학교 커뮤니티에서 좋은 반응을 얻었고, GA로 하루에 천 명 이상 접속하는 것을 확인했을 때(비록 며칠뿐이었지만) 짜릿함과 성취감을 느꼈다. '앞으로도 이 분야를 전문적으로 해보고 싶다'라는 생각이 굳어졌다.

사용자가 생기는 경험

3학년 때 스타트업 외주로 간호사 근무표를 자동으로 생성해 주는 웹 서비스를 구축했다. 기획부터 개발, 스테이징, QA, 상용 배포, CS 대응까지 서비스 운영의 전 과정을 경험했다.
배포 후에는 6천 명 이상의 사용자가 가입했는데, 내가 만든 서비스가 실제 현장의 골치 아픈 문제를 해결했다는 사실이 믿기지 않았다. 여러 현장에서 큰 도움이 되었다는 피드백을 받으며 오히려 내가 감사함을 느꼈다.
아직은 배워야 할 것이 많지만, 개발을 통해 누군가의 문제를 해결하고 세상에 작지만 긍정적인 변화를 만들어 나갈 수 있겠다는 용기를 얻었다.

같은 시기에는 학부에서 사용하는 출석 관리 서비스와 장학금 신청 시스템을 직접 설계하고 운영했다. 졸업 전에는 후배 개발자에게 인수인계를 마쳤고, 지금도 서비스가 안정적으로 운영되고 있다는 소식을 들을 때마다 큰 보람을 느낀다.

혼자에서 팀으로

4학년 때는 Apple Developer Academy 프로그램에 참여하며, 세상에 필요한 서비스를 만들기 위해 노력했다. 혼자가 아닌 팀원들과 함께했던 경험을 통해, 팀을 세워 나가는 법과 협업하며 개발하는 방법을 배울 수 있었다.

2024년부터는 메를로랩에 입사해 전문연구요원으로 복무하며, 사물인터넷 도메인에서 실무 개발 경험을 쌓고 있다. 실무를 하면서 느낀 것은, 개인의 개발 실력도 중요하지만, 좋은 팀을 만들고, 개선점을 찾아내고 팀의 효율을 높이는 일 또한 중요하다는 점이었다.

앞으로도 좋은 팀과 함께 몰입하며 멋진 결과물을 만들어 나가는 일을 계속해서 하고 싶다.

React Native WebView에서 네이티브와 데이터 주고받기

shinejung — Tue, 18 Mar 2025 18:00:18 +0900

앱을 개발하다 보면 네이티브 화면과 웹뷰(WebView)를 함께 사용해야 할 때가 있습니다. 예를 들어, 네이티브에서 로그인한 사용자 정보를 웹뷰에서도 그대로 유지하려면 어떻게 해야 할까요? 매번 웹뷰에서 로그인하는 건 사용자 입장에서 불편한 일이겠죠.

이 문제를 해결하려면 네이티브와 웹뷰가 데이터를 주고받을 수 있어야 합니다. postMessage와 onMessage를 사용하면 웹뷰에서 네이티브로 데이터를 전달할 수 있고, injectJavaScript를 활용하면 네이티브에서 웹뷰로 데이터를 보낼 수 있습니다.

같이 활용하면 좋은 기능으로는 onNavigationStateChange가 있습니다.
onNavigationStateChange를 이용하면 웹뷰에서 다른 페이지로 이동할 때를 감지해서 원하는 동작을 실행시킬 수 있습니다.

이번 글에서는 이 기능들을 활용해서 네이티브와 웹뷰 간 데이터를 연동하는 방법을 알아보고, 다크 모드 적용과 로그인 상태 유지 같은 실용적인 예제도 한번 구현해 보겠습니다.

1. injectJavaScript 활용

injectJavaScript는 네이티브에서 WebView 내부의 JavaScript 코드를 실행할 때 사용합니다. 웹뷰에 원하는 코드를 주입하거나 document 속성을 변경할 수 있습니다.

배포된 웹 페이지의 소스 코드를 수정하지 않고도 네이티브에서 웹뷰의 코드를 추가할 수 있기 때문에 잘 활용한다면 매우 유용합니다.

다크 모드 적용 예제 코드

import React, { useEffect, useRef } from "react";
import { View, useColorScheme } from "react-native";
import { WebView } from "react-native-webview";

const MyWebView = () => {
  const webViewRef = useRef(null);
  const colorScheme = useColorScheme(); // 기기의 다크 모드 여부 확인

  useEffect(() => {
    if (webViewRef.current) {
      webViewRef.current.injectJavaScript(`
        document.body.style.backgroundColor = '${
          colorScheme === "dark" ? "black" : "white"
        }';
        document.body.style.color = '${
          colorScheme === "dark" ? "white" : "black"
        }';
      `);
    }
  }, [colorScheme]);

  return (
    <View style={{ flex: 1 }}>
      <WebView ref={webViewRef} source={{ uri: "https://example.com" }} />
    </View>
  );
};

export default MyWebView;

예제 코드에서는 useColorScheme()을 사용해 기기의 다크 모드 설정을 감지하고 WebView에 반영하고 있습니다.

2. postMessage와 onMessage 활용

웹뷰에서 로그인하면 네이티브에서 세션 정보를 저장해야 하는 경우가 있습니다. 이때 postMessage를 사용하면 웹에서 네이티브로 데이터를 전달할 수 있습니다.

로그인 후 토큰 전달 예제 코드

WebView에서 네이티브로 메시지 보내기

import React, { useRef } from "react";
import { View, Alert } from "react-native";
import { WebView } from "react-native-webview";

const MyWebView = () => {
  const webViewRef = useRef(null);

  const onMessage = (event) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);
      Alert.alert("토큰을 받았습니다!", data.token);
    } catch (error) {
      console.error("메세지 파싱 오류:", error);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{
          html: `
          <html>
          <body>
            <script>
              function sendToken() {
                const token = 'auth-token';
                window.ReactNativeWebView.postMessage(JSON.stringify({ token }));
              }
            </script>
            <button onclick="sendToken()">Login</button>
          </body>
          </html>
        `,
        }}
        onMessage={onMessage}
      />
    </View>
  );
};

export default MyWebView;

이제 웹뷰에서 로그인 버튼을 누르면 네이티브로 토큰이 전달됩니다.

3. onNavigationStateChange 활용

웹뷰에서 로그인 후 완료 페이지(success 페이지)로 이동하면 네이티브에서 이를 감지하고 자동으로 화면을 닫거나, 세션을 저장할 수 있습니다. 또한 injectJavaScript를 함께 사용하면 웹뷰에서 다른 URL로 이동할 때 네이티브에서 추가적인 처리를 할 수도 있습니다.

로그인 완료 감지 후 알림 예제 코드

import React, { useRef } from "react";
import { View, Alert } from "react-native";
import { WebView } from "react-native-webview";

const MyWebView = () => {
  const webViewRef = useRef(null);

  const onLoad = () => {
    webViewRef.current.injectJavaScript(
      "window.ReactNativeWebView.postMessage('로그인 완료')"
    );
  };

  const onNavigationStateChange = (navState) => {
    if (navState.url.includes("success")) {
      Alert.alert("로그인 성공", "잠시 후 다른 화면으로 이동합니다.");
      // 다른 화면으로 이동하는 코드
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{ uri: "https://example.com/login" }}
        onLoad={onLoad}
        onNavigationStateChange={onNavigationStateChange}
      />
    </View>
  );
};

export default MyWebView;

이제 웹뷰에서 로그인 성공 페이지로 이동하면 네이티브에서 알림을 띄울 수 있습니다.

주의사항

보안을 위해 postMessage 사용 시 origin을 체크하는 것을 권장합니다!

웹뷰 앱 구현 중에 어려운 점이 있다면 댓글로 남겨주세요. 같이 고민해 보겠습니다. 감사합니다! ‍♂️

Quantum Gomoku(양자 오목) 보드게임 소개

shinejung — Fri, 7 Mar 2025 18:00:37 +0900

저는 집에 보드게임이 100개 넘게 있을 정도로 보드게임을 좋아하는 프론트엔드 개발자입니다. 언제나 나만의 보드게임을 만들고 싶다는 꿈을 가지고 있었고, 일상 속에서 끊임없이 새로운 아이디어를 고민해 왔습니다.

이번에는 신비한 개념을 가진 양자역학을 게임에 녹여보면 어떨까 하는 생각이 들었습니다. 서로에게 간섭을 주며 먼저 특정 패턴을 완성하면 승리하는 게임을 구상했고, 그렇게 탄생한 것이 바로 Quantum Gomoku입니다.

이 게임에서는 양자의 특성을 활용한 신박한 전략 플레이를 즐길 수 있습니다.

중첩 상태 – 측정 전까지 색이 확정되지 않는다!
얽힘 – 하나가 변하면 연결된 다른 하나도 즉시 변화!
⚡ 양자 도약 – 내 돌을 순간이동시켜 예측할 수 없는 한 수!

Quantum Gomoku는 웹 브라우저에서 무료로 플레이할 수 있습니다.
Quantum Gomoku 플레이하기

Quantum Gomoku

양자 역학의 원리를 활용한 전략 게임

quantum-gomoku.vercel.app

여러분의 피드백이 더욱 완성도 높은 게임을 만드는 데 큰 도움이 됩니다.
플레이 후 피드백 작성하기 버튼을 클릭해 자유롭게 의견을 남겨주세요!

보드게임 제작 과정

처음에는 각자 5장의 카드를 가지고, 먼저 자신의 모든 카드를 뒤집는 사람이 승리하는 형태로 구상했습니다. 하지만 플레이 테스트를 진행하면서, 2D 보드를 활용하면 더욱 전략적인 게임이 될 것 같다는 생각이 들었습니다. 최종적으로 오목을 기반으로 한 새로운 방향으로 수정하게 되었고, 아내와 둘째 형님(처남)과 함께 테스트를 거치며 세부 규칙을 다듬어 나갔습니다. 게임을 제작하는 과정에서 많은 도움을 주신 분들께 감사드립니다.

프로토타입, 완성된 사이트, 나의 보드게임 책장

AI 기술 덕분에 웹 프로토타입 제작이 훨씬 쉬워졌습니다. 게임을 만들어보고 싶은 분들에게 GPT나 Claude를 사용해서 빠르게 프로토타입을 만들어보는 것을 적극 추천합니다. 앞으로 더 많은 플레이어가 참여한다면 온라인 멀티플레이 기능을 추가하고, 실제 보드게임으로도 제작해 보고 싶습니다.

다음에는 어떤 주제로 게임을 만들어보면 좋을까요?

재미있게 즐겨주시고, 여러분의 의견을 들려주세요! ‍♂

React Native BLE에서 MTU 설정으로 데이터 전송량 늘리기 (Android)

shinejung — Fri, 14 Feb 2025 18:00:40 +0900

BLE(Bluetooth Low Energy) 통신을 통해 데이터를 전송하는 과정에서, Android에서는 한 번에 20바이트까지만 전송되는 것을 확인했습니다. (20바이트를 초과하면 패킷이 자동으로 나뉘어 전송됩니다.)

라이브러리 문서를 찾아보면서 MTU(Maximum Transmission Unit) 설정을 통해 데이터 전송량을 늘릴 수 있다는 것을 알게 되었습니다. 이 글에서는 React Native에서 MTU 크기를 설정하는 방법을 설명해 보겠습니다.

MTU란?

MTU(Maximum Transmission Unit)는 한 번에 전송할 수 있는 최대 바이트 크기를 의미합니다. BLE의 기본 MTU는 23바이트이지만, 이 중 3바이트는 헤더로 사용되므로 실제 데이터는 20바이트까지만 전송할 수 있습니다.

패킷을 여러 번 나눠 보내기보다 MTU 크기를 조정해 한 번에 더 많은 데이터를 전송하면 헤더 바이트를 아낄 수 있고 전송 속도도 높일 수 있습니다.

Android와 iOS의 MTU 차이

Android에서는 MTU 크기를 요청할 수 있지만 요청한 크기보다 작은 값이 설정될 수도 있습니다. iOS에서는 자동으로 MTU 크기가 조정됩니다. iOS에서의 MTU 최대값은 187바이트입니다.

MTU 요청하기 (Android)

React Native에서 BLE를 다루는 대표적인 라이브러리는 react-native-ble-manager와 react-native-ble-plx가 있습니다. 두 라이브러리에서 MTU를 요청하는 방법을 살펴보겠습니다.

1. react-native-ble-manager

react-native-ble-manager에서는 requestMTU 메서드를 사용해서 MTU를 요청할 수 있습니다.

import BleManager from "react-native-ble-manager";

await BleManager.connect(deviceId);

const mtu = await BleManager.requestMTU(deviceId, 512);
console.log(`변경된 MTU: ${mtu}`);

const services = await BleManager.retrieveServices(deviceId);

데이터를 전송할 때 write 또는 writeWithoutResponse 메서드를 사용하면, 다섯 번째 인자로 maxByteSize를 지정할 수 있습니다. maxByteSize를 지정하지 않으면 기본값인 20바이트로 설정되어 데이터가 나누어 전송됩니다. 따라서 한 번에 더 긴 데이터를 보내려면 maxByteSize를 설정해야 합니다.

await BleManager.write(deviceId, serviceUUID, characteristicUUID, data, 512);

2. react-native-ble-plx

react-native-ble-plx에서는 connectToDevice 메서드의 requestMTU 옵션을 사용해서 MTU를 요청할 수 있습니다.

import { BleManager } from "react-native-ble-plx";

const manager = new BleManager();

const device = await manager.connectToDevice(deviceId, {
  requestMTU: 512,
});
console.log(`변경된 MTU: ${device.mtu}`);

// 다른 MTU로 요청하고 싶다면
await device.requestMTU(23);
console.log(`다시 변경된 MTU: ${device.mtu}`);

주의점

MTU 크기는 요청한 값보다 작을 수 있기 때문에 실제로 변경된 MTU 크기를 확인해야 합니다.
모든 BLE 장치가 큰 MTU 크기를 지원하는 것은 아닙니다.

참고 자료

추가 정보나 궁금한 점이 있다면 댓글로 남겨주세요!

WWDC24 Swift Student Challenge 위너 선정 후기

shinejung — Mon, 3 Feb 2025 18:00:33 +0900

오늘부터 2025 Swift Student Challenge(스스챌) 제출이 시작되었습니다! 스스챌을 준비하는 분들을 위해 작년의 경험을 되살려 이 글을 작성했습니다. 저의 경험이 작게나마 도움이 되길 바랍니다.

Swift Student Challenge란?

Swift Student Challenge는 애플이 매년 전 세계 학생들을 대상으로 개최하는 공모전입니다. 350명 안에 들면 애플 굿즈와 상장 등 다양한 혜택을 받을 수 있고, 그중에서도 50명의 우수 수상자로 선정된다면 WWDC에 초대되어 2박 3일 동안 Apple 엔지니어들과 함께 잊지 못할 경험을 쌓을 수 있다고 합니다.

비용 부담 없이 쿠퍼티노를 다녀올 수 있습니다.

2025 Swift Student Challenge 참가하기

Swift Student Challenge

Swift Student Challenge에 앱 플레이그라운드를 제출하여 코딩을 향한 열정을 보여 주세요.

developer.apple.com

저는 2023년도에 처음 스스챌에 지원했지만 아쉽게도 수상까지는 이어지지 못했습니다. 카드 게임을 앱에서도 즐길 수 있게 개발했었는데, 심사위원들에게 인상을 남길만한 콘텐츠는 아니었던 것 같습니다.
그리고 다음 해인 2024년도에 스스챌에 다시 지원하게 되었습니다. 대학 졸업 전 마지막으로 참여할 수 있는 기회였고, 애플에서 주는 한정판 굿즈도 꼭 받고 싶어서 수상하고자 하는 의지가 더 강해졌습니다.

결과물

제가 만든 결과물은 'Real Craft'입니다. 이 앱은 증강현실(AR)에서 건축 블록을 쌓아 가상 건축물을 만들 수 있는 앱입니다. 저는 어릴 적부터 레고를 좋아했고, 중학생 때는 마인크래프트에서 커맨드 블록으로 코딩을 시작할 정도로 블록 건축에 관심이 많았습니다. 그래서 현실 세계 위에 내가 원하는 대로 건축물을 만들 수 있다면 정말 재미있겠다는 생각이 들었고, 스스챌의 주제로 가져가기로 결정했습니다.
앱은 ARKit을 활용해 사용자가 실제 환경 위에 가상 건축물을 배치할 수 있도록 했고, RealityKit을 사용해 여러 색상의 3D 블록을 구현했습니다. 나중에는 비전 프로에서도 사용할 수 있도록 개발해서 더 몰입감 있고 재미있는 앱으로 발전시키고 싶습니다.

개발 과정은 순조롭지 않았습니다. ARKit을 처음 접해서 3D 공간에서 좌표 처리를 이해하는 데 시간이 걸렸고, 내가 원하는 기능이 상상할 때는 간단해 보였지만 코드로 구현하려니 꽤나 복잡하다는 것을 알 수 있었습니다.
결국에는 공중에 떠 있는 블록을 설치하거나, 꾹 눌러서 블록을 제거하는 기능은 완성하지 못했습니다.

몇 가지 팁

조언

역대 스스챌 수상작을 볼 수 있는 사이트들이 있습니다. 주제 선정이 막막하다면 다른 사람들은 어떤 주제로 앱을 만들었는지 구경해 보세요.

화려하고 완벽한 디자인이 아니어도 수상할 수 있습니다.
투박하더라도 직접 그림을 그리고, 나만의 테마를 만든다면 좋은 점수를 받을 가능성이 높습니다.
오히려 투박하지만 개성 있는 앱이 "학생 챌린지"에서 더 어울리는 결과물이라고 생각합니다.

끝까지 완성하세요.
위너가 되든 안 되든, 나만의 앱을 만든다는 것 자체가 값진 경험입니다.
개발을 통해 얻은 배움과 성장이 분명 크게 남을 것입니다.

제출에 관해서

✅ 제출물 형식
Swift Student Challenge에서는 iOS 앱이 아닌 앱 플레이그라운드(.swiftpm) 형식으로 제출해야 합니다.
앱을 다 완성한 후에 확장자를 바꾸기는 어렵기 때문에 처음부터 플레이그라운드 프로젝트로 생성하세요.
Xcode에서도 플레이그라운드 프로젝트 작업을 할 수 있습니다.

✅ 인터넷 연결이 없는 앱이어야 합니다.
API를 활용하는 앱은 제출할 수 없으므로 주제 선정 시 참고하세요.

✅ 타임어택 금지
지원 폼에 써야 할 내용이 많고, 서버 문제가 발생할 수도 있습니다. 적어도 3시간 전에는 제출을 시작하세요.

✅ 스크린샷 3장 첨부 가능
영상은 첨부할 수 없습니다. 앱의 기능을 잘 보여주는 3개의 화면을 골라서 제출하세요.

✅ 자격 요건과 요구사항을 꼭 읽어보세요.

위너가 된 소감

위너로 선정되었다는 메일을 받았을 때, 처음엔 믿기지 않았고 새벽 5시에 자고 있던 아내를 깨울 정도로 기뻤습니다. 사실 작품을 끝까지 완성하지 못했고 여러 방면에서 부족한 점이 많다고 생각했는데도 선정을 해 주셔서 더욱 감사한 마음이 들었습니다.
게다가, 2023년에는 상품이 에어팟 프로였던 것에 비해 2024년에는 에어팟 맥스 를 받아서 한 번 더 놀랐습니다. 조금이나마 집안 경제에 도움이 되어 기쁩니다.

올해 상품은 무엇이 나올지 궁금하네요. 지금 시작해도 늦지 않았으니 스위프트를 몰라도 AI의 도움을 받아 도전해 보셨으면 좋겠습니다! 저에게 문의해 주셔도 아낌없는 조언과 도움을 드리겠습니다.

수상 상품

Apple 공식 수상 인증서
애플 개발자 프로그램 1년 무료 이용권
App Development with Swift 인증 시험 응시 코드 제공
AirPods Max

스스챌 참여를 고민하는 분들은 기회가 있을 때 꼭 도전해 보시길 추천합니다!
저는 작년에 학교를 졸업했고 직장에 다니기 시작했기 때문에 앞으로 참여할 기회가 없답니다.
(졸업했더라도 정말 참여하고 싶다면 애플 아카데미에 들어가 기회를 얻는 방법도 있습니다. )

React Native에서 SSL 인증서 검증 우회하기 (Expo 포함)

shinejung — Fri, 31 Jan 2025 18:00:55 +0900

React Native 또는 Expo를 사용하여 HTTPS 요청을 보낼 때, 자체 서명된 인증서나 만료된 인증서로 인해 요청이 실패할 수 있습니다. 대표적으로 아래와 같은 오류 메시지가 발생할 수 있습니다.

Error: The certificate for this server is invalid. You might be connecting to a server that is pretending to be "[서버 주소]" which could put your confidential information at risk.

또한, axios를 사용할 경우 Network Error가 발생할 수도 있습니다.

이 글에서는 SSL 인증서 검증을 우회해서 HTTPS 요청을 보내는 방법을 설명하겠습니다.

주의: 이 방법은 보안상 위험하므로 개발 환경에서만 사용할 것을 권장합니다. 프로덕션 환경에서 사용하면 앱 스토어 심사에서 거부될 가능성이 큽니다.

1. Expo 프로젝트인 경우 (React Native 프로젝트는 2번부터)

Expo 프로젝트에서는 먼저 Android 및 iOS 프로젝트 폴더를 생성해야 합니다.

npx expo prebuild

2. Android에서 SSL 인증서 검증 우회하기

Android에서 SSL 인증서 검증을 우회하려면 MainApplication.java 파일과 동일한 경로에 IgnoreSSLFactory.java 파일을 생성해야 합니다.

2.1. IgnoreSSLFactory.java 파일 생성

아래 코드를 복사하고, 첫 줄의 패키지명을 앱의 패키지명으로 변경해주세요.

package com.yourapp; // 패키지명을 수정하세요

import com.facebook.react.modules.network.OkHttpClientFactory;
import com.facebook.react.modules.network.OkHttpClientProvider;
import com.facebook.react.modules.network.ReactCookieJarContainer;
import java.security.cert.CertificateException;
import java.util.concurrent.TimeUnit;
import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSession;
import javax.net.ssl.SSLSocketFactory;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;
import okhttp3.OkHttpClient;

public class IgnoreSSLFactory implements OkHttpClientFactory {
    @Override
    public OkHttpClient createNewNetworkModuleClient() {
        try {
            final TrustManager[] trustAllCerts = new TrustManager[]{
                new X509TrustManager() {
                    @Override
                    public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {}
                    @Override
                    public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {}
                    @Override
                    public java.security.cert.X509Certificate[] getAcceptedIssuers() {
                        return new java.security.cert.X509Certificate[]{};
                    }
                }
            };

            SSLContext sslContext = SSLContext.getInstance("SSL");
            sslContext.init(null, trustAllCerts, new java.security.SecureRandom());
            SSLSocketFactory sslSocketFactory = sslContext.getSocketFactory();

            OkHttpClient.Builder builder = new OkHttpClient.Builder()
                .connectTimeout(0, TimeUnit.MILLISECONDS)
                .readTimeout(0, TimeUnit.MILLISECONDS)
                .writeTimeout(0, TimeUnit.MILLISECONDS)
                .cookieJar(new ReactCookieJarContainer());

            builder.sslSocketFactory(sslSocketFactory, (X509TrustManager) trustAllCerts[0]);
            builder.hostnameVerifier((hostname, session) -> true);

            return builder.build();
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
}

2.2. `MainApplication.java` 파일 수정

import문을 추가하고, onCreate 메서드 내에 OkHttpClientProvider.setOkHttpClientFactory(new IgnoreSSLFactory());를 추가합니다.

import com.facebook.react.modules.network.OkHttpClientProvider; // 추가

@Override
public void onCreate() {
  super.onCreate();
  SoLoader.init(this, /* native exopackage */ false);
  OkHttpClientProvider.setOkHttpClientFactory(new IgnoreSSLFactory()); // 추가
  initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}

2.3. 코틀린 프로젝트인 경우 `MainApplication.kt` 파일 수정

import com.facebook.react.modules.network.OkHttpClientProvider // 추가

override fun onCreate() {
  super.onCreate()
  SoLoader.init(this, false)
  OkHttpClientProvider.setOkHttpClientFactory(IgnoreSSLFactory()) // 추가
  ApplicationLifecycleDispatcher.onApplicationCreate(this)
}

3. iOS에서 SSL 인증서 검증 우회하기

iOS에서 SSL 인증서 검증을 우회하려면 Info.plist 파일에 아래 내용을 추가하세요.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

그다음, Xcode에서 프로젝트를 열고 RCTHTTPRequestHandler.m 파일을 수정해야 합니다.

파일 위치: Pods/Development Pods/React-RCTNetwork

3.1. `NSURLSession` 델리게이트 함수 추가

아래 함수를 #pragma mark - NSURLSession delegate 주석 아래에 추가하세요.

#pragma mark - NSURLSession delegate

- (void)URLSession:(NSURLSession *)session didReceiveChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler
{
  completionHandler(NSURLSessionAuthChallengeUseCredential, [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust]);
}

참고 자료

How to Ignore SSL for React Native (Android/iOS)
Stack Overflow 답변 (iOS 해결 방법 참고)

위 방법으로 해결되지 않거나 궁금한 점이 있다면 댓글로 남겨주세요!

React Native에서 로컬 서버에 접속하기 (Expo 포함)

shinejung — Fri, 24 Jan 2025 18:00:58 +0900

React Native 또는 Expo를 사용하여 애플리케이션을 개발할 때, 개발 중인 컴퓨터에서 실행 중인 서버에 접속해야 할 때가 있습니다. 이 글에서는 시뮬레이터나 실제 기기에서 로컬 서버에 접속하는 방법을 설명해 보겠습니다.

1. 로컬 서버 실행 확인

먼저, 개발 중인 컴퓨터에서 서버가 잘 실행되고 있어야 합니다. 컴퓨터의 브라우저에서 http://localhost:3000 같은 주소로 접속해서 서버가 정상적으로 작동하는지 확인해 보세요.

2. IP 주소 알아내기

시뮬레이터나 기기가 로컬 서버에 접근하려면 개발 중인 컴퓨터의 IP 주소를 알아야 합니다.
아래 방법을 참고해 주세요.

Windows

  1. 명령 프롬프트(cmd)를 엽니다.
  2. `ipconfig` 명령을 입력하고 Enter를 누릅니다.
  3. `IPv4 Address` 항목에서 IP 주소를 확인합니다.

Mac/Linux

  1. 터미널을 엽니다.
  2. `ifconfig | grep inet` 또는 `ip addr` 명령을 실행합니다.
  3. 네트워크 연결(Wi-Fi 등)의 IP 주소를 확인합니다.

192.168.1.10 같은 형식의 주소를 복사해 두세요.

3. 서버 주소 설정하기

앱 코드에서 서버 주소를 설정해야 합니다. IP 주소와 서버의 포트를 서버 URL로 사용하세요.

const SERVER_URL = "http://192.168.1.10:3000";

네트워크 요청을 보낼 때 이 URL을 사용하면 됩니다.

// fetch를 사용하는 예시
fetch(`${SERVER_URL}/api/data`)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

4. 시뮬레이터에서 테스트할 때

iOS 시뮬레이터

iOS 시뮬레이터는 http://localhost를 사용해도 됩니다.

하지만 실제 iOS 기기에서는 개발 중인 컴퓨터의 IP 주소를 사용해야 합니다.

Android 에뮬레이터

Android 에뮬레이터는 특별한 주소인 http://10.0.2.2를 사용하여 개발 중인 컴퓨터의 localhost에 접속할 수 있습니다. 자세한 내용은 Android Developers - Emulator Networking에서 확인할 수 있습니다.

Android도 마찬가지로 실제 Android 기기에서는 개발 중인 컴퓨터의 IP 주소를 사용해야 합니다.

5. 자주 발생하는 문제

같은 네트워크에 연결되어 있지 않는 경우

개발 중인 컴퓨터와 기기가 같은 Wi-Fi 네트워크에 연결되어 있어야 합니다.

CORS(Cross-Origin Resource Sharing) 오류

서버가 외부 요청을 허용하지 않을 경우 CORS 오류가 발생할 수 있습니다. 개발 중에는 아래와 같이 모든 요청을 허용하도록 설정하면 편리합니다.

const cors = require("cors");
app.use(cors());

Windows 방화벽 문제

방화벽이 있다면 연결이 차단될 수 있습니다. 방화벽에서 예외 규칙을 추가해 주세요.

참고 문서: Windows 방화벽 예외 추가하기

질문이나 추가 정보가 있으면 댓글로 남겨주세요!

Expo에서 pod install 오류: "cannot load such file -- ./scripts/autolinking" 해결 방법

shinejung — Thu, 23 Jan 2025 18:00:45 +0900

Expo로 iOS 빌드를 준비하거나 expo prebuild를 실행할 때, pod install 과정에서 아래와 같은 오류가 발생할 수 있습니다:

[!] Invalid `Podfile` file: cannot load such file -- ./scripts/autolinking.

#  from [프로젝트 디렉토리]/ios/Podfile:1
#  -------------------------------------------
>  require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
#  require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
#  -------------------------------------------

저는 Expo GitHub 이슈의 한 코멘트를 통해 문제를 해결할 수 있었습니다. 이 문제의 원인과 해결 방법을 정리해 보겠습니다.

오류 원인

이 오류는 CocoaPods 버전이 오래되어 Podfile과 호환되지 않기 때문에 발생합니다. Expo의 최신 프로젝트에서는 최신 CocoaPods 버전을 요구하기 때문에, 오래된 버전을 사용하는 경우 문제가 발생할 수 있습니다.

해결 방법

1. CocoaPods 최신 버전으로 업데이트

CocoaPods를 최신 버전으로 업데이트하세요. 업데이트 방법은 사용 중인 설치 방법에 따라 다릅니다.

Ruby Gems를 사용하는 경우

gem install cocoapods

Homebrew를 사용하는 경우

brew install cocoapods

이미 설치된 경우 덮어씌우기

brew link --overwrite cocoapods

2. CocoaPods 버전 확인

업데이트가 완료되면 아래 명령어로 현재 CocoaPods 버전을 확인해 보세요:

pod --version

최신 버전이라면 다음 단계로 넘어갑니다.

3. `pod install` 다시 실행

CocoaPods를 업데이트한 후, iOS 디렉토리에서 pod install을 다시 실행하거나 expo prebuild 명령어를 재시도해 보세요. 오류가 해결되었다면 빌드가 정상적으로 진행될 것입니다.

그래도 안 될 때는?

만약 위 방법으로도 문제가 해결되지 않는다면, 다음 단계를 시도해 보세요:

node_modules와 ios/ 디렉토리 삭제
```
rm -rf node_modules ios
```
다시 설치 및 설정
```
npm install
expo prebuild
```
이후 pod install을 실행하세요.

끝으로

다른 문제가 있거나, 궁금한 점이 있다면 댓글로 남겨주세요!