[RN] 본인인증 기능 구현 (with 드림시큐리티) 랜턴은 여성들을 위한 안전 앱으로, 향후 커뮤니티 기능을 위한 여성 인증과 연령 제한이 필요했습니다. 이에 따라 14세 이상 여성 사용자임을 확인하는 휴대폰 본인인증 기능을 추가하게 되었습니다.인증 방식에 대한 비교나 선정 과정은 제가 팀에 합류하기 전에 이미 결정된 부분이라, 이번 글에서는 생략합니다. 구현에는 드림시큐리티의 휴대폰 본인인증 서비스를 사용했습니다. | Mobile-OK 본인확인서비스 휴대폰 본인확인 서비스드림시큐리티 휴대폰 본인확인 서비스 - 주민번호를 사용하지 않고 생년월일 휴대폰 인증만으로 웹사이트 개인정보에 민감한 이용자들을 위한 실명확인, 본인확인용 주민번호 대체 인증서비스www.mobile-ok.comMobile-OK 본인확..

함수형 컴포넌트의 구조와 동작 방식(feat. 클로저) React의 함수형 컴포넌트는 클로저 개념과 깊은 관련이 있습니다. 이 글에서는 클로저가 무엇인지 알아보고, 함수형 컴포넌트에서 클로저가 어떻게 활용되는지 살펴보겠습니다.클로저클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합이다."선언된 어휘적 환경"이라는 것은, 변수가 코드 내부 어디에서 선언됐는지를 말하는 것호출되는 방식에 따라 동적으로 결정되는 this와 다르게, 코드가 작성된 순간에 정적으로 결정된다.함수가 정의된 시점의 렉시컬 스코프(변수 환경)를 기억하고, 그 범위 안의 변수들에 접근할 수 있는 함수를 의미function add() { const a = 10; //a 변수의 유효 범위는 add 전체 funct..

화살표 함수와 일반 함수의 차이(feat. Prototype) JavaScript에서 함수를 정의하는 방법과 각 방식의 차이점에 대해 알아보겠습니다.함수함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다.- 코드를 재사용하는 것이 목적이다.- 코드 재사용이라는 일반적 기능 이외에 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등의 기능을 수행할 수 있다.//함수의 기본적인 형태function sum(a, b) {  return a + b;}sum(10, 24); //34리액트에서 컴포넌트를 만드는 함수도 이러한 형태를 따른다.function Component(props) {  return {props.hello}}Component라고 하..

Next.js 14에서 router.replace()와 router.push()가 동작하지 않을 때 해결 방법 1. 문제 상황Next.js 14를 사용해 로그인 기능을 구현하던 중, 로그인 완료 후 router.replace("/")를 사용해 메인 페이지로 이동하려 했습니다. 하지만 URL은 변경되었음에도 화면이 갱신되지 않는 문제가 발생했습니다.이 상황에서 router.refresh()를 사용하니 정상적으로 페이지가 갱신되었습니다. 왜 이런 문제가 발생한건지 정리해보겠습니다.2. App Router의 작동 방식Next.js 14부터 App Router는 서버 중심 데이터 관리를 강조합니다. 이는 클라이언트 네비게이션(router.push나 router.replace)이 서버 데이터(fetch된 세션 정..

왜 리액트인가? 리액트는 어떤 환경에서 등장했으며, 왜 많은 개발자들에게 선호하고 사용하는지에 대해 정리해보겠습니다.모던 리액트 딥다이브를 참고하여 내용을 확장하고, 보완하여 작성한 글입니다.리액트의 특징 1: 명시적인 상태 관리리액트는 단방향 바인딩만 지원합니다. 리액트의 상태 변화는 '단방향'으로, 그리고 '명시적'으로 이루어지기 때문에 상태가 변화했다면 그 상태 변화를 명시적으로 일으키는 함수만 찾으면 됩니다.function App() { const [text, setText] = React.useState(""); return ( setText(e.target.value)} // 이벤트를 통해 명시적으로 상태를 변경 /> {text} {/* 모델 데이터가 뷰..

React Native 앱 성능 최적화 앱 개발 과정에서 적용했던 다양한 성능 최적화 방법에 대해 정리해 보겠습니다. 이는 앱의 성능을 극대화하고, 사용자 경험을 향상시키기 위해 필요한 요소들입니다. 1. useQuery, useInfiniteQuery 사용React Query의 useQuery와 useInfiniteQuery를 사용해 비동기 데이터 관리를 최적화했습니다. 이 두 훅을 통해 API 호출 시 발생할 수 있는 중복을 줄이고, 데이터를 효율적으로 캐싱하여 상태 관리를 개선할 수 있었습니다.특히 queryKey를 사용하여 각 쿼리를 고유하게 식별함으로써 캐싱 효율성을 높였습니다. 이를 통해 이미 요청된 데이터는 빠르게 로드되어 사용자 대기 시간을 최소화할 수 있었습니다. 무한 스크롤을 지원하는 ..