보안 전공생의 공부

수정하고 저장소에 저장하기 + 브랜치

수잉 — Tue, 4 Jan 2022 08:59:29 +0900

참조 : https://git-scm.com/book/ko/v2, https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=zxy826&logNo=220488261345

이전 게시물 (2021.12.29 - [개발/풀스택 스터디 공부 정리] - Git - git 저장소 만들기)에서 git 저장소를 만들었고,

working directory(작업자의 현재 시점->작업자의 작업 트리)에 checkout(작업자의 작업트리를 저장소의 특정 시점과 일치하도록 하는 작업)을 하였다.

이번 게시물에서는 파일을 수정하고, 스냅샷을 커밋할 것이다. 파일을 수정하다가 저장하고 싶으면 스냅샷을 커밋한다.

워킹 디렉토리의 모든 파일들은 tracked(관리대상o) / untracked(관리대상x)으로 나눈다.

- tracked 파일 : 이미 스냅샷에 포함되어 있던 파일 -> git이 알고 있는 파일

unmodified(수정x) / modified(수정o) / staged(커밋으로 저장소에 기록할) 상태 중 하나

- untracked 파일 : 나머지 파일

최초로 저장소를 clone하면 -> 모든 파일은 tracked이면서 unmodified상태이다. 파일을 checkout하고 나서 아무것도 수정x 때문이다.

마지막 커밋 이후 아무것도 수정x 상태에서 파일을 수정하면 -> git은 그 파일을 modified상태로 인식한다.

실제로 커밋을 하기 위해서는 이 수정한 파일을 staged상태로 만들고, staged상태의 파일을 커밋한다.

=> 이러한 라이프사이클 계속 반복

파일의 라이프 사이클

· 파일 상태 확인

파일의 상태 확인하기 위해서는 git status 명령이다.

clone한 후 바로 이 명령을 실행하면 위의 메시지가 뜬다.

파일을 하나도 수정하지 않은 상태임을 나타내고 있다.

tracked 파일은 하나도 수정되지 않았다는 의미이다. untracked 파일은 아직 없어서 목록에 나타나지 않는다.

현재 작업 중인 브랜치를 알려주며, 서버의 같은 브랜치로부터 진행된 작업이 없는 것을 나타낸다.

기본 브랜치가 master이기 때문에 현재 브랜치 이름이 'master'로 나온다.

· 파일 추가

프로젝트에 README 파일을 만들기 위해 gitbash에 아래와 같은 명령어를 입력한다.

README 파일은 새로 만든 파일이기 때문에 status를 실행하면 위와 같은 문구가 출력된다.

- README 파일은 Untracked 상태라는 것을 나타내고 있다. git은 untracked 파일을 아직 스냅샷(커밋)에 넣어지지 않은 파일로 인식한다 (파일이 tracked 상태가 되기 전까지 git은 절대 그 파일을 커밋하지 않는다)

README 파일을 직접 tracked 상태로 만들기 위해

- git add 명령으로 README 파일을 추적한다.

- git status 명령을 다시 실행하면 README 파일이 tracked 상태이면서 커밋에 추가될 staged 상태임(<-changes to be committed)을 확인할 수 있다. 커밋하면 git add를 실행한 시점의 파일이 커밋되어 저장소 히스토리에 남는다.

2) modified 상태의 파일을 stage 하기

- README 파일을 수정하고 다시 git status 명령을 실행하였다.

- README 파일은 tracked한 상태이지만 아직 staged가 안된 상태임(<-changes not staged for commit)을 확인할 수 있다.

-> staged 상태로 만들려면 git add 명령을 실행해야 한다

▷ git add : 파일을 새로 추적할 때 & 수정한 파일을 staged 상태로 만들 때 사용

+ merge할 때 충돌난 상태의 파일을 resolve할 때도 사용

git add 명령을 실행해 README파일을 staged 상태로 만들었다.

git status 명령으로 파일이 staged 상태임을 확인할 수 있다.

staged 상태가 된 파일을 커밋하기 위해 git commit을 실행한다.

이 때 'Aborting commit due to empty commit message' 라는 오류가 떴다.

vscode로 파일이 열려있어서 생긴 오류인 것으로 예상했다. 그래서 vscode를 종료하고 다시 -m 옵션을 사용하여 메시지를 첨부하였더니 커밋이 되었다.

Associating text editors with Git - GitHub Docs

Associating text editors with Git Use a text editor to open and edit your files with Git. MacWindowsLinux Using Atom as your editor Install Atom. For more information, see "Installing Atom" in the Atom documentation. Open TerminalTerminalGit Bash. Type thi

docs.github.com

커밋을 통해 확인할 수 있는 정보

-> master 브랜치에 커밋했고, 체크섬은 f8518ff 이다.

그리고 수정한 파일은 1개이고, 추가된 라인은 1개이다.

· staging area 생략

위와 같이 git add 명령을 실행하여 파일이 staged 상태가 되게 한 후, git commit 명령을 통해 커밋을 해야 되는 과정이 귀찮을 수 있다.

git commit 명령을 실행할 때 -a 옵션을 추가하면 git은 tracked상태의 파일을 자동으로 staging area로 넣기 때문에,

git add 명령을 실행할 필요가 없다.

· 파일 삭제

git rm 명령으로 tracked 상태의 파일을 삭제한 후(staging area에서 삭제하는 것) 커밋하면 실제 파일을 제거할 수 있다.

git 명령을 사용하지 않고 단순히 워킹 디렉토리에서 README 파일을 삭제하고 git status 명령으로 상태를 확인하면 아래와 같다.

Changes not staged for commit (->unstaged) 상태라고 표시를 하고 있다.

git rm 명령을 실행하면 삭제된 파일은 staged 상태가 된다.

git status로 상태를 확인해보면 아래와 같다.

앞으로 git은 이 파일을 더 추적하지 않는다.

· 브랜치 : 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 것이다. 모든 버전 관리 시스템이 지원한다.

· Git이 데이터를 저장하는 방법 : git은 데이터를 change set이나 변경사항(diff)으로 기록하지 않고, 일련의 스냅샷으로 기록한다.
커밋하면 git은 커밋 개체(object)를 저장한다 (-> 현 staging area에 있는 데이터의 스냅샷에 대한 포인터 등)

최초 커밋을 제외한 나머지 커밋은 이전 커밋 포인터가 적어도 하나씩 있고, 브랜치를 합친 merge커밋 같은 경우에는 이전 커밋 포인터가 여러 개 있다.

ex) 파일 3개 있는 디렉토리 하나가 있고, 이 파일을 staging area에 저장하고 커밋

1) staging area에 저장

파일을 stage하면 git 저장소에 파일을 저장하고(Blob), staging area에 해당 파일의 체크섬을 저장한다 (SHA-1 사용)

2) 커밋

$ git add README LICENSE test.rb
$ git commit -m 'The initial commit of my project'

git commit 으로 커밋 -> 루트 디렉토리와 각 하위 디렉토리의 트리 개체를 체크섬과 함께 저장소에 저장

-> 커밋 개체 생성 (<- 메타데이터, 루트 디렉토리 트리 개체를 가리키는 포인터 정보 넣음)

Git 저장소에는 5개의 데이터 객체가 생긴다.

각 파일에 대한 Blob 3개, 파일과 디렉토리 구조가 들어 있는 트리 개체 1개, 커밋 개체 1개이다.

커밋&amp;트리데이터(5개의 데이터 객체)

다시 파일을 수정하고 커밋하면 밑의 그림처럼 이전 커밋이 무엇인지도 함께 저장한다.

커밋&amp;이전 커밋

=> 브랜치는 커밋과 커밋 사이를 이동할 수 있는 포인터 같은 것이라고 볼 수 있다.

기본적으로 git은 master 브랜치를 만든다. 처음 커밋하면 이 master 브랜치가 생성된 커밋을 가리킨다.

이후 커밋을 만들면 master 브랜치는 자동으로 가장 마지막 커밋을 가리킨다.

master 브랜치 &amp; 커밋 히스토리 -&gt; master 브랜치는 가장 최신 커밋을 가리킴

· 새 브랜치 생성

~/Documents/asdf1파일에 testing 브랜치를 만들었다.

새로 만든 브랜치도 마지막 커밋을 가리킨다.

git branch명령어는 브랜치를 새로 만들기만 하기 때문에, git은 아직 maser 브랜치를 가리키고 있다.

이를 확인하는 방법은 git의 HEAD포인터를 이용하면 된다. 이 포인터는 지금 작업하고 있는 로컬 브랜치를 가리킨다.

git log 명령에 --decorate 옵션을 사용하면 브랜치가 어떤 커밋을 가리키는지 알 수 있다.

master 브랜치를 가리키고 있는 것을 확인할 수 있다.

· 브랜치 이동하기

git checkout 명령으로 다른 브랜치로 이동할 수 있다.

testing 브랜치로 바꾸었다. 이렇게 하면 HEAD는 testing 브랜치를 가리킨다.

다시 git log 명령어를 이용하여 HEAD가 가리키는 브랜치를 확인하였다.

testing 브랜치로 변경된 것을 확인할 수 있다.

∴ git은 브랜치가 필요할 때 프로젝트를 전체 복사하지 않기 때문에, 복사하는 작업이 순식간이다.

또한 커밋할 때마다 이전 커밋의 정보를 저장하기 때문에 merge할 때 어디서부터(merge base) 합쳐야 하는지 안다.

그렇기 때문에 개발자들이 수시로 브랜치를 만들어 사용한다.

git 저장소 만들기

수잉 — Wed, 29 Dec 2021 00:30:52 +0900

출처 : https://git-scm.com/book/ko/v2

주로 밑의 두 가지 방법 중 하나로 git 저장소를 쓰기 시작한다.

> 아직 버전 관리를 하지 않는 로컬 디렉토리 하나를 선택해서 git 저장소를 적용하는 방법

> 다른 어딘가에서 git 저장소를 clone하는 방법

1. 아직 버전 관리를 하지 않는 로컬 디렉토리 하나를 선택해서 git 저장소를 적용하는 방법

1) 프로젝트의 디렉토리로 들어가서 git bash를 실행시킨다(마우스 우클릭 > git bash 실행)

그러면 굳이 cmd에서 디렉토리 이동을 하지 않아도 된다.

git init 명령을 실행한다. 이 명령만으로는 프로젝트의 어떤 파일도 관리하지 않는다. 대신 .git이라는 하위 디렉토리를 만들 수 있다.

.git 디렉토리에는 저장소에 필요한 뼈대파일(skeleton)이 들어 있다.

git이 파일을 관리하게 하려면 저장소에 파일을 추가하고 commit 해야 한다.

git add 명령으로 파일을 추가하고 git commit 명령으로 commit한다.

$ git add .
$ git add <filename>or<foldername>
$ git commit
$ git commit -m "commit message"

이전 포스팅에서는 위의 방법을 이용하였다.

> 2021.12.28 - [개발/풀스택 스터디 공부 정리] - Git - git 최초설정, git 레파지토리 생성 및 소스 올리기 (git bash)

Git - git 최초설정, git 레파지토리 생성 및 소스 올리기 (git bash)

github에서 원격 저장소를 만들고 난 후 , git bash로 push 하는 방법을 사용한다. 참조 : https://coding-factory.tistory.com/244 [Git] Git 레파지토리 생성 & 소스 올리기 (Git Bash활용) GitHub에서 원격저장..

jonnastudy.tistory.com

2. 다른 어딘가에서 git 저장소를 clone하는 방법

다른 프로젝트에 참여하거나(contribute) git 저장소를 복사하고 싶을 때 git clone 명령을 사용한다.

git은 서버에 있는 거의 모든 데이터를 복사한다. git clone을 실행하면 프로젝트 히스토리를 전부 받아온다.

실제로 서버의 디스크가 망가져도 클라이언트 저장소 중에서 아무거나 가져다가 복구하면 된다.

git clone <url>으로 저장소를 clone 한다.

만약 example 라이브러리 소스코드를 clone하려면 아래처럼 명령하면 된다.

$ git clone https://github.com/example/example

이 명령은 example이라는 디렉토리를 만들고 그 안에 .git이라는 디렉토리를 만든다.

그리고 저장소의 데이터를 모두 가져와 자동으로 최신 버전을 checkout 해준다.

example 디렉토리로 이동하면 checkout으로 생성한 파일을 볼 수 있고 작업을 시작할 수 있다.

만약 다른 이름의 디렉토리로 만들고 싶으면 명령의 뒤에 원하는 디렉토리 이름을 입력하면된다.

$ git clone https://github.com/example/example example2

디렉토리 이름이 example2가 된다.

중간 정리

수잉 — Tue, 28 Dec 2021 20:03:53 +0900

머리 속에 틀을 더 정확히 잡고 이해하려고 정리했다.

부족한 부분에 대한 보충을 위해서 필요한 과정이다.

홈페이지에 구성을 조금 더 추가할 필요가 있다.

주소록은 다소 부실한 편이다.

여기서도 오류검사를 추가할 필요가 있다.

중간 정리를 하다보니 더 추가해야 될 부분이 눈에 보인다.

그리고 그 땐 어려웠던 함수가 한 눈에 정리하고 보니

그 함수의 역할과 기능을 단박에 이해할 수 있게 되었다 !

앞으로 프로젝트든 뭐든 중간중간 정리를 할 필요성을 느끼게 되었다 :)

git 최초설정, git 레파지토리 생성 및 소스 올리기 (git bash)

수잉 — Tue, 28 Dec 2021 00:26:32 +0900

github에서 원격 저장소를 만들고 난 후 , git bash로 push 하는 방법을 사용한다.

참조 : https://coding-factory.tistory.com/244

[Git] Git 레파지토리 생성 & 소스 올리기 (Git Bash활용)

GitHub에서 원격저장소를 만든 뒤 Git Bash를 활용하여 Push하는 방법입니다. Git Repository생성 깃허브 바로가기 1. 위에 링크된 깃허브 사이트에가서 로그인을 합니다. (회원이 아니라면 회원가입을 해

coding-factory.tistory.com

1. github 가입

https://github.com/

GitHub: Where the world builds software

GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...

github.com

위의 깃허브 사이트에 들어가서 회원가입을 한다.

new repository

레파지토리를 생성한다.

practice 레파토리지를 이용할거다 !

2. git 설치

https://git-scm.com/download/win

Git - Downloading Package

Downloading Git Now What? Now that you have downloaded Git, it's time to start using it.

git-scm.com

나는 IDE로 VSCode를 사용하기 때문에 이렇게 설정해주었다.

기본으로 설정된 Vim을 그대로 설정해도 상관없다.

나중에 변경 가능하다.

git 설치완료

git이 설치가 완료되면 이렇게 Git 파일이 생긴다.

3. git 최초 설정

Git - Git 최초 설정

Vim과 Emacs, Notepad++은 꽤 인기 있는 편집기로 개발자들이 즐겨 사용한다. Mac이나 Linux 같은 Unix 시스템, Windows 시스템에서 사용 가능하다. 여기서 소개하는 편집기들이 불편해서 다른 편집기를 사

git-scm.com

git config라는 도구로 git의 환경 설정 내용을 확인하고 변경할 수 있다.

환경 설정은 한 컴퓨터에서 한 번만 해주며 되고, 설정한 내용은 언제든지 명령어로 변경 가능하다.

이때 사용하는 설정 파일은 세가지이다.

(1) /etc/gitconfig 파일 : 시스템의 모든 사용자와 모든 저장소에 적용되는 설정.

git config --System 옵션으로 이 파일을 읽고 쓸 수 있다.

( ※시스템 전체 설정파일이기 때문에 수정하려면 관리자 권한이 필요 )

(2) ~/.gitconfig, ~/.config/git/config 파일 : 특정 사용자(현재 사용자)에게만 적용되는 설정.

git config --global 옵션으로 이 파일을 읽고 쓸 수 있다. 특정 사용자의 모든 저장소 설정에 적용된다.

(3) .git/config 파일 : git디렉토리에 존재하고, 특정 저장소(현재 작업중인 프로젝트)에만 적용되는 설정.

--local 옵션을 사용하면 이 파일을 사용하도록 지정할 수 있다.

- 설정의 우선 순위 : (3) > (2) > (1)

4. git bash 실행

git bash는 내가 github에 올리고자 하는 폴더(소스폴더)에서 실행시키면 된다.

화질 뎨동

폴더 들어가서 마우스 오른쪽 클릭해서 Git Bash Here을 클릭하면 된다.

깃 버전 확인(설치 확인) 

git --version 명령어를 이용해 git이 제대로 설치되었는지 확인한다.

git을 설치하고 나서 가장 먼저 해야되는 것은 사용자이름과 이메일 주소를 설정하는 것이다.

git은 commit 할 때마다 이 정보를 사용한다. 한 번 커밋한 후에는 정보를 변경할 수 없다.

$git config --global user.name "suinee"

$git config --global user.email suinee@example.com

--global 옵션으로 설정하는 것은 딱 한 번만 하면 된다는 것이다. 만약 프로젝트마다 다른 이름과 이메일 주소를 사용하고 싶으면 이 옵션을 빼고 명령을 실행하면 된다.

이때 github와 동일한 사용자이름과 이메일 주소를 설정해주면 github와 연동된다.

설정확인은 git config --list 명령어를 통해 확인할 수 있다.

ㅇcmd창으로도 git 명령어 사용 가능 !

git config <key>명령으로 특정 key에 대해 어떤 값을 사용하는지 알 수 있다.

(1) $git init - 로컬 저장소 만들기

(2) $git status - 올라갈 파일이 있는지 현재 폴더에 있는 파일들을 확인한다.

사실 두번째 시도여서 지금은 commit할 게 없다고 뜨지만,

처음에는 폴더내의 파일들이 빨간색으로 되어 있었다.

(3) $git add . (<-add와 . 사이에 공백있음) - 로컬 저장소에 파일을 올려준다.

모든 파일을 push 할 것이기 때문에 . 을 사용했다.

특정 파일만 업로드 하고 싶으면 -> add [파일명]or[폴더명]을 명령하면 된다.

(4) $git commit -m "init commit" - push시 원하는 메시지(init commit)를 등록하고 commit 한다.

(5) $git remote add origin [레퍼토리지 주소]

깃허브에서 레퍼토리지 주소 확인

(6) $git remote -v - 로컬 저장소가 원격 저장소로 연결된다.

(7) git push origin master - 아까 commit한 파일들을 원격저장소에 올린다.

약간 시간이 걸리니까 바로 안 된다고 끄지 말고 기다리기 !! (과거의 나에게 하는 말)

( + 추가적인 git 명령어에 대한 도움말 : https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EB%8F%84%EC%9B%80%EB%A7%90-%EB%B3%B4%EA%B8%B0 )

Git - 도움말 보기

도움말은 언제 어디서나 볼 수 있다. 오프라인으로도 볼 수 있다. 도움말과 이 책으로 부족하면 다른 사람의 도움을 받는 것이 필요하다. Freenode IRC 서버(irc.freenode.net)에 있는 #git 이나 #github 채널

git-scm.com

*에러 발생*

사실 이전에 이것저것 시도하느라 몇 가지 에러가 발생하였다

[does not have a commit cheked out 에러]

밑의 사이트를 이용하여 해결한 에러이다.

깃허브) does not have a commit checked out 에러 해결방법

이 에러는 해당 로컬 리포지토리 안의 다른 디렉토리(폴더)에 .git이 있기 때문에 발생하는 현상입니다 흔히 한개의 폴더 안에 여러 개의 프로젝트를 넣어서 관리하는데 이때 최상위 폴터에 로컬

mmol.tistory.com

맨 처음에 git bash를 소스코드에서 실행해야하는 것을 모르고 여기저기서 시작하다 보니

설치된 .git 파일들이 많다 ㅋㅠㅠ

숨김파일까지 보이도록 설정한 다음에 .git 을 검색한다.

보기>표시/숨기기>숨김항목 체크 후 검색

내가 사용할 소스코드 외의 다른 위치에 있는 .git을 제거해준다.

[origin does not appear to be a git repository 에러]

밑의 사이트를 이용하여 에러를 해결하였다.

이 에러 발생의 원인은...

기억이 안난다... 따흑.. 시간이 좀 지난 거여서 ..

git push error : fatal: 'origin' does not appear to be a git repository ...

노트북 여러대로 커밋을 하다 보니 (주기적 포멧도 진행) 해당 오류가 너무 많이나와 글로 남깁니다. fatal: 'origin' does not appear to be a git repository fatal: Could not read from remote repository. P..

integer-ji.tistory.com

<결과>

레파토리지에 파일들이 잘 업로드 된 것을 확인할 수 있다 :)

버전 관리, Git 기초

수잉 — Mon, 20 Dec 2021 13:59:17 +0900

출처 : pro git - https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EB%B2%84%EC%A0%84-%EA%B4%80%EB%A6%AC%EB%9E%80%3F

Git - 버전 관리란?

1.1 시작하기 - 버전 관리란? 이 장에서 설명하는 것은 Git을 처음 접하는 사람에게 필요한 내용이다. 먼저 버전 관리 도구에 대한 이해와 Git을 설치하는 방법을 설명하고 마지막으로 Git 서버를 설

git-scm.com

▶ 버전 관리

- 버전 관리 시스템(Version Control System, VCS)은 파일의 변화를 시간에 따라 기록하여 과거 특정 시점의 버전을 다시 불러올 수 있는 시스템이다.

- VCS를 사용하면 개별 파일or프로젝트 전체를 이전 상태로 되돌리거나 시간에 따른 변경 사항을 검토 가능하고, 파일을 쉽게 복구할 수 있다.

· 로컬 버전 관리 시스템

- 간단한 데이터베이스를 사용해서 파일의 변경 사항을 기록한다.

- 어느 디렉토리에서 작업하고 있었는지 까먹고 엉뚱한 파일을 덮어쓰거나 의도치 않았던 위치로 복사하는 실수를 해결해준다.

- 파일을 관리하는 서버가 별도로 있고, 클라이언트가 중앙 서버에서 파일을 받아서 사용(checkout)한다.

로컬 버전 관리 (출처: https://git-scm.com/book/ko/v2)

- 많이 쓰는 VCS 도구 중 RCS(Revision Contrl System) : 각 revision들 간의 patch set(파일에서 변경되는 부분)을 관리한다. 특별한 형식의 파일에 저장, 특정 시점의 파일 내용을 보고 싶을 때 해당 시점까지의 패치들을 모두 더하여 파일을 만들어내는 것

· 중앙집중식 버전 관리(CVCS)

- 다른 개발자와 함께 프로젝트를 작업할 때 생기는 문제를 해결하기 위해 개발되었다.

- 모두 누가 무엇을 하고 있는지 알 수 있다.

- 모든 클라이언트의 로컬 데이터베이스를 관리 < VCS 하나를 관리

- 중앙 데이터베이스에 있는 하드디스크 문제가 생기면 프로젝트의 모든 히스토리를 잃는다.

중앙집중식 버전 관리 (출처:https://git-scm.com/book/ko/v2)

· 분산 버전 관리 시스템 (DVCS)

- 클라이언트는 히스토리를 포함한 저장소를 전부 복제하여 checkout한다.

- 서버에 문제가 생기면 이 복제물로 다시 작업을 할 수 있다.

- clone은 모든 데이터를 가진 진정한 백업이다.

- 대부분의 DVCS 환경에서는 리모트 저장소가 존재한다 -> 협업 가능

- git, mecurial, bazaar, darcs 등

분산버전관리 시스템 (출처: https://git-scm.com/book/ko/v2)

▶ Git 기초

· VCS시스템의 대부분(CVS, Subversion, Preforce, Bazaar 등)의 데이터를 다루는 방법

- 관리하는 정보가 파일들의 목록이다.

- 각 파일의 변화를 시간순으로 관리하면서 파일들의 집합을 관리한다(델타 기반)

대부분의 VCS시스템 (출처: https://git-scm.com/book/ko/v2)

· Git의 데이터를 다루는 방법

- 데이터를 파일 시스템 스냅샷의 연속으로 취급하고, 크기가 아주 작다.

- commit(코드 변화를 기록하는 것)하거나 프로젝트의 상태를 저장할 때마다 파일이 존재하는 그 순간을 중요시한다.

- 파일이 달리지지 않으면 새로 저장하지 않는다. 이전 상태의 파일에 대한 링크만 저장한다.

- 데이터를 스냅샷의 스트림처럼 취급한다.

Git (출처: https://git-scm.com/book/ko/v2)

· Git 브랜치를 사용하면 얻게 되는 이득

- 대부분의 명령을 로컬에서 실행 : 대부분의 명령이 로컬 파-일과 데이터만 사용해서 네트워키에 있는 다른 컴퓨터가 필요 없다. 프로젝트의 모든 히스토리가 로컬 디스크에 있기 때문에 모든 명령이 순식간에 실행된다.

-> 오프라인 상태이거나 VPN에 연결하지 못해도 작업을 할 수 있고, commit도 가능하다.

- 무결성 : 데이터를 저장하기 전에 항상 checksum(40자 길이의 16진수 문자열)을 구하고 그 checksum으로 데이터를 관리한다. SHA-1해시(ex.24b9da6552252987aa493b52f8696cd6d3b00373)를 사용하여 파일내용이나 디렉토리 구조를 이용해 checksum을 구한다. git에서 사용하는 가장 기본적인 데이터 단위이자 기본철학이 checksum이기 때문에, 이것 없이는 어떠한 파일이나 디렉토리로 변경 할 수 없다.

- 데이터의 추가만 : git으로 무엇을 하든 데이터베이스에 데이터가 추가된다(데이터를 삭제할 방법 X) 일단 스냅샷을 commit하고 나면 데이터를 잃어비리기 어렵다.

- 세가지 상태 : git은 파일을 세 가지 상태(->committed, modified, staged)로 관리한다.

(1) committed : 데이터가 로컬 데이터베이스에 안전하게 저장됨

(2) modified : 수정한 파일을 아직 로컬 데이터베이스에 commit하지 않음

(3) staged : 현재 수정한 파일을 곧 commit할 거라고 표시한 상태

위의 세 가지 상태는 git 프로젝트의 세가지 단계(->git 디렉토리, 워킹 트리, staging area)와 연결되어 있다.

▷git 프로젝트 세 단계

git 프로젝트의 세가지 단계 (출처: https://git-scm.com/book/ko/v2)

- git 디렉토리 : git이 프로젝트의 메타데이터와 객체데이터베이스를 저장하는 곳. git의 핵심이다.

다른 컴퓨터에 있는 저장소를 clone할 때 만들어진다.

- 워킹 트리 : 프로젝트의 특정 버전을 checkout한 것.

-> git 디렉토리는 지금 작업하는 디스크에 있고, 그 디렉토리 안에 압축된 데이터베이스에서 파일을 가져와서 워킹트리를 만든다.

- staging area : git 디렉토리에 있다. 단순한 파일이다. 곧 commit할 파일에 대한 정보를 저장한다.

▷git이 기본적으로 하는 일

1. 워킹 트리에서 파일을 수정한다. >modified

2. staging area에 파일을 stage해서 commit할 스냅샷을 만든다(모든 파일 추가 or 선택하여 추가) >staged

3. staging area에 있는 파일들을 commit해서 git 디렉토리에 영구적인 스냅샷으로 저장한다. >committed

게시판 만들기 - Post-User 관계 만들기 (1) 게시물에 작성자 만들기

수잉 — Sun, 19 Dec 2021 18:00:15 +0900

게시물과 사용자 사이에 관계(relationship)을 만들어서

게시물(document)에 작성자(document id)를 기록하여 글 작성자 정보를 알 수 있게 만든다.

자신의 글은 삭제 가능/타인의 글은 삭제가 불가능하게 만들기 위함이다.

· schema 수정

post schema

post schema에 author을 추가하였다.

ref: 'user'를 통해 이 항목의 데이터가 user collection의 id와 연결됨을 mongoose에 알린다.

user의 user.id와 post의 post.author가 연결되어 user과 post의 relationship이 형성된다.

- 참조하기 좋은 글 : https://catnap-jo.tistory.com/entry/Mongoose-%EB%AA%A8%EB%A5%B4%EB%8A%94-%EA%B2%83-%EC%B1%84%EC%9B%8C%EB%86%93%EA%B8%B0

Mongoose - 모르는 것 채워놓기

스키마의 옵션(Schema's option) mongoose에서 스키마를 선언하는 과정에서 사용할 수 있는 옵션들이 존재한다. autoIndex bufferCommands capped collection emitIndexErrors id [id](#id) minimize read safe sh..

catnap-jo.tistory.com

· post.js 수정

//routes/post.js

const express  = require('express');
const router = express.Router();
const Post = require('../models/Post');
const util=require('../util');

// Index 
router.get('/', function(req, res){
  Post.find({})       
  .populate('author')
  .sort('-createdAt')            
  .exec(function(err, posts){    
    if(err) return res.json(err);
    res.render('posts/index', {posts:posts});
  });
});

// New
router.get('/new', function(req, res){
  const post=req.flash('post')[0]||{};
  const errors=req.flash('errors')[0]||{};
  res.render('posts/new',{post:post, errors:errors});
});

// create
router.post('/', function(req, res){
  req.body.author = req.user._id;
  Post.create(req.body, function(err, post){
    if(err){
      req.flash('post',req.body);
      req.flash('errors',util.parseError(err));
      return res.redirect('/posts/new');
    }
    res.redirect('/posts');
  });
});

// show
router.get('/:id', function(req, res){
  Post.findOne({_id:req.params.id})
  .populate('author')            
  .exec(function(err, post){     
    if(err) return res.json(err);
    res.render('posts/show', {post:post});
  });
});

// edit
router.get('/:id/edit', function(req, res){
  const post=req.flash('post')[0];
  const errors=req.flash('errors')[0]||{};
  if(!post){
    Post.findOne({_id:req.params.id},function(err,post){
      if(err) return res.json(err);
      res.render('post/edit',{post:post, errors:errors});
    })
  }
  else{
    post._id=req.params.id;
    res.render('posts/edit',{post:post, errors:errors});
  }
});

// update
router.put('/:id', function(req, res){
  req.body.updatedAt = Date.now();
  Post.findOneAndUpdate({_id:req.params.id}, req.body, {runValidators:true}, function(err, post){
    if(err) {
      req.flash('post',req.body)
      req.flash('errors',util.parseError(err))
      return res.redirect('/posts'+req.params.id+'/edit')
    }
    res.redirect("/posts/"+req.params.id);
  });
});

// destroy
router.delete('/:id', function(req, res){
  Post.deleteOne({_id:req.params.id}, function(err){
    if(err) return res.json(err);
    res.redirect('/posts');
  });
});

module.exports = router;

Post(Model).populate('author')

- Model.population( )함수는 relationship이 형성되어 있는 항목의 값을 생성해준다.

현재 post의 author에는 user의 id가 기록되어 있는데, 이 값을 바탕으로 실제 user의 값을 author에 생성하게 된다.

- index와 show에 추가하였다.

req.body.author = req.user._id;

- 글을 작성할 때 req.user._id를 가져와서 post의 author에 기록한다.

req.user는 로그인을 하면 passport에서 자동으로 생성해준다

<- 2021.12.07 - [개발/node.js] - 게시판 만들기 / login 기능 - passport package

게시판 만들기 / login 기능 - passport package

passport package를 사용해 login 기능을 만든다. · passport : node.js에서 user authentication(사용자 인증, login)을 만들기 위해 사용하는 package 단독으로 사용 X , passport strategy package와 함꼐 사..

jonnastudy.tistory.com

· index.ejs 수정

<!-- views/posts/index.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">

      <h2 class="mb-3">Board</h2>

      <table class="board-table table table-sm border-bottom">

        <thead class="thead-light">
          <tr>
            <th scope="col">Title</th>
            <th scope="col">Author</th>
            <th scope="col" class="date">Date</th>
          </tr>
        </thead>

        <tbody>
          <% if(posts == null || posts.length == 0){ %>
            <tr>
              <td colspan=2> 보여줄게 없쪙 ㅠ </td>
            </tr>
          <% } %>
          <% posts.forEach(function(post) { %>
            <tr>
              <td>
                <a href="/posts/<%= post._id %>"><div class="ellipsis"><%= post.title %></div></a>
              </td>
              <td class="author">
                <div class="ellipsis"><%= post.author ? post.author.username : "" %></div>
              </td>
              <td class="date">
                <span data-date="<%= post.createdAt %>"></span>
              </td>
            </tr>
          <% }) %>
        </tbody>

      </table>

      <div>
        <a class="btn btn-primary" href="/posts/new">New</a>
      </div>

    </div>
  </body>
</html>

<th scope="col">Author</th>

table의 theader에 author 항목을 추가하고

</td>

table의 tbody에도 author 항목을 추가한다.

author가 있는 경우->author의 username을 표시한다.

· show.ejs 수정

views/posts/show.ejs

show에도 author 항목을 추가하고

author가 있는 경우->author의 username을 표시한다.

<실행결과>

ㄱ

르그인하여 글을 작성하면 author가 기록된다.

게시판에 author 항목이 생겨서 작성자를 확인할 수 있게 되었다.

mongoDB의 post 데이터

post의 author에는 user id가 기록되며, 이 값을 바탕으로 실제 user의 값을 author에 생성할 수 있다고 하였다.

user의 고유 아이디가 author에 기록되어 있다는 말이다.

mongoDB의 post 데이터에 들어가보면

작성자의 user데이터의 id(mongodb object id)만 기록되어 있다.

이때 post의 author를 populate하면 author가 단순히 user의 id만 가지고 있는게 아니라, user object로 변환돼서 name, email등을 가지게 되고, post.author.email과 같은 방식으로 값을 읽을 수 있게 된다.

-출처및참조 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0/%EA%B2%8C%EC%8B%9C%ED%8C%90-Post-User-%EA%B4%80%EA%B3%84-relationship-%EB%A7%8C%EB%93%A4%EA%B8%B0

Node JS 첫걸음/게시판 만들기: 게시판 - Post-User 관계(relationship) 만들기 - A MEAN Blog

소스코드 이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실

www.a-mean-blog.com

아 이것저것 공부하고 활동하다 보니까 공부했던 게 다 가물가물하고 헷갈려졌다..

오늘 밤은 다시 다 정리하고 점검하면서 전체적인 이해도를 높이게따..

게시판 만들기 - post error

수잉 — Sun, 19 Dec 2021 16:10:01 +0900

routes/userjs에서 사용한 parseError함수를 post에서도 사용하여 post의 error를 처리한다.

-> 여러 파일에서 사용하게 될 함수들을 하나의 module로 분리

// util.js

const util = {};

util.parseError = function(errors){
  const parsed = {};
  if(errors.name == 'ValidationError'){
    for(const name in errors.errors){
      const validationError = errors.errors[name];
      parsed[name] = { message:validationError.message };
    }
  } 
  else if(errors.code == '11000' && errors.errmsg.indexOf('username') > 0) {
    parsed.username = { message:'This username already exists!' };
  } 
  else {
    parsed.unhandled = JSON.stringify(errors);
  }
  return parsed;
}

module.exports = util;

routes/users.js에 있던 parseError함수를 module로 만들어 util.js파일로 분리한다.

util.js <- 여러 곳에서 공통으로 쓰게 될 함수들을 기록

· user.js 수정

// routes/users.js

const express = require('express');
const router = express.Router();
const User = require('../models/User');
const util=require('../util');

// Index
router.get('/', function(req, res){
  User.find({})
    .sort({username:1})
    .exec(function(err, users){
      if(err) return res.json(err);
      res.render('users/index', {users:users});
    });
});

// New
router.get('/new', function(req, res){
  const user = req.flash('user')[0] || {};
  const errors = req.flash('errors')[0] || {};
  res.render('users/new', { user:user, errors:errors });
});

// create
router.post('/', function(req, res){
  User.create(req.body, function(err, user){
    if(err){
      req.flash('user', req.body);
      req.flash('errors', util.parseError(err));
      return res.redirect('/users/new');
    }
    res.redirect('/users');
  });
});


// show
router.get('/:username', function(req, res){
  User.findOne({username:req.params.username}, function(err, user){
    if(err) return res.json(err);
    res.render('users/show', {user:user});
  });
});

// edit
router.get('/:username/edit', function(req, res){
  const user = req.flash('user')[0];
  const errors = req.flash('errors')[0] || {};
  if(!user){
    User.findOne({username:req.params.username}, function(err, user){
      if(err) return res.json(err);
      res.render('users/edit', { username:req.params.username, user:user, errors:errors });
    });
  }
  else {
    res.render('users/edit', { username:req.params.username, user:user, errors:errors });
  }
});

// update
router.put('/:username', function(req, res, next){
  User.findOne({username:req.params.username})
    .select('password')
    .exec(function(err, user){
      if(err) return res.json(err);

      // update user object
      user.originalPassword = user.password;
      user.password = req.body.newPassword? req.body.newPassword : user.password;
      for(var p in req.body){
        user[p] = req.body[p];
      }

      // save updated user
      user.save(function(err, user){
        if(err){
          req.flash('user', req.body);
          req.flash('errors', util.parseError(err));
          return res.redirect('/users/'+req.params.username+'/edit');
        }
        res.redirect('/users/'+user.username);
      });
  });
});


// destroy
router.delete('/:username', function(req, res){
  User.deleteOne({username:req.params.username}, function(err){
    if(err) return res.json(err);
    res.redirect('/users');
  });
});

module.exports = router;

// functions
function parseError(errors){
  const parsed = {};
  if(errors.name == 'ValidationError'){
    for(const name in errors.errors){
      const validationError = errors.errors[name];
      parsed[name] = { message:validationError.message };
    }
  }
  else if(errors.code == '11000' && errors.errmsg.indexOf('username') > 0) {
    parsed.username = { message:'This username already exists!' };
  }
  else {
    parsed.unhandled = JSON.stringify(errors);
  }
  return parsed;
}

const util=require('../util');

util을 require했다.

// create

req.flash('errors', util.parseError(err));

// update // save updated user

req.flash('errors', util.parseError(err));

parseError -> util.parseError로 변경했다.

· Post.js 수정

//models/Post.js
const mongoose = require('mongoose');
const postSchema = mongoose.Schema({
  title:{type:String, required:[true,'Title is required']},
  body:{type:String, required:[true,'Body is required']},
  createdAt:{type:Date, default:Date.now},
  updatedAt:{type:Date},
});

const Post = mongoose.model('post', postSchema);
module.exports = Post;

post schema의 custom error message를 추가한다.

· posts.js 수정

2021.12.01 - [개발/node.js] - 게시판 만들기 / User 생성, 수정 시 error 처리 (1)와 처리방식이 유사하다.

//routes/posts.js

const express  = require('express');
const router = express.Router();
const Post = require('../models/Post');
const util=require('../util');

// Index 
router.get('/', function(req, res){
  Post.find({})
  .sort('-createdAt')
  .exec(function(err, posts){
    if(err) return res.json(err);
    res.render('posts/index', {posts:posts});
  });
});

// New
router.get('/new', function(req, res){
  const post=req.flash('post')[0]||{};
  const errors=req.flash('errors')[0]||{};
  res.render('posts/new',{post:post, errors:errors});
});

// create
router.post('/', function(req, res){
  Post.create(req.body, function(err, post){
    if(err){
      req.flash('post',req.body);
      req.flash('errors',util.parseError(err));
      return res.redirect('/posts/new');
    }
    res.redirect('/posts');
  });
});

// show
router.get('/:id', function(req, res){
  Post.findOne({_id:req.params.id}, function(err, post){
    if(err) return res.json(err);
    res.render('posts/show', {post:post});
  });
});

// edit
router.get('/:id/edit', function(req, res){
  const post=req.flash('post')[0];
  const errors=req.flash('errors')[0]||{};
  if(!post){
    Post.findOne({_id:req.params.id},function(err,post){
      if(err) return res.json(err);
      res.render('post/edit',{post:post, errors:errors});
    })
  }
  else{
    post._id=req.params.id;
    res.render('posts/edit',{post:post, errors:errors});
  }
});

// update
router.put('/:id', function(req, res){
  req.body.updatedAt = Date.now(); 
  Post.findOneAndUpdate({_id:req.params.id}, req.body, {runValidators:true}, function(err, post){
    if(err) {
      req.flash('post',req.body)
      req.flash('errors',util.parseError(err))
      return res.redirect('/posts'+req.params.id+'/edit')
    }
    res.redirect("/posts/"+req.params.id);
  });
});

// destroy
router.delete('/:id', function(req, res){
  Post.deleteOne({_id:req.params.id}, function(err){
    if(err) return res.json(err);
    res.redirect('/posts');
  });
});

module.exports = router;

const util=require('../util');

util을 require했다.

new route

post 생성시 에러가 있는 경우 new페이지에 에러와 기존에 입력했던 값들을 보여준다.

(이때, 이 값들은 create route에서 생성된 flash로부터 받아옴)

flash는 배열이 오는데 이 프로그램에서는 하나 이상의 값이 저장되는 경우가 없고 ,

있더라도 오류이므로 무조건 [0]의 값을 읽어오게 했다.

값이 없으면(처음 new페이지에 들어온 경우)에는 | | { }를 사용해 빈 오브젝트를 넣어 posts/new페이지 생성한다.

req.flash(문자열, 저장할 값)형태로 저장할 값(숫자, 문자열, 오브젝트 등 가능)을 해당 문자열에 저장한다.

이때 배열로 저장되기 때문에 같은 문자열을 중복해서 사용하면 순서대로 배열에 저장된다.

req.flash(문자열)인 경우 - 해당 문자열에 저장된 값들을 배열로 불러온다.

<- 저장된 값이 없으면 빈 배열([ ])을 return

create route

post 생성시 오류가 있으면 post, error flash를 만들고 new페이지로 redirect한다.

post 생성시 발생하는 오류는

update route

Post.findOneAndUpdate에 {runValidators:true}가 기존 코드에서 추가되었다.

findOneAndUpdate는 기본설정이 schema에 있는 validation이 작동하지 않도록 되어있어 이 option을 통해

validation이 작동하도록 설정해줘야 한다.

· edit.ejs & new.ejs 수정

<!-- views/posts/edit.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">

      <nav aria-label="breadcrumb">
        <ol class="breadcrumb p-1 pl-2 pr-2">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item"><a href="/posts">Board</a></li>
          <li class="breadcrumb-item"><a href="/posts/<%= post._id %>"><%= post.title %></a></li>
          <li class="breadcrumb-item active" aria-current="page">Edit Post</li>
        </ol>
      </nav>

      <form action="/posts/<%= post._id %>?_method=put" method="post">

        <div class="form-group">
          <label for="title">Title</label>
          <input type="text" id="title" name="title" value="<%= post.title %>" class="form-control <%= (errors.title)?'is-invalid':'' %>">
          <% if(errors.title){ %>
            <span class="invalid-feedback"><%= errors.title.message %></span>
          <% } %>
        </div>

        <div class="form-group">
          <label for="body">Body</label>
           <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':'' %>"><%= post.body %></textarea>
          <% if(errors.body){ %>
            <span class="invalid-feedback"><%= errors.body.message %></span>
          <% } %>
        </div>

        <% if(errors.unhandled){ %>
          <div class="invalid-feedback d-block">
            <%= errors.unhandled %>
          </div>
        <% } %>
        
        <div>
          <a class="btn btn-primary" href="/posts/<%= post._id %>">Back</a>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>

    </div>
  </body>
</html>

<%= (errors.항목이름)?'is-invalid':'' %>

각 항목의 form-group class가 있는 div에 위의 코드를 추가하였다.

<% if(errors.title){ %>

<% } %>

만약 error가 있다면 bootstrap의 invalid-feedback class를 사용한다.

<% if(errors.unhandled){ %>

<%= errors.unhandled %>

</div>

<% } %>

error.unhandled는 따로 표시한다.

<!-- views/posts/new.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">

      <nav aria-label="breadcrumb"> 
        <ol class="breadcrumb p-1 pl-2 pr-2">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item"><a href="/posts">Board</a></li>
          <li class="breadcrumb-item active" aria-current="page">New Post</li>
        </ol>
      </nav>

      <form action="/posts" method="post">

        <div class="form-group">
          <label for="title">Title</label>
          <input type="text" id="title" name="title" value="<%= post.title %>" class="form-control <%= (errors.title)?'is-invalid':'' %>">
          <% if(errors.title){ %>
            <span class="invalid-feedback"><%= errors.title.message %></span>
          <% } %>
        </div>
        
        <div class="form-group">
          <label for="body">Body</label>
          <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':'' %>"><%= post.body %></textarea>
          <% if(errors.body){ %>
            <span class="invalid-feedback"><%= errors.body.message %></span>
          <% } %>
        </div>

        <% if(errors.unhandled){ %>
          <div class="invalid-feedback d-block">
            <%= errors.unhandled %>
          </div>
        <% } %>

        <div>
          <a class="btn btn-primary" href="/posts">Back</a>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>

      </form>

    </div>
  </body>
</html>

위의 edit.ejs와 같다.

<실행결과>

post 작성시 Title과 Body를 작성하지 않고 Submit하면 이렇게 error message가 뜬다.

출처 및 참조 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0/%EA%B2%8C%EC%8B%9C%ED%8C%90-Post-Error-%EC%B2%98%EB%A6%AC

Node JS 첫걸음/게시판 만들기: 게시판 - Post Error 처리 - A MEAN Blog

www.a-mean-blog.com

게시판 만들기 / login 기능 - passport package

수잉 — Tue, 7 Dec 2021 14:34:04 +0900

passport package를 사용해 login 기능을 만든다.

· passport : node.js에서 user authentication(사용자 인증, login)을 만들기 위해 사용하는 package

단독으로 사용 X , passport strategy package와 함꼐 사용해야 함

· passport strategy : 구체적인 인증 방법을 구현하는 package

-> 인증 방법별로 수십가지(Facebook strategy, Twitter strategy, Naver strategy 등)가 존재하기 때문에

package가 나눠지게 되었다.

실제 한 사이트에서 사용하는 strategy는 이 중 몇 개밖에 안된다.

즉, 사이트에 필요한 인증밥법만 설치하기 위해 package를 분리한 것이다.

[로그인 기본 원리]

server와 client 간의 정보교환 : 단발성(어떤 일이 단 한 번 만으로 그치는성질)

사용자의 browser(client)d에서 주소 입력 or link가 click 되면 server로 요청(request) 전달

-> server는 요청에 맞는 결과를 응답(response)

=> server-client간의 통신은 연결을 유지 X

client를 구별하기 위해서는 각각의 request에 고유한 식별코드가 필요함

이 때, 식별코드는 사이트에 처음 접속한 순간 생성되어 client의 브라우저에 저장되고, server에 요청할 때마다 server로 전달됨 / server에서는 식별코드가 session에 저장되어 어느 client로부터 요청이 오는지 구별할 수 있게 됨

로그인 성공하면 server의 session에 기록되고, 다음번 request부터는 로그인한 상태로 인식됨

로그인 == DB에 이미 등록된 user을 찾는 것

- serialize(직렬화) : 로그인 시, DB로부터 user을 찾아 session에 user 정보의 일부(전부)를 등록하는 것

- deserialize(역직렬화) : session에 등록된 user 정보로부터 해당 user를 oject로 만드는 것 -> server에 요청 올 때마다 거치는 과정

https://www.geeksforgeeks.org/serialization-in-java/

1. 필요한 package를 설치한다.

2. 코드 수정, 추가

//index.js

const express=require('express')//모듈 가져오기
const mongoose=require('mongoose')
const methodOverride = require('method-override')
const flash=require("connect-flash")
const session=require("express-session")
const passport=require("./config/passport")
const app = express()//어플리케이션 생성

// DB setting
mongoose.connect(process.env.MONGO_DB);
const db = mongoose.connection; 

db.once('open', function(){
  console.log('DB connected');
})
db.on('error', function(err){
  console.log('DB ERROR : ', err);
});

//other setting
app.set('view engine','ejs')//템플릿 엔진
app.use(express.json());
app.use(express.static('public'));
app.use(express.urlencoded({extended:true}));
app.use(methodOverride('_method'));
app.use(flash());
app.use(session({secret:'MySecret', resave:true, saveUninitialized:true}));
app.use(passport.initialize())
app.use(passport.session())

//custom middlewares
app.use(function(req,res,next){
  res.locals.isAuthenticated = req.isAuthenticated();
  res.locals.currentUser = req.user;
  next();
})

//routes
app.use('/', require('./routes/home'));
app.use('/posts', require('./routes/posts'))
app.use('/contacts', require('./routes/contacts'));
app.use('/home', require('./routes/home'))
app.use('/users', require('./routes/users'))

//port setting
const server=app.listen(3000, ()=>{
  console.log('Start Server : localhost:3000')
})

const passport=require("./config/passport")

: passport 말고 config/passport module을 변수 passport에 담았다.

passport와 passport-local package는 index.js에 require되지 않고, config의 passport.js에서 require된다.

app.use(passport.initialize())

: passport를 초기화시키는 함수

app.use(passport.session())

: passport와 session을 연결해주는 함수

- session을 이용하기 위해 앞서 user error처리를 하기위해 작성한 아래 코드가 반드시 필요함

const session=require("express-session")

app.use(session({secret:'MySecret', resave:true, saveUninitialized:true}));

//custom middlewares

app.use(function(req,res,next){

res.locals.isAuthenticated = req.isAuthenticated();

res.locals.currentUser = req.user;

next();

})

: app.use에 함수를 넣은 것 = middleware

app.use에 있는 함수는 request가 올 때마다 route에 상관없이 무조건 해당 함수가 실행된다.

위치가 중요하다 ( ∵ 위에 있는 것부터 순차적으로 실행됨)

route에 들어가는 함수와 동일하게 3개의 parameter( req, res, next )를 가진다.

함수 안에 반드시 next()를 넣어야 다음으로 넘어갈 수 있다.

- req.isAuthenticated() - passport에서 제공하는 함수 (현재 로그인이 되어있으면 true, 아니면 false를 return)

- req.user - passport에서 추가하는 항목. 로그인 되면 session으로부터 user를 deserialize하여 생성된다.

- res.locals - 위의 두가지를 담고 있다. res.lcals에 담긴 변수는 ejs에서 바로 사용가능

res.locals.isAuthenticated : ejs에서 user의 로그인 유무를 확인하는 데 사용됨

res.localse.currentUser : 로그인된 user의 정보를 불러오는데 사용됨

[error]

error

이러한 error가 발생하였는데, custom middlewares 코드의 위치 문제때문이였다.

routes 뒤에 custom middlewares를 위치시켰더니 위의 error가 발생하여,

custom middlewares를 routes 앞으로 옮겼더니 해결되었다.

미들웨어의 로드 순서가 중요하다.

routes에 있는 루트 경로에 대한 라우팅(app.use('/', require('./routes/home'));) 이후에 custom middlewares가 로드되면,

루트 경로의 라우트 핸들러가 요청-응답 주기를 종료하므로 요청은 절대 custom middlewares로 도달하지 못하게 되며

위와 같은 error가 발생한다.

따라서 앞으로도 index.js에 추가할 middleware는 routes 앞에 위치시켜야 한다.

(route에 상관없이 무조건 해당 함수가 실행되어야 하므로)

참조 : https://expressjs.com/ko/guide/writing-middleware.html

Express 앱에서 사용하기 위한 미들웨어 작성

Express 앱에서 사용하기 위한 미들웨어 작성 개요 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한

expressjs.com

//config/passport.js

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const User = require('../models/User');

// serialize & deserialize User
passport.serializeUser(function(user, done) {
  done(null, user.id);
});
passport.deserializeUser(function(id, done) {
  User.findOne({_id:id}, function(err, user) {
    done(err, user);
  });
});

// local strategy
passport.use('local-login',
  new LocalStrategy({
      usernameField : 'username', 
      passwordField : 'password', 
      passReqToCallback : true
    },
    function(req, username, password, done) {
      User.findOne({username:username})
        .select({password:1})
        .exec(function(err, user) {
          if (err) return done(err);

          if (user && user.authenticate(password)){
            return done(null, user);
          }
          else {
            req.flash('username', username);
            req.flash('errors', {login:'The username or password is incorrect.'});
            return done(null, false);
          }
        });
    }
  )
);

module.exports = passport;

const LocalStrategy = require('passport-local').Strategy;

: strategy들은 대부분 require 다음에 .Strategy가 붙는다 (.Strategy없이 사용해도 되는 것들도 있음)

passport.serializeUser(function(user, done) {

done(null, user.id);

});

: login시 DB에서 발견한 user를 어떻게 session에 저장할지 정하는 부분

user정보 전체를 session에 저장할 수 있지만,

session에 저장되는 정보가 과다하면 사이트 성능이 하락할 수 있고, 전체 user정보가 session에 저장되어 있으므로 user object를 변경하면(회원정보수정) 해당 부분을 변경해줘야 하는 문제들이 있으므로

user의 id만 session에 저장한다.

passport.deserializeUser(function(id, done) {

User.findOne({_id:id}, function(err, user) {

done(err, user);

});

: request시에 session에서 어떻게 user object를 만들지를 정하는 부분

매번 request마다 user정보를 DB에서 새로 읽어오는데, user가 변경되면 바로 변경된 정보가 반영된다.

+) done함수의 첫번째 parameter는 항상 error를 담는다. error가 없다면 null을 담는다.

user 정보를 전부 session에 저장하여 DB접촉 감소 -> session에 저장되는 정보가 과다해 사이트 성능 하락할 수 있음

request마다 user를 DB에서 읽어와서 데이터의 일관성을 확보 -> 매 request마다 DB에서 user을 읽어와야 함

=> 상황에 맞게 선택

usernameField : 'username',

passwordField : 'password',

로그인 form의 username과 password항목의 이름을 넣는다.

User.findOne({username:username}) //DB에서 해당 user를 찾음

.select({password:1})

.exec(function(err, user) {

if (err) return done(err);

if (user && user.authenticate(password)){

return done(null, user);

}

else {

req.flash('username', username);

req.flash('errors', {login:'The username or password is incorrect.'});

return done(null, false);

}

});

로그인 시에 호출되는 함수

user model

user model에서 정의한 user.authenticate 함수를 사용해 입력받은 password와 DB에 저장된 해당 user의 password(user.password) hash를 비교해서 값이 일치하면 해당 user를 done에 담아 return한다.

그렇지 않으면 username flash, error flash를 생성하고 false를 done에 담아 return한다.

//routes/home.js

const express=require('express')
const router=express.Router()
const passport=require('../config/passport')

router.get('/', function(req, res){
  res.render('home/main');
});

router.get('/about', function(req, res){
  res.render('home/about');
});

router.get('/login',function(req,res){
  const username=req.flash('username')[0];
  const errors=req.flash('errors')[0]||{};
  res.render('home/login',{
    username:username,
    errors:errors
  })
})

router.post('/login',
  function(req,res,next){
    const errors = {};
    const isValid = true;

    if(!req.body.username){
      isValid = false;
      errors.username = 'Username is required!';
    }
    if(!req.body.password){
      isValid = false;
      errors.password = 'Password is required!';
    }

    if(isValid){
      next();
    }
    else {
      req.flash('errors',errors);
      res.redirect('/login');
    }
  },
  passport.authenticate('local-login', {
    successRedirect : '/posts',
    failureRedirect : '/login'
  }
));

// Logout
router.get('/logout', function(req, res) {
  req.logout();
  res.redirect('/');
});

module.exports=router;

const passport=require("./config/passport")

: passport 말고 config/passport module을 변수 passport에 담았다.

passport와 passport-local package는 home.js에 require되지 않고, config의 passport.js에서 require된다

(index.js와 동일)

router.get('/login',function(req,res){

const username=req.flash('username')[0];

const errors=req.flash('errors')[0]||{};

res.render('home/login',{

username:username,

errors:errors

})

router.post('/login',

function(req,res,next){

const errors = {};

const isValid = true;

if(!req.body.username){

isValid = false;

errors.username = 'Username is required!';

}

if(!req.body.password){

isValid = false;

errors.password = 'Password is required!';

}

if(isValid){

next();

}

else {

req.flash('errors',errors);

res.redirect('/login');

}

passport.authenticate('local-login', {

successRedirect : '/posts',

failureRedirect : '/login'

}

));

두 개의 callback 중

첫번째 callback은 보내진 form의 validation을 위한 것이다.

에러가 있으면( isValid = false; ) flash를 만들고 login view로 redirect한다.

두번째 callback은 passport local strategy를 호출해서 authentiction(로그인)을 진행한다.

config/passport.js

(참조 : http://www.passportjs.org/docs/login/)

Documentation: Log In

Log In Passport exposes a login() function on req (also aliased as logIn()) that can be used to establish a login session. req.login(user, function(err) { if (err) { return next(err); } return res.redirect('/users/' + req.user.username); }); When the login

www.passportjs.org

// Logout

router.get('/logout', function(req, res) {

req.logout();

res.redirect('/');

});

logout을 해주는 route

passport에서 제공된 req.logout함수를 사용하여 로그아웃하고 "/"로 redirect한다.

(참조 : http://www.passportjs.org/docs/logout/)

Documentation: Log Out

Log Out Passport exposes a logout() function on req (also aliased as logOut()) that can be called from any route handler which needs to terminate a login session. Invoking logout() will remove the req.user property and clear the login session (if any). app

www.passportjs.org

-login view-

<!-- views/home/login.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container">

      <h3 class="mb-3">Login</h3>

      <form class="user-form" action="/login" method="post">

        <div class="form-group row">
          <label for="username" class="col-sm-3 col-form-label">Username</label>
          <div class="col-sm-9">
            <input type="text" id="username" name="username" value="<%= username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>">
            <% if(errors.username){ %>
              <span class="invalid-feedback"><%= errors.username %></span>
            <% } %>
          </div>
        </div>

        <div class="form-group row">
          <label for="password" class="col-sm-3 col-form-label">Password</label>
          <div class="col-sm-9">
            <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>">
            <% if(errors.password){ %>
              <span class="invalid-feedback"><%= errors.password %></span>
            <% } %>
          </div>
        </div>

        <% if(errors.login){ %>
          <div class="invalid-feedback d-block"><%= errors.login %></div>
        <% } %>

        <div class="mt-3">
          <input class="btn btn-primary" type="submit" value="Submit">
        </div>

      </form>

    </div>
  </body>
</html>

-nav.ejs-

<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container contact contact-new">
      <h2>New</h2>
      <form class="cotact-form" action="/contacts" method="post">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" value="" class="form-control">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" id="email" name="email" value="" class="form-control">
        </div>
        <div class="form-group">
          <label for="phone">Phone</label>
          <input type="text" id="phone" name="phone" value="" class="form-control">
        </div>
        <div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </body>
</html>

변경 전 navbar-nav ml-auto

변경 전

변경 후 변경 전 navbar-nav ml-auto

변경 후 ( isAuthenticated ==false )

변경 후 ( isAuthenticated == true )

※ 로그인이 일어날 때 코드 진행순서

1. Login 버튼 클릭 -> routes/home.js의 router.post('/login', ~)가 실행

1) login route 실행 (첫번째 callback)

2) passport local strategy (config/passport.js)를 호출해서 로그인 진행 (두번째 callback)

2. 로그인이 성공하면 config/passport.js의 serialize 코드 실행

3. routes/home.js의 passport.authenticate의 succssRedirect route로 redirect

4. 로그인 된 이후 모든 request가 config/passport.js의 deserialize코드를 거치게 됨

출처및참조 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0/%EA%B2%8C%EC%8B%9C%ED%8C%90-Login-%EA%B8%B0%EB%8A%A5-%EC%B6%94%EA%B0%80

Node JS 첫걸음/게시판 만들기: 게시판 - Login 기능 추가 - A MEAN Blog

www.a-mean-blog.com

게시판 만들기 / User 생성, 수정 시 error 처리 (2)

수잉 — Wed, 1 Dec 2021 16:13:53 +0900

· edit.ejs 수정

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">

      <h3 class="mb-3">Edit User</h3>

      <form action="/users/<%= username %>?_method=put" method="post"> 

        <div class="form-group row">
          <label for="currentPassword" class="col-sm-3 col-form-label">Current Password*</label>
          <div class="col-sm-9 col-sm-offset-3">
            <input type="password" id="currentPassword" name="currentPassword" value="" class="form-control <%= (errors.currentPassword)?'is-invalid':'' %>">
            <% if(errors.currentPassword){ %> 
              <span class="invalid-feedback"><%= errors.currentPassword.message %></span>
            <% } %>
          </div>
        </div>

        <hr></hr>

        <div class="form-group row">
          <label for="username" class="col-sm-3 col-form-label">Username*</label>
          <div class="col-sm-9">
            <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> 
            <% if(errors.username){ %> 
              <span class="invalid-feedback"><%= errors.username.message %></span>
            <% } %>
          </div>
        </div>

        <div class="form-group row">
          <label for="name" class="col-sm-3 col-form-label">Name*</label>
          <div class="col-sm-9">
            <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> 
            <% if(errors.name){ %> 
              <span class="invalid-feedback"><%= errors.name.message %></span>
            <% } %>
          </div>
        </div>

        <div class="form-group row">
          <label for="email" class="col-sm-3 col-form-label">Email</label>
          <div class="col-sm-9">
            <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>">
            <% if(errors.email){ %>
              <span class="invalid-feedback"><%= errors.email.message %></span>
            <% } %>
          </div>
        </div>

        <div class="form-group row">
          <label for="newPassword" class="col-sm-3 col-form-label">New Password</label>
          <div class="col-sm-9 col-sm-offset-3">
            <input type="password" id="newPassword" name="newPassword" value="" class="form-control <%= (errors.newPassword)?'is-invalid':'' %>"> 
            <% if(errors.newPassword){ %> 
              <span class="invalid-feedback"><%= errors.newPassword.message %></span>
            <% } %>
          </div>
        </div>

        <div class="form-group row">
          <label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation</label>
          <div class="col-sm-9 col-sm-offset-3">
            <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> 
            <% if(errors.passwordConfirmation){ %> 
              <span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
            <% } %>
          </div>
        </div>

        <p>
          <small>*Required</small>
        </p>

        <% if(errors.unhandled){ %>
          <div class="alert alert-danger">
            <%= errors.unhandled %>
          </div>
        <% } %>

        <div class="buttons">
          <a class="btn btn-primary" href="/users/<%= user.username %>">Back</a>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>

      </form>

    </div>
  </body>
</html>

<form action="/users/<%= username %>?_method=put" method="post">

user.username 대신 router에서 받은 username 사용

class="form-control <%= (errors.항목이름)?'is-invalid':' ' %>"

각 항목의 form-group class가 있는 div에 위 코드가 추가되었다.

에러가 있으면 bootstrap의 invalid-feedback class를 사용한다. 서버 측에서 유효성 검사를 사용한 것이다.

( 참조하기 좋은 글 : https://getbootstrap.kr/docs/5.0/forms/validation/ )

<% if(errors.username){ %>

input 밑에 위 코드를 추가하여 에러메세지를 보여주게 하였다.

· new.ejs 수정

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">

      <h3 class="contentBoxTop mb-3">New User</h3>

      <form action="/users" method="post">

        <div class="form-group row">
          <label for="username" class="col-sm-3 col-form-label">Username*</label>
          <div class="col-sm-9">
            <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>">
            <% if(errors.username){ %> 
              <span class="invalid-feedback"><%= errors.username.message %></span>
            <% } %>
          </div>
        </div>
        <div class="form-group row">
          <label for="name" class="col-sm-3 col-form-label">Name*</label>
          <div class="col-sm-9">
            <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>">
            <% if(errors.name){ %> 
              <span class="invalid-feedback"><%= errors.name.message %></span>
            <% } %>
          </div>
        </div>
        <div class="form-group row">
          <label for="email" class="col-sm-3 col-form-label">Email</label>
          <div class="col-sm-9">
            <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> 
            <% if(errors.email){ %>
              <span class="invalid-feedback"><%= errors.email.message %></span>
            <% } %>
          </div>
        </div>
        <div class="form-group row">
          <label for="password" class="col-sm-3 col-form-label">Password*</label>
          <div class="col-sm-9">
            <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>"> 
            <% if(errors.password){ %> 
              <span class="invalid-feedback"><%= errors.password.message %></span>
            <% } %>
          </div>
        </div>
        <div class="form-group row">
          <label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation*</label>
          <div class="col-sm-9 col-sm-offset-3">
            <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>">
            <% if(errors.passwordConfirmation){ %>
              <span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
            <% } %>
          </div>
        </div>
        <p>
          <small>*Required</small>
        </p>

        <% if(errors.unhandled){ %> 
          <div class="alert alert-danger">
            <%= errors.unhandled %>
          </div>
        <% } %>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>

    </div>
  </body>
</html>

--edit.ejs와 같다--

<실행결과>

create 과정에서의 error ( new 페이지로 route간 이동이 발생함)

update 과정에서의 error error ( edit 페이지로 route간 이동이 발생함)

user 생성, 수정에서 error가 일어나는 경우 사이트에서 error들을 표시해준다.

route간의 이동이 일어나는데 이 때 route간의 정보 전달을 위해 flash가 사용된 것이다.

출처및참조 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0/%EA%B2%8C%EC%8B%9C%ED%8C%90-User-Error-%EC%B2%98%EB%A6%AC

Node JS 첫걸음/게시판 만들기: 게시판 - User Error 처리 - A MEAN Blog

www.a-mean-blog.com

게시판 만들기 / User 생성, 수정 시 error 처리 (1)

수잉 — Wed, 1 Dec 2021 15:33:28 +0900

· flash : 변수처럼 이름과 값(문자열, 숫자, 배열, 객체 등 어떠한 형태의 값이라도 사용 가능)을 저장할 수 있는데,

한 번 생성되면 사용될 때까지 서버 메모리상에 저장이 되어 있다가 한 번 사용되면 사라지는 형태의 data

-> connect-flash package를 이용하여 flash

· regex(Regular Expression, 정규 표현식) : 특정규칙을 가진 문자열의 집할을 표현하는 데 사용하는 형식 언어

(출처 :https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D)

문자열이 특정한 형식을 가지고 있는지 아닌지를 판단하기 위해 사용함

->User의 username, password, name, email 항목들이 특정한 형식의 값만 저장할 수 있도록 함

· package 설치

express-session package

connect-falsh package

express-session은 connect-flash를 실행하기 위해 필요한 package이다.

· User.js 수정

- User schema

수정 전

수정 후

trim은 문자열 앞뒤에 빈칸이 있는 경우 제거해주는 옵션

match에 regex가 들어가서 값이 regex에 부합하지 않으면 에러메시지를 낸다.

◆ 정규표현식 : 문자열에 특정한 규칙에 맞는 문자열이 있는지 알아보는 표현식

1. 정규식 리터럴("/"로 감싸는 패턴) 사용

/^.{4,12}$/
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

스크립트가 불러와질 때 컴파일됨

-> 정규식이 상수일 때 사용

2. RegExp객체의 생성자 함수 호출

RegExp("^.{4,12}$")
RegExp("^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$")

정규식이 실행되는 시점에 컴파일됨

-> 정규식의 패턴이 변경될 수 있는 경우 or 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에 사용

◆ 정규표현식에서의 특수문자

^ : 문자열의 시작 위치에 대응(줄 바꿈 문자 바로 다음 부분과도 대응)

$ : 문자열의 끝 위치에 대응(줄 바꿈 문자 바로 앞 부분과도 대응)

. : 어떠한 문자열이라도 상관없음 의미

{n} : 앞 표현식이 n번 나타나는 부분에 대응 (n은 반드시 양의 정수)

ex) /a{2}/ ->caandy의 a에 대응O , candy의 a에 대응X

\w : 영숫자 문자에 대응

[A-Za-z0-9_]와 동일

[xyz] : 문자셋(Character set)

괄호 안의 어떤 문자(escape sequence까지 포함)와도 대응

하이픈(-)으로 문자의 범위 지정 가능

ex) [a-d] ->[abcd]와 똑같이 작동

- 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 ,

developer.mozilla.org

regex(/^.{4,12}$/) : 문자열의 시작 위치에 길이 4이상 12이하인 문자열이 있고, 바로 다음이 문자열의 끝이여야 함

regex(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/) : 문자열의 시작위치에 영문자, 숫자, 특수문자( . , _ , % , +, - ) 중에서 최소 1자 이상의 문자열+"@"+영문자, 숫자, 특수문자( . , - ) 중에서 최소 1자 이상의 문자열 +"."+ 영문자 최소 2자 이상의 문자열이 끝이여야 함

- 참조 : https://jamesdreaming.tistory.com/196

- password validation

수정 전

▷수정 후의 코드

// password validation
const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;
const passwordRegexErrorMessage = 'Should be minimum 8 characters of alphabet and number combination!';
userSchema.path('password').validate(function(v) {
  var user = this;

  // create user
  if(user.isNew){
    if(!user.passwordConfirmation){
      user.invalidate('passwordConfirmation', 'Password Confirmation is required.');
    }

    if(!passwordRegex.test(user.password)){
      user.invalidate('password', passwordRegexErrorMessage);
    }
    else if(user.password !== user.passwordConfirmation) {
      user.invalidate('passwordConfirmation', 'Password Confirmation does not matched!');
    }
  }

  // update user
  if(!user.isNew){
    if(!user.currentPassword){
      user.invalidate('currentPassword', 'Current Password is required!');
    }
    else if(!bcrypt.compareSync(user.currentPassword, user.originalPassword)){
      user.invalidate('currentPassword', 'Current Password is invalid!');
    }

    if(user.newPassword && !passwordRegex.test(user.newPassword)){
      user.invalidate("newPassword", passwordRegexErrorMessage);
    }
    else if(user.newPassword !== user.passwordConfirmation) {
      user.invalidate('passwordConfirmation', 'Password Confirmation does not matched!');
    }
  }
});

const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;

8-16자리의 문자열 중에 숫자랑 영문자가 반드시 하나 이상 존재해야 함

const passwordRegexErrorMessage = 'Should be minimum 8 characters of alphabet and number combination!';

에러메세지->변수로 선언

앞서 정규표현식을 변수 passwordRegex로 선언하였다.

정규표현식.test(문자열)함수 : 문자열에 정규표현식을 통과하는 부분이 있으면 -> true,

아니면 false를 반환

->false가 반환되면 model.invalidate 함수가 호출된다.

· index.js 수정

index.js

새로 설치한 package로부터 flash, session을 선언하였다.

req.flash(문자열, 저장할 값)형태로 저장할 값(숫자, 문자열, 오브젝트 등 가능)을 해당 문자열에 저장한다.

이때 배열로 저장되기 때문에 같은 문자열을 중복해서 사용하면 순서대로 배열에 저장된다.

req.flash(문자열)인 경우 - 해당 문자열에 저장된 값들을 배열로 불러온다.

<- 저장된 값이 없으면 빈 배열([ ])을 return

sesssion은 서버에서 접속자를 구분시키는 역할을 한다.

서로 다른 사용자를 구분하여 서버에서 필요한 값들을 따로 관리하게 된다.

- 옵션부분 : {secret:'MySecret', resave:true, saveUninitialized:true}

-> secret : session을 hash화하는 데 사용되는 값(일종의 비밀번호)

아무값이나 넣으면 된다.

resave : 재저장을 계속 할 것인지에 대한 옵션

매 request마다 세션에 변동이 있든 없든 무조건 다시 저장하는 것

default : true

saveUninitialized : 세션이 세션store에 저장되기 전 uninitialized한 상태(request가 들어올 때, 해당 request에서 새로 생성된 session에 아무 작업이 이루어지지 않은 상황)의 session을 강제 저장

아무 내용 없는 session이 계속 저장될 수 있음

default : true-> client의 서버 방문 횟수에 따라 등급을 구분 짓는 기능 구현 가능

(참조 : https://dalkomit.tistory.com/72 , https://fierycoding.tistory.com/36 )

· user.js 수정

// routes/users.js

const express = require('express');
const router = express.Router();
const User = require('../models/User');

// Index
router.get('/', function(req, res){
  User.find({})
    .sort({username:1})
    .exec(function(err, users){
      if(err) return res.json(err);
      res.render('users/index', {users:users});
    });
});

// New
router.get('/new', function(req, res){
  const user = req.flash('user')[0] || {};
  const errors = req.flash('errors')[0] || {};
  res.render('users/new', { user:user, errors:errors });
});

// create
router.post('/', function(req, res){
  User.create(req.body, function(err, user){
    if(err){
      req.flash('user', req.body);
      req.flash('errors', parseError(err));
      return res.redirect('/users/new');
    }
    res.redirect('/users');
  });
});


// show
router.get('/:username', function(req, res){
  User.findOne({username:req.params.username}, function(err, user){
    if(err) return res.json(err);
    res.render('users/show', {user:user});
  });
});

// edit
router.get('/:username/edit', function(req, res){
  const user = req.flash('user')[0];
  const errors = req.flash('errors')[0] || {};
  if(!user){
    User.findOne({username:req.params.username}, function(err, user){
      if(err) return res.json(err);
      res.render('users/edit', { username:req.params.username, user:user, errors:errors });
    });
  }
  else {
    res.render('users/edit', { username:req.params.username, user:user, errors:errors });
  }
});

// update
router.put('/:username', function(req, res, next){
  User.findOne({username:req.params.username})
    .select('password')
    .exec(function(err, user){
      if(err) return res.json(err);

      // update user object
      user.originalPassword = user.password;
      user.password = req.body.newPassword? req.body.newPassword : user.password;
      for(const p in req.body){
        user[p] = req.body[p];
      }

      // save updated user
      user.save(function(err, user){
        if(err){
          req.flash('user', req.body);
          req.flash('errors', parseError(err));
          return res.redirect('/users/'+req.params.username+'/edit');
        }
        res.redirect('/users/'+user.username);
      });
  });
});


// destroy
router.delete('/:username', function(req, res){
  User.deleteOne({username:req.params.username}, function(err){
    if(err) return res.json(err);
    res.redirect('/users');
  });
});

module.exports = router;

// functions
function parseError(errors){
  const parsed = {};
  if(errors.name == 'ValidationError'){
    for(const name in errors.errors){
      const validationError = errors.errors[name];
      parsed[name] = { message:validationError.message };
    }
  }
  else if(errors.code == '11000' && errors.errmsg.indexOf('username') > 0) {
    parsed.username = { message:'This username already exists!' };
  }
  else {
    parsed.unhandled = JSON.stringify(errors);
  }
  return parsed;
}

new route

user 생성 시에 에러가 있는 경우 new페이지에 에러와 기존에 입력했던 값을 보여준다.

( 이때, 이 값들은 create route에서 생성된 flash로부터 받아옴 )

flash는 배열이 오는데 이 프로그램에서는 하나 이상의 값이 저장되는 경우가 없고, 있더라도 오류이므로 무조건 [0]의 값을 읽어오게 하였다.

값이 없다면 (처음 new 페이지에 들어온 경우) | | { }을 사용하여 빈 오브젝트를 넣어 user/new 페이지를 생성한다.

create route

user 생성시 오류가 있으면 user, error flash를 만들고 new페이지로 redirect 한다.

user 생성시 발생하는 오류는

1. User model의 userSchema에 설정해둔 validation을 통과하지 못한 경우

2. mongoDB에서 오류를 내는 경우

-> 두 경우의 error객체의 형식은 상이하므로 parseError라는 함수를 따로 만들어서 err을 분석하고 일정한 형식으로 만든다

edit route

user flash가 있으면 -> 1. update에서 오류가 생겨 edit으로 다시 돌아온 경우

(그래서 기존에 입력했던 값으로 form에 값들을 생성해야 함 -> | | { } 사용 X )

없으면 -> 2. 처음 들어온 경우로 가정

req.flash(문자열)인 경우 - 해당 문자열에 저장된 값들을 배열로 불러온다.

<- 저장된 값이 없으면 빈 배열([ ])을 return

2. 처음 접속하는 경우 (!user : user 변수에 값이 없음) -> DB에서 값을 찾아 form에 기본 값을 생성(=form을 user의 DB값들로 채움)

1. update에서 오류가 생겨 edit 페이지로 돌아온 경우 -> user 변수의 값을 flash에서 받아옴

user을 사용해 값을 생성함(=update에서 입력했던 값으로 form을 채움)

username : req.params.username

render시 username을 따로 req.params.username로 보내준다.

user.username이 (1) 해당 user의 username일수도, (2) user flash에서 받는 username일수도 있기 때문에

username은 주소에서 찾은 username을 따로 보내준다.

function

mongoose에서 내는 에러와 mongoDB에서 내는 에러의 형태가 다르기 때문에

에러의 형태를 항목이름: { message: "에러메세지" }로 통일시켜주는 함수이다.

if - mongoose의 model validation error

else if - mongoDB에서 username이 중복되는 error

(error code 11000 : key값이 중복될 때 발생하는 error)

else - 그 외의 error을 처리함

출처및참조 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0/%EA%B2%8C%EC%8B%9C%ED%8C%90-User-Error-%EC%B2%98%EB%A6%AC

Node JS 첫걸음/게시판 만들기: 게시판 - User Error 처리 - A MEAN Blog