일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- NextJs
- backend
- MongoDB
- ES6
- form
- TypeScript
- nodejs
- DART
- ECMAScript
- Component
- API
- javscript
- JavaScript
- Flutter
- pug
- GRID
- express
- graphQL
- heroku
- HTML
- CLONE
- clonecoding
- Session
- frontend
- 자바스크립트
- react
- CSS
- node.js
- Mongoose
- 리액트
- Today
- Total
목록JavaScript (192)
Enjoy Programming

자바스크립트 챌린지 3번째 이번 과제는 디데이를 출력하는 내용이다 기준은 크리스마스 이브를 기준으로 d-day계산 하기~ 우선 필요한건 크리스마스 날짜와 오늘 날짜. 자바스크립트에서 날짜를 구하는 함수는 Date(); 자바스크립트에서 date 객체를 생성하는 방법은 new연산자를 사용하는 것이 유일하다. 아래와 같이 크리스마스와 오늘날짜를 구한다 그리고 크리스마스와 오늘 날짜를 빼고 차이를 구한다 그리고 Math.floor를 이용하야 소수점 이하를 버리고 각 초 분 시간 날짜를 구해준다. 그리고 구해진 시 분 초를 다시 한번 초분은 60으로 나눈 나머지 값을 시간은 24로 나눈 나머지 값을 변수에 담아주고 삼항 연산자를 이용해 각 숫자가 10이하 일때는 앞에 0을 붙여주고 아니면 그냥 그대로 출력하도록 ..

arrow function은 간결하고 유용하지만 사용하지 않아야 할 때가 있다. 바로 this 키워드를 사용해야 할때이다. this란 무엇인가. 먼저 this를 간단하게 집고 넘어가자 this는 객체와 연관이 깊다. 예를 들어 const a = {name: "lee"} 라는 객체가 있고, 특정 상황을 만족할 경우 this.name을 호출하면 "lee"가 출력이 된다. 이때 변수 a를 this의 context object라고 할 수 있다. 여기서 context object란 this가 바라보고 있는 어떤 객체라고 생각하면 될 듯 하다. 크게 4가지 패턴이 있는데 1. 일반함수 실행: 함수 실행에서의 this는 전역객체(window)이다 2. 메소드 실행 : 메소드란, 객체의 속성으로 정의된 함수. 이 경우..
자 이제 데이터베이스를 쓸 db를 설치하자 이미 flask를 잠시 경험할때 mongodb를 설치해서 사용해 봤다. window환경에서 그냥 다운로드하고 설치후 robo 3t를 설치해서 사용했다. 또 파이썬 환경에서 pip로 pymongo를 설치후 사용했기에 그냥 썼다..ㅎㅎㅎ 이제 맥으로 넘어온 나에게 유닉스 계열의 설치는 살짝 어려운 감이 있지만 검색은 최고다. 난 homebrew를 통해 설치하고 .zshrc를 수정해서 alias설정을 해줬다. 자세한 방법은 zellwk.com/blog/install-mongodb/ Installing MongoDB on Mac (Catalina and non-Catalina) | Zell Liew Installing MongoDB on Mac (Catalina and..

이번에도 이어서 컨트롤러를 더 만져보자 우선 비디오를 클릭하면 비디오 상세페이지로 넘어가도록 해주자 mixins로 이동해서 videoBlock mixin에 링크를 걸어준다. 라우트를 걸어주고 video.id를 인자로 넣어준다. 이 id는 각 비디오에 부여된 id를 인자로 받게 된다. 이제 videoBlock을 사용하는 곳에서 입력할때 id:item.id를 추가로 보내주는 작업을하자. home 템플릿에서 videoBlock에 id 객체를 추가한다. 추가후 비디오를 클릭하면 url상에 비디오 id가 뜨게 된다. 이제 할일은 로그아웃을 클릭하면 로그아웃 페이지가 아닌 로그아웃후home화면을 접속하게 하겠다. 로그아웃 처리는 차후에 하고 일단 랜더링시 홈화면으로 redirect해줬다. 이제 logout 템플릿은..

이번엔 login과 user profile페이지를 다뤄보자. 역시 userController에 가서 get과 post방식의 두가지 컨트롤러를 만들어준다. 하나는 get 방식으로 로그인 페이지를 띄워줄 getLogin컨트롤러와 post방식으로 로그인이 이루어지면 홈화면으로 redirect해주는 컨트롤러 이렇게 만들어주고 로그인이 이루어지면 화면에 뿌려질 헤더 템플릿을 수정해주자. ul태그 하나 만들어주고 사진과 같이 작성했다. isAuthenticated는 요청이 인증 되었는지 확인하는 속성이다. user변수는 아직 데이터가 없기에 설정이 되진않았다. 이제 middleware에 가서 user정보를 객채로 만들어 주자 전역으로 설정할 user정보를 true로 설정하고 id: 1이라는 객체를 넣어줬다. 우선 ..