Mo's Develog

게시물 번호를 보내려면 어떻게 합니까 JAX로 DELETE 요청시 가장 중요한 내용이 있습니다. 여러분이 원하는 게시물을 삭제하고 싶으면 AJAX요청을 할 때 삭제 원하는 게시물 번호를 보내십시오. (게시물 번호는 우리가 예전에 _id : 1 이런식으로 DB에 저장해놨으니까 그걸 보내십쇼) data : {} 부분에 삭제를 원하는 게시물 아이디를 적어 보내면 좋을 것 같습니다. 지금은 테스트해야하니 대충 _id : 1이라고 적어봅시다. 그럼 서버는 어떤 코드를 짜야 게시물이 삭제될까 deleteOne 함수를 쓰면 원하는 데이터를 삭제 가능합니다. deleteOne(삭제원하는 데이터이름, function(){} ) 이렇게 쓰시면 됩니다. 그리고 AJAX요청시 data : { _id : 1 } 이라고 적은 정..

서버를 띄워봤는데 이상한 에러메세지가 뜬다면 EJS 문법이 잘못된 것이니 잘 살펴보십시오. 이제 삭제버튼을 누르면 DELETE 요청을 하도록 코드를 짤 것입니다. 간지나는 AJAX를 써서 삭제요청을 해보도록 합시다. 요청은 4개 종류가 있다고 했습니다. GET POST PUT DELETE 하지만 HTML 폼에서 일반적으로 PUT DELETE 요청을 할 수는 없습니다. 이런거 안됩니다. 일반적인 HTML 폼 안에선 GET, POST 요청밖에 못날립니다. (HTML이라는 언어를 만들 때 잘못 만든 겁니다) 그래서 삭제요청을 할 때 쓸 수 있는 3가지 방법이 있습니다. 1. method-override 라이브러리의 도움을 받는다 2. AJAX로 DELETE 요청을 날린다 3. 그냥 POST요청을 날려서 DEL..

_id를 달아서 저장합시다. MongoDB에 데이터를 저장할 땐 _id라는 값을 꼭 넣으셔야합니다. 그래야 삭제도 쉽고 나중에 수정도 쉬우니까요. 아까 모르고 안넣으셨다고요? 괜찮습니다. 안넣으시면 MongoDB에서 알아서 ObjectId() 어쩌구 이런걸 만들어서 아이디를 강제로 부여해줍니다. 무작위의 숫자와 문자로 이루어져있는데 이게 싫으면 애초에 저장할 때 직접 _id를 강제로 달아주셔도 됩니다. 예전에 작성했던 post 요청 처리하는 서버코드를 다시 살펴봅시다. 위의 코드에 주황색으로 표시된 부분을 새로 추가했습니다. insertOne 함수 안에 _id : 1 이라는 항목을 요로케 써주시면... 번호달아서 저장하기 끝입니다. 그런데 1이라고 하드코딩을 해버렸네요. 글 쓸 때마다 항상 _id : 1..

/list로 방문하면 ejs 파일을 보내주자 그냥 HTML 파일만 보내주면 흔히 말하는 Static페이지가 됩니다. HTML에 실제 DB 데이터를 넣어서 보내줄 수가 없으니까요. 그래서 EJS, Pug같은 템플릿 엔진을 사용합니다. EJS는 서버 데이터를 HTML에 쉽게쉽게 박아넣을 수 있게 도와주는 일종의 HTML 렌더링 엔진입니다. 그럼 우리도 이걸 설치해서 DB 데이터를 HTML에 넣어보도록 합시다 설치는 터미널에서 npm install ejs 하시고 이걸 Server.js 상단에 적어주면 되겠습니다. EJS 파일 만들기 EJS 파일은 그냥 html과 똑같이 만들어 쓰시면 됩니다. 근데 중간중간 EJS 문법으로 데이터를 꽂아넣을 뿐입니다. 그래서 파일을 빨리 하나 만들어봅시다. 그 전에 주의할점 :..

자료를 저장하기 위해선 일단 MongoDB에 저장할 폴더와 파일을 만드세요 앞선 포스팅에서 접속 URL 길게 적어서 쓴건 계정에 접속하는 것이었고, 이제는 우리 계정 안에 있는 여러가지 database와 collection에 자료를 저장할 것입니다. 우린 database 이런게 없으니까 하나 만들어보도록 합시다. database/ collection 만들기 ▼ 1. MongoDB Atlas 메인 대시보드에서 Collections 라는 버튼을 누르도록 합시다. ▼ 2. 이번엔 Add my own data 버튼을 누르도록 합시다. (혹은 이미 뭐가 있다면 create database) 3. 여러분이 database 이름, collection 이름을 예쁘게 하나씩 정해준 다음 저장을 눌러줍니다. 저는 data..

10.5 프로퍼티 접근 프로퍼티에 접근하는 방법은 다음과 같이 두 가지다. 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법(dot notation) 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법(bracket notation) 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 JS에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다. 마침표 프로퍼티 접근 연산자 또는 대괄호 프로퍼티 접근 연산자의 좌측에는 객체로 평가되는 표현식을 기술한다. 마침표 프로퍼티 접근 연산자의 우측 또는 대괄호 프로퍼티 접근 연산자의 내부에는 프로퍼티 키를 지정한다. 대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반..

MongoDB Atlas 가입 후 호스팅받기 DB를 여러분 집 컴퓨터에 설치하기도 하지만 사이트를 실제 배포할 것이라면 클라우드 서비스를 이용하는 것이 매우 안전합니다. 백업도 알아서 해주고 갑자기 사람이 터질 때 용량 걱정도 없고 그리고 무엇보다 접속 속도가 빠릅니다. 근데 이걸 무료로 호스팅 해주는 고마운 MongoDB Atlas라는 사이트가 하나 있습니다. MongoDB Atlas 가입/초기셋팅 방법 1. 구글에 Mongodb atlas 라고 검색해서 홈페이지를 방문합니다 . 2. 가입합니다. 아마 메일인증 필요? ▼ 3. 뭐 채우라고 하면 잘 채워봅니다 (나중에 변경가능) ▼ 4. 무료 티어를 선택합니다 ▼ 5. 서버위치를 선택합니다. 한국과 물리적으로 가장 가까운 곳을 골라줍니다. ▼ 6. Da..

API란? Application Programming Interface라는 어려운 용어인데 실은 별거 아닙니다. 서로 다른 프로그램간에 소통할 수 있게 도와주는 통신 규약을 뜻합니다. 근데 이걸 웹에서 사용하면 '서버와 고객간의 통신 규약'을 뜻합니다. 조금 더 쉽게 풀어말하면 '서버에게 요청해서 데이터 가져오는 방법' 이 바로 API입니다. 여러분 지금까지 짠 코드가 "누군가 /write로 접속하면 write.html을 보내주세요" 같은 거였는데 바로 이게 서버의 API입니다. 여러분 서버랑 통신할 수 있는 방법이니까요. write.html을 보고싶으면 /write로 접속하라는 API를 정의하고 있었던 것입니다. REST API는 무엇인가 Representational State Transfer 라는 ..

form 데이터를 서버로 전송해보자 1. form 태그 셋팅 폼 전송버튼을 누를 시 /add 라는 경로로 POST 요청을 하는 폼이 완성되었습니다. form 태그의 method 속성은 GET/POST 중 어떤 요청을 할 건지 정해주는 부분, action은 어떤 경로로 요청할건지를 정해주는 부분입니다. 알아서 잘 채워넣으시면 이제 전송버튼을 누를 때마다 서버에 input에 담긴 데이터들을 전송하게 됩니다. 화룡점정으로 input마다 name 속성을 이용해 각각의 input에 이름을 써주었습니다. 폼 전송할 때 input에 이름이 없으면 서버에서 이게 어떤 input에 적혔던 데이터인지 알 수 없으니까요 form 데이터를 서버로 전송해보자 2. body-parser 설치 2021년 이후로 설치한 프로젝트들은..

리액트 18버전 이후부터 batch라는 기능이 추가되었습니다. batch는 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것을 의미합니다. batch 이전 리액트는 여러 state가 변경되면 1. state1변경() 2. 재렌더링 3. state2변경() 4. 재렌더링 .... 이런 식이였다면 batch 이후 리액트는 여러 state가 변경되면1. state1변경()2. state2변경()3. 재렌더링...이런식입니다. 리액트18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 하나 추가되었습니다. useTransition 이건데 이걸로 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해줍니다. 실은 코드 실행시..