DOTY

Middleware로써 브라우저 상에 쿠키를 설정해주면 사용자의 ID를 알 수 있고, 이를 브라우저에서 쿠키를 가져와 인증이 완료된 User Object를 controller에 넘겨준다. 여기서 쿠키는 브라우저에 저장한 뭔가! 라고 생각하면 되는데 구글같은 경우에는 다음과 같다. (로그인 되어있는거라 사용자들마다 좀 다르겠지..? ㅎㅎㅎ) app.post('/login', passport.authenticate('local'), function(req, res) { // If this function gets called, authentication was successful. // `req.user` contains the authenticated user. res.redirect('/users/' +..

지속적으로 업로드 할 계획이다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 1. codepen CodePen: Online Code Editor and Front End Web Developer Community CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 다른 사람이 만든 HTML, CSS, JS 코드들을 사용할 수 있는 곳. 예시를 하나 보면 Box Shadows에..

아직 완벽하게 아는게 아니라서 일단 적당히 얘기해 보자면 Webpack은 HTML, CSS등 프론트엔드에서 필요한 것들을 변환시켜준다. 를 사용해서 뭐시기 저시기 적어야 할때 이걸 쓰면 간단하게 플러그인 시스템을 통해서 해결할 수 있는것이다. 위의 파일들을 webpack에게 보내면 호환도는 static파일로 변환시켜준다. 1. 설치 npm install webpack webpack-cli 그러면 자동적으로 'webpack.config.js'라는 파일이 생성된다. 여기서는 clint code만을 작성해야 한다. 여기다가 이제 설정할 것들을 넣어주면 된다. 나는 scss를 css로 변환시켜주는 작업을 하려고 한다. 2. package.json 변경 맥에서는 cross-env를 안해줘도 되는데 윈도우에서는 해..

업로드 안한지 오래 된것같다...ㅠㅠ 다시 열심히 써야지 ESLint 설치에 대해서 작성을 해보려고 한다. npm을 사용해서 eslint를 설치해주자. npm install eslint -D 후에 다음 커맨드를 치는데 eslint --init 만약 " eslint : 이 시스템에서 스크립트를 실행할 수 없으므로 " 같은 이상한 헛소리를 한다?! (꼭 eslint가 아니어도) PowerShell을 관리자로 실행해서 다음을 입력한다. Set-ExecutionPolicy RemoteSigned 이런 도움말이 뜨는데 아멀랑 일단 '모두 예~' 잘 된다!!! 여기서 맨 마지막 것을 선택 해주고 JavaScript에다가 나는 사용 안하니까 None, 다음 질문도 NO Node를 쓸것이고~ 인기 많은거로 Airbnb..

여기저기 찾다가 답답해서 기록해두려고 한다. 1. 개발자용 설정 설정에 들어가게 되면 개발자용이라는 탭이 있다. 여기서 개발자 모드로 변경. 2. Windows 기능 켜기/끄기 Windows기능 켜기/끄기에 들어가게 되면 linux용 Windows 하위 시스템을 볼 수 있다. 이걸 체크 하고 다시시작을 한다. 3. Microsoft store 이후에 cmd에 bash를 쳤는데 뭔 링크가 뜨면서 거기서 앱을 받으라고 할 수도 있다. 타고 들어가면 우분투를 받게 된다. 받도록 하자. 4. bash 이러면 성공!

사소한 실수로 인해서 30분간 오류 찾아 헤맸다. 이유는 post가 아닌 get을 썼기 때문. 무슨 일 이었을까..? 원래 나의 코드는 이랬다. // 대충 앞에는 생략 하고 const globalRouter = express.Router(); globalRouter.get(routes.join, join); // 대충 뒤에도 생략 하고 이걸 돌렸을 때 이런 창이 나오게 된다. Join Now를 누르면 당연히 이런 창을 뜬다. 이것을 처리하기 위해서 코드를 나누었다. // 대충 앞에는 생략 하고 const globalRouter = express.Router(); globalRouter.get(routes.join, getJoin); globalRouter.post(routes.join, postJoin)..

이번에는 Search Controller에 대해서 알아보자. 솔직히 인강 들으면서 머릿속에는 물음표만 가득하다..ㅠㅠㅠㅠㅠ 뭔가 좀 어려워 ㅠ 어쨋든 일단 검색해야하는 창을 하나 만들어주자. 이런식으로! form(action=routes.search, method="get") input(type="text", placeholder="Search by Term...", name="term") 참고로 pug라는 프로그래밍 언어 해석기로 작성하였다. 큰 틀은 HTML 작성하는 법이랑 비슷하다. 여기서 method는 get 으로 해야한다. GET과 POST가 있는데 GET의 경우에는 서버로부터 정보를 조회하기 위해서 설계되는 메서드 중 하나다. URL에 있는 값들을 볼 수 있다. search루트로 들어가게 되면..

Import : 가져오기 Export : 내보내기 어떤 A.js 파일에서 B.js 파일에서 쓰던 것을 가져오고 싶을 때 Import 와 Export 를 쓰면 된다. // A.js에 맨 위에 import B from "/B"; // B.js에 맨 아래에 export defult B; 그런데 만약에 B의 변수를 사용하고 싶으면 다음과 같이 작성한다. // A.js 에서 import { var } from "./B"; // B.js 에서 export const var = ...;

- Helmet 우선 중요한 Helmet. 이름부터 뭔가 막는 것 처럼 보인다. npm install helmet www.npmjs.com/package/helmet helmet help secure Express/Connect apps with various HTTP headers www.npmjs.com 보안을 강화시켜준다고 보면 된다. - Parse Express의 MiddleWare로 어떤 form을 전송했다고 하면, 이 form은 서버에 의해서 받아져야 한다. 이를 도와준다. www.npmjs.com/package/body-parser body-parser Node.js body parsing middleware www.npmjs.com 어떤 것을 전송하는지 알기 위한 Parser이라고 보면 된..

첫 사용 느낌은 간단하게 말하면 'JS 코드를 깔끔하게 만들어준다!' 였다. // 원래 알던 JS function handleHome(req, res) { res.send("Hello World!"); } // Babel 적용 const handleHome = (req, res) => res.send("Hello World!"); 그런데 내가 볼때는 간단하게... 는 아닌것 같다. 여기서 쓴 '=>'는 'Arrows함수' 라고 불리는 ES6의 문법중 하나다. 사실 이건 C#을 잠깐 공부 했을때 본 적이 있는 것 같아서 찾아봤더니 비슷한 쓰임새였다. // 굳이 바꿔 쓰자면 이런 느낌?? (물론 문법은 좀 잘못됬다..ㅎㅎ) static void handleHome(req, res) => req.send("H..