rhanziy

삭제기능을 구현했으니 상세페이지를 만들어보자. /detail/게시물id 번호 url로 접속하면 detail.ejs페이지를 보여주는 코드. app.get('/detail/:id', (req, res)=>{ db.collection('post').findOne({ _id : parseInt(req.params.id) }, (error, result)=>{ res.render('detail.ejs', { data : result }) }) 역시나 id 데이터타입은 int형이므로 parseInt로 변환해서 찾기 + ejs파일에서 중복되는 navbar를 html파일로 만들어 조립식으로 끼워보자 간단히 한줄만 추가해주면 됨.

HTTP 요청은 GET, POST, PUT, DELETE 4가지가 있다. HTML 폼에서는 GET과 POST만 요청 가능. 그래서 삭제요청을 할 때 쓸 수 있는 3가지 방법이 있다. 1. method-override 라이브러리의 도움을 받는다 2. AJAX로 DELETE 요청을 날린다 3. 그냥 POST요청을 날려서 DELETE 작업을 수행한다 REST한 API를 만들기 위해 1번과 2번을 쓴다. 오늘은 2번~ AJAX요청은 제이쿼리문법으로 하는게 간단해서 제이쿼리CDN을 문서에 포함해주자. 문법은 $.ajax부분 참고 할일 제목 : 할일 마감날짜 : 삭제 // 버튼 클릭 시 해당 게시물 삭제 서버 요청 문법 app.delete('/delete', function(요청, 응답){ 요청.body._id =..

https://velog.io/@minseok_yun/Velog-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4MarkDown-%EC%82%AC%EC%9A%A9%EB%B2%95 Velog 마크다운(MarkDown) 사용법 내가 볼려고 만든 마크다운 작성법 velog.io

타입스크립트를 리액트 프로젝트에 적용해보면서 연습중이다. api를 받아온 결과를(json객체) type지정하면서 구조가 복잡하거나 depth가 깊어질 때, key나 자료형을 하나하나 입력하기 번거로웠다. 해결방법은 2가지가있는데, 편리한 사이트를 이용하거나 개발자도구에서 수작업하기.^0^ http://json2ts.com/ json2ts - generate TypeScript interfaces from json © 2023 - Timmy Kokke based on JSON C# Class Generator json2ts.com https://app.quicktype.io/?l=ts Instantly parse JSON in any language | quicktype app.quicktype.io 개꿀..

firebase로 sso기능 만들고 firestore에 사진+트윗 올리는 기능 만드는 중. image file 업로드와 preview 구현 코드. 사진 저장은 firestore에다 할 것이니 조금만 기다리세요. file 업로드 처리, 미리보기 코드 const [ attachment , setAttachment ] = useState(); const onFileChange = (e) => { const { files } = e.target; const theFile = files[0]; const reader = new FileReader(); reader.onloadend = (e) => { const { result } = e.currentTarget; setAttachment(result); } re..

1. node.js 다운받기. 최신버전 확인 2. 프로젝트 폴더생성 3. 터미널에서 프로젝트 폴더로 이동 후 npm install -g @vue/cli 4. vs코드 에디터 부가기능 설치 Vetur, HTML CSS Support, Vue 3 Snippets *npm install 안되면 yarn 1.xx 설치해보세요. 구글에 Installation | Yarn 사이트 들어가서 설치하고.. 재시작. 맥은 설치 필요 없이 터미널에 npm install --global yarn yarn 있으면 yarn global add @vue/cli 5. 작업영역에 작업용 폴더 추가하고 vue create 프로젝트명 - vue3 선택 6. vue 프로젝트를 작업영역에 추가 7. src > App.vue에 코드를 짜면 됨..

함수의 파라미터로 rest형식, 디스트럭쳐링형식이 들어왔을 때 type지정하는 방법. 일단 rest parameter는 파라미터가 몇개 들어올지 미리 정의를 할 수 없을 때 ... 으로 만들어주는거 function 전부더하기(...a){ console.log(a) } 전부더하기(1,2,3,4,5) console을 찍어보면 a값은 [ ] 어레이 안에 담겨져 있다. function 전부더하기(...a : number[]){ console.log(a) } 전부더하기(1,2,3,4,5) 그래서 타입지정도 array처럼 해주면 됨. array나 object 괄호 벗길 때 사용하는 Spread operator와는 다르니 유의 rest parameter type지정 예시) 입력된 숫자들의 최대 값을 return하는 ..

원래는 intersection type이라고 & 연산자를 통해 두 타입을 만족하는 코드를 짤 수 있었다. // intersection type // 두 타입을 만족하는 타입을 뜻함 type Animal2 = { name : string } type Cat2 = { age : number } & Animal2 let munzi :Cat2 = { name : 'munzi', age : 10 } 그런데 interface로도 가능. extends 하면 되니까. interface Student{ name : string; } interface Student{ score : number; } interface Teacher extends Student { age : number } let 학생 :Student = ..