[URECA] Day79 LabbitLog 블로그 만들기 #5

사용자 정보 수정 기능 추가 작업 기록 (Express & React)

1. 백엔드 (Express) – 사용자 정보 수정 API 구현

• API 엔드포인트:
  PUT /user/update
• 동작 방식:
  1. 클라이언트의 쿠키에서 JWT 토큰을 꺼내 인증
  2. 토큰을 검증해서 로그인한 사용자 ID를 파악
  3. 전달받은 정보로 사용자 데이터 수정
  4. (비밀번호 변경이 요청되면 bcrypt로 해싱)
  5. 업데이트 결과 반환

app.put('/user/update', async (req, res) => {
  try {
    const { token } = req.cookies;
    if (!token) {
      return res.status(401).json({ error: '로그인 필요' });
    }
    const userInfo = jwt.verify(token, secretKey);
    const { username, ...updateData } = req.body;
    // 비밀번호 변경 시 해싱
    if (updateData.password) {
      updateData.password = bcrypt.hashSync(updateData.password, saltRounds);
    }
    const updatedUser = await userModel.findByIdAndUpdate(
      userInfo.id,
      updateData,
      { new: true, select: '-password' }
    );
    res.json({
      message: '사용자 정보가 수정되었습니다.',
      user: updatedUser,
    });
  } catch (err) {
    console.error('사용자 정보 수정 오류:', err);
    res.status(500).json({ error: '사용자 정보 수정에 실패했습니다.' });
  }
});

• 특징/포인트:
  • JWT로 인증 → 안전하게 본인만 정보 수정 가능
  • 비밀번호 변경시 해싱 필수 처리
  • DB에서 갱신된 최신 정보만 클라이언트로 반환

---

2. 프론트엔드 (React) – 사용자 정보 수정 API 함수 추가

• API 함수:
  updateUserInfo
• 동작 방식:
  1. 클라이언트에서 수정할 데이터와 함께 PUT 요청
  2. 서버 응답 처리 및 예외 로깅

주요 코드

// src/apis/userApi.js
export const updateUserInfo = async userData => {
  try {
    const response = await axios.put(`${API_URL}/user/update`, userData)
    return response.data
  } catch (err) {
    console.error('사용자 정보 수정 실패:', err)
    throw err
  }
}

 

특징/포인트

• API_URL은 환경변수로 관리
• 예외(에러) 발생 시 콘솔에 로깅 후 에러 던짐

정리

 

• JWT 인증과 비밀번호 해싱을 통해 보안에 신경 쓴 사용자 정보 수정 기능을 구현
• 프론트-백엔드 연동 경험 및 PUT 메서드의 실전 활용
• 에러 처리를 통해 실패 상황도 사용자에게 안내할 수 있게 구성