coding AtoZ

서론

 개발에도 다양한 분야가 있다. (프론트, 백, 앱 등)

 어떤 분야든 사용자를 확보하기 위해선 배포(deploy)과정을 거쳐야 한다.

 개발의 종류에 따라 배포 방법도 역시 달라진다.

 이 포스팅은 그 배포의 방법에 대해서 계속해서 추가할 예정이다.

웹

 이번에 MBTI 웹 페이지를 제작하면서, 백은 필요없기에 프론트 부분만 작성했다.

 배포에는 github를 사용할 수도 있고 다양한 방법이 있지만, 이번엔 netlify를 사용했다.

 www.netlify.com/

 방법은 간단하다 먼저 netlify 홈페이지에 접속해서 회원가입을 진행하고, 로그인을 한다.

 로그인을 완료했다면, 1번 sites를 눌러서 sites 탭으로 이동한다.

 그 후, github등과 같은 저장소 사이트를 활용해서 배포할 수도 있지만, 없다고 가정하고

 2번 위치에 자신이 만든 모든 파일이 든 폴더를 드래그&드롭 한다.

 그럼 바로 배포가 완료돼서 화면이 전환된다. 빨간색으로 밑줄 친 부분이 본인의 사이트 주소이다.

 이제 저 주소를 공유하면 다른 사람들도 들어올 수 있다.

 그런데 사이트 이름이 이상하다. 사람들이 알기 쉽게 변경하기 위해선 site settings 버튼을 눌러

 위와 같은 탭으로 이동한다. 그 후, change site name을 통해 이름을 변경하면 된다.

 혹시 웹사이트를 추가, 보완한 사항이 있어 업데이트가 필요하다면,

 1번 Deploys 탭으로 이동해서 수정한 폴더를 마찬가지로 2번에 드래그&드롭을 통해 업데이트가 가능하다.

 그 외에도 다양한 기능이 있지만, 이 정도만 알아도 배포와 사용자 확보까지는 가능하다.

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

2021.01.21

대댓글 기능을 완성했다.

댓글과 대댓글의 구분에 있어 차별을 두기 위해서 대댓글은 들여쓰기 하는 느낌으로 사용자에게 보여지게 했다

구조상 대댓글과 댓글의 작성에 이용되는 라우터가 같기 때문에 

똑같이 출력 되는 현상이 초기에는 존재했다. 

물론 늦장 부린 것도 어느정도 있지만, 이 현상을 해결하느라 고군분투한 것도 작업이 늦어지는 이유에 포함된다.

결론적으로 Schema 변수명과 저장할 때 변수명이 다르게 적혀있어 오류가 발생했던 것이다..

정말 어처구니 없는 실수였는데, 다음부터는 조심하도록 하자

일단 여기까지 계획했던 게시판의 기능은 대부분 구현 완료했다. 이번엔 순전히 배포가 아닌 공부목적으로 다음에는 

배포가능한 서비스를 만들어 보려고 한다.

추가된 개발 상황

 - 대댓글 기능

추가할 기능

 - x

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

2021.01.14

댓글의 수정과 삭제를 완성하고, 대댓글 기능의 틀만 잡아뒀다.

수정과 삭제의 기능 부여는

 1. 글(Post)의 author.

 2. 댓글(Comment)의 author과 현재 로그인된 user.id 가 동일할 때

위 두 가지의 경우에 버튼을 활성화되게 했다. 

 + 추가적으로 관리자(admin) 계정의 경우에도 삭제 기능을 추가하면 좋을 것같다.

댓글이 삭제가 됐다고 가정했을 때 DB에서 완전히 제거하면, 그 아래에 달린 reply들은 Parent를 잃은 고아(orphanage)가 되어버리기 때문에 Comment 모델의 isDeleted 부분을 만들어 이 부분을 true로 함으로써 페이지 상에 표시되지 않게 한다. 

대댓글(reply)의 경우는 로그인된 상태이면 활성화되게 했다.

현재 reply를 저장하게 되면 해당 댓글의 아래가 아닌 맨 아래로 내려가는 현상이 있다.

이 부분은 추후 보완이 필요한 부분이다.

추가된 개발 상황

 - 댓글의 수정, 삭제 기능

 - 수정, 삭제 기능의 제약

추가할 기능

 - 대댓글 기능

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

2021.01.13

댓글의 생성까지는 쉬웠으나 수정과 삭제가 매우 까다로웠다.

html의 form태그의 method 속성은 post와 get방식만 지원한다는 것을 알게 되었고,

put과 delete의 처리를 위해선 method override라는 패키지의 설치를 요했다.

하지만 내 케이스는 왠지 모르게 put의 처리가 동작하지 않았고, 임시방편으로 post 형식으로

update를 수행하게 만들었다.

아직은 코드에 수정에 있어 id의 제약을 걸지 않은 상태이다.

추가된 개발 상황

 - 댓글의 수정(edit) 기능

추가할 기능

 - 댓글 수정 id 제약

 - 댓글의 삭제

 - 대댓글 기능

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

2021.01.07

로그인 오류가 언제부턴가 나기 시작했었다.

처음에는 대소문자만 구분을 못하는 건 줄 알았는데, 알고 보니 bcrypt의 compare 함수 부분에서

오류가 있었다. 정확히 말하자면 return 값에 오류가 있어 비밀번호를 제대로 입력하지 않아도 로그인이

되어버리는 현상이 있었다. 

compare 함수의 위치를 User.js(model) 에서 passport.js 로 옮기니 해결되었다.

자세한 이유는 확실히 알게 되면 포스팅할 예정이다.

( 이것 때문에 3시간이나 골머리를 앓았다...)

추가된 개발 상황

 - 로그인 오류 수정

추가할 기능

 - 댓글의 수정 및 삭제

 - 대댓글 기능

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

2021.01.06

게시판의 댓글 작성 기능까지 구현을 완료했다.

작성 외의 수정, 삭제, 대댓글 등은 추후 추가할 예정이다.

댓글은 Comment 라는 새로운 스키마의 생성과

User 와 Post 둘 다 관계를 설정해 줘야 해서 좀 까다로웠다.

추가된 개발 상황

 - 댓글 기능 추가

추가할 기능

 - 댓글의 수정 및 삭제

 - 대댓글

 - 비밀번호 오류가 발생 수정 예정

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

2021.01.05

처음부터 개발일지를 기록했어야 하지만 블로그를 하겠다는 생각을 실천으로 옮기지 못한 탓에

시작일이 정확하지 않다. 기억나는 날짜를 임의로 12월 즈음으로 설정했다. 

앞으로 개발 상황은 계속 업데이트 할 예정이다.

현재까지 개발 상황

 - 메인 페이지 구현

 - 회원가입, 로그인, 로그아웃, 마이페이지 구현

 - 로그인을 passport를 활용하여 로그인 유무에 따른 nav 바 및 기능제약 구현

 - 게시물 보기, 게시글 쓰기 (file[사진], post[본문]) 관계 설정 완료 

 - 게시물을 페이지 당 n개의 게시글로 끊어서 출력하기

추가할 기능

 - 댓글 및 대댓글 기능

 - 현재 비밀번호 대소문자 구분에 있어 오류가 있는 듯 하니 수정

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

너무 너무 부족합니다.. ㅜ.ㅜ 

그 점 양해 부탁드립니다..

github.com/holicAZ/Nodejs