Looan's 개발 연습장

머리글 이번 시간에는 비디오를 업로드해보자. 비디오 업로드 우선 파일 업로드와 마찬가지로 업로드할 자리를 만들어주자. form(method="POST", enctype="multipart/form-data") label(for="video") Video File input(type="file", accept="video/*", required, id="video", name="video") 모든 형식의 비디오를 accept 했고, required 옵션으로 필수로 넣게 지정했다. 그리고 multer를 사용하기 위해 enctype를 설정해 주었다. 그리고 미들웨어를 생성해 주자. 기존의 아바타와 같은 미들웨어를 사용해도 상관은 없지만, 파일 사이즈의 제한을 위해서 하나 더 생성해 보자. export cons..

머리글 이번 시간에는 유저의 아바타 기능을 위해 파일 업로드 하는 방법을 알아보자. 파일 업로드 우선 업로드를 위해선 업로드할 공간을 만들어줘야 한다. 프로필 수정 페이지를 변경해 주자. form(method="POST", enctype="multipart/form-data") label(for="avatar") Avatar input(type="file", id="avatar", name="avatar", accept="image/*") ... label과 아바타 파일을 업로드하기 위한 input을 만들어주었다. 그리고 이미지 형식만 선택할 수 있게 accept 항목을 정해주었다. 그리고 미들웨어를 사용해야 하는데 이를 설치해 보자. npm i multer Multer는 파일을 업로드할 수 있게 해 준..

머리글 깃허브 로그인 파트를 계속 진행해 보자. Github Login 저번 시간에 유저가 다시 리다이렉트 할 수 있게끔 만들었다. 그 이후에 진행을 알아보자. 우리는 유저의 리다이렉트와 함께 깃허브를 통해 토큰을 받았다. 이 토큰을 Access 토큰으로 변경해 주는 작업이 필요하다. 컨트롤러를 수정해서 작업을 해보자. export const finishGithubLogin = async (req, res) => { const baseUrl = "https://github.com/login/oauth/access_token"; const config = { client_id: process.env.GH_CLIENT, client_secret: process.env.GH_SECRET, code: req.q..

머리글 이번 시간에는 간편하게 CSS 작업을 해주는 MVP.css와 조건문, 반복문, 그리고 Pug의 기능인 Mixin에 대해서 알아보자. MVP.css 아무래도 개발 중인 화면은 늘 못생겼다. 그래서 이를 보완하기 위해 css 작업을 간단하게 도와주는 스크립트를 하나 써보려고 한다. 바로 MVP.css다. https://andybrewer.github.io/mvp/ 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...

머리글 이번 시간에는 babel은 무엇인지, 그리고 nodemon은 무엇인지 알아보도록 하겠다. Babel? https://babeljs.io/ Babel · Babel The compiler for next generation JavaScript babeljs.io 'Babel은 JavaScript의 컴파일러다.' nodeJS는 대부분의 JavaScript 코드를 이해한다. 하지만 호환이 되지 않는 최신의 코드도 있을 것이다. 그래서 우리는 Babel을 사용해서 우리의 코드를 컴파일하는 방법을 사용한다. 우선 터미널에 명령어를 입력해 주자. npm i --save-dev @babel/core 다른 명령어는 이해가 가는데 --save-dev의 경우는 처음 보는 명령어다. 이는 package.json 파일..

머리글 이번 시간에는 package.json에 있는 dependencies와 devDependencies에 대해서 알아보겠다. dependencies? 우선 이전에 설치되었던 node_modules 파일과 package-lock.json 파일을 삭제해 보자. 그리고 터미널에 명령어를 입력한다. npm i 이전과는 다르게 그냥 install만 입력했다. 이렇게 입력을 하면 삭제했던 두 파일이 다시 생겨난다. 그 이유는 바로 package.json 파일에 dependencies 항목에 있다. package.json 파일은 license나 author 등의 정보도 담고 있지만, 프로젝트를 동작하기 위한 필요 모듈도 담고 있다. 그게 바로 dependencies 항목이다. 프로젝트를 혼자 개발하는 경우 크게 상..

머리글 2장은 프로젝트를 생성하고, Express와 Babel, Nodemon을 배우게 된다. 바로 시작하겠다. 프로젝트 생성 우선 프로젝트를 담을 폴더를 하나 생성하고 VS Code로 열어주자 이런 경로에다가 생성을 해보았다. 그다음 package.json 파일을 생성한다. 이게 뭔지 몰라도 일단 생성을 해보도록 하자. json이라는 형식은 파일에 정보를 저장하기 위해 만든 방식 중 하나다. 이를 nods.js에선 package.json이라는 파일로 만들어서 사용하게 된다. 이는 변경이 불가능하며 Package.json과 같이 한 글자만 바뀌더라도 사용이 불가능하다! 이렇게 파일을 생성했다면 nods.js 프로젝트를 만드는데 성공했다! 근데 파일에 아무것도 없고 뭐를 해야할지도 모르겠고, 이렇게 만들다..

머리글 꾸준히 강의를 듣던 중 가장 호기심이 생겼던 강의였다. 유튜브 클론 강의인데, 클론 대상보다는 프론트엔드와 백엔드를 동시에 학습이 가능한 풀스택 개발이라는 점이 많은 관심을 끌었다. 근데 강의 가격이 싼 편은 아니었다. 기존 카카오톡 클론 챌린지 수강 보상으로 받은 30% 쿠폰을 사용해서 252,000원이라는 가격에 구매를 했다. 지금 와서 보면 그렇게 비싼 강의는 아닌 것 같다.(아닌가?) 학습할 수 있는 내용이 상당히 많고, 풀스택으로 개발을 해볼 수 있다는 것이 가장 큰 메리트였다. 방학 중에 쉬엄쉬엄 들어서 꽤 오랜 시간 들었던 것 같다. 이번에 유튜브 챌린지도 마무리하고 복습 겸 해서 글을 남겨보려고 한다. 가장 처음엔 강의를 위해 필요한 준비물과 오류가 생겼을 때, 도움을 요청하는 방법..

후기다 후기 좀 많이 늦은 감이 있지만 뒤늦은 후기를 써보려고 한다! 기존에는 과정을 쭉 나열하면서 쓰려고 했지만, 지금 쭉 훑어보니까 굳이 그렇게까지 해야 하나 싶어서 그냥 쭉 작성해 보기로 했다. 진짜 완전 기초를 배울 수 있는 강의라고 생각하면 된다. HTML의 작성법, 태그, CSS, VS code, Git을 통한 버전 관리, Github 사용법, 그리고 Github를 통한 배포까지! 웹을 개발하기 위한 기초 중의 기초를 배우고, 우리에게 친숙한 카카오톡을 클론 코딩하며 재미도 빼놓지 않고 챙겨준다. 무얼 배우나요? 앞서 말했듯 다양한 과정을 챕터에 따라 배운다. 우선 1장에선 준비물과 HTML, CSS, 그리고 여기선 배우지 않지만 이들의 단짝인 JavaScript가 무엇인지를 이론적으로 훑고 ..