1. Algorithm Self Study
특정 문자열 세기
문자열에서 "a"가 몇 번 등장하는지 횟수를 구하는 함수를 만들려고 합니다.
반복문을 이용해 "a"의 등장 횟수를 변수 "count"에 할당하세요.
대문자 "A" 문자열도 "a" 에 포함입니다.
function countLetter(str) {
let count = 0;
let a = str.toLowerCase(); //소문자로 변환
let words = a.split("") // 공백 포함 알파벳으로 쪼개줌
// a.split(" ") 은 공백 기준 단어로 쪼개줌
for(let i = 0; i <= words.length; i++){
if(words[i] === "a"){
count = count + 1
}
}
return count;
}문자열 삽입
num을 입력받아 1부터 num의 값까지 각각의 숫자 사이에 "-"이 들어간 문자열을 만들어야 합니다.
num이 3일 경우에는 "1-2-3"입니다.
function makeNumber(num) {
let str = '';//빈 문자열
for(let i =1 ; i <= num; i++) { // i로 접근
str = str + i + "-"
if(i === num) { // i = 1, 2, 3, 4, 5
// num = 5 => 즉, 마지막 숫자만 같음. 마지막 숫자에만 적용
str = str.slice(0, -1)
}
}
return str
}
makeNumber(5) // 1-2-3-4-5
makeNumber(7) // 1-2-3-4-5-6-7
function makeNumber(num) {
let str = '';//빈 문자열
for(let i =1 ; i <= num; i++) {
str = str + i + "-"
}
return str.slice(0, -1)//음수 index일 경우 배열의 끝에서부터의 길이를 의미
}
makeNumber(5) // 1-2-3-4-5
makeNumber(7) // 1-2-3-4-5-6-7arr.slice(begin, end)
원본 배열은 유지하고 begin부터 end까지(end 미포함)의 새로운 배열을 반환
음수 index일 경우 배열의 끝에서부터의 길이를 의미
홀수 문자열
num을 입력받아 1부터 num까지의 숫자 중 홀수로 구성된 문자열을 만들어야 합니다.
function makeOdd(num) {
let str = '';
for(let i =1; i <= num ; i = i + 2){ // i = 1, 3, 5 ...
str = str + i;
}
return str;
}
makeOdd(5) // "135"
makeOdd(7) // "1357"
2. Backend Class
Server / Port
Nodemon
=> refresh 문제 해결
=> node가 아닌 nodemon으로 서버를 실행하게 되면 변경된 소스코드의 저장과 동시에 자동으로 서버의 갱신이 이루어짐
NODE 서버를 이용하면서 코드를 변경하게 될 경우, 변경한 코드를 웹 상에서 확인하려면 매 번 서버를 껐다가 다시 켜야 반영됨
NODEMON은 서버를 내리고 올리지 않아도 소스를 변경할 때 바로 감지해서 자동으로 서버를 재시작 해주는 TOOL
package.json 에서 알 수 있음
직접 작성 :"scripts": { "start:dev": "nodemon index.js"}
설치 :"dependencies": {"nodemon": "^2.0.19"}
Rest-API 만들기
라우팅
URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것
PATH는 서버에서의 경로 / HANDLER는 라우트가 일치할 때 실행되는 함수(화살표 함수형태)
app.METHOD(PATH, HANDLER)
게시글 조회(GET) API
보통 데이터는 하나의 값인 아닌, 여러 값으로 구성되어 있으므로 배열 안에 객체가 들어있는 형태
때문에 우리는 게시글 하나 하나를 객체로 표현하고, 게시글들을 모두 모아 result라는 하나의 배열 안에 담아줌
Request는 클라이언트(브라우저)에서 보낸 HTTP 요청이 들어있음
실제 데이터는 req.body객체 안에 담겨져 오게 됨
i.e) 브라우저 주소, 쿠키, 바디, 쿼리 등
Response는 다시 클라이언트(브라우저)로 응답을 보낼 때 사용
i.e) 쿠키, HTTP status 코드, json 등의 내용을 담아 보낼 수 있음
// const express = require('express')
import express from 'express' // require 대신 import 방식
const app = express() // app을 express 형식으로 선언
app.use(express.json()); // `express` 프레임워크는 json형태 지원 X.따라서 서버에서 json을 읽어오기 위해 해당 코드를 추가
app.get('/boards', (req, res) => { // handler 는 함수형태
// 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
const result = [ //json 형태
{ number: 1, writer: "철수", title: "제목입니다~~", contents: "내용이에요!!" },
{ number: 2, writer: "영희", title: "영희입니다~~", contents: "영희이에요!!" },
{ number: 3, writer: "훈이", title: "훈이입니다~~", contents: "훈이이에요!!" },
]
// 2. 꺼내온 결과 응답 주기
res.send(result);
});
app.listen(3000, () => {
console.log(`Example app listening on port ${3000}`)
})디버깅
컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산을 찾아내고 그 원인을 밝히고 수정하는 작업 과정. 일반적으로 디버깅을 하는 방법으로 테스트 상의 체크, 기계를 사용하는 테스트, 실제 데이터를 사용해 테스트하는 법
i.e) console.log()
게시글 등록(POST) API
app.post('/boards', (req, res) => {
// console.log(req.body); // 실제 데이터는 req.body객체 안에 담겨짐.
//어떤 값이 담겨 오는지 확인하고 싶으니까 디버깅으로 확인(실무에서 필요X)
// 1. 데이터를 등록하는 로직 => DB에 접속해서 데이터 저장하기
// 2. 저장 결과 응답 주기
res.send('게시물 등록에 성공하였습니다!!');
});
app.listen(3000, () => {
console.log(`Example app listening on port ${3000}`)
})Rest-API 요청 실습(postman)
- 프엔이 담당하는 플랫폼
- GET 요청을 보내어 게시글을 조회 요청(send)하면 백엔드가 작성한 데이터의 값을 응답으로 받아 올 수 있음
createTokenOfPhone → Rest-API로 만들기
터미널 메세지는 백엔이 확인
postman-body 메세지는 프엔이 확인
Swagger-Rest-API Docs 만들기
- 백엔드가 만들어 프엔한테 넘겨줌
- 들여쓰기에 매우 예민하니 주의하여 작성
- npm에서 복붙해서 수정
* @swagger
* /boards:
* get:
* summary: 게시글 가져오기
* tags: [Board]
* parameters:
* - in: query
* name: number
* type: int
* responses:
* 200:
* description: 성공
* content:
* application/json:
* schema:
* type: array
* items:
* properties:
* number:
* type: int
* example: 3
* writer:
* type: string
* example: 철수
* title:
* type: string
* example: 제목입니다~~~
* contents:
* type: string
* example: 내용입니다!!!
*/
/**
* @swagger
* /boards:
* post:
* summary: 게시글 등록하기
* tags: [Board]
* responses:
* 200:
* description: 성공
*/config.js
API 문서(swagger)를 만들어주는 기본 정보 및 설정
swagger 폴더 안에 스웨거와 세트로 만들어줌
// config.js
export const options = {
definition: {
openapi: '3.0.0',
info: {
title: '나만의 미니프로젝트 API 명세서!!',
version: '1.0.0',
},
},
apis: ['./swagger/*.swagger.js'], // swagger 파일들을 잘 읽어올 수 있도록 경로 설정
};3. HW
1. 회원 목록 조회 API 만들기
2. 커피목록 조회 API 만들기
// 1. get api 만들기
// 2. 엔드포인트 /users
// 3. postman에 api 요청할 때 5 회원정보 받아오기 (복붙)
// 4. 키 값 : email, name, phone, personal(주민등록번호 앞자리), prefer(내가 좋아하는 사이트)
// 5. 만든 API를 Postman으로 요청해 보고, 요청과 응답이 모두 보이게 캡쳐
import express from "express";
import swaggerUi from "swagger-ui-express";
import swaggerJSDoc from "swagger-jsdoc";
import { options } from "./swagger/config.js";
const app = express();
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerJSDoc(options)));
app.get("/users", (req, res) => {
// 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
const result = [
{
email: "aaa@naver.com",
name: "철수",
phone: "010-1234-5678",
personal: "220110-2222222",
prefer: "https://naver.com",
},
{
email: "bbb@naver.com",
name: "동희",
phone: "010-4556-7664",
personal: "220110-2222222",
prefer: "https://naver.com",
},
{
email: "ccc@naver.com",
name: "영이",
phone: "010-4229-8686",
personal: "220110-2222222",
prefer: "https://naver.com",
},
{
email: "ddd@naver.com",
name: "예지",
phone: "010-8845-9395",
personal: "220110-2222222",
prefer: "https://naver.com",
},
{
email: "eee@naver.com",
name: "민수",
phone: "010-3495-3994",
personal: "220110-0000000",
prefer: "https://naver.com",
},
];
// 2. 꺼내온 결과 응답 주기
res.send(result);
});
app.get("/starbucks", (req, res) => {
// 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
const result = [
{
name: "아메리카노",
kcal: 20,
},
{
name: "카페라떼",
kcal: 140,
},
{
name: "돌체라떼",
kcal: 180,
},
{
name: "바닐라라떼",
kcal: 260,
},
{
name: "바닐라 프라푸치노",
kcal: 360,
},
{
name: "자바칩 푸라푸치노",
kcal: 400,
},
{
name: "자몽허니블랙티",
kcal: 140,
},
{
name: "그린티라떼",
kcal: 280,
},
{
name: "펌킨스파이시라떼",
kcal: 160,
},
{
name: "에스프레소",
kcal: 5,
},
];
// 2. 꺼내온 결과 응답 주기
res.send(result);
});
app.listen(3000, () => {
console.log(`Example app listening on port ${3000}`);
});3. API 명세서 만들기(Swagger)
* @swagger
* /users:
* get:
* summary: 회원 목록 가져오기
* tags: [users]
* responses:
* 200:
* description: 성공
* content:
* application/json:
* schema:
* type: array
* items:
* properties:
* email:
* type: string
* example: aaa@naver.com
* name:
* type: string
* example: 철수
* phone:
* type: string
* example: 010-1234-5678
* personal:
* type: string
* example: 220110-2222222
* prefer:
* type: string
* example: https://naver.com
*/