rhanziy

https://velog.io/@kyungjune/Styled-components-%EA%B8%B0%EC%96%B5%ED%95%98%EA%B8%B0 Styled-components 기억하기 React를 학습하던 중 모듈 시스템의 중요성을 계속 깨닫고 있다. 익숙하지 않은 방식들에 시간이 오래 걸리긴 하지만 반복적으로 사용하고 익숙해지면 분명 세분화된 폴더트리 구성에 훨씬 편해 velog.io https://kyounghwan01.github.io/blog/React/styled-components/basic/#global-theme styled-components 개념 및 예시, react, redux styled-components 개념 및 예시, react, redux, 환경설정, global the..

보안상 작은 이점을 누리기위해 환경변수를 작성해보자. 나중에 작업환경이 바뀌거나 클라우드에 올릴 때도 요것만 변경해주면 쉽게 환경셋팅이 가능해진다. npm install dotenv server.js 상단에 작성 require('dotenv').config() 그리고 server.js와 같은 경로에 .env파일을 하나 생성하고, 환경변수들을 작성해준다. PORT=8080 DB_URL="mongodb+srv://codingapple1@저쩌구" 그리고 server.js에서 환경변수를 가져다 쓸 때는 process.env.변수이름 로 불러온다. MongoClient.connect( process.env.DB_URL, // env에 작성한 URL { useUnifiedTopology : true}, (error..

로그인/비로그인 시 /mypage 방문 테스트를 해보자. server.js에 작성 app.get('/mypage', isLogIn , (req, res)=>{ console.log(req.user); res.render('mypage.ejs', { user : req.user }) }) function isLogIn (req, res, next) { if (req.user) { next() } else { res.send('로그인 안하셨는데요?') } } "요청.user 가 있으면 next()로 통과시켜주시고요, 없으면 에러메세지를 응답.send() 해주세요~" mypage.ejs에는 간단하게 보여줘봅시다. 의 마이페이지입니다. 요청.user가 뭐지?! passport.serializeUser(funct..

로그인, 로그인 검증, 세션생성을 도와주는 라이브러리 총 3개 설치 (실제 서비스시 express-session 말고 MongoDB에 세션데이터를 저장해주는 라이브러리를 이용하자.) express-session 라이브러리는 세션이 많아지면 서버의 메모리를 많이 잡아먹기 때문에 connect-mongo 등의 라이브러리로 DB에 세션데이터를 저장해서 사용하기 npm install passport passport-local express-session server.js에 추가할 코드. app.use() 는 요청과 응답사이에 뭔가 실행해줄 코드를 뜻하며 미들웨어임. const passport = require('passport'); const LocalStrategy = require('passport-loca..

/edit/게시물id url 접속 시 올렸던 게시물 수정페이지를 구현해보자. server.js 코드 app.get('/edit/:id', function(요청, 응답){ db.collection('post').findOne({ _id : parseInt(요청.params.id) }, function(에러, 결과){ 응답.render('edit.ejs', { post : 결과 }) }) edit.ejs에서 PUT을 구현해야하는데 PUT과 DELETE는 html에서 구현못한다. 그러므로 이번엔 method-override 라이브러리를 사용해봅시다 ^0^ npm install method-override server.js 상단에 코드 2줄 추가 const methodOverride = require('meth..

삭제기능을 구현했으니 상세페이지를 만들어보자. /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