원티드 프리온보딩 챌린지 React Native 사전 과제 (2024년 2월)

wanted_pre_ch_rn_1.md

원티드 프리온보딩 챌린지 React Native 사전 과제 (2024년 2월)

아래의 질문에 대해서 본인이 생각하는 답변을 Comment에 작성해주세요. 링크를 첨부해주셔도 좋습니다.

1. 리액트 네이티브를 시작하게 된 이유, 또는 시작하려는 이유를 알려주세요.

2. 리액트 네이티브로 앱을 개발하며 겪었던 고충이 있다면 알려주세요. 해결한 과정도 있다면 같이 알려 주시면 좋을 것 같아요.

3. 아래 내용을 읽고 간단히 생각나는 것을 알려주세요.
   대량의 데이터를 리스트 형태로 세로로 나열하여 보여주기 위한 스크린입니다. 예제와 같은 코드에서 성능을 더 개선할 수 있는 방법이 있을 지, 그렇게 생각한 이유가 어떤 것인지 알려주세요. (예를 들어 관련 외부 라이브러리 사용, ScrollView 대신 다른 React Native 컴포넌트로 구현과 같이 단순히 생각나는 것들을 글로 설명해주셔도 되고, 예시의 코드를 작성해주셔도 좋습니다)

       ...
       const VeryHeavyComponent = () => {
         ...
         return (
           <View>
             // ...코드는 생략했지만 되게 복잡한 계산을 하는 컴포넌트라고 생각해주세요 :)
           </View>
         )
       }
   
       const ItemComponent = ({ title, content, type, image }) => {	
         ...
         return (
             <ItemView>
               <Title>{title}</Title>
               {type === 'image' ? <Image style={{ width: 150, height: 150 }} source={{uri: image}} /> : undefined}
               {type === 'text' ? <Description>{content}</Description> : undefined}
               <VeryHeavyComponent />
             </ItemView>
         );
       }
   
       const Screen = () => {
         ...
         return (
           <ScrollView>
             {items.map(data => <ItemComponent {...data} />)
           </ScrollView>
         )
       }

1. 처음엔 네이티브란 이름이 이뻐서 공부를 시작했습니다. 이후에 회사 기술스택이 되어서 배우고 있습니다.

2-1. 위젯을 만들려고하는데, 리액트 네이티브 딴에서 모듈을 통해 네이티브 코드를 제어하는 방식이 어렵습니다.
2-2. 특정페이지에서 jsThread의 수치가 과하게 떨어질땐, 어떤 방식으로 처리해야할지 감을잡기 어렵습니다.

3-1. VeryHeavyComponent의 경우에는 떨어지는 props가 없다는 가정하에, React.memo를 사용해서 리렌더를 방지합니다.
3-2. Screen에서 map 대신 flatlist를 사용합니다.
3-3. initialNumToRender, maxToRenderPerBatch, windowSize 등의 FlatList 프로퍼티를 조정하여 렌더링되는 항목의 수와 성능을 조절합니다.
3-4. 이미지 로딩 라이브러리(FastImage 등)를 사용하여 캐싱 및 성능을 개선합니다.

1. 첫 입사를 React 하였지만 회사 업무 확장으로 React Native 를 시작하게 됨

2. 항상 빌드 단계에서 Native 설정 때문에 많은 고충을 겪었다. UIUX 디자인과 묘하게 크기가 다르고 디바이스 대응을 하는것은 항상 신경이 많이 쓰이는 작업이다. 버전 업데이트 마다 항상 RN 을 계속하는게 맞을까 고민하게 된다. 서브파티 라이브러리가 잘 관리 되지 않는다.

3. map 시 key 값을 필수로 지정한다, infinity scroll 적용, flashlist 라는 것이 나왔다고 들었다 그것을 쓰는건 어떨까, type 비교시 삼항연산자를 쓰는게 어떨까 싶다.

1. 리액트를 배운 다음 모바일쪽도 궁금해서 시작하게 되었습니다.
2. 디버깅할 때 react native debugger만 쓰고서는 디버깅하기가 어려웠습니다. 그리고 묻고 싶은 내용은 디버깅 하실 때 보통 flipper를 이용하시는지 아니면 android studio의 logcat이나 xcode로 디버깅 하시는지 궁금합니다.
3. VeryHeavyComponent는 필요할 때만 다시 계산되도록 useMemo를 활용하고 ScrollView 대신 FlatList를 활용하면 좋을 것 같습니다

1. 회사 업무를 통해 리액트 네이티브를 처음 접하게 되었습니다. 그렇게 기회가 되어 현재까지 3개의 앱을 만들었고 앱 개발에 흥미가 있어, 꾸준히 개발하고 있습니다.
2. 구글 안드로이드와 아이폰의 차이 대응(권한, 스타일, 라이브러리 지원체크 등), 네이티브 이해 부족에서 오는 빌드 및 환경설정 단계에서의 고충, 모듈 및 브릿지의 이해가 부족으로 인한 한계. 등등
3. ScrollView -> FlatList 사용, 메모이제이션 활용하여, VeryHeavyComponent의 불필요한 리랜더링 방지

1. 프론트엔드를 리액트로 입문했지만 회사에서 리액트 네이티브를 사용해서 시작하게 되었습니다.
2. 빌드 과정에서 문제가 많았습니다. 에뮬레이터를 실행할 때 어제까지는 잘 작동했는데 오늘은 오류가 나는 상황이 빈번했습니다. 그 때 마다 구글링을 해서 해결했습니다. 보통 버전 문제인 경우가 많았던 것 같습니다.
3. scrollview대신 flatlist를 사용하는 것이 성능 상으로 더 좋을 것 같습니다.

1. 이번 취업한 회사에서 리액트 네이티브를 사용을 한다해서 시작하게 되었습니다.
2. 처음하는 입장이라 expo cli에서는 쉽게 만들 수 있었지만 rn-cli에서는 빌드 과정이라던지 apk 생성에 있어서 아직 부족한 입장입니다.
3. 저 또한, Scrollview를 이용하기보단 Flatlist로 불필요한 렌더링을 줄이는게 좋아보입니다.

1. 취업한 회사에서 리액트네이티브를 사용합니다.
2. 원하는 기능의 라이브러리가 없거나, 안드로이드와 ios 둘중에 하나라도 지원하지 않으면 난감합니다..
   더불어 안드로이드와 ios의 각각 버전에러발생이나 관리가 제일 안풀리는 과제입니다
3. 대용량데이터이기 때문에, 화면에 보이는 데이터만 랜더링되는 를 활용하면, 불필요하게 모든 데이터를 띄우는 과랜더링을 방지합니다.

1. 처음 창업하며 앱을 기획하면서 선택하여 입문하게 되었습니다.
2. 개인적으로는 라이브러리를 설치하고 iOS, android 따로 설정을 해야하고 이전에 설정했던 것들과 충돌이 나는 경우가 가장 힘들었습니다. 여기저기 자료를 찾아보고 직접 테스트해보며 해결했던 기억이 납니다.
3. 모든 요소가 한번에 랜더 되기에 성능에 문제가 있을 것 같습니다 Flatlist를 사용하면 보여지는 부분만 랜더 하기에 더 효율적일 것 같습니다.

1. 현재 근무중인 회사에서 채택한 기술스택으로 접하게 되었으며, 안드로이드와 IOS 앱을 동시에 개발할 수 있는 장점이 있어서 사용하게 되었습니다.
2. android studio보다 xcode에서 실 기기나 시뮬레이터에 빌드할 때 현저히 빌드에러가 많이 나서 힘들었던 적이 있습니다. 많이 알려지지 않은 에러가 났을 때 가장 힘들었던 것 같고 직접 블로그를 쓰면서 한번 더 메모해두었습니다. 관련 에러 본인 블로그 링크
3. map은 모든 배열 요소 렌더링을 합니다. 가령 극단적으로 생각했을 때 데이터가 1만개, 10만개... 더 많은 데이터가 있다면 더더욱 시간이 오래걸릴 겁니다. 이를 보완해서 나온 react-native의 FlatList나 Shopify에서 나온 Shopify/flast-list를 사용해서 데이터나 페이지네이션 처리를 할 것 같습니다.

1. 크로스플랫폼으로 앱을 개발할 일이 생겨서 시작하게 되었습니다.
2. 라이브러리 의존도가 높은데도 라이브러리가 지원하지 않으면 처음부터 다 만들어야 하는 것들이 있었습니다.
3. flatlist를 사용하고 renderItem에 key를 부여해야할 것 같습니다.

1. 취업 후 vue만 쭉 사용해 왔는데, 앱에 관심이 생겨 고민 후 react + react native 입문하려 합니다.
2. 처음 입문하는 수준으로 직접 경험한 고충은 없지만, 버전 문제에서 오는 빌드 오류가 빈번하다고 알고 있습니다.
3. 대용량 배열 처리 시 UI 에 따라 적적하게 pagination 혹은 infinity scroll 활용해 불필요한 요청을 줄일 수 있습니다.

1. 개발 첫 취업 후 vue만 사용해왔는데, react를 다시 공부해보고 싶기도 하고, 사내 프로젝트 중 RN을 사용하는 앱이 있어서 입문하려합니다.
2. RN을 처음 입문하는 것이라서 경험해 본 고충은 없지만, 네이티브 측면과 JavaScript 측면 모두 고려해야 해서 디버깅이 어렵다고 알고있습니다.
3. ScrollView 대신 FlatList를 사용하여 최적화 할 수 있습니다. ScrollView는 모든 아이템들을 한번에 렌더링하는데, FlatList는 화면 밖으로 스크롤되는 아이템들을 제거하기 때문에 렌더링 속도가 개선되는 것으로 알고 있습니다.

1. 모바일로 개발하고 싶은 프로젝트가 생겨 리액트 네이티브에 관심을 갖게 되었습니다.
2. Map view에서 image를 사용할 때 안드로이드는 사진이 보이지 않아 어려움을 겪었는데, 안드로이드일 경우에 webview를 사용하여 해결할 수 있었습니다. 이처럼 안드로이드와 ios 각각의 특징을 생각해야 한다는 것이 어려운 것 같습니다.
3. FlatList를 사용하여 화면에 보여질 때만 렌더링 하도록 변경합니다.

const Screen = () => {
  ...
  const renderItem = ({ item }) => <ItemComponent {...item} />;

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

1. 프론트엔드 개발자로서 공부하다 리액트, 리액트 네이티브에 대해 알게되었습니다. 리액트와 함께 공부하여 눈을 넓히고자 시작하였습니다.
2. 입문 단계라 겪어본 고충이 많지는 않지만, 의존성에 따라 오류가 발생 할 수 있고, 빌드에러가 잦다고 알고 있습니다.
3. 대량의 컴포넌트의 경우 flatlist를 사용하여 실제 사용될 부분만 render 하도록 합니다.

1. 개발자로서의 첫 업무를 React Native로 시작하게 되었습니다.
2. 크로스플랫폼이지만 Android와 iOS 각각의 생태계를 알아야 확실하게 해결할 수 있는 문제들이 많다.
3. FlatList 또는 FlashList 사용, VeryHeavyComponent를 메모이제이션하여 성능 최적화, <Image> 대신 react-native-fast-image의 <FastImage>를 사용하여 이미지 렌더링 최적화

1. 외주업체가 개발한 앱의 유지보수를 맡게되면서 처음 접하게 되었는데, 웹 개발만 하다가 새로운 스택을 접하게 되어 흥미로웠습니다.
2. 특정 라이브러리나 기능이 iOS와 안드로이드가 다르게 작동하여 해당 부분을 해결 하는 것이 쉽지 않았습니다. 웹뷰 상에서 웹에디터로 작성한 링크를 다른 브라우저로 열는 동작이 iOS에서는 잘 작동하지 않아 우회적으로 이벤트를 줘서 브라우저를 여는 방식으로 해결하였습니다.
3. ScrollView는 모든 아이템을 한 번에 렌더링하기 때문에 FlatList를 이용해 보여지는 부분만 렌더링하는 방식으로 변경합니다.

1. 리액트 지식으로 빠르게 앱을 만들기 위해 시작하게 되었어요
2. 사용할 수 있는 기능이 한정적이고, 라이브러리로도 원하는 기능을 구현하기 힘들 때 고충이 있는 것 같아요
3. 리스트를 그릴 때 ScrollView를 사용하지 않고 FlatList를 사용하면 좋을 것 같아요

1. UI를 빠르게 구현하는 등 생산성을 위해 리액트 네이티브를 선택했어요.
2. 클라이언트 단과 연결할 수 있는 방법에 대해 현재까지도 고민하고 있어요.
3. FlatList를 통해 부분적으로 렌더링할 수 있어 성능 최적화가 가능해요.

1. 앱 개발 프로젝트에 참여하며 처음으로 학습하게 되었습니다. 당시 주어진 기간이 짧아서 학습 비용이 들지 않는 리액트 네이티브를 선택하게 되었습니다.
2. 네이티브 앱을 개발한 경험이 없다보니 안드로이드와 IOS에서 호환되지 않는 기능들에 대한 이해가 부족한 것 같습니다.
3. ScrollView 대신 FlatList를 사용하면 현재 화면에 보이는 아이템만 렌더링해 성능을 최적화 할 수 있습니다.

1.웹 프론트엔드 신입 시장의 포화상태를 인식하고, 경쟁력 있는 신입 개발자로서의 출발을 원해 리액트 네이티브 개발 포지션을 선택했습니다. 또한, 웹 기술 스택을 통해 모바일 플랫폼 시장으로의 확장 가능성에 큰 매력을 느꼈기 때문에 이 분야를 시작하게 되었습니다.

2.특정 플랫폼(iOS)에만 존재하는 기능을 구현하기 위해 커뮤니티 라이브러리를 활용하거나 직접 네이티브 브릿지를 개발해야 한다는 점에서, 특정 플랫폼에 대한 깊은 이해가 필수적임을 깨달았습니다. 처음에는 웹 기술만으로도 충분히 개발이 가능할 것이라 생각했지만, 기능의 요구사항이 복잡해질수록 러닝 커브가 가파르게 상승하는 것이 어려움으로 다가왔습니다. 결국, 해당 플랫폼의 언어를 배우며 문제를 해결해 나갔습니다.

3.해당 코드의 최적화를 위해서는 렌더링 효율성을 개선하는 것이 중요합니다. React Native에서 FlatList 컴포넌트를 사용하면 화면에 보이는 아이템만 렌더링되도록 하여 성능을 크게 향상시킬 수 있습니다. 이는 기존에 사용된 ScrollView와 map 함수를 통한 아이템 렌더링 방식 대비 효율적입니다. 또한, React.memo나 shouldComponentUpdate를 사용하여 이전 상태와 동일한 값으로 인한 불필요한 자식 컴포넌트의 재렌더링을 방지함으로써 성능을 추가로 최적화할 수 있습니다. 특히 VeryHeavyComponent와 같이 복잡한 계산을 수행하는 컴포넌트의 경우, 이러한 최적화 방법은 더욱 중요합니다. 이를 통해 애플리케이션의 반응성과 퍼포먼스를 크게 개선할 수 있을 것입니다

import React, { memo } from 'react';
import { FlatList, View, Text, Image } from 'react-native';

const VeryHeavyComponent = memo(() => {
  // 복잡한 계산 로직...
  return (
    <View>
      {/* 복잡한 계산 결과 렌더링 */}
    </View>
  );
});

const ItemComponent = memo(({ title, content, type, image }) => {
  return (
    <ItemView>
      <Title>{title}</Title>
      {type === 'image' && <Image style={{ width: 150, height: 150 }} source={{ uri: image }} />}
      {type === 'text' && <Description>{content}</Description>}
     <VeryHeavyComponent />}
    </ItemView>
  );
});

const Screen = () => {
  const renderItem = ({ item }) => (
    <ItemComponent {...item} />
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id} // 가정: 각 아이템에 고유 id가 있다고 가정
    />
  );
}

1. 크로스 플랫폼이 경제적으로 필요한 부분 사용할 수 있고, 기업입장에서 경제적이기 때문에, 수요는 꾸준히 있을 것이라 생각해서 시작하게 되었습니다. (플러터는 가독성이 여전히 아쉬워서, RN도 써보면서 비교 및 선택해보고 싶습니다.)

2. 2주동안 간간히 한것라 아직 없습니다.

3. lazying loading / 비동기 처리 / 이미지 랜더링 / 불필요한 랜더링 줄이기

import React, { useMemo } from 'react';
import { FlatList, View } from 'react-native';
import FastImage from 'react-native-fast-image';

//... 복잡한 계산을 하는 컴포넌트
const VeryHeavyComponent = () => {
  //...
  return (
    <View>
      {/* ...코드는 생략했지만 되게 복잡한 계산을 하는 컴포넌트라고 생각해주세요 :) */}
    </View>
  );
};

const ItemComponent = React.memo(({ title, content, type, image }) => {  
  //...
  return (
    <ItemView>
      <Title>{title}</Title>
      {type === 'image' ? (
        <FastImage
          style={{ width: 150, height: 150 }}
          source={{
            uri: image,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.contain}
        />
      ) : undefined}
      {type === 'text' ? <Description>{content}</Description> : undefined}
      <VeryHeavyComponent />
    </ItemView>
  );
});

const Screen = ({ items }) => {
  const renderItem = useMemo(({ item }) => <ItemComponent {...item} />, []);

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  )
}