[사진] 커스텀 컴포넌트 강의에서 따라하다가 오류가나요 어떻게하나요??

커스텀 컴포넌트 강의에서 오류가나요

1

김범준

지식공유자

2021.04.03

안녕하세요,

에러 화면의,
"view가 함수여야 합니다"는 메시지와
<view /> MyButton.js:7 을 볼때,
MyButton.js 파일에서 view 컴포넌트와 관련되어 문제가 있는것 같습니다.

혹시, MyButton.js 파일에서 View 컴포넌트를 사용할때
대소문자 오타가 있거나, 혹은 다른 부분에 오타가 있는지 확인해 보시기 바랍니다.

혹시 계속해서 문제가 발생하면,
코드를 깃헙에 올리고 링크를 적어주면 확인해 보겠습니다.

즐거운 하루 되세요

감사합니다.

0

임권일

질문자

2021.05.05

Input 컴포넌트 만들기 - 디자인 강의에서

사진 안보이면 사진 새탭 사진 열기하면 잘보여요

import Input from './components/Input'; 이부분에서 오류가생긴거같타요

김범준

지식공유자

2021.05.05

안녕하세요 임권일님,

네, Input 컴포넌트와 관련되어 문제가 있는것 같습니다.

다만, 현재 공유해주신 화면만으로는 문제의 원인을 파악하기가 어렵습니다.

지금 작성중인 코드를 깃헙에 올리고, 깃헙 주소를 댓글로 남겨주세요.

그러면, 제가 전체 코드를 보고 문제를 확인해서 알려드겠습니다.

감사합니다.

0

임권일

질문자

2021.04.10

Input 컴포넌트 만들기 - 디자인 강의에서

빨간색오류가뜨는데요 할때마다 오류만생기네요 저만오류가생기는가요??

계속 질문해서 죄송합니다 저도 잘안되서 하는건데요 저도 답답해서 오류만나고요

import React from 'react';
import {StatusBar} from 'react-native';
import styled, {ThemeProvider} from 'styled-components/native';
import {theme} from './theme';
import Input from './components/Input';

const Container = styled.SafeAreaView`
  flex: 1;
  background-color: ${({theme}) => theme.background};
  align-items: center;
  justify-content: flex-start; 
`;

const Title = styled.Text`
font-size: 40px;
font-weight: 600;
color: ${({theme}) => theme.main};
width: 100%;
align-items: flex-end;
padding: 0 20px;
`;

export default function App() {
  return (
<ThemeProvider theme={theme}>
    <Container>
      <StatusBar i
      barStyle="Light-content" 
      backgroundColor={theme.background} 
      />
      <Title>TODO List</Title>
      <Input />
    </Container>
    </ThemeProvider>
  );
}
import React from 'react';
import styled from 'styled-components';
import {Dimensions} from 'react-native';

const StyledInput = styled.TextInput`
  width: ${({width}) => width - 40}px;
  height: 60px;
  margin: 3px 0;
  padding: 15px 20px;
  border-radius: 10px;
  font-size: 25px;
  background-color: ${({theme}) => theme.itemBackground};
  color: ${({theme}) => theme.text};
`;

const Input = () => {
    const width = Dimensions.get('window').width;
    return <StyledInput width={width}/>;
};

export default Input;

 undefined Unable to resolve module ./components/Input from C:\Windows\System32\rn-tod\src\App.js: None of these files exist: * src\components\Input(.native|.android.expo.ts|.native.expo.ts|.expo.ts|.android.expo.tsx|.native.expo.tsx|.expo.tsx|.android.expo.js|.native.expo.js|.expo.js|.android.expo.jsx|.native.expo.jsx|.expo.jsx|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json) * src\components\Input\index(.native|.android.expo.ts|.native.expo.ts|.expo.ts|.android.expo.tsx|.native.expo.tsx|.expo.tsx|.android.expo.js|.native.expo.js|.expo.js|.android.expo.jsx|.native.expo.jsx|.expo.jsx|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json) 3 | import styled, {ThemeProvider} from 'styled-components/native'; 4 | import {theme} from './theme'; > 5 | import Input from './components/Input'; | ^ 6 | 7 | const Container = styled.SafeAreaView` 8 | flex: 1; at node_modules\react-native\Libraries\Utilities\HMRClient.js:320:31 in showCompileError at node_modules\react-native\Libraries\Utilities\HMRClient.js:227:26 in client.on$argument_1 at node_modules\eventemitter3\index.js:181:21 in emit at node_modules\metro\src\lib\bundle-modules\HMRClient.js:142:10 in _ws.onmessage at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent at node_modules\react-native\Libraries\WebSocket\WebSocket.js:231:8 in _eventEmitter.addListener$argument_1 at node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue at [native code]:null in callFunctionReturnFlushedQueue

임권일

질문자

2021.04.10

undefined Unable to resolve module ./components/Input from C:\Windows\System32\rn-tod\src\App.js:

None of these files exist:

3 | import styled, {ThemeProvider} from 'styled-components/native';

4 | import {theme} from './theme';

> 5 | import Input from './components/Input';

| ^

6 |

7 | const Container = styled.SafeAreaView`

8 | flex: 1;

at node_modules\react-native\Libraries\Utilities\HMRClient.js:320:31 in showCompileError

at node_modules\react-native\Libraries\Utilities\HMRClient.js:227:26 in client.on$argument_1

at node_modules\eventemitter3\index.js:181:21 in emit

at node_modules\metro\src\lib\bundle-modules\HMRClient.js:142:10 in _ws.onmessage

at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent

at node_modules\react-native\Libraries\WebSocket\WebSocket.js:231:8 in _eventEmitter.addListener$argument_1

at node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

at [native code]:null in callFunctionReturnFlushedQueue

이런오류가떠요 빨간색

김범준

지식공유자

2021.04.10

안녕하세요,

위에 복사해준 코드에는 총 3가지 수정해야 하는 부분이 있습니다.

1. styled-components를 import할때는 항상 뒤에 /native를 붙여서 styled-components/native 로 작성해야 합니다.

2. <StatusBar> 컴포넌트를 사용하는 곳에 i가 오타로 들어가있네요. props로 i를 전달해도 아무 문제가 없긴 하지만, 오타를 줄이는 습관을 들이는 것이 좋습니다.

3. 문제의 에러 메시지 입니다. 에러 메시지를 보면, rn-tod/src/App.js 로 되어 있는 것으로 보아, 프로젝트 이름은 rn-tod로 만드셨고, src 폴더 안에 App.js 파일이 있는 것으로 예상됩니다. 아마 글에 적으신 위쪽 코드가 App.js 파일의 코드인 것으로 보입니다.
에러 메시지를 보면, tn-tod/src/App.js : None of these files exist: 라고 되어 있고, * src/components/Input ~~ 과 * src/components/Input/index ~~ 가 나타납니다. 그 아래로 5번 라인 import Input from './components/Input' 이 문제가 된다고 알려주고 있네요.
이 에러는 import한 파일을 찾을 수 없다는 얘기 입니다.
import Input from './components/Input' 로 작성하셨기 때문에 App.js 파일이 있는 src 폴더안에(./) components 폴더가 있고(./components) 그 안에 Input(./components/Input) 파일을 만들고 Input 컴포넌트를 작성했어야 합니다. 코드에서 src폴더 안에 components 폴더가 있고, 그 안에 Input.js 파일이 있나요?

되도록 깃헙에 코드를 공개 저장소(public repo)로 올리고, 해당 링크를 포함해서 질문해주세요. 그래야 코드를 확인하기도 쉽고, 파일의 위치도 확인할 수 있습니다. 추가적으로, 동일한 상황도 재현해보고 알려드릴 수 있습니다.

추가적으로, 강의를 중간중간 멈추면서 천천히 따라가면서 확인해보세요.

감사합니다.

김범준

지식공유자

2021.04.10

추가적으로, 프로젝트를 windows 폴더의 system32 폴더 안에 만드신것 같은데, 맞나요?

windows 폴더의 system32 폴더는 윈도우 운영체제의 시스템 파일들이 존재하는 곳입니다.
해당 폴더의 파일이나 폴더는 수정 및 삭제하는 것은 위험하기때문에, 마이크로소프트에서도 해당 폴더는 되도록 건드리지 않기를 권고합니다.

C 드라이브에 프로그래밍 프로젝트를 모아서 관리하는 폴더를 하나 생성하고,
그곳에서 프로젝트를 생성하고 관리하는 것을 추천합니다.

임권일

질문자

2021.04.10

저는 바탕화면이나 D드라이브에 폴더를합니다

C드라이브에 하는게 좋을까요?

김범준

지식공유자

2021.04.10

아뇨, C드라이브, D드라이브, 바탕화면 어디든 상관 없습니다.

편하신 곳에 프로젝트 생성하고 진행하세요 :)

김범준

지식공유자

2021.04.10

문제는 해결 되었나요?

문제 없이 잘 진행되길 바랍니다. 궁금한 점이 있으면 질문 올려주세요.

감사합니다.

0

임권일

질문자

2021.04.05

설치해도

npm WARN saveError ENOENT: no such file or directory, open 'D:\package.json'

npm WARN enoent ENOENT: no such file or directory, open 'D:\package.json'

npm WARN styled-components@5.2.3 requires a peer of react@>= 16.8.0 but none is installed. You must install peer dependencies yourself.

npm WARN styled-components@5.2.3 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.

npm WARN !invalid#1 No description

npm WARN !invalid#1 No repository field.

npm WARN !invalid#1 No README data

npm WARN !invalid#1 No license field.

+ styled-components@5.2.3

updated 1 package and audited 67 packages in 1.081s

1 package is looking for funding

run `npm fund` for details

found 0 vulnerabilities

이런게떠요

김범준

지식공유자

2021.04.05

스타일드 컴포넌트를 설치한 위치가 어디인가요?
앞선 에러 메시지와, 마지막에 올린 에러 메시지를 보면,
실습을 진행하는 프로젝트 폴더에서 설치를 진행하지 않은것으로 보입니다.

현재 실습을 하고 있는 프로젝트 폴더가 어떻게 되나요?
예를 들어, 현재 실습을 진행하고 있는 프로젝트 폴더가 rn-todo 라고 하겠습니다.
터미널에서 rn-todo 폴더(실습을 진행하는 프로젝트 폴더)로 이동한 상태에서,
npm install styled-components
를 실행해서 스타일드 컴포넌트 라이브러리를 설치하세요.

김범준

지식공유자

2021.04.05

섹션 5, 2강 프로젝트 준비 영상에서

00:00 ~ 01:00 까지를 다시 확인하면서 천천히 따라해 보시기 바랍니다.

1. 프로젝트 생성
expo init rn-todo-app
혹은
expo init <프로젝트 이름>

2. 프로젝트 폴더로 이동
cd rn-todo-app
혹은
cd <프로젝트 이름>

3. 라이브러리 설치
npm i styled-components prop-types

이 단계까지 오면서 프로젝트 생성 -> 프로젝트 폴더로 이동 -> 실습에 필요한 라이브러리 설치 과정을 거칩니다. 천천히 따라하시면 문제 없이 진행이 가능할거라 생각합니다. 라이브러리 설치는 프로젝트 폴더 안에서 해야합니다.

0

임권일

질문자

2021.04.05

빨간색 오류가 계속 뜨네요

동영상보고 따라해도 이것만안되네요 컴퓨터가 문제가있는가요??

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View } from 'react-native';
import styled from 'styled-components/native';

const Container = styled.View`
 flex: 1;
 background-color: #ffffff;
 align-items: center;
 justify-content: center;
 `;
export default function App() {
  return (
    <Container>
      <Text>TODO</Text>
      <StatusBar style="auto" />
      </Container>
  );
}

undefined Unable to resolve module styled-components/native from D:\rn-components\src\App.js: styled-components/native could not be found within the project.

If you are sure the module exists, try these steps:

1. Clear watchman watches: watchman watch-del-all

2. Delete node_modules and run yarn install

3. Reset Metro's cache: yarn start --reset-cache

4. Remove the cache: rm -rf /tmp/metro-*

2 | import React from 'react';

3 | import { Text, View } from 'react-native';

> 4 | import styled from 'styled-components/native';

| ^

5 |

6 | const Container = styled.View`

7 | flex: 1;