Enjoy Programming

코멘트 작업을 해주는데 프론트 엔드 작업을 하기전에 백엔드 부터 해본다. root를 설정해주러 routes.js에서 api part에 url 설정을 해주고 videoController에서 postAddComment컨트롤러를 만들고 (videoDeail컨트롤러에서 populate를 이용해 creator와 comments를 가져온다) video, user를 이용해 comment를 만들고 넣어준다. 그리고 apiRouter에서 post방식으로 라우터 하나 만들어준다. 이제 템플릿에가서 코멘트 폼을 만들고 코멘트 리스트를 만들자. 그리고 이번에는 ajax를 통해 서버로 코멘트 정보를 보내고 받아오겠다. 프론트에서 작동할 addComment.js하나 만들고 submit 이벤트 핸들러를 하나만들어서 submit 이..

이번에도 이어서 컨트롤러를 더 만져보자 우선 비디오를 클릭하면 비디오 상세페이지로 넘어가도록 해주자 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이라는 객체를 넣어줬다. 우선 ..

자 오늘 css master challenge 두번째 과제이다... 이제 막 그리드를 배웠다.. 과제물을 보고서 음 감이 오다가도 안왔다. 과제물은... 이 포스터를 clone하는 것이다~ 일단 html 코드부터 보자 일단 큰 그리드박스를 만드려고 하나의 grid-content를 만들고 그 안에 header, content, aside, footer를 만들었다. 그리고 그안에 텍스트들은 span태그를 이용했다 이제 css를 보자. 우선 큰 그리드 박스를 만들어줘야 된다. 포스터상에 가운데 박스를 보니 3분할로 나누면 되고 row도 3분할이면 될 거같다. 사이즈는 실측이랑 좀 다르긴 한데 column은 3개로 200px씩 나누었고 row는 사이즈 오차는 있지만 일단 비슷하게 세개로 나누었다. 그리고 각 박..

노마드 코더 챌린지 2번째 css-master 코스다 현재 코코아 클론 챌린지는 끝냈고 css-master코스와 vanilla javascript 코스 두개를 병행한다 그리고 유튜브 클론코딩과 es6강의도 함께 병행 하고있다.~ 시간이 부족하다 ㅋㅋ 어제 첫 레이아웃 챌린지는 이 포스터를 클론했다. flex-box를 이용해서 하는 건데 우선 내가 짠 html코드는 이렇다. 총 세개의 섹션으로 구분하고 헤더부분에 heading tag 두개 그리고 보더라인 아래 리스트 형태의 텍스트가 있는데 이것은 ul과 span으로 구분하고 ul에 li를 다 때려박았다. 마지막 섹션은 서클들이 들어가는데 아무래도 배운내용이 flex-wrap을 이용하는 것 같으니 하나의 박스에 다담았다 위 ul도 마찬가지다. 이제 css를..

자 이번엔 아래 내가 작성한 메세지를 만들어주자 일단 외부 메세지를 복붙하자 복붙하고 아래로 간격을 주자 필요없는 이미지 태그와 작성자 태그는 삭제를 해주고 메세지 박스가 왼쪽에 있는걸 오른쪽으로 당겨와야 한다~ 이때 message-row의 modifier를 만들어주자 클래스명 하나를 더 생성후 이미 message-row는 flex상태이므로 modifier의 justify-content를 flex-end로 오른쪽으로 정렬 시킨다. 그리고 modifier의 mesaage__bubble의 배경색을 전역으로 설정한 --yellow색상으로 바꿔주고 border-top-right-radius:0; border-top-left-radius: 15px 로 설정해서 오늘쪽 상단을 뾰족하게 만들어준다. 이제 메세지 인포..