초보 개발자

이번엔 코인들의 정보를가져와서 보여주고 달러를 기준으로 얼만큼 살 수 있는지 확인할 수 있는 기능을 만들어 보려고한다. 이걸 만들기 위해 먼저 4가지 state를 만들었다. 내가 얼마나 살 수 있는지 확인할 수 있는 money state, 그리고 현재 검색한 coin state, coin data를 가지고 올 동안의 loading state, coin list를 담고있는 coins state https://api.coinpaprika.com/v1/tickers 위의 url을 사용하여 coin list를 불러오는 걸 useEffect안에 넣어주어서 한번만 실행이되도록 해주었다. async await을 사용하지 않으면 then을 사용하여 해주어야하는 번거로움이 있어서 async await을 사용해주었다. 그..

무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 (amazon.com) 무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비스를 살펴보고 사용해 볼 수 있는 기능을 제공합니다. 프리 티어는 12개월 프리 티어, 상 aws.amazon.com S3를 사용하기 위해서는 먼저 여기에서 AWS계정을 만들어야 한다. 이걸 찾아 누르고 버킷을 만들어 준다. 그다음 API KEY를 만들어야하는데 그래야 nodejs코드가 AWS와 소통할 수 있기 때문이다. 그래서 IAM이라는 서비스를 이용해보자 사용자 추가를 눌러 만들어주자 초록박스를 꼭 체크해주어야 한다 하지않으면 웹사이트에 로그인 할 때 비밀번호를 적..

댓글쓰는 칸을 만들어보겠다. 먼저 Video와 User처럼 Comment Model을 만들어주어야한다. Comment.js text와 createAt, owner, video를 만들어 주었다. 그리고 Video와 User도 comment와 연관이 되어있기에 수정해주어야 한다. User.js comments를 만들고 배열로 여러개의 Comment의 Id가 들어올 수 있도록 설정해주자 여기서 ref는 아래의 Comment의 값과 같은 값이 들어와야한다. ( 오타 Commnet 정정 Comment ) Video.js Video Model도 많은 댓글이 달릴 수 있으므로 배열로 추가해준다. watch.pug watch.pug에서 댓글 form을 만들어주었다. 로그인 되어 있지 않으면 댓글 창이 보이지 않게 해주..

우리가 로그인이 되어있지 않은 상태로 로그아웃을 하거나 반대로 로그인 되어 있는 상태로 또 다시 로그인을 한다면 안될 것이다. 이런 경우에 middleware를 사용하여 사전에 차단할 수 있다. 로그인 되어있는 상태일때만 접근 할 수 있는 forLoggedUser와 로그인 되어있지 않은 상태일때만 접근 할 수 있는 forPublic 이 두개의 middleware를 만들었다. 사용법은 간단하다. handler앞에 적어주기만 하면 끝이다. route()를 통해 get,post메서드를 같이 받고 있는 상태라면 all()을 사용해 한번에 처리할 수도 있다. 다음으로 user edit handler를 만들어 보도록 하겠다. 먼저 router와 handler, 그리고 pug가 필요하다 이렇게 퍼그를 해두고 logg..

2021.09.27 - [이것 저것] - OAUTH OAUTH WEB2 - OAuth 2.0 : 1.수업소개 - YouTube 모든 내용은 생활 코딩님의 OAUTH강의를 바탕으로 만들어졌습니다. 3가지의 주체가 있다고 가정해봅시다. 우리를 Client라고하고 우리의 서비스를 사용 taehyeki.tistory.com oAuth의 인증절차에 대해서 다뤄봤던 글이 있다. 생활코딩님이 설명해주신 내용을 바탕으로 정리해두었다. 이 글을 먼저 보고오면 어떤 원리로 인증이 되는지 알 수 있을 것이다. GitHub Apps GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of s..

먼저 join handler를 만들어 보겠다. 여기서 새로운 Model인 User모델을 만들고 bcrypt를 활용해 비밀번호를 해시하여 암호화 시킬 것이다. getJoin getJoin을 통하여 /join url로 들어왔을 때 join.pug를 보여주도록 한다. join.pug form을 만들고 그 안에 id를 뜻하는 iden와 password, email, name 등을 post방식으로 보낼 것이다. postJoin req.body로 먼저 정보들을 받아온 뒤에 iden, email이 기존의 것과 중복이 되는 지의 여부를 확인하고 중복이 된다면 status(400) (bad request)를 보내준다. 안보내면 아이디와 비밀번호를 저장할 것인지를 브라우저가 물어보는데 이것은 자동적으로 status(200..

MVP.css - Minimalist stylesheet for HTML elements (andybrewer.github.io) MVP.css - Minimalist stylesheet for HTML elements A decent MVP in no time More building and less designing with "set and forget" styling. "Uber for X" brainstorming session andybrewer.github.io 나는 css를 잘 다룰줄 모른다. 이런 나에게 딱 맞는 것이 이놈이다. 기본적으로 필요한 최소한의 css가 작성이 되어있는 녀석! 사이트에 접속하면 link가 적혀있는데 복붙해서 base.pug에 css로 지정해주자! home.pug의..

2021.09.11 - [RECAP - WETUBE] - 4-1 템플릿 pug 4-1 템플릿 pug 우리는 지금까지 res.send('메시지')를 보내왔다. 이번에는 HTML문서를 response해보려고한다. 물론 이렇게 해도 html형식으로 잘 전달이 되는 것을 확인할 수 있을 것이다. 본문에 h1태그 하나만 썻는데 taehyeki.tistory.com 이번에는 재사용성이 좋은 점에 대해서 설명해보겠다 먼저 pug는 상속을 받을 수 있다. extends 를 이용해서 다른 pug의 내용을 전부 받아 올 수 있다. 또한 부분적으로도 가져올 수 있다. header, footer, nav등 필요한 부품을 끼워 맞출 수 있는 레고같은 역할이다. 우리는 base.pug라는 기본 틀과 footer.pug 라는 부품..