분류 전체보기 검색 결과

해당 글 777건

passport.js : (1) passport-local-mongoose를 활용한 local auth

Passport.js Simple, unobtrusive authentication for Node.js www.passportjs.org saintedlama/passport-local-mongoose Passport-Local Mongoose is a Mongoose plugin that simplifies building username and password login with Passport - saintedlama/passport-local-mongoose github.com express-session을 통해 세션 사용하기 Middleware Quick npm i pug morgan helmet cookie-parser express-session connect-flash ejs npm i ..
Node, Nest, Deno/🔑 JWT, Passport.js 2020. 3. 27. 20:09

mongoose를 통해 express와 mongoDB 연동하기

몽고가 성공적으로 설치되었음을 확인했다면 우리가 사용하고 있는 Javascript로 사용할 수 있게 mongoDB를 연결해보자. mongoDB는 다른 언어(C++)로 구성되어 있어 javascript와의 adapter를 통한 연결 작업이 필요하다. 우리는 mongoose를 이용할 것이다. mongoDB NoSQL는 schemaless라는 장점이 있지만 mongoose는 스키마를 작성합니다. mongoDB의 자유도를 조금 제한하는 대신 좀 더 가지런하고 정렬된 형태로 정보를 받을 수 있게 됩니다. 여담으로, 몽구스는 ODM(obejct, document)입니다. 시퀄라이즈가 node.js 환경에서 MySQL을 JS로 사용하기 위한 ORM(object, relation을 매핑)이었다면 몽구스는 object와..
DB, ORM/🍃mongoose, pymongo 2020. 3. 27. 18:40

form, input 태그 + etc

그 동안 주먹구구식으로 해결왔던 from, input 태그를 정리해보기로 했다. form - action : submit된 정보들을 서버의 어디로 전송할 것인지 - method : get, post(url로 입력값 노출하고 싶지 않을 때) form에 작성한 내용은 거의 90% post 방식을 사용함 - enctype : file을 제출하는 form일 경우에 필요함. 대개 멀티파트 업로드를 지정하기 위함. multer를 활용한 업로드시에 반드시 지정해줘야 함. 대개 multipart/form-data enctype="multipart/form-data"값을 줌. input - type : text, password, email, textarea, radio, checkbox, reset, hidden, f..
웹 전반, 브라우저/HTML, CSS 2020. 3. 27. 18:15

express-session을 통해 세션 사용하기

Middleware Quick npm i pug morgan helmet cookie-parser express-session connect-flash ejs npm i @babel/node @babel/preset-env @babel/core npm i -D nodemon 미들웨어는 req와 최종 res 사이에 존재하는 중간 단계로.. darrengwon.tistory.com express-session Simple session middleware for Express www.npmjs.com 습관적으로 Express에서 설치하던 미들웨어 중 express-session을 살펴보도록하자 아래는 npm의 express-session 페이지 하단에 있는 예시를 수정한 것이다. 이를 통해 session을 ..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 27. 02:28

[Cookie] Cookie

왜 쿠키? http 통신은 stateless하다. 상태를 저장하고 있지 않으므로 한번 res를 보내거나 req를 응답하면 전에 무슨 작업을 했는지 알 수가 없다. 이는 통신의 가용성을 높이기 위해 일부러 이런 방식으로 http 통신이 설계되어 있다. stateful하게 작업하기 위해 브라우저에 cookie를 저장하는 것이다. express에서 setCookies 메서드를 사용해보았으니 알겠지만 쿠키는 서버의 req에 Set-Cookie 헤더를 실어 보내면 클라이언트 측의 브라우저에 cookie가 저장된다. 그리고 해당 클라이언트가 같은 서버에 cookie를 실어보내면 서버는 해당 cookie로 인해 특정 클라이언트를 식별할 수 있게 된다. (서버 => 클라이언트, req에 Set-Cookies를 붙여 보..
🌐 Network/🔗 HTTP 2020. 3. 27. 00:18

React에 Redux, react-redux 적용하기

React Redux · Official React bindings for Redux Official React bindings for Redux react-redux.js.org 에... 여담입니다만 react-redux에서는 subscribe를 사용하지 않습니다. state가 변하면 알아서 컴포넌트가 재렌더링 될테니깐요. 🚗 설치 pure한 redux에서와 달리 react-redux를 추가 설치해야 한다. npm i redux npm i react-redux store를 생성하는 것은 일반 redux를 사용하는 것과 같다. reducer를 만들고, store를 만든다. import { createStore } from "redux"; const reducer = (state = [], action) ..
State Management/⚛ Redux 2020. 3. 25. 21:49

pure Redux

Redux는 state 관리 툴이다. 오해하지 말아야할 것이, React에 의존하지 않는 툴이다. Vue, Angular 심지어 vinilla JS에서도 돌아간다. 그러나 React에서 사용하면서 유명세를 탄 것도 사실이므로 React와 Redux를 같이 배우는 것이 좋다. 우선 기본적인 (pure한) Redux를 살펴보고 이후에 React에 적용해보도록 하자. redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org 🚗 redux 설치 npm i redux 🚗 Reducer Context API와 마찬가..
State Management/⚛ Redux 2020. 3. 25. 04:12

React Hooks : useContext ( + with TS)

Context : ko.reactjs.org/docs/context.html#when-to-use-context useContext : ko.reactjs.org/docs/hooks-reference.html#usecontext 기존에 사용하던 원리와 동일합니다만, 훅을 사용하게 되면서 Provider와 context 생성만 하게 되었습니다. Consumer가 없어지고 useContext를 사용하여 더 간결하고 편리하게 Context를 사용할 수 있습니다. 0. 요약 // 생성 const MyContext = React.createContext(defaultValue); // 최상위 컴포넌트를 Provider로 감싸면 됩니다. // useContext로 context의 값을 가져와 사용합니다. const..
React, Next, Redux/🚀 React with Hooks 2020. 3. 24. 02:53

Context API 상태 관리 라이브러리

context api를 사용하고 싶다면 이제 useContext 훅과 같이 사용합시다. darrengwon.tistory.com/182 React Hooks : useContext Context : ko.reactjs.org/docs/context.html#when-to-use-context useContext : ko.reactjs.org/docs/hooks-reference.html#usecontext 기존에 사용하던 원리와 동일합니다만, 훅을 사용하게 되면서 Provider와 c.. darrengwon.tistory.com 밑에 밑에 밑에 컴포넌트에 props를 전달한다고 생각해보자. const App = () => {......} const User = ({user}) => {... {...} 이..
React, Next, Redux/⚛ React.JS 2020. 3. 23. 15:57

React Hooks : useRef(), ref

Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org React Hooks : useRef() 함수 자바스크립트에서 특정 DOM 을 선택해야할 때는 DOM Selector를 사용한다. 리액트 프로젝트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야한다거나 특정 DOM을 선택해야할 상황이 있다. 이런 경우,.. xiubindev.tistory.com useRef() 훅을 사용할 수 없는 클래스형 컴포넌트의 경우에는 React.createRef()를 사용합니다. ref + useRef() useRef나 ref는 getElementById()나 querySelector()와 같은 역할을 한..
React, Next, Redux/🚀 React with Hooks 2020. 3. 22. 18:57