노션 파일 중에서 contact input내용이 전부 날아가있네요

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

Ch9-2. localstorage & json으로 다국어 지원

해결된 질문

작성

코드가 조금 다른 것 같습니다.

2. 문의하기 누르면 어드민으로 문의하기가 넘어가고 어드민으로 들어왔을때 확인 되어야하는거죠?

제가 놓친 것 같아서 깃허브를 찾아서 복사 붙여넣기하니,
아래 처럼 뜹니다.
저희가 이걸 배운적이 있나요? 있다면 어느 부분인지 궁금합니다.
```
import ContactLocale from "../../Locale/Contact.json"; 
```
[plugin:vite:import-analysis] Failed to resolve import "../../Locale/Contact.json" from "src/Page/Contact/Contact.jsx". Does the file exist?
```
C:/Users/shin/Desktop/company_website/frontend/src/Page/Contact/Contact.jsx:4:26
```
```
19 |  import { motion } from "framer-motion";
20 |  import axios from "axios";
21 |  import ContactLocale from "../../Locale/Contact.json";
   |                             ^
22 |  const Contact = () => {
23 |    _s(); 
```

HTML/CSS javascript react node.js mongodb

답변 2

닭강정

지식공유자

안녕하세요! 다국어 지원 챕터 관련하여 문의 주셔서 감사합니다. 😊

Ch9-2 다국어 지원 강의에서는 사용자가 언어를 선택하면 미리 준비된 JSON 파일을 fetch하여 각 페이지의 내용을 변경하는 방법을 다뤘습니다.
아무래도 지금까지 만들어진 회사 페이지 및 컴포넌트가 너무 많다보니 강의 시간상 Navbar.jsx 및 MainPage.jsx에 다국어 기능을 적용하는 실습을 진행했으며, 다른 페이지들도 직접 적용해보시면 좋겠다는 안내를 드렸습니다.

따라서 Contact.jsx를 수정하는 과정이 생략되었으며, 해당 에러는 Locale 폴더에서 Contact.json을 찾을 수 없거나, Contact.jsx에서 JSON 파일 경로가 잘못되었을 때 발생하는 문제입니다.
따라서, JSON 파일이 올바른 경로에 있는지, 그리고 Contact.jsx에서 파일을 올바르게 불러오고 있는지 확인해보시면 해결될 수 있습니다.

추가적인 질문이 있으시면 언제든지 문의 주세요!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 신상님께서 문의하신 Contact.json 파일과 관련된 문제에 대해 안내 드리겠습니다.

문제 요약

제공받은 에러 메시지는 ../../Locale/Contact.json 파일을 찾아서 import 하려고 할 때 발생하는 오류입니다. 이는 해당 파일이 실제로 존재하지 않거나 경로가 잘못 설정된 경우 발생할 수 있습니다.

해결 방법

파일 유무 확인:
- 먼저, src/Page/Contact/ 경로에 Locale 폴더와 그 안에 Contact.json 파일이 실제로 존재하는지 확인해 보세요. 파일이 없다면 복사 과정에서 빠졌을 가능성이 있습니다.
올바른 경로:
- 파일이 존재하지 않을 경우 올바른 경로를 설정해 주셔야 합니다. 프로젝트 구조에 따라 경로가 달라질 수 있으므로 Contact.json의 정확한 위치를 확인하고 import 경로를 수정해 주세요.
강의 내 관련 내용 확인:
- 강의 중 해당 내용을 다루었는지 확인하시려면, 챕터 및 강의 슬라이드 또는 Notion 등의 추가 자료에서 파일 구조와 관련된 내용을 찾아보세요.
- 참고로, "Contact.json" 파일을 사용하는 것과 관련된 내용은 일반적으로 국제화(i18n) 혹은 여러 언어 지원을 위한 JSON 파일로서 처리되곤 합니다.

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