클라이밍하는 개발자

TIL의 회고 : 이번주 알게 된 점 총정리

이번주에는 다른 사람들보다 강의를 못따라가고 있다 생각하여

강의 내용을 이해하기 위해 유튜브를 통해 기본 개념을 많이 익혔다. (조코딩, 코딩애플 등)

강의를 들었지만 이해 못하고 팍팍 넘어갔기에

따로 공부하고 다시 들으니 이해가 가기 시작했다.

그리고 중간중간에 이해 안가는 개념은 따로 적어두기 시작했다. (낙서같지만 우선 내가 이해한대로..)

이번주는 TIL작성법-강민철강사님의 강의가 제일 좋았다. (+조코딩 노드강의)

TIL, WIL을 모두 작성하긴 하는데 의무감이고 뭘 작성해야하는지 몰라서

대충 오늘 이거 배웠음, 오늘 감정은 이랬음.....하고 대충썼는데 의미 없던 짓인것 같다.

강의에서 배운 내용을 토대로 앞으로 TIL,WIL을 작성해야겠다.

이번 주 목표 달성 여부

사실 목표를 세워두지 않고 공부했기 때문에

설정해둔 목표는 아니지만 마음속의 목표는 있었다.

[노드js 기본 강의를 이해하고 따라가기]

해당 목표는 따로 유튜브를 통해 달성할 수 있었던 것 같다.

다음 주 목표 세우기

1) TIL을 특강에서 배운대로 성실하게 작성하기

2) 노드 심화버전 강의 잘 따라가기(이해하기)

3) 강의과제 완성해보기

1. 문제점

노드js 심화 3주차 2강에서 Docker설치를 하였는데 오류가 발생하였다.

강의를 보고 코딩하려면 필수기 때문에 구글링을 시작했다.

2. 시도해본 것들

강의에서는 단순히 docker를 설치하고,

docker run --rm -p 3306:3306 --name test-db -e MYSQL_ROOT_PASSWORD=1234 mysql:5.7 mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

cmd에서 위 코드만 복붙하면 된다고 하였으나 실행되지 않았다.

저걸 할때마다 위의 'WSL 2 installation is incomplete' 경고창이 떴다.

WSL2가 설치 되지 않았다고??? 저 문구 그대로 구글링했다.

3. 해결과정

구글링한 결과 https://suzxc2468.tistory.com/211 의 내용을 참고하였다.

해당 문구에서 설치하고 입력하라는 대로 실행하고 CMD에서 다시 복붙하였는데 안되네...?!

그러다 문뜩 떠올랐다. 해당 블로그에선 Windows PowerSehll을 [관리자 권한으로 실행] 해서 리눅스, 플랫폼 활성화 등

다양한 명령어를 실행하고 있었다.

그래서 명령프롬프트를 관리자 권한으로 실행하고, 강의에서 준 코드를 실행했더니 설치 완료!

4. 알게 된 점

첫번째로 문제가 발생하여 구글링을 할때는 경고문구를 자세히 읽어봐야겠다.

영어를 잘 모른다하더라도 번역기를 돌리거나, 핵심 문구를 그대로 복사하여 구글링하면 답을 찾을 수 있을 것이다.

두번째로 프로그램 실행하다보면 권한으로 인해 문제가 꽤 많이 발생한다.

분명히 코딩하면서도 권한때문에 문제가 발생한 경우도 많았고,

관리자 권한없이 했을때 CMD에서도 권한 관련 문구를 띄웠던것 같은데

그냥 안된다는 사실에 화만 나서 대충 읽고 넘겨서 더 오랜 시간이 걸렸던 것 같다.

TIL의 의미 - 잘 쓴 TIL은 그 자체로 무기

프로젝트 코드만 보여주면 끝일까? No!

- TIL로 성장, 성실함과 흡수력을 보여줘야 한다.

- TIL은 개발자 성장의 커밋 로그

- TIL을 쓰지 않으면 내가 지금까지 얼마나 성장했는지 모릅니다

- 이력서에는 여러분의 성장(프로젝트 등)이 담긴다

-> 면접 질문은 이력서에서 나온다

-> 면접 질문은 TIL에 적은 내용에서 다 나온다 (면접 전날 TIL 정주행)

(프로젝트에서 로그인 기능을 담당하셨네요? 이건 어떻게 만드셨나요? 기능분배는 어떻게 하셨나요? 등등)

TIL 작성 방법

1) 이건 꼭 넣어주세요

- 문시해알

1. 어떤 문제가 있었는지 (문제점)

2. 내가 어떤 시도를 했었는지 (시도해본 것들)

3. 어떻게 해결했는지 (해결)

4. 뭘 새롭게 알았는지 (알게 된 점)

2) 이건 필요 없습니다.

- 반짝반짝 예쁘게 꾸미기

- 통째로 붙여놓은 코드

- 감성적인 글

- 강의노트 복붙 혹은 요약

WIL

- TIL의 회고 : 이번주 알게 된 점 총정리

- 다음 주 목표 세우기

- 이번 주 목표 달성 여부

오늘 배운 것

알고리즘 풀이

스파르타코딩클럽 심화 2주차완료

쿠키 = 그냥 옮기는 시스템 매개체

토큰 = 서버가 기억하는 이상하게 생긴 텍스트 (ID카드처럼 서버에게 보여줘야 함)

JWT = 정보를 갖고 있는 토큰. DB없이 검증가능!

세션 = 요청받으면 서버에서 DB에 있는 데이터를 전달

유저 인증을 위해서는 JWT 혹은 세션을 사용할 수 있음

오늘 느낀 점

예전에 몽고디비 연결시

localhost 가 안되고 127.0.0.1 로 해야 됬었는데

이번에도 동일한 현상이 발생했다.

같은 실수를 또 반복하고 몇시간만에 겨우

연결했을때 허무함이란ㅠㅠ 다시 실수하지 않도록 각인된 것 같다.

참고영상 https://www.youtube.com/watch?v=tosLBcAX1vk 

쿠키 = 그냥 옮기는 시스템 매개체

토큰 = 서버가 기억하는 이상하게 생긴 텍스트 (ID카드처럼 서버에게 보여줘야 함)

JWT = 정보를 갖고 있는 토큰. DB없이 검증가능!

세션 = 요청받으면 서버에서 DB에 있는 데이터를 전달

유저 인증을 위해서는 JWT 혹은 세션을 사용할 수 있음

쿠키와 토큰은 모두 클라이언트와 서버 간에 정보를 저장하고 전송하는 데 사용할 수 있는 방법입니다. 그러나 둘 사이에는 몇 가지 주요 차이점이 있습니다.

1. 저장 위치: 쿠키는 고객의 컴퓨터에 저장되고 토큰은 서버에 저장됩니다.
2. 지속성: 쿠키는 여러 세션에 걸쳐 유지됩니다. 즉, 웹 사이트를 여러 번 방문하는 동안 유지해야 하는 정보를 저장하는 데 사용할 수 있습니다. 반면에 토큰은 일반적으로 수명이 짧고 단일 세션에만 유효합니다.
3. 보안: 쿠키는 일반 텍스트로 저장되며 고객의 컴퓨터에 액세스할 수 있는 모든 사람이 액세스할 수 있습니다. 반면에 토큰은 일반적으로 암호화된 형태로 저장되며 더 안전합니다.
4. 사용 사례: 쿠키는 일반적으로 사용자 기본 설정을 저장하고 웹 사이트에서 사용자 활동을 추적하는 데 사용됩니다. 토큰은 일반적으로 사용자를 인증하고 보호된 리소스에 대한 액세스 권한을 부여하는 데 사용됩니다.

요약하면 쿠키와 토큰은 모두 클라이언트와 서버 간에 정보를 저장하고 전송하는 방법입니다. 쿠키는 영구 데이터를 저장하는 데 사용되는 반면 토큰은 보안 인증 및 액세스 제어에 사용됩니다.

1) 쿠키 & 세션

쿠키 : 브라우저가 서버로부터 응답으로 Set-Cookie 헤더를 받은 경우

해당 데이터를 저장한 뒤 모든 요청에 포함하여 보냅니다.

세션 : 쿠키를 기반으로 구성된 기술입니다. 단, 클라이언트가 마음대로 데이터를 확인 할 수 있던 쿠키와는 다르게 세션은 데이터를 서버에만 저장하기 때문에 보안이 좋으나, 반대로 사용자가 많은 경우 서버에 저장해야 할 데이터가 많아져서 서버 컴퓨터가 감당하지 못하는 문제가 생기기 쉽습니다.

2) express - 미들웨어의 개념

express에서의 미들웨어는 어떠한 요청에 대해서 공통적으로 처리하는 로직을 모아둔 코드 덩어리입니다.

• express.static(path): path에 입력한 경로에 있는 파일을 그대로 서빙해주는 기능을 수행하는 미들웨어입니다.
                                   router의 기능을 일부 가지고 있는것이죠!
• express.json: HTTP Request에서 Body에 담긴 JSON 형식의 데이터를
                         express 서버에서 사용할 수 있게 해주는 미들웨어예요!
• express.urlencoded: 이것도 HTTP Request에서 Body에 담긴 Form(URL Encoded) 형식의 데이터를
                                    express 서버에서 사용할 수 있게 해주는 미들웨어입니다

3) ES6 - 구조 분해 할당(Destructuring assignment) 문법

const { email, password } = req.body;

4) mongoose 사용법

https://mongoosejs.com/docs/guide.html 공식문서 참조

5) REST API

REST 아키텍쳐를 따라 구현된 API를 REST API라고 부릅니다.

간단히 말하면 원래 있던 방법보다 더 쉽고 사람이 읽기 편한 방식으로 원칙을 세워놨고,

개발자들의 생산성과 상호작용을 증진시키는것에 목적이 있습니다.

상황

예전에도 몽고디비가 연결안되서 고생했었는데, 그때 해결했던 방법이

localhost 부분을 127.0.0.1 로 변경해주어야 한다.

이번에도 같은 실수를 반복하고 고생했기에

다시는 똑같은 실수를 반복하지 말자는 의미에서 실수모음 카테고리를 생성했다!

이전 코드

mongoose.connect("mongodb://localhost:27017/todo-demo")

수정 코드

mongoose.connect("mongodb://127.0.0.1:27017/todo-demo")

이해를 돕기 위한 전체 코드

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const Todo = require("./models/todo");

const MongoConnect = async () => {
  await mongoose.connect("mongodb://127.0.0.1:27017/todo-demo", 
  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
      .then(() => console.log('MongoDB Connected...'))
      .catch(err => console.log(err));
  }
  MongoConnect()

const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));

const app = express();
const router = express.Router();

router.get("/", (req, res) => {
  res.send("Hi!");
});

// 입력
router.post("/todos", async (req, res ) => {
  const { value } = req.body;
  const maxOrderTodo = await Todo.findOne().sort("-order").exec();
  let order = 1;
  if (maxOrderTodo) {
    order = maxOrderTodo.order + 1;
  }
  const todo = new Todo({ value, order});
  await todo.save();
  res.send({ todo });
});

// 출력
router.get("/todos", async (req, res) => {
  const todos = await Todo.find().sort("-order").exec();

  res.send({ todos });
})

app.use("/api", bodyParser.json(), router);
app.use(express.static("./assets"));

app.listen(8080, () => {
  console.log("서버가 켜졌어요!");
});

function solution(numbers) {
    numbers.sort((a,b)=>b-a);
    return numbers[0]*numbers[1];
}

위를 이해하기 위해선 다음 예시 확인

var myArray = [5,3,4,1,2];
myArray.sort(function (a, b) { return a - b });
console.log(myArray);
// 결과: [1, 2, 3, 4, 5]
myArray.sort(function (a, b) { return b - a });
console.log(myArray);
// 결과: [5, 4, 3, 2, 1]

return 값 a-b는 배열을 오름차순, b-a는 내림차순으로 정렬한다.

그냥 .sort()만으로는 정렬이 안 되는 걸까? 안된다. 그 이유는 자바스크립트의 sort 함수는 기본적으로 배열을 문자열(String) 타입으로 간주하고 비교하기 때문이다. 문자는 잘 작동하나 숫자는 스트링으로 변경되면서 문제를 야기한다.