소셜 네트워크를 위한 사용자 프로필 및 설정 관리

소개 이 튜토리얼에서는 back4app을 사용하여 소셜 네트워크 애플리케이션의 사용자 프로필 및 설정 관리를 구현하는 방법을 배웁니다 모든 것을 처음부터 구축하는 대신, back4app의 강력한 데이터 관리 기능을 활용하여 사용자 프로필 정보를 저장하고 검색하며, 아바타 업로드를 처리하고, 사용자 설정을 관리할 것입니다 이 튜토리얼이 끝나면 사용자가 다음을 수행할 수 있는 시스템을 만들게 됩니다 프로필 정보를 보고 업데이트하기 프로필 사진 업로드 및 관리하기 개인정보 및 알림 설정 구성하기 계정 기본 설정 사용자 정의하기 이러한 기능은 현대 소셜 네트워크에 필수적이며, 사용자에게 플랫폼에서 자신의 정체성과 경험을 제어할 수 있는 권한을 제공합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 back4app com https //www back4app com 에서 무료 계정에 가입할 수 있습니다 parse sdk가 구성된 back4app 프로젝트 작동하는 인증 시스템 아직 구현하지 않았다면 back4app 튜토리얼을 통한 인증 시스템 을 따라할 수 있습니다 javascript, react js 및 현대 웹 개발 개념에 대한 기본 지식 back4gram 프로젝트 여기 에서 소셜 네트워크 샘플 프로젝트 의 전체 코드를 찾을 수 있습니다 1단계 – back4app에서 프로필 데이터 구조 이해하기 구현에 들어가기 전에 back4app에서 사용자 프로필 데이터가 어떻게 구조화되어 있는지 이해해 봅시다 parse user 클래스 back4app의 parse user 클래스는 인증을 위한 것만이 아닙니다—프로필 정보를 저장하는 데에도 완벽합니다 새 사용자를 생성하면 back4app은 기본 필드가 있는 user 클래스에 자동으로 항목을 생성합니다 사용자 이름 비밀번호 (안전하게 저장되며 복구할 수 없음) 이메일 이메일 확인됨 인증 데이터 그러나 진정한 힘은 프로필 데이터에 대한 사용자 정의 필드로 이 클래스를 확장하는 데서 나옵니다 자기소개 사용자의 자기 설명 아바타 프로필 사진 (parse file로 저장됨) 전체 이름 사용자의 전체 이름 위치 사용자의 도시/국가 웹사이트 사용자의 개인 웹사이트 소셜 소셜 미디어 프로필 링크 선호도 사용자 설정 및 선호도 확장 사용자 속성 설정 back4app 대시보드에서 사용자 클래스에 이러한 사용자 정의 필드를 추가할 수 있습니다 데이터베이스 → 브라우저로 이동 사용자 클래스 선택 "새 열 추가" 클릭 필드 이름(예 "bio") 및 유형(예 "string") 정의 \[image back4app 대시보드에서 사용자 클래스에 새 열 추가하기] 이 필드는 다른 객체와 마찬가지로 parse sdk를 통해 접근하고 업데이트할 수 있습니다 back4gram 프로젝트 여기 에서 소셜 네트워크 샘플 프로젝트 의 전체 코드를 찾을 수 있습니다 2단계 – 사용자 프로필 데이터 가져오기 프로필 관리를 구현하는 첫 번째 단계는 현재 사용자의 프로필 데이터를 가져오는 것입니다 현재 사용자의 프로필 가져오기 back4app은 현재 로그인한 사용자를 쉽게 검색할 수 있게 해줍니다 const fetchuserprofile = async () => { try { // get the current user object const currentuser = await parse user current(); if (!currentuser) { // handle the case where no user is logged in navigate('/login'); return; } // access user properties const username = currentuser get('username'); const email = currentuser get('email'); const bio = currentuser get('bio') || ''; const fullname = currentuser get('fullname') || ''; // get avatar if available const avatar = currentuser get('avatar'); const avatarurl = avatar ? avatar url() null; // set state with user data setuserdata({ username, email, bio, fullname, avatarurl }); } catch (error) { console error('error fetching user profile ', error); // handle error appropriately } }; 이 코드는 다음을 보여줍니다 현재 사용자 객체를 가져오기 위해 parse user current() 내장 속성에 접근하기 위해 get('fieldname') 옵션 필드를 기본값으로 처리 아바타 이미지의 파일 url에 접근 back4gram 애플리케이션에서, 이는 profilepage js 컴포넌트의 useeffect 훅에서 구현됩니다 useeffect(() => { const loadprofile = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } setuser({ id currentuser id, username currentuser get('username'), email currentuser get('email'), bio currentuser get('bio') || '', avatar currentuser get('avatar') ? currentuser get('avatar') url() null }); // set stats setstats({ posts userposts length, followers currentuser get('followers') || 0, following currentuser get('following') || 0 }); setisloading(false); } catch (error) { // error handling } }; loadprofile(); }, \[navigate]); back4gram 프로젝트 다음에서 여기 전체 코드를 찾으세요 소셜 네트워크 샘플 프로젝트 back4app으로 구축된 3단계 – 사용자 프로필 정보 업데이트 사용자가 프로필 정보를 업데이트할 수 있도록 하는 것은 프로필 관리의 핵심 기능입니다 프로필 필드 업데이트 사용자가 업데이트된 프로필 정보를 제출하면, 다음과 같이 back4app에 저장할 수 있습니다 const updateprofile = async (profiledata) => { try { const user = await parse user current(); if (!user) return false; // update user fields user set('fullname', profiledata fullname); user set('bio', profiledata bio); user set('website', profiledata website); user set('location', profiledata location); // save changes to back4app await user save(); return true; } catch (error) { console error('error updating profile ', error); return false; } }; 이 함수 현재 사용자 객체를 가져옵니다 업데이트된 필드 값을 설정합니다 변경 사항을 back4app에 저장합니다 back4gram 애플리케이션에서 프로필 업데이트는 handleupdateprofile 함수에서 구현됩니다 const handleupdateprofile = async (e) => { e preventdefault(); setisupdating(true); try { if (!user) return; user set('username', username); user set('email', email); user set('bio', bio); // handle avatar upload if a file is selected if (selectedfile) { const parsefile = new parse file(selectedfile name, selectedfile); await parsefile save(); user set('avatar', parsefile); } await user save(); toaster create({ title 'success', description 'profile updated successfully', type 'success', }); } catch (error) { console error('error updating profile ', error); // handle error } finally { setisupdating(false); } }; back4gram 프로젝트 전체 코드를 찾으려면 여기 에서 소셜 네트워크 샘플 프로젝트 를 확인하세요 back4app으로 구축되었습니다 4단계 – 프로필 사진 업로드 처리 프로필 사진은 소셜 네트워크에서 사용자 정체성의 핵심 요소입니다 back4app은 parse file을 사용하여 파일 처리를 쉽게 만듭니다 아바타 이미지 업로드 프로필 사진을 업로드하고 저장하려면 const uploadavatar = async (file) => { try { const user = await parse user current(); if (!user || !file) return null; // create a parse file const parsefile = new parse file(file name, file); // save the file to back4app await parsefile save(); // update the user's avatar field user set('avatar', parsefile); await user save(); // return the file url return parsefile url(); } catch (error) { console error('error uploading avatar ', error); return null; } }; 이 코드는 선택한 파일로부터 새로운 parse file 객체를 생성합니다 파일을 back4app의 저장소에 저장합니다 파일을 사용자의 아바타 필드와 연결합니다 데이터베이스에서 사용자 객체를 업데이트합니다 back4app의 파일 관리 parse file로 파일을 업로드할 때, back4app 파일을 클라우드 저장소에 안전하게 저장합니다 파일에 접근하기 위한 고유한 url을 생성합니다 부모 객체의 acl에 따라 파일 권한을 관리합니다 빠른 로딩을 위해 cdn 배포를 처리합니다 이것은 자체 파일 저장 및 관리 시스템을 구축하는 것보다 훨씬 간단하게 만듭니다 5단계 – 사용자 설정 구현 기본 프로필 정보 외에도, 소셜 네트워크는 일반적으로 개인 정보 보호, 알림 및 기본 설정을 위한 다양한 설정을 제공합니다 back4app에 사용자 설정 저장하기 사용자 설정을 저장하는 두 가지 주요 접근 방식이 있습니다 1\ 간단한 설정을 위한 사용자 클래스 필드 사용 간단한 불리언 또는 열거형 설정의 경우 const updateprivacysettings = async (settings) => { try { const user = await parse user current(); if (!user) return false; // update privacy settings user set('profilevisibility', settings profilevisibility); // 'public', 'friends', 'private' user set('allowdirectmessages', settings allowdirectmessages); // boolean user set('showonlinestatus', settings showonlinestatus); // boolean await user save(); return true; } catch (error) { console error('error updating privacy settings ', error); return false; } }; 2\ 복잡한 설정을 위한 json 객체 사용 더 복잡하거나 그룹화된 설정의 경우, json 객체를 사용할 수 있습니다 const updateallsettings = async (settingsdata) => { try { const user = await parse user current(); if (!user) return false; // store all settings as a json object user set('usersettings', { privacy { profilevisibility settingsdata profilevisibility, allowdirectmessages settingsdata allowdirectmessages, showonlinestatus settingsdata showonlinestatus }, notifications { emailnotifications settingsdata emailnotifications, pushnotifications settingsdata pushnotifications, mentionalerts settingsdata mentionalerts }, theme { darkmode settingsdata darkmode, fontsize settingsdata fontsize, accentcolor settingsdata accentcolor } }); await user save(); return true; } catch (error) { console error('error updating settings ', error); return false; } }; 이 접근 방식은 복잡하고 중첩된 설정을 단일 필드에 저장할 수 있게 해줍니다 back4gram의 settingspage js 예제 back4gram 애플리케이션에서 사용자 설정은 settingspage js 구성 요소에서 관리됩니다 back4app과 상호작용하는 주요 부분은 다음과 같습니다 // fetching current settings useeffect(() => { const fetchsettings = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } const usersettings = currentuser get('usersettings') || {}; setprivacysettings({ profilevisibility usersettings privacy? profilevisibility || 'public', postprivacy usersettings privacy? postprivacy || 'friends' }); setnotificationsettings({ emailnotifications usersettings notifications? emailnotifications || false, pushnotifications usersettings notifications? pushnotifications || false }); // other settings } catch (error) { console error('error fetching settings ', error); } }; fetchsettings(); }, \[navigate]); // saving settings const savesettings = async (settingtype, settingdata) => { try { const user = await parse user current(); if (!user) return; // get current settings or initialize if none exist const currentsettings = user get('usersettings') || {}; // update only the specific settings category const updatedsettings = { currentsettings, \[settingtype] settingdata }; // save updated settings user set('usersettings', updatedsettings); await user save(); toaster create({ title 'settings saved', description 'your preferences have been updated ', type 'success', }); } catch (error) { console error('error saving settings ', error); // handle error } }; 이 코드는 back4gram이 어떻게 작동하는지를 보여줍니다 현재 사용자의 설정을 back4app에서 가져옵니다 누락된 설정에 대한 기본값을 제공합니다 변경된 설정 카테고리만 업데이트합니다 변경 사항을 back4app에 저장합니다 back4gram 프로젝트 찾기 여기 완전한 코드는 소셜 네트워크 샘플 프로젝트 back4app으로 구축되었습니다 6단계 – 고급 기능 계정 보안 설정 보안은 사용자 프로필 관리의 중요한 측면입니다 사용자 계정을 위한 고급 보안 기능을 구현해 봅시다 이중 인증 구현 기본 back4gram 예제에는 포함되어 있지 않지만, back4app의 클라우드 기능을 사용하여 이중 인증을 구현할 수 있습니다 // cloud function to enable 2fa parse cloud define("enable2fa", async (request) => { if (!request user) throw new error("user must be logged in"); // generate a secret key for the user const secret = generatetotpsecret(); // save the secret to the user object request user set("totpsecret", secret); await request user save(null, { usemasterkey true }); // return the secret and qr code data for setup return { secret secret, qrcode generateqrcodeuri(secret, request user get("email")) }; }); // cloud function to verify 2fa code parse cloud define("verify2facode", async (request) => { if (!request user) throw new error("user must be logged in"); const { code } = request params; // get the user's secret const secret = request user get("totpsecret"); // verify the provided code const isvalid = verifytotpcode(code, secret); if (!isvalid) { throw new error("invalid verification code"); } // mark 2fa as enabled request user set("is2faenabled", true); await request user save(null, { usemasterkey true }); return { success true }; }); react 애플리케이션에서 이러한 클라우드 기능을 호출할 수 있습니다 const enable2fa = async () => { try { const result = await parse cloud run("enable2fa"); // show qr code setup to user setqrcodedata(result qrcode); settwofactorsecret(result secret); } catch (error) { console error("error enabling 2fa ", error); } }; const verify2fasetup = async (code) => { try { await parse cloud run("verify2facode", { code }); // 2fa successfully set up setis2faenabled(true); } catch (error) { console error("error verifying 2fa code ", error); } }; 이메일 인증 back4app은 이메일 인증을 위한 내장 지원을 제공합니다 인증 이메일을 트리거할 수 있습니다 const sendverificationemail = async () => { try { const user = await parse user current(); if (user get('emailverified')) { return { success false, message 'email already verified' }; } await parse user requestemailverification(user get('email')); return { success true }; } catch (error) { console error('error sending verification email ', error); return { success false, error error message }; } }; 비밀번호 변경 사용자가 적절한 인증을 통해 비밀번호를 업데이트할 수 있도록 허용합니다 const changepassword = async (currentpassword, newpassword) => { try { const user = await parse user current(); // verify current password by trying to login await parse user login(user get('username'), currentpassword); // if login succeeded, update password user set('password', newpassword); await user save(); return { success true }; } catch (error) { console error('error changing password ', error); return { success false, error error message }; } }; 프로덕션 애플리케이션에서는 사용자 이름/비밀번호 조합을 노출하지 않도록 클라우드 기능을 사용하여 이를 안전하게 구현해야 합니다 7단계 – 소셜 기능을 위한 사용자 프로필 쿼리 소셜 네트워크는 사용자가 다른 사용자의 프로필을 볼 수 있도록 해야 합니다 back4app을 사용하여 사용자 프로필을 쿼리하고 표시하는 방법은 다음과 같습니다 다른 사용자 프로필 가져오기 const fetchuserprofile = async (userid) => { try { const query = new parse query(parse user); // include any pointer fields you want to retrieve query include('settings'); const user = await query get(userid); // check privacy settings const profilevisibility = user get('profilevisibility') || 'public'; const currentuser = await parse user current(); // if profile is private and not viewed by the owner if (profilevisibility === 'private' && (!currentuser || currentuser id !== user id)) { return { id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null, isprivate true }; } // return public profile data return { id user id, username user get('username'), fullname user get('fullname'), bio user get('bio'), avatar user get('avatar') ? user get('avatar') url() null, followerscount user get('followerscount') || 0, followingcount user get('followingcount') || 0, isprivate false }; } catch (error) { console error('error fetching user profile ', error); return null; } }; 이 함수는 parse user 클래스에 대한 쿼리를 생성합니다 id로 특정 사용자를 검색합니다 개인 정보 설정을 존중합니다 가시성에 따라 적절한 데이터를 반환합니다 사용자 검색 구현하기 사용자가 다른 프로필을 찾을 수 있도록 허용하기 위해 const searchusers = async (searchterm) => { try { const query = new parse query(parse user); // create a compound query for username or full name const usernamequery = new parse query(parse user); usernamequery contains('username', searchterm); const fullnamequery = new parse query(parse user); fullnamequery contains('fullname', searchterm); // combine queries with or query orquery(\[usernamequery, fullnamequery]); // only return public profiles query equalto('profilevisibility', 'public'); // limit to 20 results and skip private fields query limit(20); query select(\['username', 'fullname', 'avatar']); const results = await query find(); // format results return results map(user => ({ id user id, username user get('username'), fullname user get('fullname'), avatar user get('avatar') ? user get('avatar') url() null })); } catch (error) { console error('error searching users ', error); return \[]; } }; back4gram 앱에서 사용자 검색은 searchpage js const handlesearch = async (query) => { if (!query trim()) return; setisloading(true); try { // search for users const userquery = new parse query(parse user); userquery contains('username', query); userquery limit(10); const userresults = await userquery find(); const foundusers = userresults map(user => ({ id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null })); setusers(foundusers); } catch (error) { console error('error searching ', error); // handle error } finally { setisloading(false); } }; back4gram 프로젝트 여기 에서 소셜 네트워크 샘플 프로젝트 의 전체 코드를 찾으세요 결론 이 튜토리얼에서는 back4app을 사용하여 포괄적인 사용자 프로필 및 설정 관리를 구현하는 방법을 배웠습니다 다음과 같은 내용을 살펴보았습니다 사용자 프로필 데이터 구조 back4app의 사용자 클래스에서 프로필 정보 가져오기 및 업데이트 parse sdk를 사용하여 파일 업로드 처리 프로필 사진을 위한 parse file로 사용자 설정 구현 개인 정보 보호 및 선호도에 대해 보안 기능 추가 이중 인증 및 이메일 확인과 같은 사용자 프로필 쿼리 소셜 네트워크 기능을 위해 back4app의 강력한 데이터 관리 기능을 통해 복잡한 백엔드 인프라를 처음부터 구축하지 않고도 강력한 프로필 시스템을 쉽게 만들 수 있습니다 parse user 클래스를 사용하고 사용자 정의 필드로 확장함으로써 소셜 네트워크를 위한 유연한 사용자 프로필 시스템을 신속하게 만들 수 있습니다 다음 단계 소셜 연결 구현 팔로우/팔로워와 같은 parse 관계를 사용하여 활동 피드 추가 사용자 행동을 보여주기 위해 parse 쿼리를 사용하여 직접 메시징 구축 실시간 업데이트를 위한 라이브 쿼리로 사용자 간에 콘텐츠 조정 구현 사용자 생성 콘텐츠를 위한 클라우드 기능으로 back4app을 백엔드 서비스로 사용하면 복잡한 인프라를 구축하는 대신 매력적인 사용자 경험을 만드는 데 집중할 수 있습니다 프로필 및 설정 관리가 포함된 back4gram 소셜 네트워크 애플리케이션의 전체 코드는 다음에서 확인할 수 있습니다 github 리포지토리 https //github com/templates back4app/back4gram