React Modal
react-modal 패키지를 이용하여 Modal 구현하기 Install ‘react-modal’ yarn add react-modal Modal 구현하기 Case. Register 컴포넌트를 modal로 구현 // Registration.jsx import ReactModal from "react-modal" ReactModal.setAppElement("#root"); const Register = ({ isOpen, onClickToggle...
TypeGraphQL[6] - Forgot Password
해당 포스트는 Ben Awad의 TypeGraphQL Tutorial을 기반으로 작성하였습니다. ForgotPassword resolver 다음 형태의 mutation type을 작성하고자 한다. type Mutation { forgotPassword(email: String!): Boolean! } 이메일을 인자로 전달하면 해당 유저에게 토큰과 함꼐...
TypeGraphQL[5] - Confirmation Email
해당 포스트는 Ben Awad의 TypeGraphQL Tutorial을 기반으로 작성하였습니다. Confirmation via Email 이메일을 통해서 User를 confirm하는 과정을 구현할 것이다. Confirmation은 어떤 과정을 거칠까? 유저에게 토큰과 함께 confirmation 이메일을 보낸다. 유저가 confirm...
Alogrithm[2]:⭐ - Bubble Sort, Selection Sort
Bubble sort List가 주어여졌을 때, 왼쪽에 있는 숫자가 오른쪽에 있는 숫자보다 크다면 swap이 일어난다. # swap if a > b: a, b = b, a # test nums = [4,2,3,1]...
TypeGraphQL[4] - Authorization
해당 포스트는 Ben Awad의 TypeGraphQL Tutorial을 기반으로 작성하였습니다. Authorization이란 ? Authorization From Wikipedia In contrast with identification, the act of indicating a person or thing’s identity, authentication is the process...
Alogrithm[1]:⭐ - Single Number
Q. Leetcode: 136. Single Number 방법 1. dictionary 자료형 이용 리스트를 순회하여 key는 num, value는 count를 가지는 dictionary를 만든다. dictionary를 순회하여 value가 1인 key값을 찾아 반환한다. dict.get() class Solution: def...
TypeGraphQL[3] - Login
해당 포스트는 Ben Awad의 TypeGraphQL Tutorial을 기반으로 작성하였습니다. What is session ? Session - wikiepedia Cookie based session temporary and interactive information interchange … Login 인증을 위해 session을 사용한다. Login...
TypeGraphQL[2] - Validation
해당 포스트는 Ben Awad의 TypeGraphQL Tutorial을 기반으로 작성하였습니다. What is Validation ? Data validation - wikipedia Data cleansing - wikipedia Data가 correct 하고 useful 한지 검증하는 과정을 data validation이라 한다....
TypeGraphQL[1] - TypeORM, Resigter Resolver
해당 포스트는 Ben Awad의 TypeGraphQL Tutorial을 기반으로 작성하였습니다. Add TypeORM TyepORM이란? TypeORM docs Its goal is to always support the latest JavaScript features and provide additional features that help you...
TypeGraphQL[0] - Setup
해당 포스트는 Ben Awad의 TypeGraphQL Tutorial을 기반으로 작성하였습니다. TypeGraphQL이란? TypeGraphQL is a library that makes this process enjoyable by defining the schema using only classes and a bit of decorator...
First Step to GraphQL
How to Get Started with GraphQL and Node.js GraphQL GraphQL is a query language for your API, and a server-side runtime for executing queries using a type system you define...
FullStackProject[0] - Set Up MikroORM
About Project 이 프로젝트는 Ben Awad의 Fullstack React GraphQL TypeScript Tutorial를 따른다. 본 포스트는 동영상의 모든 내용을 다루지 않는다. Add Typescript Install yarn add @type/node typescript ts-node Add scripts "watch":...
Alogrithm[0]:⭐⭐
Q. Leetcode: 430. Flatten a Multilevel Doubly Linked List (Doubly) Linked List and Stack Linked List는 head 노드를 통해서 List의 데이터에 접근한다. Doubly Linked List는 prev 를 통해서 이전 노드에도...
Drag to Scroll (with React)
해당 포스트는 아래 내용을 기반으로 작성하였다. Drag to Scroll 이벤트 리스터 안에 addEventListener() 어떤 이벤트가 다른 이벤트에 의존하는 경우, 이벤트리스너를 따로 등록하는 것보다 이벤트 리스너 안에 addEventListener()를 사용하여 종속관계를 명확하게...
storybook
What is Storybook? Storybook is an open source tool for developing UI components and pages in isolation. - official doc Add storybook in your React project # at root directory...