[Front-end🦁] #21 TIL

1. 멋사 수업

JavaScript 기본 문법은 한 글에 한번에 정리하기 위해서 글을 나눴다.

오늘은 처음으로 JavaScript를 들은 날인데, 사실 기초라서 간단하게 호로록 짚어주실 줄 알았더니 여러가지 실습 해보면서 처음 접하는 JavaScript type에 대한 논란(?) 이라거나, ==과 ===의 차이, 부동소수점 이야기까지도 언급이 돼서 상당히 놀랐다. JS는 접해본 적이 없어서 부동 소수점 빼고는 다 처음 듣는 얘기였다

2. JS Challenge

입력받은 값을 ul 안에 li를 생성해서 넣는 작업을 해보았다.

오늘의 하이라이트.

// element 생성해서 appendChild로 넣기.
const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);

// forEach 사용.
parsedToDos.forEach(paintToDo);
parsedToDos.forEach(element => {
  //뭔가 여기서 element 를 가지고 더 작업할거라면 이렇게 쓰면 됨.
    paintToDo(element);
});

const str_arr = JSON.stringify(arr);
cosnt arr = JSON.parse(str_arr);

filter 는 존재하는 array에서 뭔가를 지우는게 아니라, 그것만 뺀 새 array를 만들어서 할당하는 것이다.

// list를 filter 하는데 list 의 각 item 을 funcFilter 에 넣어서 나온 return이 true 이면 새로운 list에 들어가고, false 이면 안들어가고.
list.filter(funcFilter)
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

<form id="todo-form">
<input type="text" placeholder="Write To Do and Press">
</form>
<ul id="todo-list">
</ul>

// 0. 화면에 있는 요소 불러오기.
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos";

4

let toDos = []; //toDo 배열
//
// 4. toDos 함수를 localStorage에 String 으로 저장하는 함수.
// 저장은 되는데 새로고침하면 전의 것은 안남고 새로 쓴 것만 남음... (5번으로)
function saveToDos() {
  // Array는 localStorage에 저장할 수 없음.
  // String으로 저장했다가, 가져와서 변형해서 쓰자.
  // JSON.stringify, JSON.parse
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

3, 7, 8

// 3. 버튼을 누르면 TODO를 삭제하는 함수. 
// li.remove()만 치면 삭제는 잘 되는데 새로고침하면 다시 생김 (4번 saveToDos로)
function deleteToDo(event) {
    // event.target을 하면 어떤 것이 이 이벤트를 일으켰는지 알 수 있음.
    // 그치만 button 만으로는 한 줄 전체를 삭제할 수가 없음. parentElement
    const li = event.target.parentElement;
    // 7. filter로 삭제 버튼 누른 요소 list에서도 삭제.
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    li.remove();
    // 8. 삭제한 list를 다시 localStorage에 저장을 해줘야함!!!
    saveToDos();
}

2

// 2. todo를 화면에 보이게 만드는 함수
function paintToDo(newToDo) {
    const li = document.createElement("li");
    li.id = newToDo.id;
    const span = document.createElement("span");
    span.innerText = newToDo.text;
    const button = document.createElement("button");
    button.innerText = "❌";
  // 우리가 만든 삭제 버튼을 누르면 동작해야함. (3번 deleteToDo로)
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

1, 6

//1. input이 submit 될 때 todo를 배열에 저장하고 화면에 보이게 하자.
// 근데 화면에 그리는 함수는 따로 만들자. (2번 paintToDo로 가시오.)
function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    // 6. 삭제할 때 filter를 쓸건데, list element가 string이면 같은 내용인거 다 날아가버린다. id를 주자. 
   // 그래서 삭제는 어떻게 할건데??(-> 7번으로)
    const newToDoObj = {
        id: Date.now(),
        text: newToDo
    };
    toDos.push(newToDoObj); 
    paintToDo(newToDoObj);
    saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);

5

// 5. 전에 쓴 것을 localStorage에서 toDos에 불러오는 함수.
// 근데 생각해보니까 삭제할 때 toDos 에서 삭제는 어쩌지? (-> 6번으로)
const savedToDos = localStorage.getItem(TODOS_KEY);
if (saveToDos) {
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos; //todo가 빈 array로 시작해서 전의 data가 안남고 덮어쓰기 되는 문제를 해결.
    parsedToDos.forEach(paintToDo);
}

3. 작은 회고

1. 수업에서 JavaScript에 들어갔다.

feelings/ findings : 첫 날이라 간단하게 할 줄 알았는데 자료형이나 부동소수점이나... 공부할 것은 정말 무궁무진하다는 것을 느끼게 되었다. 그리고 js가 스크립트 언어라는 거.. 생각도 못했는데 들으니까 아 맞네!! 하고 체감하게 되었다.

action plan :

• 문법은 다른 언어와 다른 점 위주로 정리하고,
• JS Chaellenge 에서 나오는 HTML/CSS 와 연결해서 쓰는 파트도 복습하기.

2. 선생님께 이력서 검토를 부탁드렸다.

feelings/ findings : 전문가가 봐주시는 것은 처음인데.. 내 프로젝트들이 아직 많이 미비한 것을 느낄 수 있었다. 또, 경쟁력 있는. 봤을 때 오 뽑고 싶은데? 하게 만드는 이력서가 아직은 아닌 것 같다. 어느 부분을 강조할 지에 대해서 생각을 더 해봐야겠다.

프로젝트를 발전시키는게 가장 좋겠지만 프로젝트는 단기간에 완성해서 출시! 짜잔! 할 수 있는게 아니므로... 체계적인 Github 관리가 정말 절실하다는 것을 느꼈다.

action plan :

• 1128 완료 : my 냉장고 README.md 자세하게 붙이기 (이번주 내로)
• 프로젝트 알림 기능 붙이고 출시하기 + 리팩토링 하기 (3달 내로...)
• 1129 완료 : 일단 할 수 있는 곳까지만이라도 고쳐서 이력서 제출하기.

3. JS Chaellenge 에서 localStorage에 저장할 수 있는 TO-DO 기능을 구현하는 법을 배웠다.

feelings/ findings : 니코쌤의 코딩 프로세스를 따라갈 때는 와우 이해가 넘 잘되네 와우~~ 하면서 잘 봤는데, 전체 코드를 다시 보니까 오잉? 갑자기 코드가 엄청 길어졌어요. 가 됐다.. 그리고 다시 코딩을 할 때, 사소한 문법이나 메서드 이름 같은게 기억이 잘 안났다.

니코쌤 함수 나누는게 진짜.. 예술적이었다. 나같으면 그냥 막 다 때려넣고 아 몰라 일단 돌아가면 됐지 하고 나중에 고치지 뭐 하고 안고쳤을 것 같은데.

action plan :

• 문법과 메서드는 양으로 승부해서 익숙해지는게 좋을 것 같고
• 함수는 최대한 이 코드가 뭘 의미하는지를 생각해서 만들자. 이름도 신경써서 짓고!