[소소한 개발 일지] React Native 프로젝트에 루트 디렉토리 외부의 파일 임포트하기

Explanation

오늘은 지난 주말에 저의 반나절의 시간을 빼앗아간 문제에 대해 적어 보려 합니다.
사실 리액트 네이티브를 제대로 사용해 본 적이 없어서, 사실 엄청 간단한 건데 저만 고생한 걸 굳이 글로 쓰고 있는 건 아닌지 조금 걱정이 되긴 하지만… 빼앗긴 시간이 너무 아까운 나머지 보상 심리로..
짧게 적어보려 합니다.

1. 글을 쓰기 앞서

반나절을 빼앗겼다고 적었지만 사실.. 해결은 아래 링크의 글을 통해 한방에 해결하였답니다.
링크. https://medium.com/@dushyant_db/how-to-import-files-from-outside-of-root-directory-with-react-native-metro-bundler-18207a348427

그리고 제가 작성한 예시는 그냥 ‘npx react-native init projectName’ 하면 생성되는 파일 그대로입니다.
그래도 혹시 전체 코드를 확인이 필요하시다면 아래의 깃허브 리포지토리에서 확인하실 수 있습니다.
링크. https://github.com/falsy/blog-post-example/tree/master/react-native-import

2. 문제의 상황

저는 리액트 네이티브 프로젝트 디렉토리 밖의 js 파일을 임포트 해야 하는 일이 있었는데, 리액트 네이티브 프로젝트 디렉토리에서 상대 경로로 루트 디렉토리 밖의 파일을 임포트하면 아래와 같이 모듈을 찾지 못하는 문제가 생긴답니다.

저는 외부에 external 이라는 폴더를 만들고 그 안에 test.js 파일을 만들고 그 안에 내용은 아래와 같습니다.

그리고 리액트 네이티브의 시작인 index.js 파일에 아래와 같이 코드를 추가하였습니다.

문제의 화면은 아래와 같습니다.

3. 해결

react-native init을 하면 metro.config.js 파일이 있는데요. 바로 요놈을 아래와 같이 수정하면 된답니다.

보통 이런 내용 다음에는 metro가 무엇인지 설명해야 하지만, 그것은 이 글의 논지가 아니므로!
간단하게 리액트 네이티브에서 사용하는 자바스크립트 번들러랍니다.

사실, metro는 지하철 말고는 잘 모릅니다.

대충 속성명으로 딱 추측이 가능하듯, 왓치할 폴더를 추가해주면 아래와 같이 문제가 해결된답니다.

4. 이어지는 다음 문제

그런데 만약에 저 외부의 파일에서 내부의 모듈을 사용하려고 하면 또 아래와 같은 문제가 생긴답니다.
예를 들어 test.js 파일에 React를 임포트 하면,

아래와 같은 오류가 출력된답니다.

5. 이어지는 해결

다시 metro.config.js 파일을 아래와 같이 수정합니다.

와우, 잘 모르는데 설명하는 글을 적으려니 이런 곤욕이 없군요…

역시 잘 모르지만 속성명으로 추측하면, metro는 자바스크립트의 번들러고 resolver 속성은 번들러가 번들을 진행될 때 참조가 되는 속성일 거에요. 그리고 extraNodeModules속성은 이름 그대로 노드 모듈을 추가 해주는 역할을 하겠네요.

그전에 extraNodeModules 라는, 이후에 Proxy 객체의 타겟으로 사용될 대상을 지정해주었어요.
Proxy 객체는 ES6에 추가된 객체인데요. Proxy 객체를 설명하는 건 너무 어려운 일이니까.
우리의 MDN 형, 누나가 알려줄 거에요.
링크. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy

그러면 우리가 지정한 타겟(../external)에게 ‘process.cwd()’ 절대 경로에 있는 node_modules디렉토리에서 모듈을 찾아서 연결해주나봐요.

말도 안 되는 설명글이었지만…
위와 같이 설정을 해주면 아래와 같이 React를 임포트에도 오류가 출력되지 않는답니다.

Leave a Reply

  1. […] Select Box – CSS 효과주기 […]

  2. 김지현

    셀렉트 박스 펼침이 됐을떄 검정테두리가 두껍게 생기는데…그걸 제어하는 방법은 없을까요??

    1px로 흐리게 하고 싶다면 어떻게 해야하나요…펼칩목록에…

    • 안녕하세요, 제가 확인이 늦었네요.
      말씀하신 부분이 정확하게 어떤 부분인지 잘 모르겠네요..
      셀렉트 박스가 펼쳐졌을때에는 기본적으로 스타일이 들어가지 않는 것으로 알고 있습니다.
      해당 상황을 확인해야 정확하게 알 수 있을것 같습니다 ~

  3. 1029

    감사합니다 이 글은 꼭 지우지 말아주세요…

    • 댓글 남겨주셔서 감사합니다 :)

  4. kelly

    이거…한화면에 셀렉트가 많을때는 어떻게 사용하면될까요^^;;

    • 안녕하세요,
      지금은 간단한 이해를 위해 id를 선택자를 주었는데요, html과 css모두 class로 바꾸고 스크립트 부분을
      var select = $(“.color”);
      이런식으로 바꾸시면 될거 같습니다 :D

  5. 라떼9

    다른 글들은 봐도 이해안됬었는데, 이 글은 너무나 쉽게 이해가 쏙 되네요ㅠㅠ
    select 박스때문에 헤매고 있었는데 고맙습니다!! ^^

    • 이 글이 도움이 되었다고 하시니 저도 너무 기분이 좋아요ㅎ
      이렇게 댓글까지 남겨주셔서 제가 더 감사해요 ^^

  6. 젤조

    select option 디자인적용도 가능할까요? option의 padding이나, 마우스오버될때 효과를 넣고 싶은데 css만으로 가능한지 질문드립니다.
    select option{height:33px;font-size:14px;line-height:33px;color:#777;padding:10px;background-color:#f6f6f6;} 이렇게 적용시켰더니 font-size, color, background-color는 적용이 되는데 height,padding,line-height 속성은 적용이 안되네요.

    • 안녕하세요? 기본적으로 select option 에는 스타일 적용이 안된다고 생각하는게 좋을거 같아요. 브라우저나 os에 따라서 적용에도 차이가 있으니까요,
      보통은 스타일을 꼭 주어야한다면 다른 요소(li, div…)로 드롭다운 메뉴를 만들어서 셀렉트 기능을 대신해서 사용하는게 좋을꺼 같아요 :D

  7. yhoomor

    잘 활용하여 사용하겠습니다.
    정말 유용한 내용이었어요.
    감사드려요 ^^

    • 도움이 되었다니 다행이에요 :D
      이 댓글 때문인지 오늘 하루가 좋았던거 같아요, 감사합니다 ~

  8. 안녕하세요.. ie8에서 하니 깨지는 현상이 발생하네요 ㅠㅠ

    • 안녕하세요? 확인해보니 실수로 select태그에 css속성 ‘filter: alpha(opacity=0);’ 을 주지 않았네요. 죄송합니다…
      지금은 수정하였습니다. 다시 한번 확인해보시고 안되시면 다시 댓글 남겨주세요.
      댓글 남겨주셔서 감사합니다! :D

  9. 김한솔

    Cheolguso님 답변감사합니다. selectbox모양으로 태그를 이용하여 비슷하게 만드는 것 외에는 아직 안되는것이군요.. ㅜㅜ

    • 더 도움이 되어 드리지 못해 아쉬움이 남네요…
      김한솔님, 새해 복 많이 받으시고 하시는 일 좋은 일만 가득하시길 바랄게요 ~

  10. 김한솔

    안녕하세요^^ 덕분에 겨우 selectbox를 수정했습니다. 정말감사합니다.
    그런데 혹시 option 같은경우도 수정할수 있을까요??

    • 안녕하세요? 첫번째 댓글이네요. 이렇게 댓글 남겨주셔서 감사합니다 :D
      우선. option 요소에는 css 속성이 적용되지 않는 것으로 알고 있습니다. 하고자 한다면 select & option 태그를 사용하지 않고 다른 태그(div, ul, li..)를 사용하여 비슷하게 만들 수 있겠지만 모바일 디바이스에서 select 기능을 사용하지 못하게 되니 UX적으로도, 스크린리더기를 통한 접근성에도 좋지 않은 방법이 되리라 생각이 듭니다.
      차후에 더 나은 select box 스타일링 방법을 찾게되면 다시 포스팅 하도록 하겠습니다.