# REMIND!!

자! 이번엔 다시 돌아와 web Server 개발이다!!

이번에 만들고자 하는 건 **"게시판"**&#xC778;데,&#x20;

이를 진행하기에 앞서 전체적인 흐름을 정리할 필요가 있어 보인다.

지금까지 web Server와 관련하여 공부한 내용은 다음과 같다.

**\[1 주차]** : 로그인 페이지 구현

**\[2 주차]** : 회원 가입 페이지 구현 & DB 연동

**\[3 주차]** : \[1\~2 주차] 내용을 JWT로 구현

현재 Login & Register Page와 관련된 부분만 정리를 해두었기 때문에&#x20;

그 외에 어떤 페이지가 존재하는 지, 페이지 간의 흐름이 어떻게 구성되어 있는지 짚고 넘어가도록 하자.

### \[1] index page (index.php)

[Index file](https://app.gitbook.com/s/jDuSnCWMxJj5SAWy95Tw/note/index-file "mention")에서 알아 봤듯이 원래 index page는 사용자가 요청한 URL이 directory 값으로&#x20;

끝나는 경우, 제공되는 페이지이다. (index page가 존재하는 경우)

정말 그런 지 확인해볼까??

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FxaVfDzZv71VBV47h7s4L%2Fimage.png?alt=media&#x26;token=7de61da7-6f17-469e-8db9-5cedecff64d8" alt=""><figcaption></figcaption></figure>

index page를 만들어둔 경로를 입력하고 엔터를 누르면..!

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FZpVmCQHvI5Vjabu23Fhj%2Fimage.png?alt=media&#x26;token=e4cc5269-dac3-42dd-82c2-20afb43479b8" alt=""><figcaption></figcaption></figure>

음? 분명 index page가 나와야 하는데 login page로 이동했다.

개발해둔 web server는 index page에서 <mark style="background-color:blue;">**사용자가 인증된 사람인지 확인**</mark>하는 과정을 거친다.&#x20;

이 말은 로그인 하지 않는 사용자는 index page에 접근할 수 없고,&#x20;

바로 로그인 페이지로 redirection 하게 된다는 것!

그렇기 때문에 사용자는 맨 처음 서버에 접근하게 되면&#x20;

index page가 아닌 login page를 제일 먼저 마주하게 된다.&#x20;

### \[2] login page&#x20;

index page에서 redirection 되어 login page로 오게 되면&#x20;

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2F7ZTHqhSPjHYb6sQuQ2fW%2Fimage.png?alt=media&#x26;token=0ee3d21c-4444-421f-a487-e66357d70c12" alt=""><figcaption></figcaption></figure>

Username & Password를 입력하는 Form을 볼 수 있다.&#x20;

계정을 이미 가지고 있는 사람은 바로 로그인을 하면 되고, 계정이 없다면&#x20;

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FkwKkCazHrnUtENzRZEtb%2Fimage.png?alt=media&#x26;token=28d24849-419a-4126-8e51-a19311c1af8e" alt=""><figcaption></figcaption></figure>

링크를 클릭해서 회원 가입 페이지로 이동할 수 있다.&#x20;

### \[3] register page&#x20;

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FlibaHGmhHfVDPrrWMX3r%2Fimage.png?alt=media&#x26;token=655e2991-df55-4d08-a00a-de0d994ca7a9" alt=""><figcaption></figcaption></figure>

register page로 이동했다면, 필요한 인적 사항을 작성해서 Register 버튼을 눌러주면 끝!

회원 가입이 성공적으로 완료되면 자동으로 다시 login page로 이동하게 된다.

### \[4] index page (after login)

이제는 회원 가입을 했으니 로그인을 할 수 있다!

사용자가 Username:Password를 입력하면 식별 / 인증 과정을 통해서 로그인 성공 여부를 판단한다.&#x20;

로그인을 완료한 사용자라면 앞에서 거부 당했던 index page로 접근할 수 있게 된다.

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FOnoNw0I2g3sH1U5H67Jb%2Flogin_logic_5.png?alt=media&#x26;token=68ed3ff8-f49f-4497-9b2f-b7091ea1fe83" alt=""><figcaption></figcaption></figure>

### \[5] my page

index page로 이동한 사용자에게는 우측 상단에 MyPage 버튼이 제공된다.

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FuoYkDUdbkDopHXtLQ0IS%2Fimage.png?alt=media&#x26;token=8ddd7468-8b7d-4cc7-b638-e5629c321a01" alt=""><figcaption></figcaption></figure>

해당 버튼을 클릭하면 자신의 정보를 확인할 수 있는 my page로 이동하게 된다.

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2F1wr9Wli2QxYBOK7BxCxv%2Fimage.png?alt=media&#x26;token=c57231fc-278c-4198-acba-182ba1ead928" alt=""><figcaption></figcaption></figure>

마이페이지에서 확인할 수 있는 정보는 이름, username, 메일이고&#x20;

하단에 위치한 버튼은 각각

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2Fx9tKU76Q0D31UZEDpwsM%2Fimage.png?alt=media&#x26;token=e58409d1-3808-4158-bc97-b4b1775a06c7" alt=""><figcaption></figcaption></figure>

**BACK :** 이전 페이지로 이동&#x20;

**LOGOUT :** 로그아웃 시, 사용하는 버튼&#x20;

**EDIT :** 개인 정보 수정 페이지로 이동하는 버튼

이와 같은 기능을 담당한다.&#x20;

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FQzGXdX73UEd8acyv4cW7%2Fimage.png?alt=media&#x26;token=822d39a9-ab91-46c7-bc77-c0188853acba" alt=""><figcaption></figcaption></figure>

여기서 EDIT 버튼을 눌러, 회원 정보 수정 페이지로 이동해보자!

### \[6] edit\_info page

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2Fbplcv72hyDjYVQ2Oqb2R%2Fimage.png?alt=media&#x26;token=9579ecf6-9ed9-44ef-b56f-46b6f8a404b0" alt=""><figcaption></figcaption></figure>

회원 정보를 수정하는 페이지에 들어가면 기본적으로 이름, username, 메일 정보가 작성되어 있는 데

이 중에서 Username은 식별 정보로 사용하는 값인 만큼 회원 가입 이후에는 변경하지 못하도록&#x20;

설정해두었다.&#x20;

따라서 "hanhxx" 부분을 클릭해도 readonly 처리되어 있기 때문에&#x20;

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FqMe7eGzIgK4brbSkTPQN%2Fimage.png?alt=media&#x26;token=ece70e9c-b0bf-4b5e-97f7-2d3e3aef6074" alt=""><figcaption></figcaption></figure>

이렇게 드래그만 되지, 값 수정은 불가능하다.&#x20;

사용자가 정보를 모두 수정한 다음, Edit 버튼에 마우스를 올리면

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FQbYd1oNF1YAlc6VQWEMj%2Fimage.png?alt=media&#x26;token=0ef13deb-f731-4697-8f87-72f9543fa914" alt=""><figcaption></figcaption></figure>

마우스가 버튼에 올려졌다!는 걸 알아보기 쉽게 버튼의 색상이 진해지는 효과를 볼 수 있다!

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2F2oo3Sf6FyUwWG2no7xpj%2Fimage.png?alt=media&#x26;token=b30af450-a615-4454-8b7f-a3fd38ec4ba5" alt=""><figcaption></figcaption></figure>

이 페이지의 상단에는 총 2개의 버튼이 위치해 있는데&#x20;

HOME 버튼은 회원 정보를 수정한 다음,&#x20;

마이페이지를 거쳐 index page로 이동할 필요 없이 바로 index page로 이동하기 위해 넣어둔 버튼이다.

LEAVE 버튼의 경우에는 사용자가 로그아웃이 아닌, **회원 탈퇴**를 원하는 경우 사용하는 버튼이다.

***

이렇게 해서 전체적인 페이지 흐름을 살펴보았다.

다음으로 만들어 볼 것은 바로 게시판 만들기!

게시판은 사용자가 로그인 한 후에 바로 보여지도록 index page에 구성할 생각이다.

{% hint style="warning" %}
\[NEXT] : 게시판 만들기 (within Index page)
{% endhint %}
