학습 기록/데브코스 웹 풀스택 4기 31

백엔드 기초: 유튜브 채널 페이지 만들기

date/ 24.09.09. /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/  저번에 로그인 페이지까지 간결하게 구현해 보았습니다. 오늘은 채널 API를 설계하고 페이지를 구현해 보겠습니다. 📌자바스크립트에서 빈 객체를 확인하는 방법이 3가지 있습니다. 객체.keys()를 활용하는 방법, for문을 이용하여 안에 property가 있는지 하나하나 체크하는 방법, lodash라는 라이브러리를 활용하는 방법입니다. 그 중 가장 추천하는 방법은 객체.keys()를 활용하는 방법입니다. const obj1 = {}const obj2 = { message : "안 비었음" }console.log(Object.keys(obj1))console.log(Object.k..

백엔드 기초: 전체 조회, forEach와 map, delete

date/ 24.09.05. /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/  📌전체 유튜버가 조회되는 화면을 만들다 말았습니다. 마저 제작해 보겠습니다.app.get('/youtubers', (req, res) => { db.forEach(function(youtuber) { console.log(youtuber) }) res.json(db.values())}) 이런 코드를 일단 추가해 주었습니다. 잘 실행되는지 로그를 통해 확인해 보겠습니다. 잘 뜨는군요! 그럼 다음 단계로 넘어가서 ... app.get('/youtubers', (req, res) => { var youtubers = {} db.forEach(function(v..

백엔드 기초: postman과 post

date/ 24.09.04. /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/   📌method 중 POST는 웹 브라우저로 테스트가 안 됩니다. 이런! 저는 회원 가입 기능도 넣고 싶고, 유튜브 페이지를 만든다면 유튜브 채널도 개설할 수 있게 하고 싶은데 어떻게 해야 할까요? 사실 이런 예시에서 사용자가 등록해야 하는 데이터는 오픈된 상태로 보내면 안 됩니다. 당연히 숨겨서 보내야겠죠? 이러한 데이터를 (http 템플릿 중) body에 숨겨서 POST로 전송합니다. 즉, 데이터가 body에 숨겨져 와야만 POST인 줄 아는 것이죠. 그럼 테스트는 대체 어떻게 하나, 싶으니 소개합니다. POST를 위한 테스트 도구, postman입니다.  구글에 postm..

백엔드 기초: map object, 함수

date/ 24.09.03. /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/  📌어제까지만 하더라도 우리는 string만 db에 담아 화면에 뿌려보았습니다. 음... 저는 싫어요. 다른 것도 담고 싶다면 어떻게 하면 좋을까요?const express = require('express')const app = express()app.listen(1234)app.get('/:id', function(req, res) { let {id} = req.params id = parseInt(id) if (db.get(id) == undefined) { res.json({ message : "없는 상품입니다." }) ..

백엔드 기초: 객체, map, req.params

/date 24.09.02. /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/  📌자바스크립트는 특징이 있습니다. const, params를 문자열로 받지만, 그렇게 해서 받은 문자열이 숫자로 이루어졌다면 숫자처럼 알아서 변환하여 계산해 주곤 합니다. 다른 언어에서는 통하지 않는 부분이니 parseInt를 사용하는 버릇을 들이도록 합시다.if ((req.params.n - 10) > 0) { console.log("url로 전달받은 숫자가 10보다 크네요")} //정상작동: 문자열을 숫자처럼 알아서 바꿔서 계산let number = parseInt(req.params.n) - 10//parseInt: 문자열을 숫자로 변환  📌그럼 req.params를 사..

백엔드 기초: Express 기본

/date 24.08.30. /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/  Expressexpress는 사실 http와 많이 다르지 않습니다. express 안에 http가 포함되어 있기도 하구요. 외부 모듈이기 때문에 figlet처럼 npm을 통해서 다운로드 가능합니다. 터미널을 열고 npm i express 명령어를 입력해 줍니다.  성공적으로 설치가 완료되었습니다. 그럼 express를 구동해 보도록 하겠습니다. const express = require('express')const app = express()//왜 const? http는 let이던데...//let은 변수, const는 상수//createServer가 없고 express를 app에..

백엔드 기초: node.js, npm

/date 24.08.29. node.js를 뜯어보기 전에 저번 강의에서 언급하였던 HTTP method를 다시 살짝 살펴본 후 정리해 보도록 하겠습니다. 공부하며 정리한 내용이니 정확하지 않은 내용이 포함되어 있을 수 있습니다. 댓글로 알려주세요. HTTP methodHTTP method는 HTTP에 담아 보내는 나의 목적이라고 볼 수 있습니다. (이전 게시글 중 HTTP 템플릿의 body에서 언급하였던 목적이 바로 이것입니다.) 이름에서도 알 수 있듯 HTTP는 규약이라 사용을 위해 정해둔 용어가 따로 있습니다. 외울 필요는 없지만 때에 맞게 적절한 method를 찾아서 사용할 필요는 있습니다. method 몇 가지를 소개합니다.생성(=등록) : POST조회: GET수정: PUT / PATCH삭제: ..

백엔드 기초: API, REST API, URL

/date 24.08.27.과제를 다 해 둔 덕에 내일 수강으로 되어 있는 강의를 미리 들었습니다. 부지런함 어떤데~ 먼저 백엔드를 다시 돌아봅시다.백엔드는 어떤 구조를 갖추고 있을까요?앞서 글에서도 첨부하였던 이 사진을 다시 가져와 보았습니다. 클라이언트 = 프론트엔드? 전혀 아니다!클라이언트 = 프론트엔드라면 네이버의 메인 화면을 우리의 컴퓨터에 갖고 있다는 소리가 됩니다. 그러니 당연히 등호가 성립할 수 없겠죠? 백엔드의 입장에서 클라이언트는 두 종류가 있습니다.Literally 사용자: 백엔드에게 무언가를 요청하기 전 프론트에게 요청합니다프론트엔드 위의 그림에서 웹 서버, 웹 어플리케이션 서버, 데이터베이스는 말하자면 백엔드의 놀이터라고 할 수 있습니다. 웹 서버의 경우 정적 페이지에 대해 대응하..

ERD를 바탕으로 데이터베이스 생성하기

/date 24.08.26. 어제 과제하면서 이런 글을 올렸습니다. ERD에 대한 이해와 데이터베이스 모델링/date 24.08.25.  오늘의 목표는~ 데이터베이스 관계 다이어그램(ERD)을 생성하고 이를 바탕으로 데이터베이스를 직접 설계하여 간단한 쿼리를 작성하는 것! 가상의 공연 예매 사이트를 구축한다고romiwaves.tistory.com 어제 작성하였던 ERD에서 살짝 수정을 거쳤고, 이를 바탕으로 데이터베이스를 생성한 다음 해당 테이블에서 사용할 수 있는 입력, 수정, 조회 SQL문을 작성하는 것이 과제입니다. mariadb 데이터베이스 생성하기mariadb를 실행해서 showtime이라는 이름의 데이터베이스를 만들어 주었습니다. 그럼 이제 테이블을 하나씩 만들어 주겠습니다. 먼저 User 테..

ERD에 대한 이해와 데이터베이스 모델링

/date 24.08.25.  오늘의 목표는~ 데이터베이스 관계 다이어그램(ERD)을 생성하고 이를 바탕으로 데이터베이스를 직접 설계하여 간단한 쿼리를 작성하는 것! 가상의 공연 예매 사이트를 구축한다고 생각했을 때 데이터베이스를 구현하고 해당 DB를 위한 SQL문을 작성해야 합니다. 준비되지 않은 나에게 성큼 다가온 과제... ERD가 뭔지도 안 알려주셨잖아요 흑흑 그렇지만 울지 않습니다 나는 어른이니까. 정보의 바다를 헤엄치며 나에게 주어진 문제를 해결해 보겠어요.  그래서 ERD가 뭔데?ERD에 대해 이야기하기 전에 데이터 모델링의 개념부터 살펴보겠습니다. 데이터 모델링이란 데이터 시스템 구축의 대상이 되는 내용을 분석하고, 약속된 표기법으로 표현하는 것을 의미합니다. 그리고 이렇게 모델링 된 내용..