인증 기능을 구현하고 이 부분을 작동시키기 위해 pewter.js를 설치할 수 있습니다. 왜냐하면 이 라이브러리가 제공하는 기능 중 하나가 인증 기능이기 때문입니다. 그래서 사용자 로그인 기능을 아주 쉽게 구현할 수 있을 겁니다.

그걸 하려면 먼저 pewter를 설치해야 합니다. 설치 명령어를 복사해서 터미널을 열고 npm install hey pewter 슬래시 pewter.js 를 입력하시면 됩니다.

굉장히 가벼워서 설치가 빠르게 진행될 것 같습니다.

그리고 새로운 파일을 만들거나, 먼저 저희 애플리케이션의 루트 디렉토리에 'lib'라는 새로운 폴더를 만들 수도 있습니다. 'lib' 폴더 안에 'pewter.action.ts'라는 새로운 파일을 만들어서, 그 안에 내용을 작성할 수 있습니다.

피터에서 제공하는 모든 액션들을 구현할 거예요. 로그인, 회원가입, 또는 로그아웃 기능 같은 액션들이죠. 이걸 가능하게 하는 데 필요한 건 export const sign in 이라고 말하는 것뿐이에요.

비동기 함수는 액션을 기다린 후, 방금 설치한 패키지인 @auth/signin에서 가져온 pewter를 호출하는 것과 같습니다.

더 간단하게 만들 수는 없을 것 같습니다. 그러면 로그아웃 기능도 동일하게 적용할 수 있을 것입니다.

마지막으로, 현재 사용자를 가져오는 데 사용할 도우미 함수도 만들 예정입니다.

현재 사용자를 가져오는 것은 try-catch 블록을 사용할 수 있는 비동기 함수와 같습니다.

잡는 과정에서, 당분간은 null을 반환해도 괜찮습니다.

그리고 시도 과정에서, await pewter.auth.getUser를 반환하게 됩니다. 이는 현재 사용자를 가져올 수 있도록 해주는 메서드입니다.

그리고 로그아웃은 비동기 함수가 아니기 때문에 앞에 await을 붙일 필요가 없어요. 아마 그래서 저희 IDE가 불평했을 거라고 생각해요. 이제 이 pewter auth를 저희 앱 루트 안에 통합할 수 있겠습니다.

바로 여기에서 할 거예요. React Router의 useOutlet context를 이용해서요. 그러면 부모 경로를 반환하게 됩니다. 그리고 종종 부모 경로는 자식과 공유하고 싶을 때 상태나 다른 값을 관리하죠.

이 경우에는 컨텍스트 프로바이더를 만드는 것과 비슷하지만, 아웃렛에 내장되어 있어요. 따라서 아래의 레이아웃 아래, 앱 위에 이 위치로 이동해서 새로운 기본 인증 상태를 만들어야 합니다.

매번 다시 만들 필요가 없도록, 일종의 인증 상태 유형으로 만들게 됩니다.

이 부분에 대해 좀 더 자세히 말씀드리겠습니다만, 우선은 현재 사용자가 로그인하지 않은 상태이며, 사용자 이름은 null로 설정된 객체로 선언해 주시면 됩니다.

사용자 ID를 널로 설정하는 것과 더불어, 이 인증 상태에 대해 새로운 타입을 생성해야 합니다. 그래야 TypeScript에게 이 안에 어떤 종류의 데이터가 들어있는지 정확히 알릴 수 있습니다.

그렇게 하려면 애플리케이션 루트에 'type.d.ts'라는 새 파일을 생성해야 합니다.

이것은 모든 타입의 정의를 의미합니다. 그리고 여기서는 auth 상태의 인터페이스를 만들 수 있습니다.

거기에서 저희는 방금 전에 정의했던 것과 동일한 것들을 정의할 수 있습니다. 로그인 여부는 불리언 타입, 사용자 이름은 문자열 또는 널 타입, 그리고 마지막으로 사용자 ID는 문자열 또는 널 타입입니다.

인증 컨텍스트에 대한 타입도 정의할 수 있습니다. 그 안에 무엇을 보관할지 알아보기 위해, 이 세 가지 변수를 모두 보관할 겁니다.

사용자가 로그인했으며, 사용자 이름과 사용자 ID, 그리고 인증 갱신 정보가 특정 유형이 됩니다.

결국 불리언 값을 반환하는 프로미스와 함께, 동일한 유형의 로그인 및 로그아웃 함수를 제공하는 함수가 있습니다.

이렇게 하는 것도 가능할 것 같습니다.

훌륭합니다. 이제 root.tsx 파일 내로 다시 돌아가 보시면, 인증 상태가 인식되었고, 기본 인증 상태의 유형을 정확히 알고 있다는 것을 확인하실 수 있습니다.

나중에 이것이 도움이 될 거예요. 현재 저희 애플리케이션에서 이 아웃렛을 사용할 때, 이 상태를 정의할 수 있는데, 이는 저희 애플리케이션의 모든 페이지에서 공유하는 것을 의미합니다.

그것은 인증 상태가 되겠네요. 인증 상태를 시작 시에 인증 상태 유형의 기본 상태로 설정하는 것을 의미합니다.

저번에 인증 상태를 너무 많이 언급했던 것 같아요. 그리고 나서 인증을 갱신하는 함수를 정의할 수 있을 텐데요, 그것은 동일하게...

이를 비동기 함수로 만들어 try-catch 블록을 사용할 수 있도록 할 수 있습니다.

그리고 catch 구문에서는 인증 상태를 기본 인증 상태로 되돌리고 false를 반환할 수 있습니다.

하지만 시도 과정에서 `await getCurrentUser`를 통해 현재 사용자에 접근을 시도해 볼 수 있습니다. 이는 저희가 생성한 `getCurrentUser`라는 피터 액션에서 직접 사용할 수 있습니다.

아니면 여기에서 await pewter auth get user를 간단히 설정할 수도 있어요. 하지만 이것을 몇 번 더 사용할 것이기 때문에 재사용 가능한 호출을 만드는 것이 좋습니다.

그러면 사용자 확보 후 인증 상태를 설정하고 실제 값으로 채울 수 있습니다. 'is signed in'은 사용자가 로그인하지 않은 상태의 부정으로 설정될 것입니다.

그럼 만약 사용자 정보를 가지고 있다면, 사용자의 존재 여부는 true로 설정되고, 사용자 이름은 user.questionMark.username, 혹은 null로 설정되며, 마지막으로 사용자 ID는 user.uuid로 설정됩니다.

이렇게 값을 null로 설정하시면, 설정된 인증 상태가 타입과 일치하므로 불만을 표출하지 않을 것입니다. 그리고 마침내 느낌표 느낌표 사용자, 즉 기본적으로...

이제 리프레시 인증 기능이 있으므로, 사용자가 있는지 확인해볼 수 있습니다. 이 기능을 활용하여 간단한 유즈 이펙트 내에서 앱 로딩 시 인증을 리프레시할 수 있을 것입니다.

그래서 사용자 정보를 최신 상태로 유지할 수 있고, 이 use effect는 오직 그것만 수행합니다. 따라서 새로운 함수인 '로그인'을 만들어 계속 진행할 수 있습니다.

비동기 함수가 되도록 하고, 여기서는 이전에 만들었던 서버 액션을 간단히 사용해서 await sign in을 수행하고 await refresh auth를 반환하도록 하겠습니다. 이렇게 하면 컴포넌트가 생성되자마자

계정을 다시 로드해서 변경 사항이 반영되도록 할 수 있고, 로그아웃도 마찬가지입니다. 누군가 로그아웃하면 인증을 다시 로드해서 그들이 로그아웃했다는 것을 알릴 수 있습니다. 그래서 이걸 로그아웃으로 이름을 변경하겠습니다.

하지만 이제 중복된 이름, 로그인, 여기 로그인, 그리고 로그아웃, 여기 로그아웃이 저희가 이 파일에서 만들었을 뿐만 아니라, 이 파일에서도 함께 생성되고 있는 것을 확인해 주십시오.

이것들을 이제 '페어그레이 로그인'으로 이름 짓고, '페어그레이 로그아웃'으로 이름을 변경하겠습니다.

이렇게 하면 혼동이 없을 겁니다. 저희는 pewter 로그인 대기 중이며, 바로 아래에는 pewter 로그아웃을 기다리고 있습니다.

훌륭합니다. 이제 이 함수들을 만들었으니, 저희 애플리케이션의 문맥 안에서 함께 공유할 수 있게 되었습니다.

콘센트 안쪽에 설치될 예정이지만, 우선 메인 부분을 반납하겠습니다.

따라서 이 전체 애플리케이션을 감싸는 메인 래퍼를 만들 예정인데, 이 래퍼에는 min-h-screen 클래스와 같이 화면 높이를 적절하게 관리할 수 있는 클래스들이 포함될 것입니다.

배경색, 전경색, 그리고 상대적 위치, 그리고 z10입니다.

그리고 나서 이 아웃렛을 렌더링하는데, 이제 이 추가적인 컨텍스트를 제공할 수 있습니다. 새로운 리액트 라우터 덕분에 내부 페이지 전체에 이 컨텍스트를 제공하는 것이 매우 간단해졌습니다. 우선...

인증 상태를 먼저 배포한 후에 리프레시 인증을 진행하겠습니다. 로그인 및 로그아웃 기능도 구현할 예정이니, 이제 어느 페이지에서든 이러한 함수들을 자유롭게 사용할 수 있을 것입니다. 따라서 이를 활용하여 구현할 수 있습니다.

네비바 내에서 인증 기능을 구현했습니다. 현재 저희가 정확히 거기 있었던 걸 기억해주세요. 지금 이 기능은 가짜입니다. 로그인 상태와 사용자 이름은 실제 변수로 존재하는 것이 아닙니다.

가짜인 것들은 그러니 `const`라고 말하고, 이 구조는 `useOutlet` 컨텍스트에서 오는 데이터와 리액트 라우터에서 오는 데이터의 타입을 가질 것입니다.

인증 컨텍스트를 파악하여 이 내용이 무엇에 관한 것인지 알아내고, 로그인 여부, 사용자 이름, 로그인 기능, 로그아웃 기능과 같은 정보를 추출할 수 있도록 해야 합니다.

음, 지금 사용자 이름(username)을 다시 정해야 할 것 같습니다. N으로 시작하네요. 그리고 이 핸들 인증(handle authentication) 기능도 현재 로그인 상태인지 확인하도록 만들어야 할 것 같습니다.

로그인되어 있다면, 새로운 try-catch 블록을 열겠습니다.

예외가 발생하면 콘솔에 오류를 기록하겠습니다. 예를 들어, ' pewter 서명 종료 실패'와 같은 메시지를 콘솔에 표시하고, 오류 내용을 사용자에게 보여준 후 반환하도록 하겠습니다.

여기서는 저희가 만들었던 pewter의 서명 종료 기능을 활용하여 사용자를 성공적으로 로그아웃시켜 볼 수 있을 것 같습니다.

하지만 로그인하지 않은 상태라면, 이 경우에 새로운 try-catch 블록을 사용할 수 있습니다.

컴퓨터 로그인에 실패했을 경우, 오류 메시지를 표시하거나, 여기서는 사용자에게 다시 로그인해 보도록 시도할 수 있습니다.

...이렇게 반환되도록 해야 합니다. 사용자에게 서명되어 있다면 이 함수를 종료하고, 그렇지 않으면 서명 로직이 실행됩니다. 그리고 놀랍게도, 이걸로 인증 기능을 이미 테스트할 수 있습니다.

여기 보시면 HiJS 마스터리가 보이실 거예요. 제가 이전에 pewter.com, pewter 컴퓨터에 로그인했기 때문에 이렇게 되는 것 같아요. 이미 로그인된 상태거든요.

이제 로그아웃할 수 있고, 보시면 아시겠지만 이게 다예요. 성공적으로 로그아웃되었거나, 로그인 버튼을 누르시면 pewter.com으로 다시 리디렉션되어서 어떤 계정으로 로그인할지 선택하실 수 있습니다.

그리고 다 됐어요. 다시 돌아왔습니다. Pewter는 사용자뿐만 아니라 사용자의 지출까지 저희를 위해 처리해 줍니다. 그래서 저희는 그들의 토큰을 관리하거나 저희 애플리케이션 내에서 무슨 짓을 하는지 걱정할 필요가 없습니다.

향후 저희가 애플리케이션의 핵심 기능을 개발할 때 훨씬 더 수월해질 겁니다. 핵심 기능은 바로 층도면을 업로드하고, 사용자들이 멋진 건축 층도면을 만들 수 있도록 하는 것입니다.

곧 도착할 거예요. 그런데 저희 어플리케이션의 시작 부분을 구현하면서, 초기 라우팅은 홈으로 설정했고, 초기 컴포넌트와 함께 인증과 관련된 초기 로직도 모두 포함하게 되었답니다.

이제 실제로 테스트해서 그 로직이 완전히 버그가 없는지, 그리고 코드가 확장 가능한지 확인해 볼 준비가 됐어요. 아, 그리고 이미 많은 기능을 개발했으니, 코드를 GitHub에 푸시하는 게 좋을 것 같아요.

터미널을 열어서 git init을 실행해 보세요. 그리고 github.com으로 가서 새로운 애플리케이션을 만드세요.

이것은 룸피(Roomify)가 될 겁니다. 저장소 만들기 버튼을 누르시면, 빠르게 시작할 수 있는 명령어를 복사할 수 있습니다.

git init을 한 후에, git commit -m '첫 번째 커밋'을 할 수 있습니다.

음, 그런데 먼저 git add .을 실행해서 모든 파일을 추적해야 하고요, git branch m main을 만들고, git commit을 해서 첫 번째 커밋을 해야 합니다. 그리고 git remote add origin을 통해 로컬 저장소를 공개 GitHub 저장소에 연결해야 할 것 같습니다.

그리고 git push u origin main 명령어를 통해 지금까지 작성한 코드를 저희 GitHub 저장소에 직접 업로드할 수 있습니다. 이제 프로젝트의 기본적인 구조가 완성되었으니, 앞으로 있을 주요 기능들을 구현할 때

이 과정의 특징 중 하나는 CodeRabbit을 활용하여 검토할 예정입니다.

빠르게 움직이고 싶지만, 기존 시스템을 망치고 싶지 않기 때문에 코드래빗은 AI 코딩 검토 분야의 선두 주자입니다. 2백만 개 이상의 저장소를 검토했으며 수백만 개의 오류를 발견했습니다.

그러니 제가 사용법을 알려드리고 싶습니다. 설명란 아래에 있는 CodeRabbit 링크를 클릭하시고 무료로 사용해 보세요.

깃허브를 이용해서 계정을 만들면, 작업 공간이 로드될 거예요. 들어가신 다음에, 저장소(repo)를 찾으실 수 있을 텐데요. 방(Room)이 들어간 Roomify 입니다.

이건 CodeRabbit이 접근할 수 있도록 권한을 미리 주셨을 때만 작동할 거예요. 그러니 'add repos'를 클릭하시고, GitHub 계정에 로그인하셔서 모든 저장소 또는 일부 저장소에 접근할 수 있도록 권한을 주시면 됩니다.

여기에서 찾으실 수 있을 거예요. 그리고 저희가 새로운 기능을 추가할 때마다, 코드가 잘 보이고 있는지 확인하기 위해 풀 리퀘스트를 열 예정입니다. 다음 강의에서는 이 전체 홈페이지를 개발하고, 그 후에...

테스트해 볼 수 있을 때까지는, 그리고 그 부분이 잘 작동하는 경우에나, 저희는 저희 아파트의 도면 업로드를 진행할 수 있습니다. 이는 저희 앱의 기본적인 기능이라고 할 수 있습니다.

그래서 여러분과 함께 이걸 만들게 정말 기대돼요.