전체 글

개발을 배우러 갔는데 인생을 배웠어요 12월부터 3주간 진행된 Toss Frontend Accelerator 4기가 마무리되었다. 짧은 시간이었지만, 앞으로 개발자로서의 인생에 오래 영향을 줄 배움들이 밀도 있게 쌓인 시간이었다.이 글에서는 그 과정과, 그 안에서 무엇을 배웠는지를 위주로 회고해보려고 한다. 지원 당시 생각들토스는 언젠가 경험해보고 싶은 회사였다. 프론트엔드를 공부할수록 기술적으로도, 비즈니스적으로도 매력적인 곳이라고 느꼈다. 그러다 우연히 Growth Track 공고를 봤다. 나는 사실 1, 2, 3기가 진행될 동안은 이 프로그램을 몰랐는데, 모집 공고에 "성장에 병목을 겪고 있는 분", "성장에 열망이 있는 분"을 찾는다는 문구가 눈에 들어왔다. 회사에서 이런 방식으로 사람을 뽑는..

1. 개발에서 그로스로현 회사에서 어떤 고민을 가장 많이 했느냐하면,서비스를 개발하는 과정에서는 기술적인 내용을 주로 고민했지만서비스가 출시된 이후로부터는, 계속 '그로스'에 대한 고민을 했던 것 같다. 소규모의 프로덕트팀, 별도의 마케터나 PM이 없는 환경에서, 서비스를 키워야 하는 상황.하지만 팀이 작은 것이 비즈니스 목표가 작아야 한다는 이유가 되진 않는다. 나는 어떤 조직에 속하든, 그 조직의 목표를 내 목표처럼 몰입하는 편이다.(사실 내 개인적인 목표들보다 더 우선시하는 경향이 있다)그래서 자연스럽게 공동의 목표에 집중하게 되었고,어느 순간부터 스스로의 역할을 '개발자'를 넘어 '문제를 해결하는 사람'으로 생각했던 것 같다. 그리고 당연히 개발자로서도, 내가 만든 서비스를 유저들이 더 많이 사용..

웹뷰에서 네이티브 기능을 사용하려면?많은 모바일 앱이 화면 일부를 웹뷰로 구성한다. 웹으로 구성하면 앱스토어 배포 없이도 빠르게 화면을 만들고 사용자에게 전달할 수 있다. 문제는 카메라 촬영, 연락처 접근, 푸시 토큰 조회처럼 OS 자원을 써야 할 때다. 웹뷰 안의 자바스크립트는 OS에 직접 닿지 못한다. 그래서 웹 코드와 네이티브 코드가 서로 메시지를 주고받는 통신층, 흔히 “WebView Bridge”라 부르는 패턴이 필요하다. 이글은 React Native의 react-native-webview를 기준으로 구현했던 경험을 바탕으로 작성해보려고 한다. WebView Bridge 패턴의 구조웹과 네이티브는 서로 다른 런타임에서 돌아가기 때문에, 동기 호출이 불가능하다.그래서 메시지를 보낸 뒤, 나중에..

서론: 이 코드에는 어떤 문제가 있을까?const fetchInfo = async () => { try { setLoading(true); setError(null); const data = await getInfo(); setInfo(data); } catch (error) { console.error('정보 패칭 실패', error); setError('정보를 불러오는데 실패했습니다.'); } finally { setLoading(false); }};일반적으로 정보를 fetch하는 코드를 봐보자. 프론트에서 fetch할 때 위와 같은 코드를 사용한다면,어떠한 잠재된 위험이 있을까? } catch (error) {이 부분에서 catch 할 수 있는 에러의..

요즘 사내에서 신규 서비스를 출시하며, 어떻게 하면 서비스의 그로스를 만들어낼 수 있을까를 계속 고민하고 있다.개발자는 단순히 코드를 구현하는 역할에 그치지 않고, 제품을 통해 비즈니스 가치를 만들어내는 사람이라고 생각한다. 그렇기에 서비스 자체의 방향과 성장 방식에 대해서 고민하는 게 중요하다고 생각한다. 성공한 스타트업들의 초기 성장 전략 영상을 보며 간단히 메모해본다. 당근마켓카카오 내 중고거래 : 아는사람이니까 신뢰 확보 -> 판교 장터판교 내 IT기업 재직중인 사람들끼리 중고거래이메일 인증을 통해 가입(신뢰획득) 후 거래.재직자들의 와이프까지 확장.육아커뮤니티 페인포인트: 번거로운 인증절차, 거래 프로세스.판교장터 - 육아커뮤니티, 육아 거래 앱도 있었으면 좋겠다는 니즈 -> 일반일로 확장 2..

React로 폼을 만들고, 입력창에서 Enter 키를 누르면 다음 필드로 포커스를 이동시키는 기능을 구현했다.그런데 한글 입력 시 마지막 글자가 다음 인풋 필드로 이동하는 버그가 발생했다.영어, 숫자, 특수문자는 문제가 없고, 한글에서만 나타났다. 원인: IME 조합 상태와 onKeyDown 이벤트 타이밍의 충돌이 문제는 IME(Input Method Editor, 입력기) 조합 방식과 이벤트 발생 순서가 충돌하기 때문에 발생한다. IME의 입력 방식한글은 조합형 입력 언어다. 예를 들어 ‘사’라는 글자를 입력할 때 실제로는 다음과 같은 과정을 거친다.• 사용자가 ‘ㅅ’ 입력• ‘ㅏ’ 입력 → 조합 → ‘사’ 완성이때 조합이 끝나지 않은 상태는 브라우저에서는 isComposing = true 로 판단된다..

회사 프로젝트에서 거래명세표를 A4 가로 방향(landscape)으로 인쇄하는 기능을 구현해야 했습니다.- 화면에는 왼쪽 영역만 표시- 인쇄 시에는 A4 한 장을 꽉 채워 좌/우 모두 출력 (하나는 고객용 / 하나는 내부용)- 인쇄 시 전용 스타일 적용 (폰트 크기, 여백 등 조정)이를 구현하기 위해 React to Print의 useReactToPrint 훅을 사용하여, 특정 DOM에 대해 인쇄 작업을 진행했습니다. 이 글에서는 React to Print 라이브러리를 사용해 특정 컴포넌트를 인쇄하고, 인쇄 시에만 적용되는 스타일을 설정하여 이 문제를 어떻게 해결했는지 공유해 봅니다! 왜 window.print()가 아닌 React to Print?일반적으로 웹에서 인쇄 기능을 구현할 때 window.p..

재밌는 문제를 풀어보았다! 문제 설명https://www.acmicpc.net/problem/12096 친구가 백준 넌센스 문제를 보여주는 것이다.이게 무슨 문제냐고 하니까, 힌트를 하나 알려주겠다고 문제를 일반적으로 보면 안 돼ㅋㅋㅋ이 말을 듣자마자 아 개발자도구 열면 찾을 수 있겠구나! 하고 집에 가서 풀어보았다  입력과 출력, 힌트쪽을 클릭하여 Element 내용을 확인해보니역시나 숨겨진 주석들이 있었다! 콘솔에도 이런 값들이 찍히는 것을 확인할 수 있었다. 입력출력힌트{ "12096": { "id": "12096", "problem_description": "", "problem_input": "", "problem_output": "", ..

mission: main 브랜치를 고쳐라!  팀원이 main 브랜치에 이슈가 발생하여 개발 진행을 아예 못 하고 있다고 하였다.이 문제를 진단하고 해결한 과정을 상세히 기록해본다!   첫번째 문제 상황: 500 응답 (SupabaseConnection 전역 모듈화)먼저, 동작하지 않는 페이지에 접속하여 네트워크 탭을 확인하였다. 브라우저의 네트워크 요청이 서버로 전달되지 않고 Network Error가 발생하고 있었다. 주목해야 할 것은, 네트워크 탭에서 많은 API 요청이 Preflight에서 실패하고 있었다.이에 따라 서버 응답에 문제가 있을 가능성이 있다고 생각했다.   언제부터 이런 이슈가 발생했는가? - 롤백을 해보자 !정상적으로 작동하던 main 브랜치에 갑자기 이슈가 발생했으니,병합된 특정 ..

GIT은 기본적으로 독립적인 히스토리를 병합하지 않는다.  문제 상황시스템 프로그래밍 실습에서, 팀 프로젝트를 하며 4개의 라즈베리파이를 사용했다.팀원들은 각자 하나의 파이에 대응하는 브랜치를 생성해 독립적으로 작업을 진행했다.문제는 최종 코드를 제출하기 위해 각 브랜치를 main 브랜치로 병합하는 과정에서 발생했다.깃허브에서 아래와 같은 메시지가 출력되며 PR 생성이 불가능했다.There isn't anything to compare.main and rfid-and-pir are entirely different commit histories PR이 아예 올라가지 않는 상황이었고, 깃허브 웹 인터페이스만으로는 문제를 해결할 수 없었다.로컬 환경에서 CLI(Command Line Interface)로 간..