꾸준한프로그래밍

0.공부인증 공부 시작 21 : 28 당근 거래 21:30 ~ 22: 10 공부 종료 23 : 44 어제 소셜 로그인 복습을 하다가 멘탈 바사삭이라서 오늘은 그냥 내가 평소에 궁금했던 클라우드 수업을 먼저 들었다..... 여튼 소셜 로그인 마스터했으면 좋겠다. 1. 클라우드란 무엇일까 서버는 보통 원으로 표기함 (그냥 참고) 서버가 무수히 많아서 클라우드라고 부르게 되었음. 사용자는 필요한 컴퓨팅 파워 만큼 사용할 수 있음. AWS에서 가장 대표적인 서버 - EC2 파일 저장소 - S3 (이미지, 영상, 정적 웹 호스팅 등) 관계형 데이터 베이스 - RDS 그러면 클라우드를 왜 이용해야하는지 -> 하드웨어적인 서버 구축 비용 및 관리 비용을 낮출 수 있음. -> 서버 확장등의 작업의 편함. 2. 아마존 ..

0.공부인증 공부 시작 12 : 28 공부 종료 17 : 54 소셜 로그인 복잡함... 포기하면 편하다지만,,,, 요즘에 소셜 로그인이 안되는 웹이 어딨누... 1. GraphQL [ CH - 16 ] - 페이스북에서 발표한 새로운 API규격 - type 시스템을 갖추고 있음 - Apollo, Prisma 등 다양한 오픈 소스툴들이 있음 Query - query는 데이터 요청에 사용됨. - REST 의 GET과 동일함 Mutation - 변경에 사용됨. - REST의 POST, DELETE, UPDATE 등과 같음 2. OAuth 에 대해서 - 유저 진입장벽이 낮아짐. - 유저 허용 여부에 따라 이메일, 프로필 사진, 닉네임 등 기본 정보를 가져올 수 있음. - 페이스북 로그인 기능 추가하기 https:..

0.공부인증 공부 시작 22 : 15 공부 종료 23 : 45 1. GItHub 관리 CLI 만들기 https://www.npmjs.com/package/commander commander the complete solution for node.js command-line programs www.npmjs.com 를 활용하여, Node 환경에서 쉽게 Commander 를 작성할 수 있도록하고, https://www.npmjs.com/package/octokit octokit The all-batteries-included GitHub SDK for Browsers, Node.js, and Deno www.npmjs.com 를 통해서는 Github 환경을 조작할 수 있음. - 레파지토리를 만들거나 이슈를 ..

0. 공부인증 공부 시작 21 : 35 공부 종료 23 : 25 본가에서 공부를 하는 마지막 날이다. 아쉽기는 하지만, 여튼 쉽지 않은 공부 과정이었다. 노트북 한 화면에 티스토리, 패캠, VScode를 전부 활용하는 것은 ㄹㅇ무리다. 1. 이미지 리사이징해서 돌려주기 우선 클라이언트가 접속하면 unplash에서 이미지를 조회 후, url을 가져옴. 이후 이미지를 스트림 형식으로 클라이언트에 스트림 되는 방식인데, 이미지를 캐싱처리하면 소요시간을 줄일 수 있음. const imageFilePath = path.resolve(__dirname, `../unsplash-images/${query}`) // 파일이 존재하는지 확인 - 이미지 캐싱 여부 확인 if (fs.existsSync(imageFilePa..

0. 공부인증 공부 시작 10 : 17 공부 종료 11 : 45 여튼 집에서 공부하기란 쉬운 일이 아니다. 이번 추석 연휴기간에는 진짜로 공부를 이렇게라도 하니깐 좋긴한데, 빡세긴하다...😂 1. unsplash 에서 사진 가져오기 unplash 에서 제공하는 api를 활용해야한다. 또한 일반 브라우저에서 제공하는 fetch를 node에서 제공하는 node-fetch 를 활용해서 이미지를 다운 받을 수 있다. 해당 라이브러리 또한 스트림을 활용할 수 있으며, 클라이언트에게 스트림의 형태로 데이터를 내려줄 수 있다. import { createApi } from 'unsplash-js'; import nodeFetch from 'node-fetch'; const unsplash = createApi({ a..

0. 공부 인증 공부시작 10시 15분 공부종료 23시 45분 으어 집에서 노트북으로만 공부를 하려고 하니 미쳐버리겠다. 누가 모니터좀.... 챌린지의 최대 고비가 찾아왔다. 각설하고, 여튼 오늘도 공부를 시작해보자😄 1. 몽고 DB에 익터렉션 정보 저장하기 -몽고 DB와 연결하기 mongo.js const { MongoClient } = require('mongodb') const uri = `주소` const client = new MongoClient(uri, { userNewParser : true, userUnifiedTopology : true }) module.exports = client main.js ~ mongoClient = require('./mongo') ~ // 데이터베이스에 한..

0. 공부 시간 공부 시작 : 21 : 32 공부 종료 : 23 : 48 1. 요구사항과 프로젝트 설계 - 실시간 채팅 - 데이터베이스에 채팅 내역을 저장 프론트엔드 구성 -PUG -TailwindCSS 백엔드 구성 -Koa -koa-websocket -MongoDB 2. 프론트엔드 UI 구성하기 초기 세팅 const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { ctx.body = 'Hello World' // express 와 달리 next에서 프로미스를 돌려줌 await next() ctx.body = `[${ctx.body}]` }); app.use(async ctx => { ctx.body = `` }) a..

0. 공부 인증 공부 시작 20: 08 공부 종료 21 :55 패캠 강의를 한 챕터단위로 공부하고 있는데, 항상 2시간 정도가 걸리는 것 같다. 전에는 그냥 사용하니깐 사용해야지 였는데, 이제는 어떤 원리로 작동하는지 알아가는 과정이 너무 좋다. 여튼 금일 정리한 노트는 아래 있다. 1. Pug 사용하기 설치하기 :: npm i pug app.set('view engine', 'pug') app.use('/', (req, res) => { res.render('index') }) src/views/index.pug --> 해당 경로가 기본 views PATH // 변수사용하기 res.render('index', { messgae : "hello" }) html head body div hello, pug..

0. 공부 기록 공부 시작 16 : 38 중간 저녁 + 대학 과제 (약 4시간) 공부 끝 23 : 25 총 패캠 공부 시간 : 약 3시간 백엔드 Part1이 끝났다. 사실 백엔드 강의를 그리고 이어서 Part1 부분만 작성하는 블로그 글을 작성하는 것이 목표였는데, ch08 은 리팩토링 과정에 대한 강의라서 블로그에 작성할만한 내용이 많이 없었다. 그래서 본래 내일 공부할 부분을 미리 작성했다. 백엔드 Part 1 1. 리팩토링을 왜 하는지 코드를 작성도 하지만 코드를 읽고 해석해야하는 경우도 많음. 그럴 때 최소한의 시간을 투자하려면 처음부터 코드를 깨끗하게 만들어두면 좋음. -> 콜백함수를 사용하여 깊게 들어가는 것은 절대 좋은 코드가 아님. -> Promise 나 async await 기능을 활용하..

0.공부 기록 패캠 시작 12 : 20 점심시간 13:00 ~ 14 :00 패캠 끝~! 15 :30 인증샷 공부 노트 작성 = 코드블럭입니다. 컴퓨터 공부 특성 상 노트를 따록 작성하는 것보는 블로그의 코드블럭에 저장하는 것이 더 효과적인 것 같습니다 1. Stream 이란 스트림은 스트림 가능한 소스로부터 데이터를 작은 청크로 쪼개 처리할 수 있음! 큰 데이터(영상 등)를 처리해야 하거나 비동기적(네트워크 등)으로만 얻을 수 있는 데이터를 처리해야 할 때 유용함. -> 큰 데이터를 쪼개어서 연산 실행 스트림의 일반적인 구현 형태 const fs = require('fs') const rs = fs.createReadStream('file.txt') rs.on('data', data => {}) rs.o..