전체 글

프로젝트에 주어진 시간은 단 6주.이런 초단기 프로젝트에서 가장 큰 리스크는 예측 불가능한 버그로 인한 개발 지연입니다. 이전 프로젝트에서는 사용자 인증 처리로 인해 QA 단계에서 불필요한 시간을 많이 소요했기에, 우선적으로 인증 처리 부분을 기획전 잡아가고자 했습니다. 어떻게 하면 인증 관련 이슈를 원천 차단하고,비즈니스 로직에만 집중할 수 있는 환경을 만들 수 있을까? 선제적 아키텍처 설계와 자동화저희는 문제가 터진 뒤에 해결하는 대신, 개발 시작 단계에서부터 견고한 인증 아키텍처를 설계했습니다. 핵심 전략은 '자동화'와 '보안'이었습니다. 1. 보안 원칙 수립: 토큰 분리React Native와 WebView를 함께 사용하는 하이브리드 환경이었기에, 보안을 최우선으로 고려했습니다.RefreshTok..

CMC 17기 활동의 목표는 "APP 출시"였습니다. 저희 팀은 React 기술 스택을 활용하여 유지보수성이 높은 앱을 효율적으로 개발하고자 했고, 그 첫 번째 관문은 바로 React Native와 WebView 간의 통신, 즉 '브릿지(Bridge)' 환경을 설정하는 것이었습니다. 🤔 왜 WebView를 선택했을까? React로 만든 웹 프로젝트가 이미 있다면, WebView는 가장 빠르게 앱을 만들 수 있는 매력적인 선택지입니다. WebView는 앱 내부에 웹 브라우저를 띄워 특정 URL의 웹 페이지를 그대로 보여주는 방식입니다. 덕분에 기존 웹 코드를 재사용하여 iOS와 Android 앱을 동시에 대응할 수 있습니다.하지만 여기서 한 가지 중요한 질문이 생깁니다. "앱의 네이티브 기능과 WebVi..

23년 9월부터 24년 6월까지 약 1년간 두런두런 동아리 활동을 했다.돌이켜보면 엄청나게 성공적인 활동은 아니었기에 조금 부끄럽기도 하고, 어떻게 보면 여전히 아쉬움이 남는 활동이기도 하다. 하지만 1년 동안 열심히 참여했고, 의미 있는 성과를 거둔, 내 23~24년의 많은 부분을 차지했던 활동이기에 기록으로 남겨본다. 멋쟁이 사자처럼 11기 활동을 마무리하던 23년에, 프로젝트를 함께 진행했던 프론트엔드 파트장 친구와 이야기를 나누다가 게임 형태의 챌린지 앱을 만들면 재미있겠다는 아이디어가 나왔다. 친구와 아이템을 사용해 우스꽝스럽게 상대를 때리는 모션이 있고, 서로 목표를 달성하며 응원하는 소셜 기반의 챌린지 앱을 상상했다. 당시에는 멋사 활동으로 자신감도 있었고, 사회복무요원 활동 덕분에 시간 여..

프론트엔드 개발을 시작할 때, “명령형과 선언형 프로그래밍”이라는 용어를 종종 듣게 됩니다.이 글에서는 두 개념의 차이를 간단히 알아보고, 자바스크립트 예시를 통해 감을 잡아봅시다.1. 개념 정리명령형(Imperative) 프로그래밍“어떻게(How)” 동작할지를 직접 단계별로 지시하는 방식입니다.예를 들면, 배열을 순회하는 코드에서 반복문(for, while)을 돌고 if문으로 조건을 확인한 뒤, 일치하면 push로 새 배열에 넣는 식으로 모든 과정을 명시하는 스타일이죠.선언형(Declarative) 프로그래밍“무엇을(What)” 만들고 싶은지를 의도 위주로 작성합니다.내부적으로 반복문이 어떻게 돌아가는지는 추상화하고, “이 조건에 맞는 결과가 필요하다”처럼 결과만 선언합니다. 예를 들어 Array.pr..

모달이란?모달이란 사용자에게 중요한 정보를 제시하거나, 특정 액션을 수행하기 전에 사용자의 확인을 받기 위해 기존 화면 위에 레이어 형태로 표시되는 컴포넌트를 말합니다. 프로젝트를 진행하다 보면 모달을 만들어야 하는 상황이 자주 생기는데, 단순히 isVisible 같은 state를 이용해 화면에 표시하거나 숨기는 방법으로도 간단하게 구현할 수 있습니다.다만, 복잡한 형태의 모달이 많이 생기거나, 여러 화면에서 재사용해야 하는 상황이라면 자칫 코드가 중복되고 유지보수가 어려워질 수 있습니다. 이 때문에 많은 프로젝트에서는 재사용 가능한 모달 컴포넌트를 만들어 사용하거나, 상태관리 도구(Redux 등)를 활용해 전역에서 모달 표시 여부를 관리하는 방식을 택하곤 합니다.이번 글에서는 Ref를 이용해 모달을 제..

이전 글에서는 재귀 호출을 통해 데이터 구조를 트리 형태로 변환하여 컴포넌트의 데이터로 활용했던 방법에 대해 설명드렸습니다. 재귀적 트리구조를 활용한 데이터 변환사용자 지역 정보를 입력받는 Form을 개발하면서, 서버에서 전달하는 평면 데이터(flat data)를 Cascader 컴포넌트에서 요구하는 트리 구조로 변환해야 하는 문제가 있었습니다.예를 들어, 서버에서는hin6150.tistory.com 사용자 지역 정보를 입력받는 폼(Form)을 개발하는 과정에서, 서버에서 전달되는 평면 데이터(flat data)를 Cascader 컴포넌트에서 요구하는 트리 구조로 변환해야 하는 상황이 있었습니다. 이번 글에서는 해당 컴포넌트를 개선해서, 특정 단체에 속한 지역만을 반환하는 기능을 구현하고자 합니다.문제 ..