[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に入ります。

感覚/発见:初日なので简単にできると思っていたのですが、资料型か浮動小数点...勉強が尽きないと感じた.そしてjsはスクリプト言語...闻いた后に意外にも!感じました.
action plan :

文法は他の言語と異なる場所を主とし、

JSCiellengeのHTML/CSSに関する部分を復習します.

2.先生に履歴書をチェックしてください。

感覚/発見:専門家が見てくれたのは初めてです.私のプロジェクトはまだ不完全だと感じることができます.競争力のある見ていて選びたいですよ?私にやらせた履歴書はまだよくないようです.どの部分を強調するかもう一度考えなければならない.
開発プロジェクトは最高ですが、プロジェクトは短期的に上場を完了します!こつこつ!できないから.システムのGithub管理が本当に切迫していると感じました.
action plan :

128完成:私の冷蔵庫README.md詳細貼付(今週中)

発表

プロジェクト公告+再包装(3ヶ月以内)

完了

129:履歴書をできるところに変更して提出します.

3.JSChallengeでlocalStorageに格納されているTO-DO機能の実現方法を学びました。

感覚/発見急に和音が長くなったよし...そして再符号化するとき、小さい文法や方法名は覚えられません.
ニコ先生の関数は本当に...芸術性がある.私なら全部打ち込んで、放っておいて、先に帰ればいいのに、後で直したいと思って、修理していないようです.
action plan :

文法と方法は、

を熟知していることが望ましい.

関数は、このコードが何を意味するかをできるだけ考慮します.名前も気になります!