2025년은 회사 프로젝트에 집중하면서도 재충전도 할 수 있었던 해였다. 그전에는 대학생활을 하면서 파트타임 외주 개발도 하고, 교육 프로그램과 동아리 활동도 하고, 팀 프로젝트도 하며 한 시즌에 여러 일을 병행해 왔다. 그런데 이렇게 1년 내내 한 조직을 위해서만 일해본 건 의외로 처음이라, 지금 생각해도 조금 신기하다. 회사에 들어온 지 2년째가 되면서 서비스에 대한 책임이 커졌고, 신경 써서 끝내야 하는 일도 많아졌다. 하지만 그만큼 내 역량을 보여줄 기회도 많았다. 계속되는 FE 프로젝트 개발 속에서, FE에 대한 내 기준과 판단도 선명해졌다.일상에서는 아내와 강아지와 여행을 다니고 취미 생활도 즐기면서 숨을 고를 수 있었다. 지금까지 쉼 없이 달려왔다면, 올해는 퇴근 후의 즐거움도 많이 누렸던 ..

프론트엔드 개발을 하면서 어떤 에디터, 테스트 도구 쓸까 라는 고민해 보신 적 있으신가요?개발 환경 구축부터 테스트, 최적화에 필요한 도구들을 정리해 봤습니다. 필요할 때마다 찾아보세요!🔧 개발자 도구코드 에디터 & IDEVS Code - 마이크로소프트 코드 에디터WebStorm - JetBrains JavaScript IDECursor - AI 기반 코드 에디터코드 스니펫 & 템플릿30 seconds of code - 짧은 코드 스니펫CodePen - 프론트엔드 코드 공유HTML5 Boilerplate - HTML5 템플릿API & 모킹JSON Placeholder - 가짜 REST APIRandom User Generator - 랜덤 사용자 데이터Lorem Ipsum - 더미 텍스트 생성기MSW -..

프론트엔드 개발을 하면서 어떤 CSS 프레임워크, 애니메이션 라이브러리 쓸까 라는 고민해 보신 적 있으신가요?UI 구현과 시각적 표현에 필요한 도구들을 정리해 봤습니다. 필요할 때마다 찾아보세요!🛠️ 디자인 & 프로토타이핑 도구디자인 도구Figma - 협업 디자인 도구Sketch - macOS 전용 디자인 도구프로토타이핑 도구Framer - 인터랙티브 프로토타이핑ProtoPie - 코드 없는 프로토타이핑디자인 to 코드Figma Dev Mode - Figma 디자인을 코드로Anima - 디자인을 React/Vue 코드로 변환온라인 디자인 도구Canva - 온라인 디자인 도구🎬 애니메이션 & 모션JavaScript 애니메이션 라이브러리GSAP - 고성능 JavaScript 애니메이션Motion - Re..

프론트엔드 개발을 하면서 좋은 아이콘, 이미지, 폰트 어디서 구하지 라는 고민해 보신 적 있으신가요?무료 또는 CC0 라이선스로 사용 가능한 디자인 에셋을 정리해 봤습니다. 필요할 때마다 찾아보세요!📊 일러스트레이션 & 아이콘벡터 일러스트레이션Illustroke - AI 기반 벡터 일러스트레이션 생성Storyset - 무료 편집 가능한 일러스트레이션Blush - 믹스 앤 매치 일러스트레이션Open Peeps - 손으로 그린 일러스트레이션 라이브러리unDraw - 오픈소스 일러스트레이션ManyPixels - 2,500개 이상의 무료 일러스트레이션아이콘 & 일러스트레이션 마켓플레이스IconScout Illustrations - 일러스트레이션 마켓플레이스IconScout 3D - 3D 일러스트레이션 모음Ic..

구현의 DNA초등학생 때 내 방은 늘 레고 블록과 과학상자로 어질러져 있었다. 침대에 누워 방 불을 끄는 장치를 고안해 보기도 했고, 유치하지만, 변신하는 자동차도 만들어봤다. 한동안은 루브 골드버그 장치 만들기에 빠져 있던 기억도 난다. 머릿속에 있는 복잡한 것들을 만들다 보면 시간 가는 줄 몰랐고, 그게 나에겐 최고의 놀이였다. 마인크래프트 속 코딩 경험중학생이 되어 친구들과 마인크래프트를 하던 때, '더 편하고 빠르게 건물을 지을 수 없을까?' 하는 생각이 들었다. 그러다 공간 채우기, 공간 복사하기 같은 명령어를 찾아보고 능숙하게 쓸 수 있게 되었다. 전투 미니 게임을 만들고 싶어서 팀을 나누고 각 진영으로 순간이동 시키는 명령어, 게임을 초기화하고 다시 시작할 수 있는 명령어를 짜서 커맨드 블록..

앱을 개발하다 보면 네이티브 화면과 웹뷰(WebView)를 함께 사용해야 할 때가 있습니다. 예를 들어, 네이티브에서 로그인한 사용자 정보를 웹뷰에서도 그대로 유지하려면 어떻게 해야 할까요? 매번 웹뷰에서 로그인하는 건 사용자 입장에서 불편한 일이겠죠.이 문제를 해결하려면 네이티브와 웹뷰가 데이터를 주고받을 수 있어야 합니다. postMessage와 onMessage를 사용하면 웹뷰에서 네이티브로 데이터를 전달할 수 있고, injectJavaScript를 활용하면 네이티브에서 웹뷰로 데이터를 보낼 수 있습니다.같이 활용하면 좋은 기능으로는 onNavigationStateChange가 있습니다.onNavigationStateChange를 이용하면 웹뷰에서 다른 페이지로 이동할 때를 감지해서 원하는 동작을 ..

저는 집에 보드게임이 100개 넘게 있을 정도로 보드게임을 좋아하는 프론트엔드 개발자입니다. 언제나 나만의 보드게임을 만들고 싶다는 꿈을 가지고 있었고, 일상 속에서 끊임없이 새로운 아이디어를 고민해 왔습니다. 이번에는 신비한 개념을 가진 양자역학을 게임에 녹여보면 어떨까 하는 생각이 들었습니다. 서로에게 간섭을 주며 먼저 특정 패턴을 완성하면 승리하는 게임을 구상했고, 그렇게 탄생한 것이 바로 Quantum Gomoku입니다. 이 게임에서는 양자의 특성을 활용한 신박한 전략 플레이를 즐길 수 있습니다. 🔮 중첩 상태 – 측정 전까지 색이 확정되지 않는다!🔗 얽힘 – 하나가 변하면 연결된 다른 하나도 즉시 변화!⚡ 양자 도약 – 내 돌을 순간이동시켜 예측할 수 없는 한 수! Quantum Gomoku..

BLE(Bluetooth Low Energy) 통신을 통해 데이터를 전송하는 과정에서, Android에서는 한 번에 20바이트까지만 전송되는 것을 확인했습니다. (20바이트를 초과하면 패킷이 자동으로 나뉘어 전송됩니다.)라이브러리 문서를 찾아보면서 MTU(Maximum Transmission Unit) 설정을 통해 데이터 전송량을 늘릴 수 있다는 것을 알게 되었습니다. 이 글에서는 React Native에서 MTU 크기를 설정하는 방법을 설명해 보겠습니다.MTU란?MTU(Maximum Transmission Unit)는 한 번에 전송할 수 있는 최대 바이트 크기를 의미합니다. BLE의 기본 MTU는 23바이트이지만, 이 중 3바이트는 헤더로 사용되므로 실제 데이터는 20바이트까지만 전송할 수 있습니다.패..

오늘부터 2025 Swift Student Challenge(스스챌) 제출이 시작되었습니다! 스스챌을 준비하는 분들을 위해 작년의 경험을 되살려 이 글을 작성했습니다. 저의 경험이 작게나마 도움이 되길 바랍니다. Swift Student Challenge란?Swift Student Challenge는 애플이 매년 전 세계 학생들을 대상으로 개최하는 공모전입니다. 350명 안에 들면 애플 굿즈와 상장 등 다양한 혜택을 받을 수 있고, 그중에서도 50명의 우수 수상자로 선정된다면 WWDC에 초대되어 2박 3일 동안 Apple 엔지니어들과 함께 잊지 못할 경험을 쌓을 수 있다고 합니다. 👉 2025 Swift Student Challenge 참가하기 Swift Student ChallengeSwift Stu..

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 요청을 보내는 방법을 설명하겠습니다.주의: 이 방법은 보안..