오프라인 코드캠프 4일차 TIL

전은평·2023년 3월 19일
0

TIL

목록 보기
4/16
post-thumbnail

for 반복문

- break
: 사용하면 원하는 구간에서 반복문 종료할 수 있음
: 알고리즘 문제에서 유용

for(let i = 0 ; i<5; i++){
  if(i===2){
    break
  }
  console.log(i)     // 0 1
}

- continue
: 해당 구간의 반복문을 실행하지 않음(건너뛰고 다음 반복문 실행 의미)
: 알고리즘 문제에서 유용

for(let i = 0 ; i<5; i++){
  if(i===2){
    continue
  }
  console.log(i)     //0 1 3 4 
}

for - in 반복문

: 객체를 반복시 => key 값 반복
: 배열 or 문자열 반복시 => 배열 or 문자열의 인덱스 번호 반복
: for ( let key in object / array / string )

// 객체 예시
const obj = {
  name:"otter",
  age:30
}

for(let key in obj){
  console.log(key)   // 'name' 'age'
}

// 배열 예시
const arr = [10,20,30,40,50]

for(let key in arr){
console.log(key)    // 0,1,2,3,4

// 문자열 예시
const str = "안녕하세요"

for(let key in str){
console.log(key)
}					// 0,1,2,3,4

for of 문

: 알고리즘 테스트시 작동 시간이 중요할 땐 불리?!
: 각각의 요소들을 가져올 수 있다/ 문자열 / 배열 사용가능
: for( let key of object )

const obj = {
  name:"otter",
  age:30
}

const str = 'abcde';
const arr = [1,2,3,4,5]

for(let data of str){
  console.log(data) 
//
'a'
'b'
'c'
'd'
'e'
}

for(let data of arr){
  console.log(data)
  //
  1
  2
  3
  4
  5
}
≈

forEach

: 배열에만 사용할 수 있다
: 요소와 인덱스 값 반복
: Array.forEach(function())

const arr = ['a','b','c']

arr.forEach((data,idx)=>{
  console.log(data,idx) 
})

: 반복문이 아니라 매서드 중 하나이기에 break / continue 사용 불가

const arr = ['a','b','c']

let check = true;
arr.forEach((data,idx)=>{
  if(check===true){
    if(idx===1){
      check=false
    }
    console.log(idx)
  }
})

: 이렇게 중단시키는 것 가능..


while 반복문

: 최초식 조건식 증감식이 분할되어 사용
: for 와 동일한 범위로 사용가능
: while()
:

let answer = 0; // 로봇 움직인 횟수
let current = 1; // 로봇의 현재 위치

while(current !== 100){
  answer ++  
  current ++;
}

answer

어제까진 API에는 어떤 종류(rest-API or Graphql-API)가 이 있고, 어떠한 방식으로 구동되는지에 대한 이론적으로 공부를 했다면! ( +프론트엔드 개발자라 가정하고 ground 작동법 공부) 오늘은 rest-API 생성하는 방법에 대해 알아보았다. 'rest API'는 'express'라는 프로그램을 통해 생성하고 'swagger'를 이용하여 프론트엔드 개발자들이 작업을 하면서 참조할 수 있는 API docs까지 만들어 보았다. 이를 알아보기 전에 서버와 포트의 개념부터 알아보자!


서버란?

서버프로그램의 줄임말로 누군가의 접속을 위해서 24시간동안 켜져있는 프로그램!? 이라고 간단하게 이해하면 될 것 같다. 서버에는 프론트엔드 서버(프로그램), 백엔드 서버(프로그램), 데이터베이스 서버(프로그램) 이렇게 존재한다.

프론트엔드 서버는 클라이언트가 웹브라우저를 이용해 서버에 접속을 요청할 때 관련 HTML,CSS,JS를 보내주기 위해 24시간 켜져있는 서버, 백엔드 서버는 프론트엔드 서버로부터 API등과 관련하여 요청을 받아 이를 처리해주기 위해 24시간동안 켜져있는 프로그램, 마찬가지로 데이터베이스 서버는 백엔드 서버로부터 요청을 24시간 대기하기 위한 프로그램으로 인터넷이 되는 엑셀 프로그램?! 정도로 생각하면 될 것 같다

그렇다면 서버 컴퓨터와 서버실은 뭐지? 🤔
그전에 CPU , RAM , DISK 가 무슨 일을 하는지 아주 간단하게 이해해보자!

  • CPU : 계산
  • RAM : 변수에 '임시' 저장 ➔ 컴퓨터 껐다 키면 사라지는 대신 빠르다는 장점
  • DISK : 엑셀 등에 '영구' 저장 ➔ 껐다 켜도 유지되는 대신 느리다는 단점

위에서 언급했듯이 RAM에는 임시저장의 기능이 있다. 만약 서버에 접속자가 많아지면 API 요청도 많아질텐데, API 요청수만큼 RAM을 통해 저장하는 양이 많아지게 된다. 하지만 RAM의 저장공간은 무한하지 않기 때문에 한계가 존재. 이를 해결하기 위해선 메모리 용량을 업그레이드 하거나, 더 좋은 CPU를 사용함으로써 처리 속도를 높이면 된다.
이러한 더 큰 메모리 & 좋은 CPU를 보유한 컴퓨터를 서버컴퓨터로 이용하고 이를 저장하는 곳이 서버실이다. 아무래도 서버실은 많은 24시간 동안 내내 구동되고 있는 서버 컴퓨터들을 보관하다보니 열이 많이 날 수 밖에 없는데, 온도관리를 잘 해줘야 한다


포트란?

해당 IP주소로 들어가기 위한 문(Door)이다. 포트 번호는 0번~65535번까지 생성할 수 있으며 동일한 하나의 컴퓨터 내에서는 중복이 불가능하다!

예를 들어 내 컴퓨터에서 만든 페이지에 3000번의 포트를 할당했다고 가정하면
http://localhost:3000
여기서 3000이 포트번호이고 localhost는 도메인이다. 도메인은 IP주소를 알아보기 쉽게 이름 형태로 생성한 것이라 생각하면 됨! 실제 IP 주소는 127.0.0.1

또한 http로 시작하는 포트번호는 80, https로 시작하는 포트번호는 443으로 이는 기본 포트이기 때문에 생략 가능하다. 그렇기에 우리가 평소 접하는 https://naver.com의 경우에도 포트번호가 생략되어 있다고 보면 된다. 여기서 http와 https의 또다른 차이가 있는데, 보안이 더 잘되어 있는 페이지가 https, 아닌 경우가 http이다.


nodemon으로 refresh해결하기

기본적으로 백엔드 서버를 수정(소스코드)하게 되면 서버가 바로 반영되지 않고, 즉 refresh가 되지 않고, 매번 서버를 종료했다 다시 켜는 과정을 해야했다. 이를 해결하기 위해 nodemon이라는 도구를 사용해보았다! nodemon을 이용하여 서버를 실행하게 되면 앞서 말한 것과 같이 변경된 소스코드의 저장과 동시에 자동으로 서버가 갱신됨~

  • 설치방법
    : 해당 터미널 경로에 package.json 파일이 있는지 'ls' 명령어를 통해 확인하고 있다면 nodemon설치 가능

    : package.json에 nodemon이 추가되어 있는 것 확인

    : 터미널창에 nodemon 파일명.js 입력을 하게 되면 아래와 같이 에러문구가 출력되는데.. 이를 해결하기 위해선 package.json파일에 script를 추가해야한다. 이건 생각보다 간단하니 위의 사진을 보면 됨!! 여기서 'start:dev1' 부분은 원하는 것으로 수정가능!
    보통 start:dev라는 문구로 이용을 많이 한다하니 참고하자~
    아! 그리고 마찬가지로 서버 종료하는 단축키는 '컨트롤 C'
    까먹지 말자.. 까먹고 종료안하면 다른 서버랑 충돌 일어나니깐..
    조심 또 조심 😂

rest API 실습

설치 및 기본 설정

rest API 는 'express' 라는 도구를 사용해서 만들게 됨.

express 공식사이트
https://expressjs.com/en/guide/routing.html

위 사이트에서 설치법과 라우팅 방법등 상세하게 나와있으니 docs를 읽어보는 공부를 많이 하자! 일단 설치방법은 해당 터미널에 'yarn add express' 입력 후 아래의 코드를 입력!

require는 과거에 많이 사용했던 방법으로 오늘날에는 import 기능이 가능해서 이 기능을 자주 쓰도록 하자

import express from 'express'
const app = express()  // app이라는 변수를 통해 express 기능 선언

app.get('./' , (req,res,next) => {     //get의 첫번째 매개변수는 해당 API의 endpoint를 의미
	res.send('hello world')
})

app.listen(3000,()=>{}) // 3000번 포트번호에서 서버로 사용하겠다는 의미, listen기다린다는 의미

두번째 매개변수 자리에는 req,res,next를 매개변수로 하는 함수가 들어간다. req는 요청, res는 응답, next는 다음 함수가 존재하면 다음 함수로 넘어간다는 의미로 보통 생략되어 있음.

req에는 클라이언트(브라우저)에서 보낸 HTTP 요청이 들어있다. 구제척으로는 요청을 보낸 브라우저 주소, 쿠키, 바디, 쿼리 등이 담겨있고 실제 우리가 활용하는 데이터는 객체 형태로 body에 담겨져 있다.
이를 활용해서 데이터를 이용!!!!!
예를 들어 아래의 방식을 적용해보면 내가 원하는 key의 value값을 가져와 쓸 수 있다.

app.post('./boards',(req,res)=>{
	res.send("등록성공")
}).then((req)=>{
	console.log(req.body.KEY값) /// 해당 데이터 정보 콘솔 출력
})

res에는 서버에서 다시 클라이언트(브라우저)로 응답을 보낼 때 사용하는데 쿠키, HTTP status 코드, json 등의 내용을 담아 보낼 수 있다. 위의 코드에서는 'hello world'라는 문구를 응답해준다고 보면 되겠다.

서버 작동 및 추가적 사항

해당 터미널에서 node 파일명.js 입력하면 됨. nodemon을 사용하려면 nodemon 파일명.js를 package.json 파일에 scripts등록하면 됨!

rest-API의 경우 postman이라는 API 연습도구가 있는데 거기서 다양한 기능(get,post,put,delete....) 연습가능!

post 등록의 경우 포스트맨의 Body 부분을 클릭하고 raw형식의 JSON을 선택하고 아래 데이터를 작성하면 됨.

하지만 이렇게만 하면 데이터가 제대로 읽어오지 않는 현상을 겪게 된다. 이는 express 프레임워크에서는 JSON형식의 데이터를 지원하고 있지 않기 때문이다. 그렇기에 아래의 코드를 추가적으로 입력해줘야 정상작동함!

app.use(express.json())

swagger 작성

swagger란 쉽게 이야기하면 'API 작성법'이다!
강의를 수강하면서 swagger는 프론트엔드 개발자들과 협업시 아주 중요한 부분이라는 생각이 들었다. 아무리 뛰어난 기능의 API를 개발한다해도 프론트엔드 개발자들과 제대로 된 소통이 안되면 없는 기능과 마찬가지가 아닐까.. 또한 내가 만약 프론트엔드 개발자고 제대로 된 swagger를 안내받지 못했을 경우 상상을 해보니 참 난처할 것 같다는 생각이 들었다. 그러니 실제 나중에~ 개발자로 근무를 하게 된다면, 항상 신경써서 작성해야 한다는 점! 명심하고 업무에 임해야징 👨🏻‍💻

swagger 설치법 및 기본 설정

공식 사이트
: https://swagger.io/

npmjs 사이트
: https://www.npmjs.com/package/swagger-ui-express

일단 설치법은 위의 npmjs 사이트에서 조회가능하지만 터미널에 yarn add swagger-ui-express 입력하면 됨!

기본설정 입력 값!
위와 마찬가지고 require은 import로 변경!
swaggerDocument는 작성한 것이 있다면 저렇게 하면 되지만 강의에선 swagger-jsdoc를 이용했다. 일종의 swagger 도구라고 생각하면 됨!
설치법은 yarn add swagger-ui-express swagger-jsdoc 이렇게 프로그램간 간격을 두면 여러개 한번에 설치 가능!

위 사진은 swaggerJsdoc을 사용하기 위해 선언하는 문구 및 swagger페이지의 타이틀 및 버전을 변경가능함

config.js 라는 파일 하나 만들어서 관리했는데 이 방법이 훨씬 편하고 좋음!

또한 여기서 apis의 의미는 참조할 swagger의 출처를 작성하면 됨.. 이거 내가 강의 속도를 못 따라가서 캐치 못한 부분.. 덕분에 크게 고생한 적이 있기에 못 잊어... 🫠

위의 사진은 docs의 상세설명 부분 인데 사진처럼 express 명령 위에 적어둬도 되고 따로 파일 하나 만들어서 거기서 전체적인 swagger 작성해도 됨!
따로 관리하는게 보기도 좋고 아주 편함~
예) users.swagger.js

주의할 점!!! 여긴 들여쓰기 하나하나 아주 민감하게 반응하니 주의해서 작성해야 서버연결됨.. 이건 겪어봐야 앎...^^........🤬


내가 겪은 오류

1)
package.json과 node_modules 같은 선상에 있어야 한다
나는 설치를 잘못해서인지 이유는 모르겠지만 node_module파일이 swagger안쪽에 만들어져서.. 작동이 안된 경험이 있다..
그래도 지금 배우는 단계에서 알게 되어 기쁘다 하하 🙃


2)
postman으로 post할 때 JSON 타입으로 send해야하는 것
이것도 마찬가지로.. 타입을 JSON으로 안바꾸고 실행을 했다가 결과값이 안나와서 잠깐 고생한 경험이다.. 잘 알아두자!

  • 추가로 알게 된 것
    yarn install 명령어 => package.json을 바탕으로 설치(그게 바로 node.modules)
profile
`아는 만큼 보인다` 라는 명언을 좋아합니다. 많이 배워서 많은 걸 볼 수 있는 개발자가 되고 싶습니다.

0개의 댓글