profile
비전공 고졸 성팡이 개발자 되기 프로젝트

Passport 로 깃헙로그인하기

Passport 는 미들웨어로써 사용자 인증을 도와주는 아주 훌륭한 미들웨어다. 여기서 인증이란 브라우저 상에 쿠키를 설정해주면 그쿠리를 통해서 사용자 ID등을 확인해서 Passport가 브라우저에서 자동으로 쿠키를 가져와서 사용자의 객체를 넘겨준다. 지금 나는 mongoose + mongoDB를 사용하기 때문에 passpoprt-local-mongoose...

2020년 1월 8일
·
0개의 댓글

Sass란

처음 sass를 접하고 나서 구글링을 통해서 조금 알아보았다. sass는 내가생각 하기에 React 와 비슷하다고 생각이든다. Scss파일은 Sass컴파일러를 통해 .css 파일로 컴파일 이 된다. 즉, Sass는 Css를 만들기 위한 도구이다. 이러한점에서 리엑트랑 비슷하게 생각을 했다 그래서 다른말로는 Sass를 CSS의(전처리기)라고도 한다. 아래 그...

2020년 1월 8일
·
0개의 댓글

webpack 에 대해서 알아보자

웹팩은 module bunddle이다 웹팩은 우리가 파일들을 가져와서 웹팩한테 주면 웹팩은 우리가준 파일들을 호환되게 static 형태로 바꿔준다 쉽게 말하면은 파파고와 비교를하면 알기 쉬울것같다 파파고와 약간은 다르지만 파파고처럼 우리가 언어를 가져다주면 알아볼수있게 변환을 해준다. 근대 여기서 우리는 웹팩을 왜써야하는지 의문점이 들수가 있다. 웹브라우저...

2020년 1월 5일
·
0개의 댓글

ESLint 설치및설정.

ESLint 는 JavaScript 개발을 하게 될 때 개발자 경험을 향상시켜줄 유용한 도구이다. ESLint 는 자바스크립트 문법검사를 해주는데, 그 문법 검사에 대한 조건에 다양한 옵션을 정해줄수 있다. 대표적인예로 에어비엔비에 가 사용하고 있고 에어비엔비 룰을 많은 개발자들이 사용하는편이다. npm 또는 yarn을 사용하여 ESLint를 설치할 수 있...

2020년 1월 5일
·
0개의 댓글

multer 에 대해서

express 에 라이브러이며 middleware에 속한다. multer 는 함수를 집어넣으면 미들웨어가 URL을 반환한다. 기본사용 예제다 var express = require('express') var multer = require('multer') var upload = multer({ dest: 'uploads/' }) var app = exp...

2020년 1월 4일
·
0개의 댓글

async 에 대해서

먼저 async 에 알기전에 왜 이것이 필요한지 알필요가 있다. 먼저 자바스크립트는 한번에 여러가지를 처리 하기때문에 결과를 기다려주지 않는다. 그런데 우리는 프로그래밍을 하면서 꼭 이 작업은 기다린후에 작업이 진행해야 할때가 필요하다 이때 필요한것이 바로async 이다 사용법은 간단하다 ex) 기존 코드 export const home = (req,res...

2020년 1월 4일
·
0개의 댓글

MongoDB 와 NoSQL에 관해서

몽고DB란 NoSql 의 대표적인 데이터베이스이다 그래서 많은 회사들이 쓰고 있다. 일단 여기서 NoSql 이란 NotOnlySql이다 단어그대로 기존에 Sql방식과 다르게 데이터를 저장한다. NoSql 은 요즘 대세인 빅데이터에 맞는 언어라고 생각이 된다 기존에 방식처럼 한서버에 연결해서 처리하는게 아니라 여러서버에서 연결해서 처리하기 때문에 요새 정보...

2020년 1월 4일
·
0개의 댓글

Pug mixin !

mixin 은 퍼그의 함수이다. 믹신에는 인자가 하나 필요하다. //mixin ex) mixin videoVlock(video = {}) //home.pug ex) each item in videos +videoBlock({ title:'Hello' }) 출력결과 스크린샷 2019-12-14 오후 3.56.06.png...

2019년 12월 14일
·
0개의 댓글

Pug 사용법

Pug 란 익스프레서 View 엔지니어 이다. 퍼그에 사용법은 간단하다 예를들어 html 에서는 성준 이렇게 작성하는것을 Pug 에서는 p 이성준 이라고 작성하면된다 정말심플하다 하지만 Pug 를 사용하면서 주의할점이 있다 기존 Html 은 밑에와같이 이렇게 작성햇는데 퍼그에서는 여백이 중요하다 이게 무슨 말이냐면 스크린샷 2019-12-14...

2019년 12월 14일
·
0개의 댓글

MVC패턴

M 데이터 V 화면에 보여지는것 C 데이터를 찾는함수 기능들 항상 프로그래밍은 쪼개서 관리하는것이좋다 그래야 유지보수 할때도 유리하고 가독성도 좋기때문이다.

2019년 12월 12일
·
0개의 댓글

Express 라우터

//app.js const handleProfile = (req, res) => res.send("You are on my profile"); app.get("/profile", handleProfile); 우리는 기존에 이런식으로 라우터를 작성을했엇다 . 하지만 라우터는 쪼갤수 있다. //router.js import express from "expre...

2019년 12월 12일
·
0개의 댓글

Express 미들웨어들

사용방법은 인스톨 하고 임포트 해주고 사용해주면된다. 1 morgan 은 우리가 서버에 접속했을때 무엇을 받고 있는지 로깅에 대한정보들을 알려주는 미들웨어이다 2 helmet 은 보안에 관련된 미들웨어다 3 body-parser 바디파서는 우리가 데이터를 얻고자 할때 쓰는 미들웨어ㅗ이다 json 서버가 이해하기 위해서 인코딩 을 해주어야한다. 4 co...

2019년 12월 12일
·
0개의 댓글

Express 미들웨어

미들웨어란 양 쪽을 연결하여 데이터를 주고받을 수 있도록 중간에서 매개 역할을 해주는 것이다. Express 에서 미들웨어 함수 의 역활은 요청(req), 응답(res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 에 대한 엑세스 권한을 갖는 함수이다. 그 다음의 미들웨어 하수는 일반적으로 next 라는 이름의 변수로 표시가 된다....

2019년 12월 12일
·
0개의 댓글

Babel

Babel 이란 최신 자바스크립트 문법을 구시대 자바스크립트 문법으로 바꿔주는 코드변환기 이다. 근대 왜 우리는 최신문법을 사용하면 되는데 왜 바벨이 필요한 것일까 이유는 브라우저는 여러 종류들이 있다 크롬,사파리,파이어폭스,익스플로 등 여러가지 브라우저 들이 있는데 브라우저들 에 권장사항이 최신 자바스크립트 문법에 호환이 되게 만들어지기로 했는데 이 것은...

2019년 12월 11일
·
0개의 댓글

nodemon

1 nodemon 노디문은 우리가 서버를 껏다가 켰다가 실행을 안해도 저장을 할때마다 서버를 실행시켜주는 아주 편리한 기능이다 npm install nodemon -D 를 붙혀서 인스톨을 한다 이때 -D를 붙히는 이유는 프로젝트에 필요한게 아니라 개발자한테 필요한것이기 때문이다. 사용방법 "scripts":{ "start": "nodemon babel...

2019년 12월 11일
·
0개의 댓글

Babel 에 대해서 알아보자

바벨은 코드 변환기이다. 프로그래밍은 계속 업데이트가 되고 그리고 더욱더 개발자 들이 사용하기 쉽게 지속적으로 좋은 코드 유지보수 하기 쉬운 코드들이 나온다 하지만. 이러한 부분이 문제가 되는점이 있다. 인터넷 브라우저는 크롬 사파리 파이어폭스 익스플로 여러가지 브라우저들이 존재를 하는데 최신 자바스크립트 문법을 모든 브라우저들이 호환이 안되는것이다. 그래...

2019년 12월 11일
·
0개의 댓글

Express (get, post ,req,res) 알아보기

GET 은 서버에서 어떤 데이터를 가져와서 보여줄때 사용이된다 ex)유튜브에 올라와있는 동영상들이 될수가 있다. POST 는 서버의 데이터 값이나 상태를 바꾸기 위해서 사용이된다. ex)유튜브에 올라와있는 동영상들 제목 수정 req 는 말그대로 요청을 하는것이고 res 는 값읕 반환해준다고 생각을 하면된다. Get 에 대한 예제 const handl...

2019년 12월 11일
·
0개의 댓글

Express 첫 서버 만들기

npm install express 를 통해서 express 를 다운로드한다 사용법은 간단하다 //import 하기 const express = require("express"); //변수를 선언해서 express 를 실행하기 const app = express(); //포트 실행하기 (4000번 포트로 실행이 된다) app.listen(4000); ᄉ...

2019년 12월 11일
·
0개의 댓글

프레임 워크

프레임 워크는 우리가 보다 쉽게 코드를 할수있게 여러게의 코드들로 미리 작성이 되어있는것을 의미한다. 쉽게 말하면 자동차 프레임으로 예시를 들수가 있다. 이렇게 뼈대가 갖추어 져있기 때문에 우리는 단순히 몇줄의 코드로 쉽게 구현이 가능하다 단 프레임워크에 맞는 규칙을 준수하고 사용법을 숙지 해야한다.

2019년 12월 11일
·
0개의 댓글

React-Router

리엑트 라우터란 express 와 마찬가지로 라우터 하는 용도로 쓰이고있다. 사전준비 1.yarn add react-router-dom 2.Router.js 파일 생성 // src/Components/Router.js import React from "react"; import { HashRouter as Router, Route } from "reac...

2019년 12월 8일
·
0개의 댓글