Node.js

인턴으로 4개월정도 일하게 되는 곳에서 NodeJS 기반 웹 개발 능력이 필요하다 되어있었는데, 직접 DB 다루고 이런 작업을 해본지가.. 대략 3년 전이라 상기시킨다는 느낌으로 코딩애플 선생님 강의 하나 수강하며 정리를 해보기로 마음먹었다.우선 node와 vscode

매번 터미널에 서버 껐다 켰다 하는 일이 비효율적이기 때문에..nodemon을 설치하게 되었다.터미널창에 npm install -g nodemon을 입력하여 설치이후에는 node 실행할파일명이 아니라 nodemon 실행할파일명으로 서버를 실행시켜준다.이후로는 편안하게.

css파일이 있는 폴더를 server.js에 등록해주자.우선 현재 css파일이 있는 폴더는이런식으로 public폴더 안에 넣어뒀다.그렇다면 server.js로 가서 상단에app.use(express.static(\_\_dirname + '/폴더명'));이렇게 등록시켜줄

bootstrap 홈페이지로 가서 공식문서를 들어가서 css파일과 js파일 코드 가져오기위는 css파일로이렇게 넣어주고,위는 js파일이고이렇게 body태그 끝나는 쪽에 넣어주었다.이제 싹 가져와서 사용해주면 되는데,검색하면 편하게 찾을 수 있다ㅎㅎ이렇게 검색하여 나온

몽고DB를 사용하기 위해서는 직접 컴퓨터에 설치하는 방법과 클라우드에서 호스팅을 받는 방법이 있는데, 필자는 호스팅을 받아 사용하겠다.MongoDB 홈페이지에 들어가 회원가입을 해준다.Free tier / 서울 region 선택한 뒤 DB 접속용 ID생성, DB접속용

서버랑 DB 연결하는 방법에 대한 포스팅을 작성해볼 것이다.우선 앞전에 작성했던 프로젝트를 다시 켜고,server.js를 열어준다."mongodb 라이브러리"를 설치하기 위해 터미널 열고 npm install mongodb@5을 입력하여 라이브러리 설치 후,앞전에 설치

/list페이지로 이동되었을 때, 화면에 DB에서 뽑은 글들을 보여주도록 만들어보자.mongoDB 사이트에 들어가서 이전에 넣어줬던 테스트 데이터들을 삭제하고 INSERT DOCUMENT로 직접 데이터를 넣어주자.2개정도 넣어주었다.server.js로 가서 해당하는 c

HTML 파일에 서버 데이터를 넣기 위해 "template engine"인 ejs를 사용하면 된다.템플릿 엔진을 사용하기 위해 터미널에 npm install ejs입력이후 셋팅을 위해 서버파일 상단에작성해준다.이제 html 파일에 데이터를 넣기 위해서는 .ejs파일을

우선 ejs 파일 내에서는 js 문법이 사용 가능하다!!다만, js 문법을 쓰기 위해서는 <% js코드 %> 이런 식으로 사용해줘야한다.서버에 존재하는 데이터의 수만큼 화면에 나타내주기 위해for 반복문과 length를 사용하였다.잘 나온다!views폴더에 nav

유저가 서버에 요청하기 위해서는 method GET, POST, PUT, UPDATE, DELETEURL /URL\~\~~이렇게 두 가지가 꼭 있어야한다.GET: 서버에게 데이터를 달라고 하는 경우POST: 서버에게 데이터를 보내고 싶은 경우UPDATE, PUT: 서버

우선 글 작성을 위하여글 작성 페이지에 글을 써서 서버로 전송서버에서 글을 검사이상없는 경우 DB에 저장위 세 가지 기능이 필요하다.우선 views 폴더 아래에 write.ejs를 만들어 아래와같이 작성해주고,form태그 내부에 데이터 전달을 위해 input태그와 bu

이전 포스팅에는 단순히 collection과 insertOne을 사용하여 DB에 넘겨주는 것 까지만 구현을 했었는데,공부를 하며 추가된 코드가 있어 아래에 작성해보았다.우선 추가된 부분에만 밑줄을 추가하였다.async&await은 앞서 포스팅 했던 적이 있어 더 설명하

detail페이지에서 /detail/글번호로 들어가면 해당 글 번호를 가진 글의 상세페이지를 보여줄 수 있도록 만들어보는 것이 목표!유저가 /detail/어쩌구로 접속하면{\_id:어쩌구} 글을 DB에서 찾아내어ejs파일에 데이터를 넣어 보여준다.글 번호에 따라 레이아

앞전에 나는 따로 id변수를 더 만들었지만,그냥 한 번에 보낼 수도 있다.그냥 바로 요청.params.id를 넣어도 동작은 동일하게 한다!그럼 이제 게시물 제목을 누르면 해당하는 글 id로 이동하는 "링크"를 만들어주자!list.ejs파일로 돌아가 글 제목부분에 a태그

수정 버튼 클릭하면 수정 페이지로 이동수정페이지에는 기존 글이 채워져있음전송 버튼 클릭하면 입력한 내용으로 DB에 글 수정우선 글 list가 나와있는 list.ejs파일에 글 수정을 할 수 있도록 수정 페이지로 이동할 수 있는 버튼으로 a태그를 하나 넣어준다.a태그에

RESTful API를 위해.. 수정 기능인 경우에는 PUT을 사용해주는게 좋은데, 이전에는 form태그에서 get과 post밖에 사용할 수 없는 상태여서 post 요청을 했던 상황이었다.이번에 공부를 더 하게 되며 PUT과 DELETE 요청을 하는 방법에 대해서 알아

기능 정리를 해보면 글 삭제 버튼을 누르면 해당 글 DB에서 삭제해주기글 삭제버튼 누르면 서버로 요청서버는 확인 후 해당 글 DB에서 삭제브라우저 주소창에 a 혹은 form태그를 사용하여 서버로 GET, POST 요청이 가능한데, 이와같은 경우는 매번 새로고침이 되기

앞의 포스팅에 이어서..우선 버튼 하나에만 삭제 버튼을 만들어보고, 추후에 하나씩 추가해나가보자.삭제 버튼을 만들어둔 list.ejs의 script태그에ajax사용을 위해 fetch함수로 method를 DELETE로 넣어주고, 서버에서 어떤 document를 삭제해줄지

AJAX 사용하면 서버가 보낸 데이터를 보내볼 수(출력) 있다.list.ejs파일에 script태그 내에 fetch함수에 .then()을 사용하는 것으로해당 코드를 추가해주자서버가 보내는 것이 문자인 경우: .text사용서버가 보내는 것이 array/object: .j

페이지 이동 버튼 만들고1번 버튼 누르면 1~5번 글을 보여줄 수 있도록(/list/1 페이지)2번 버튼 누르면 6~10번 글을 보여줄 수 있도록(/list/2 페이지)3번 버튼 누르면 11~15번 글을 보여줄 수 있도록(/list/3 페이지)server.js에서 앞에

session방식으로 회원가입 기능을 만들어볼 것.가입 기능로그인 기능로그인 완료시 세션 만들기로그인 완료시 유저에게 입장권 보내줌로그인여부 확인하고 싶으면 입장권 조회터미널 열어 npm install express-session passport passport-loc

만드는 조건이 마이페이지는 로그인이 되어있는 사람만 방문할 수 있으며,마이페이지 레이아웃에 현재 로그인된 유저의 id가 표시되어야 한다는 조건이었다!그럼 만들어보자..만들려면 우선 글로 작성해보고 코드로 옮기는 것이 좋다고 했던 것 같아 순서를 한 번 적어보겠다..my

우선 서버에 get요청 처리할 수 있는 코드 작성해주고새로 register.ejs파일을 views폴더에 생성이후 해야하는 일은 전송버튼 클릭시,DB에 ID/PW 저장해주면 되니까 코드.. 잊지않게 정리해두자..서버 파일에 post 요청을 받을 코드도 작성해주고회원가입을

findOne으로 작성한 username과 동일한 username이 db에 있는 경우에는 가입을 시키지 않고, 동일한 username이 없는 경우에는 insertOne을 사용해서 db에 저장해줄 수 있도록 만들어주었다.우선 회원가입 ejs페이지에 비밀번호 확인을 위한

: 개발자나 컴퓨터에 따라 달라져야 하는 변수환경변수는 별도 파일에 보관하는게 나중에 유지보수하기 쉽고 편리하다.앞전에 firebase DB를 사용해서 REACT 프로젝트 할 때도 썼었지만,좋은 건 여러 번 쓰며 익숙해지는 것도 중요한 것 같다.... 그 말은 dote

글 이미지를 업로드 할 수 있는 기능을 만들어보자.이미지 업로드를 위한 input태그 필요서버로 이미지 전송하면 그 이미지를 하드에 저장=>AWS S3에 이미지 저장해두자홈페이지에 들어가서 가입 및 카드등록을 해주자.여차저차 가입은 성공했다.가입에 시간 제일 많이 씀

우선 이번에는..write페이지에 이미지넣기 input태그 추가서버에서는 받은 이미지 S3에 저장이미지 URL을 DB에 글이랑 함께 보관에러 및 예외처리참고로 S3에 있던 이미지를 html로 보여주기 위해서는이미지 저장시에 발급받은 URL을 DB에 보관해두고,필요한 때

오늘 알아볼 것은..API 다른 파일로 분리시키기라우터 파일에서 DB 변수 사용하는 방법간단하게 서버파일에 get 요청을 받는 API 두 개만 생성하고 시작하자이후 API를 보관할 폴더 하나를 프로젝트 루트 경로에 생성한 뒤 API를 모아둘 파일 하나를 만들어준다.앞서

현재 MongoDB를 사용중이니 DB 접속시켜주는 것부터!AWS에 MongoDB 접속시켜줘야함.몽고DB 들어가서 좌측 메뉴에서 SECURITY에 Network Access 클릭접속 가능 IP를 0.0.0.0으로 바꿔 모든 IP에서 접속 가능하도록 바꿔줌(추후 더욱 안

게시물 검색 기능우선 검색 키워드 넣을 input태그랑 전송해줄 버튼 만들기1\. input과 버튼에서 서버로 검색 키워드 전송하면2\. 서버는 키워드 포함된 document 가져와서3\. ejs파일에 넣어 유저에게 보내주기list.ejs에서 input이랑 버튼 추가하

find함수를 사용하면 document가 많을 수록 느려지는데,binary search를 사용하면 이를 해결할 수 있다.여기서 사용되는 index란, 컬렉션에 있던 document를 복사해서 미리 정렬해둔 것으로, 정렬된 컬렉션 복사본으로 이해하면 될 것 같다.Mong

지난 번 작성했던 포스팅에 이어..부분검색이 필요한 경우에는 search index를 사용해보면 된다고 했으니 해보자!MongoDB 들어가서 search index 클릭"Create Search Index" 클릭"Visual Editor"클릭Index 이름을 작명해주고

글 발행시 작성자 정보도 document에 추가하여 작성자만 삭제할 수 있도록 만들어주자.우선 글 전송버튼을 눌렀을 때, 유저 정보를 받아오는 코드를 추가하자이러고 전송해본 뒤, DB를 확인해보면잘 들어가있다.이제 만들어둔 DELETE 요청 API 코드를 수정해주자.

댓글기능은댓글작성 UI에서 전송버튼 누르면 댓글 전송서버는 댓글 받아 DB에 저장상세 페이지 방문시 댓글 가져와서 보여주기댓글 ui를 detail.ejs에 만들어준다./comment로 post 요청시 DB에 저장응답.redirect('back);은 이전 페이지로 이동시

웹 서버 만들기는 이전 포스팅 참고..nodemon 설치하는 방법도 이전 포스팅 참고..React 설치하는 방법도 이ㅣ이전포스팅 참고..혹시 몰라서 써두는 React 프로젝트 만드는법nodejs 최신버전 설치cmd창 열어서 npx create-react-app 프로젝트

우선 실시간이 아닌 채팅 서비스부터 구현해보자.채팅기능1\. 글마다 채팅 버튼 만들어 채팅방을 누르면 채팅방 생성2\. 자신이 속해있는 채팅방 목록 페이지3\. 채팅방 누르면 채팅방 상세페이지4\. 채팅방 상세페이지에서 메세지 전송시 상대에게 전달, DB에 전달글 상세

양방향 통신을 위해 socket.io 라이브러리를 설치하고 공부..터미널을 열어 npm install socket.io@4입력하여 설치서버파일 상단에 셋팅 코드 추가app.listen이라고 되어있던 코드를 server.listen으로 변경해줌실시간 통신해줄 html파일

채팅방 상세페이지 방문하면 유저를 room에 넣어줌채팅방 상세페이지에서 전송버튼 누르면 같은 룸에만 전달(서버에 부탁)서버에서 부탁 들어주기유저는 서버메세지 받으면 html 넣기채팅방 상세페이지 방문시 유저를 room에 넣기룸이름은 채팅방의 document \_id를

웹소켓이 아니라 Server sent events로도 실시간으로 데이터 전송이 가능하다현재 글 list페이지는 새로 글을 작성한 뒤 새로고침을 해줘야 받아오는데,서버에서 새 게시물을 계속 보내주는 기능을 구현해보자원래는 서버에서 응답을 하면 연결이 끊기게 되는데,끊지

change stream 기능을 이용하면 DB 변동사항을 서버로 알려준다.MongoDB는 이런 기능으로 실시간 서비스를 제작할 때 편리하지만, 만약 다른 관계형 DB를 사용하는 경우에는 "binlog"나 "CDC"같은 것들을 찾아보자서버에 아래처럼 기본 코드 써놓고 시

Mongoose 라이브러리를 추가로 설치해서 사용하는 경우,collection에 저장될 document가 어떻게 생겼는지 정의를 해줘야함(schema)그리고 다음으로 위처럼 입출력을 해주면 되는데,굳이 mongoose가 아니더라도 if문을 사용해서도 데이터를 검사해줄

나중에 내가 참고해서 보려고 작성한 글..!현재 폴더나 파일들 상태App.jsindex.jsApp.js를 Router로 바꿔줬음.참고로 react-router-dom 사용npm i react-router-dom아래는 Router.jsnpm install react-bo

인턴으로 있는 기간동안 많은 것들을 경험할 수 있도록 도와주셔서 늘 감사한 마음으로.. 이번에는 git action을 사용해서 CI/CD 를 구축해볼 수 있는 시간을 갖게 되었다. 해당 velog 글을 참고하였다! 깃허브에 repo 하나 생성 후, 빈 폴더 하나를

나에게는 꽤나 어려웠던 자동배포를 위한 우분투 서버 <=> 로컬PC 연결..정말 별 것 아닌게 문제였는데,이걸 모르고 계속 삽질을 그렇게 했다니ㅜㅜ..3일간 2-3시간자며 겨우 이해했으니, 잊지 않도록 적어야겠다..!링크 게시글 많이 참고하며 진행위 글 보며 우분

SSH를 통해 원격 서버에 접속하고, 테스트 할 수 있는 좋은 코드를 cross-the-world/ssh-pipeline@master 해당 액션을 통해 올려둬서 사용해보았다.github action을 사용하면 secret을 사용해서 위처럼 코드를 작성할 수 있다.SSH

우선 routes.js를 확인이후 Router.js도 한 번 확인잘 되어있다면 id 파라미터를 받아 get 요청을 해주는 API를server.js에 작성해준다.list에 나오는 title을 클릭했을 때,react-router-dom의 Link를 사용해 아래처럼 처리이후

내 PC에 고정 IP를 링크 글 보고 넣어준 뒤, 다시 한 번 해당 고정 IP로 서버에 포트포워딩 해주고나서.. 연결 잘 되면 이어서 해야합니다..!!!!!!!! 서버 켜주고 외부 ip로도 들어올 수 있도록 설정해주고 내 로컬 pc에서 테스트

이전에 공인IP 받고 포트포워딩 해서 해결했었는데,포트포워딩을 해줄 수 없는 상황이라 고민하다 self-hosted runner를 사용해보게 되었다.프로젝트의 Setting -> Actions의 Runners 클릭 -> "New self-hosted runner" 클릭

우선 server.js파일에서 listen의 8080포트번호 뒤에 '0.0.0.0'을 추가해서 접근을 가능하게 만들어준다.공인IP를 사용해주기 위해 라우터 관리자 페이지에 들어가서 사용해줄 포트번호를 로컬pc cmd창에 ipconfig 입력해서 나온 IPv4 주소와 사

이전에 작성한 CI/CD 글들이 너무 난해하고 복잡하게 정리되어 있는 것 같아 기회가 생겨 notion에 정리본을 작성해보았다.4\. 자주 사용한 shell script 명령어 모음