210303

몇일동안 쉬고 다시 마음잡고 공부를 시작했다.

to do list만들기만 하니까 너무 하기가 싫어져서 유튜브 클론 풀스텍을 시작했다.
이것저것 하다가 아무것도 아닌 것 처럼 될까봐 시작할까 말까 했지만 너무 하기가 싫어서(이해가 잘 안돼서) 기분전환겸 시작했다. 그리고 무엇보다 내가 백엔드가 맞는지 프론트엔드가 맞는지 빨리 체험 해보고 결정을 하고 싶었다.

TIR

nodejs로 서버를 생성하기

<script>
//node모듈에서 가져옴
import express from "express";
import morgan from "morgan";
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-Parser";
import { userRouter } from "./router";
const app = express();

//ARROW Function

const handleHome = (req, res) => res.send("hello from my ass");

//화면에 출력되는 내용을 말해줌
const handleProfile = (req, res) => res.send("You are on my profile");

/*middleware (웹페이지 중간작업 route로가기전 하는 함수)
const betweenHome = (req, res, next) => {
  console.log("Between");
  next();
};
app.use(betweenHome);
*/
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(helmet());
app.use(morgan("dev"));
// '/'는 현재 페이지
app.get("/", handleHome);
//profile이라는 새로운 조소로 새 페이지 생성
app.get("/profile", handleProfile);

app.use("/user", userRouter);
//다른 js파일에서 불러올때 app이라고 말하게 한다. 
export default app;
</script>

코드 한 줄 한 줄 뭘 의미하는지 다 이해하고 싶지만 불가능해서 그냥 강의를 들을때마다 한줄한줄 주석으로 내가 겉핥기 식으로 이해한것을 적고있다.

그리고 서버를 만들고 지금까지 한 것을 이해하려고 했지만 도저히 안돼서 포기했다.

다시 한던걸로 돌아갔다.

localstorage & foreach 함수에 대한 이해

todojs 코드를 한줄한줄 console.log 해보면서 이해를 했다.
한줄 한줄 주석으로 이 코드가 무엇을 의미하는지를 적었다.

<script>
const toDoForm = document.querySelector(".js-toDoForm"),
  toDoInput = toDoForm.querySelector("input"),
  toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos";

const toDos = [];

function saveToDos() {
  localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}

function paintToDo(text) {
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const span = document.createElement("span");
  const newId = toDos.length + 1;
  delBtn.innerText = "❌";
  span.innerText = text;
  li.appendChild(delBtn);
  li.appendChild(span);
  li.id = newId;
  toDoList.appendChild(li);
  const toDoObj = {
    text: text,
    id: newId,
  };
  toDos.push(toDoObj);
  //todos array에 toDoObj를 넣는것이다. 
  saveToDos();
}

function handleSubmit(event) {
  event.preventDefault();
  const currentValue = toDoInput.value;
  paintToDo(currentValue);
  toDoInput.value = "";
}

function loadToDos() {
  const loadedToDos = localStorage.getItem(TODOS_LS);
  //localStorage에서 TODOS_LS(toDos)를 가져옴
  //JSON.stringify 돼서 string형태로 되어있음 할일에 타이핑한것이
  if (loadedToDos !== null) {
    //loadedToDos가 null이아니라면 (정해진 값이 있다면.)
    const parsedToDos = JSON.parse(loadedToDos);
    //string형태인 loadedTodos를 ARRAY형식으로 바꾼다.
    parsedToDos.forEach(function (toDo) {
      //paresedToDos란 ARRAY에 foreach함수를 시전해서 객체들이 순서대로 나오게 한다.
      paintToDo(toDo.text);
      //각각 나온 객체들을 인자를 가지고 paintToDo함수를 시전한다.
      //인자가 toDo.text이므로 내가 인풋에 적은 값이 paintToDo함수의 인자값으로 전달된다.
    });
  }
}

function init() {
  loadToDos(); //loadTodos 함수 호출
  toDoForm.addEventListener("submit", handleSubmit); //todoForm을 Submit하면 handleSubmit 함수 실행
}
init();

</script>

자바스크립트 문법을 깊게 파야할 것 같다.

filter 함수 및 localstorage 삭제 이해

<script>
let toDos = [];  //toDos는 변할 수 있는 변수다

function deleteToDo(event) {
  const btn = event.target;
  const li = btn.parentNode;
  toDoList.removeChild(li);
  const cleanToDos = toDos.filter(function (toDo) {
    //toDo.id는 array에 있는 모든 id li.id는 선택한 id
    return toDo.id !== parseInt(li.id);
  });
  //버튼을 하나씩 클릭할때 마다 클릭한 버튼을 제외한 것들이 객체에 담기고 
  //아래의 선언을 통해 toDos array가 갱신된다.
  toDos = cleanToDos;
  //그리고 갱신한것이 localstorage에 저장돼서 새로고침하면 지운것은 지워진다. 
  saveToDos();
}

</script>

이제 진짜 완벽한 이해에 다가가고 있다. 꼭 혼자 힘으로 todolist를 완성시켜야 겠다.