console.log를 해도 터미널에 표시가 되지 않아요

아바타 커뮤니티앱 만들기 (React Native Expo)

[4-0] 로그인/회원가입 폼 핸들링

해결된 질문

작성

188

console.log 를 해도 vscode 터미널상에서 로그가 뜨지 않는데,

찾아보니 최신 ReactNative버전에선 React Native DevTools를 사용하라는 말이 있더라구요. 혹시 React Native DevTools에서 console.log를 확인하는 방법이 있을까요? 단순히 j눌러서 열고 "회원가입하기" 버튼 눌러도 로그가 안나오네요...ㅠㅠ

// package.json

{
  "name": "community",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "expo": "~52.0.37",
    "expo-blur": "~14.0.3",
    "expo-constants": "~17.0.7",
    "expo-font": "~13.0.4",
    "expo-haptics": "~14.0.1",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-splash-screen": "~0.29.22",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.2",
    "expo-system-ui": "~4.0.8",
    "expo-web-browser": "~14.0.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.7",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.4",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

javascript react react-native typescript react-query

답변 2

ab kim

질문자

자답입니다.
console함수 부를때 잘못 부르고 있었습니다

수정하니 터미널이랑 ReactNative Dev tools 둘다 로그가 제대로 나오고 있네요.

<FixedBottomCTA
        label="회원가입2하기"
        onPress={() => {
          handleSubmit;
        }}
      />

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. ab kim님.

React Native 프로젝트에서 console.log가 vscode 터미널에 표시되지 않는 문제는 여러 가지 원인으로 발생할 수 있으며, 특히 최신 React Native 버전 및 Expo 환경에서는 환경 설정과 관련된 문제일 가능성이 있습니다. 일반적으로 React Native DevTools을 사용하여 이런 문제를 해결할 수 있는데요, 아래의 방법을 통해 시도해 보시기 바랍니다.

해결 방법

React Native DevTools 사용하기
- Expo 또는 React Native에서 개발 중이라면, expo start를 실행한 상태에서 웹 브라우저로 열리는 Expo DevTools에서 로그를 확인할 수 있습니다.
- 터미널에서 로그가 보이지 않는 경우, DevTools에서 로그를 확인하는 것 또한 가능합니다. DevTools에서 ‘디버그 콘솔(Debug Console)‘이나 ‘Logs’ 탭을 찾아서 로그 메시지를 확인해 보세요.
개발 모드에서 디버깅 설정 확인
- 앱을 디버깅할 때 개발자 메뉴에서 ‘Debug JS Remotely’ 옵션을 켜서 Chrome 브라우저에서 로그를 확인할 수 있습니다. 이렇게 하면 console.log 메시지가 브라우저의 개발자 콘솔에 나타납니다.
- 또한, ‘Enable Fast Refresh’ 기능이 켜져 있는지 확인해 보세요. 이 기능이 활성화되어야 새로운 코드가 즉시 반영됩니다.
경로 문제 해결하기
- React Native에서의 경로 문제나, entry 파일 문제로 인해 로그가 제대로 출력되지 않을 수 있으니, main 경로가 올바른지 확인해 보세요.
코드 내에서 에러 핸들링
- console.log()에 추가적인 정보를 더해 로그를 출력해 보세요. 때로는 특정 조건에만 로그가 출력될 수도 있기 때문에 확인이 필요합니다.
- 예를 들어, console.log("Sign Up Button clicked"); 과 같이 출력을 의도한 위치에 명시적으로 추가해 보세요.

기본적인 해결책으로 위의 방법을 시도해 보신 후에도 문제가 해결되지 않는다면, 다른 프로젝트에서도 동일한 문제가 발생하는지 확인하여 환경적인 문제인지, 코드 내의 문제인지를 구분해 보시길 권장드립니다.

추가적으로 알아보실 관련 글은 다음과 같습니다:
- Expo에서의 console.log 출력 문제 해결 방법 - 주로 Expo 환경에서의 문제 해결 사례를 다룹니다.
- React Native 개발 환경 설정에서의 이슈와 해결 방법 - 환경 설정과 관련된 문제 해결 항목이 나와 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

console.log를 해도 터미널에 표시가 되지 않아요

해결 방법