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

안녕하세요! M.Choi님!

해당 파트의 질문은 안드로이드 백버튼과 관련된 질문인 것 같아요!
안드로이드 백버튼을 눌렀을 때, [뒤로가기]가 되거나, [한 번 더 누르면 종료됩니다] 와 같은 토스트 메시지가 발생해야해요!

[뒤로가기] 버튼은 잘 되는데, [한 번 더 누르면 종료됩니다.]가 잘 안되신다면, 크게 아래 2가지 부분을 확인해 주셔야 하는데요!

1. 앱파트: 몇 번 눌렸는지 count에 따라서 실행로직이 달라지게 되는데, 이 때 count가 올바르게 설정되어있는지 로그 등을 통해 확인해주세요!

2. 웹파트: 메인 페이지 경로를 설정하여, 해당 경로에따라 뒤로가기 또는 종료토스트를 요청하는 부분이 있을거예요! 여기서 해당 1. pathname에 제대로 경로가 오타없이 등록되어있는지, 2. api이름이 오타없이 연결되어있는지 두가지를 확인해 주세요!

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

Tost 메시지가 제대로 뜨지 않는 문제는 여러 가지 이유로 발생할 수 있습니다. 우선 아래의 가능성을 체크해 보시기 바랍니다:

1. 토스트 라이브러리 설치 여부: 적절한 토스트 메시지 라이브러리가 설치되어있는지 확인하세요. 만약 React Toastify를 사용하고 계신다면, npm install react-toastify 명령으로 설치할 수 있습니다.

2. 토스트 CSS import 여부: Toast 메시지는 스타일링이 적용되지 않으면 보이지 않을 수 있습니다. 보통 다음과 같이 CSS를 import 해야 합니다:

   import 'react-toastify/dist/ReactToastify.css';
   

3. 토스트 설정 확인: 토스트 메서드를 호출할 때 설정을 올바르게 했는지 확인하십시오. 올바른 위치에서 toast 함수를 호출해야 합니다:
   ”`javascript
   import { toast } from ‘react-toastify’;

toast(‘Your message here’);

4. **컴포넌트에 ToastContainer 포함 여부**: Toast 메시지를 출력하기 위해서는 `ToastContainer` 컴포넌트를 포함해야 합니다. 아래의 예시처럼 App 컴포넌트에 추가하세요:
   ```javascript
   import { ToastContainer } from 'react-toastify';
   
   function App() {
     return (
       <div>
         <ToastContainer />
         {/* 나머지 컴포넌트 */}
       </div>
     );
   }

더 구체적인 문제 해결 방법이 필요하다면, 관련된 예제를 제공해주세요. 기존에 비슷한 이슈가 논의된 게시물을 아래에서 확인하시면 도움이 될 수 있습니다:

• React 초기 세팅 yarn dev 오류: 이 게시물에서는 CSS 문제가 논의되었으나, 전체 프로젝트 설정 문제도 함께 고민할 수 있습니다.
  

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