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

안녕하세요! 강의 완강이 가까워지셨다니 정말 축하드립니다! 남겨주신 질문에 답변드리겠습니다.

Q1. 회원가입 페이지가 저희 프로젝트에는 없어서 몽고db에 수동으로 등록하면서 진행했잖아요 이부분을 회원가입으로 어떻게 연동하는지 궁금합니다.

A1. 네, 맞습니다. 관리자 계정은 프론트엔드에서 회원가입 폼을 통해 등록한 것이 아니라, VS Code의 Thunder Client 확장 프로그램을 사용하여 직접 생성했습니다.

다만, 이미 관리자 로그인 페이지가 구현되어 있으므로, 해당 코드를 활용하여 회원가입 페이지를 추가로 제작하는 것도 가능합니다.

로그인 요청을 보내는 API 엔드포인트
http://localhost:3000/api/auth/login → 회원가입 요청을 위해
http://localhost:3000/api/auth/signup으로 변경하고, formData에 회원가입에 필요한 정보를 포함하여 전송하면 됩니다. 즉, 로그인과 동일한 방식으로 회원가입 기능을 구현할 수 있습니다.

      const response = await axios.post(
        "http://localhost:3000/api/auth/signup",
        formData,
        {
          withCredentials: true,
        }
      );

회원가입 페이지를 구현할 때는 추가적인 수정이 필요합니다. 관리자 회원가입 페이지는 직접 실습해보면서 구현해보시는 것을 추천드립니다.

Q2. 실무에서 사용하는 강의라고 하셨는데 이부분은 실무에서 저희 프로젝트처럼 진행하면 어떻게 설명하는지도 궁금합니다.

A2. 실무에서는 프로젝트의 성격, 회사의 개발 프로세스, 그리고 사용하는 기술 스택에 따라 진행 방식이 다를 수 있습니다.

다만, 일반적으로

1. 디자인 및 요구 사항 분석 – 클라이언트 또는 기획팀과 협의하여 페이지 레이아웃 및 기능 정의(Figma & Adobe XD)

2. 프론트엔드 & 백엔드 개발 – 유지보수와 확장성을 고려하여 회사에서는 이미 사용하던 기술 스택을 기반으로 프로젝트를 진행합니다. React로 개발하던 회사였다면 당연히 프론트엔드는 React로 진행될 가능성이 높습니다.

    

3. 배포 및 유지보수 – AWS, Vercel, Netlify 등의 클라우드 환경이나 자체적인 서버에 배포 및 성능 최적화

Q3. "로그인이 다른 곳에 되어 있습니다." 메시지를 실무에서 어떻게 처리하나요?

현재는 MongoDB에서 직접 수동으로 false로 변경하는 방식으로 해결하고 있지만, 실제 서비스에서는 JWT나 여러 세션관리 기술이 사용됩니다.

    isLoggedIn: {
      type: Boolean,
      default: false,
    },

저희가 만들었던 isLoggedIn 컬럼은 로그인 후 true로 변경되고, 다른 곳에서 로그인할 경우 단일 로그인만 허용하기 위한 목적으로 사용되었습니다.

실제 서비스에서 적용한다면, 다음과 같은 방식으로 개선할 수 있습니다.

1. JWT 토큰이 만료되거나 사용자가 로그아웃할 경우 → isLoggedIn을 false로 변경

2. 일정 시간 동안 활동이 없을 경우 자동 로그아웃 처리 → isLoggedIn을 false로 수정하여 보안 강화

추가적으로, 이미 접속해 있는 계정에서 보안 이슈가 발생할 경우, 관리자가 직접 강제 로그아웃을 수행할 수도 있습니다.

직접 다양한 보안 아이디어를 구상하고 이를 개인 프로젝트에 적용해보는 것은 실력 향상에 큰 도움이 됩니다.

끝까지 열심히 들어주셔서 감사드리며, 궁금한 점이 있으시면 언제든 문의 주세요.

앞으로도 좋은 강의로 찾아뵙겠습니다. 감사합니다!

안녕하세요, 인프런 AI 인턴입니다. 신상님께서 문의하신 로그인 및 회원가입 관련 문제에 대해 안내 드리겠습니다.

1. 회원가입 기능 연동

회원가입을 구현하기 위해서는 새로운 사용자의 정보를 수집하여 데이터베이스에 저장하는 프로세스를 추가해야 합니다. 일반적으로 회원가입 페이지를 만들어 사용자의 이메일, 비밀번호 등의 정보를 입력받고, 이를 데이터베이스에 저장하는 REST API를 통해 처리하게 됩니다. 다음은 간단한 예시입니다.

1. Backend (Node.js & Express): 회원가입 요청을 처리하는 라우트를 추가해야 합니다.

   • 예:
     

   app.post("/api/register", (req, res) => {
    const { email, password } = req.body;
    // 비밀번호 해시화 및 사용자 데이터베이스 저장 로직 추가
    // MongoDB로 저장
   });
   

2. Frontend: 사용자 입력 폼을 만들고 해당 데이터를 백엔드로 전송합니다.

   • React 컴포넌트로 구현된 폼에서 fetch 또는 axios를 사용하여 백엔드로 요청을 보내는 방식입니다.
     

2. 실무 적용 방안

실무에서는 프로젝트 요구사항에 따라 다양한 인증 메커니즘이 사용됩니다. 기업에서는 보안과 확장성을 고려하여 OAuth, JWT 토큰 기반 인증 등을 선호할 수 있습니다. 따라서 실무에서는 이러한 보안 표준을 준수하며 프로젝트를 진행하게 됩니다.

• Single Sign-On (SSO), Two-factor authentication (2FA) 등 추가적인 보안 강화 방법이 적용될 수 있습니다.
  

3. 실무적인 로그인 문제 처리

실무에서 “로그인이 다른 곳에서 되어 있습니다”와 같은 시나리오는 보안상의 이유로 멀티 로그인 방지를 위해 처리됩니다.

• 세션 관리: 사용자가 로그인할 때마다 세션 토큰을 생성하고 이를 클라이언트에 저장합니다. 만약 다른 세션이 생성되면 기존 세션을 유효하지 않게 하기 때문에 해당 메시지가 발생할 수 있습니다.
  
• 세션 만료: 자동 로그아웃 규정 등을 통해 세션의 유효성을 지속적으로 체크합니다.
  
• 백엔드 로직: 현재 세션이 유효한지 확인하고 필요시 새로 로그인하도록 유도합니다.
  

참고 URL

• React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 애플리케이션 배포 가이드
  
• 회사 사이트 설명(노션) 사이트 접속 문의: 설정 및 코드 작업 시 참고 가능한 문서입니다.
  

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