Front-End33 [React Native]React Native의 New Architecture와 Expo React Native(리액트 네이티브, 이하 RN)는 Meta가 개발한 오픈소스 크로스플랫폼 프레임워크로, React의 컴포넌트 모델을 모바일 네이티브 앱 개발로 확장한 프레임워크다. 리액트 문법 기반으로 한 낮은 러닝 커브, 리액트 특유의 풍부한 생태계 상당 부분을 사용할 수 있는 유연함 등의 이유로 빠른 인력 투입 및 개발을 필요로 한 스타트업에서 많이 애용되고 있으며, 나 역시 실무에서 대부분의 앱 개발을 RN으로 진행했다. Expo는 RN의 네이티브 복잡성을 크게 줄여 “설치→코딩→빌드”까지 일관된 개발자 경험(DX)을 제공하도록 만들어진 툴킷이자 플랫폼으로, RN이 첫 출시된 뒤(2015년) "초기 RN의 네이티브 빌드 번거로움"을 해결하고자 하는 비교적 가벼운(?) 접근으로 빠르게 등장했다.. 2025. 8. 3. [React]useReducer와 useContext로 알아보는 전역 상태 관리 이전의 포스팅을 통해 useState와 useReducer의 차이점과 언제 useReducer를 쓰는 것이 좋은지에 대해 알아보았다. 또한, 해당 포스팅에서 useReducer는 Redux와 원리가 비슷하지만 실제로는 그 차이가 있다고 언급했다. Redux와 useReducer는 어떻게 다른지, 구현 방식에서 어떤 차이가 있는지 좀 더 자세하게 알아보자. Redux와 useReducer의 차이점 React의 useReducer와 Redux는 모두 리듀서 패턴(reducer pattern)을 기반으로 한 상태(state) 관리 방식을 사용한다. 리듀서 패턴이랑 상태(state)를 변경하는 로직을 하나의 함수(reducer)에서 관리하는 방식을 의미하는데, 상태를 직접 변경하지 않고 액션(action)을 통.. 2025. 2. 1. [React]useState vs. useReducer 이전의 포스팅에서는 효율적인 애플리케이션 구동과 프로젝트 관리 등의 이유로 상태관리를 "잘" 해야된다고 했었는데, 이 주제와 관련해서 리액트에서 대표적으로 사용되는 상태 관리 훅(hook) 두 가지에 대해 알아보고자 한다. 바로 useState와 useReducer이다. 보편적으로, useState는 단순한 상태 관리를 사용할 때 좋고 useReducer는 복잡한 상태 관리를 필요할 때 사용하는 것이 좋다고 알고 있다. 하지만 실무에서는 useState가 익숙하고 간단하다보니 useReducer를 제대로 사용하는 경우가 매우 드물다. useState와 useReducer 훅들은 정확히 어떤 차이가 있고, 어떤 상황에 따라 알맞는 훅을 사용하는 것이 좋을지 다시 한 번 자세하게 알아보자. useStat.. 2025. 2. 1. [React-TS]상태 관리, 우리는 얼마나 잘하고 있을까? 상태 관리의 중요성상태(state)란 리액트를 사용하면서 가장 빈번하게 접하는 용어 중 하나로, 렌더링에 영향을 줄 수 있는 동적인 데이터 값을 의미한다. 상태는 리액트를 사용하는 이유라고 봐도 무방할 정도로 중요한 개념인데, 컴포넌트(Component)가 동적으로 렌더링 되는데 영향을 끼치기 때문이다. 상태는 각각의 데이터 범위와 목적에 따라 지역 상태(Local State), 전역 상태(Global State), 서버 상태(Server State)로 분류된다. 지역 상태는 컴포넌트 내부에서만 사용되는 상태로, 상태 변화가 해당 컴포넌트 또는 자식 컴포넌트에 영향을 미치는 경우들이 해당된다. 보통은 useState 훅으로 관리를 하는데 입력 필드 값, 모달 열림/닫힘 상태 등의 상황에서 사용된다. 전역.. 2025. 1. 19. [React]왜 리액트는 뮤텍스 잠금(Mutex Lock)이 없을까? 최근 컴퓨터 공학 개론에 관련된 강의를 듣게 되면서 동기화(synchronization)와 교착상태(deadlock)에 대해 좀 더 깊게 알아볼 기회가 생겼다. 관련된 공부를 하면서 한 가지 의문이 들었다. 자바스크립트, 리액트에서 뮤텍스 락(Mutex Lock)이 있나? 가만히 생각해보면 답은 의외로 쉬운데, 누군가에게 이 개념에 대해 깔끔히 설명하자니 왜 이런 의문을 가지게 됐는지, 왜 정답이 다소 뻔한데도 답을 하기 어려운지 설명하기 쉽지 않았다. 이번 포스팅을 통해 뮤텍스 락과 관련된 개념들의 정의, 그리고 왜 리액트에 뮤텍스 락이 불필요한지 정리해보고자 한다. 동기화와 뮤텍스 뮤텍스를 알기 위해서는 동기화를 먼저 알아야 한다. 동기화(synchronization)란, 여러 스레드나 프로세스가 .. 2024. 12. 15. [React-Native]데이터 인코딩 기본 개념, 근데 이제 RNFS를 곁들인 최근 AI 부트캠프를 수강하고 있는데, Jupyter Notebook을 활용한 실습 중에 인코딩 문제가 발생했었다. 파이썬 코드를 기반으로 간략하게 설명하자면, 사용 중인 해당 과제에서 사용 중이던 python 3.9.0 버전 기준으로는 아래와 같은 코드를 실행할 수 없었다. with fileinput.input(glob.glob(os.path.join(path, "*.txt"))) as f: for line in f: print(line) 이유는 다운로드한 강습 자료가 CP949(한국어 중심의 인코딩 방식, utf-8 유니코드와 다르게 데이터를 표현)로 인코딩 되어 있었고, 해당 파이썬 버전과 호환되는 fileinput 내장 라이브러리에서는 encoding="utf-8" 속성을 활용할.. 2024. 11. 24. 이전 1 2 3 4 ··· 6 다음
