정적 파일이란? 변화하지 않는 파일. image, css, js파일 등을 의미한다. express에서는 정적 파일을 쉽게 전달할 수 있는 기능을 가지고 있다. express.static() express.static 미들웨어에 포함시키며 전달하면, 파일의 직접적인 제공을 시작할 수 있다. app.use(expres.static('public')); 위와 같이 작성했다면 다음과 같은 주소로 public 디렉토리에 포함된 파일을 로드할 수 있다. http://localhost:3000/images/kitten.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/images/bg.png http..

카카오 로그인 api 구현시, access_token이 'KOE010'오류로 인해 넘어오지 않는 경우가 있다. 이는 Client Serect을 활성화 했지만, 전달 인자로 넘겨 주지 않았을때 생기는 오류다. 따라서 활성화를 끄거나 다음과 같이 client_id 뒤에 붙여주면 해결된다! const baseUrl = "https://kauth.kakao.com/oauth/token"; const config = { grant_type: "authorization_code", client_id: process.env.KAKAO_REST_KEY, client_secret: process.env.KAKAO_SECRET_KEY, .//여기를 추가했을 뿐이다 redirect_uri: "http://localhost:..

OAuto2.0을 이용한 소셜 로그인의 과정은 대부분 위 사진과 같은 과정을 거친다고한다. express서버와 node.js를 이용해 git 사용자 인증을 얻어내보자! 1. 깃허브에 로그인 요청하기 1.1 client_id 생성하기 깃허브 홈페이지 -> settings -> Developer settings -> OAuth apps 앱 성성을 하면 자동적으로 client_id가 부여된다. client secrets는 나중에 사용되므로 발행 후 잘 저장해 두자. 1.2 사용자의 깃허브 아이디 요청하기 https://github.com/login/oauth/authorize + 클라이언트 아이디 형식은 다음과 같다 https://github.com/login/oauth/authorize?client_id=8..

1. 사용자를 기억하는법 1.1 쿠키 서버는 어떻게 사용자를 기억할까? 유저에게 쿠키를 보내는 것이다. 서버는 브라우저에게 잘 간수하라며 쿠키를 전달한다. 그리고 유저는 서버에 어떤 요청을 할때마다 쿠키를 같이 보여주며 나라는것을 인증한다. 사이트에 접속했을 때 'accept all cookies'나 '모든 쿠키 허용' 에 수락을 한적이 있을 것이다. 방문자와 웹사이트의 상호작용을 파악하기 위함이며, 이를 통계로 활용해 효율적인 웹사이트 구성하기 위해서다 쿠키 수집에 동의하면서, 해당 정보가 광고 용도로 제공 되기도 한다고 한다. 우리 주변에 맞춤형 광고가 눈에 띄는 이유다. 사실 따로 쿠키허용을 하지 않아도 약관 세부사항엔 관련 내용이 포함 되어 알게 모르게 허용을 동의 한다. 나의 티스토리 쿠키들이다..

1. bcrypt bcrypt는 한번 해싱하면 되돌릴 수 없는 단방향 해싱이다. 암호화 기법인 salt와 키 스트레칭을 통해 기존 보안 방식보다 안전하다. 1.1 salt? 비밀번호에 추가 문자열을 붙여 암호화 하는 것이다. 비밀번호마다 다른 문자열을 추가하기 때문에 매우 보안성이 높아진다. salt정보는 매우 중요하기 때문에 잘 보관해야 한다. 1.2 키 스트레칭? 키를 늘린다는건 길이를 늘리는게 아니라 해시함수를 반복해 출력 값이 아주 느리게 산출되도록 하는 방법이다. 해킹을 하는데 시간과 비용이 증가되기 때문에 반복횠수를 늘릴수록 보안이 강화된다. 2. bcrypt를 통한 비밀번호 해싱, 비교 사용법은 다음과 같다. bcrypt.hash(myPlaintextPassword, saltRounds) 사..

render와 redirect의 차이가 궁금해서 구글링해봤지만 전부 django에 대한 render redirect만 보였다... 어쩌면 너무 쉬운거라 나빼고 다 알고 있던거일수도...? 암튼 그래서 express 공식문서를 참고해 혼자 분석해보기로 했다. 차이는 다음과 같다. 1. 매개변수의 차이 1.1 res.redirect([status,] path) redirect는 경로와 함께 상태를 같이 보낸다. 여기서 상태는 http 상태코드에 해당하는 양의 정수다. 상태를 지정하지 않는다면 상태는 기본적으로 found라는 뜻을가진 302로 설정된다. 상태코드별로의 의미는 다음 사이트에 전부 정리 되어있다. click! 사용법은 다음과 같다. res.redirect(302, "myHome"); 1.2 res..

1. mongoose란? mongoose는 mongoDB와 nodeJS를 연결시켜주는 다리이다. 2. 몽구스 설치 및 연동 2.1. mongoose 설치 터미널에 다음을 입력해 준다. $ npm i mongoose 2.2 node.js와 연동하기 mongo 명령어 입력 후 db url을 확인한다. db.js파일을 생성한 뒤, 다음 url을 연결해준다 //db.js import mongoose from "mongoose"; //mongo명령어를 통해 얻은 url 연결 mongoose.connect("mongodb://127.0.0.1:27017"); const handleOpen = () => { console.log("DB Connected⭐"); } const handleError = () => { c..

1. wsl 터미널 열기 2. 설치 가능한 패키지 업데이트 $ sudo apt update 3. mongodb 설치 $ sudo apt-get install mongodb 4. 설치 확인하기 $ mongod --version 5. 접속하기 mongodb에 접속하기 전에는 다음 명령어를 통해 서비스를 시작 후 접속해야한다. $ sudo service mongodb start 이제 mongo명령어를 통해 DB에 접속후 show dbs를 입력해보자. $ mongo show dbs 이용할 준비가 됐다는 것이다!! ctrl + c를 통해 DB밖으로 나갈 수 있다. 나간 뒤에는 정상적으로 mongo를 종료해주자. 참고로 종료, 상태 명령어는 다음과 같다. $ sudo service mongodb stop $ sud..

🌳방법 First Video의 이름을 바꾸고싶다면 html에 접근해야하는데 express를 이용할때는 html의 form을 이해하고 사용할수있는 js object 형식으로 바꿔주는 코드가 필요하다. 메인js파일에 다음과 같은 코드(미들웨어)를 추가해주면 된다. app.use(express.urlencoded({ extended: true })); router로 연결되기 전에 선언해주어야 주소에 접근하기 전에 적용된다. 🌳제목변경 코드 extends partials/base.pug block content h4 Change Title of video form(method = "POST") input(name = "title", placeholder = "Video Title", value = video.t..