오늘 공부 느낀점

자바스크립트만으로 비디오 녹화 / 오디오 녹음이 가능하다니 놀랍다! 그것도 간단하게 몇줄 안되는 코드로 구현할 수 있다니 생각보다 그렇게 복잡하지만은 않아서 신기했었다. 자바스크립트는 알면 알수록 신기하고 놀랍다 ㅎㅎ 웹기초 스터디도 벌써 59일차다. 마침 오늘 9주차 주간회고도 제출했다. 시간이 참 빠르다. 웹기초 스터디에 들어온 건 자바스크립트 기초를 더 탄탄하게 다지고 싶은 점도 있었는데, 그 부분이 어느정도 충족되서 참 다행이라고 생각한다. 마무리도 잘할 수 있도록 하자.

오늘 공부 느낀점

5월29일까지 연휴이기에, 연휴 기간 중에 어떤 일이 발생할 지 몰라 토요일 일어나자마자 강의 예습을 바짝하고, 다음주 화요일 모딥다 스터디 준비도 미리 해놨다. 이제 스터디도 벌써 2주 남았다. 끝이 보일 거 같지 않던 10주스터디가 벌써 마무리되어가다니 신기하다. 중간에 해이해졌던 순간도 있지만 아직까지 살아있어서 다행이다. 마지막까지 최선을 다하는 내가 되자. 오늘 들은 chapter 11 강의는 비디오 태그에 관련한 JS강의였다. chapter 6,7,9를 지나니 선녀다 ㅋㅋㅋㅋ 간만에 올리는 벨로그 공부후기인 것 같다. 아무리 어려워도 포기하지말고 남은 날이라도 공부후기 빠짐없이 쓰자!

오늘 공부 느낀점

오랜만에 쓰는 벨로그 TIL이다. 그러고보니 지난주는 통으로 TIL이 없었다. 지나고보니 별거 아닌 잡념으로 무기력해져서 정말 할 수 있는 최소한의 것만 했던 지난주였다. 마침 지난주 코드챌린지는 왜케 어렵던지... 처음으로 미제출을 했다. 그래도 이번주 마음 다시 잡아서 강의예습을 다시 제대로 하고 모딥다 스터디 준비도 하루 전에 모두 마쳤다. 지나간 건 어쩔 수 없고 남은 것들이라도 잘 마무리해보자!

오늘 학습한 건 파일업로드였다. 확실히 지난주 DB CRUD및 로그인 session을 먼저 경험하고 오니 선녀다. ㅎㅎ 내일 코드챌린지는 파일업로드일테니 화이팅해보자!

오늘 공부 느낀점

확실히 데이터베이스를 다루기 시작하니 비동기 개념은 안나올 수 없는 것 같다. promise, callback함수, async-await, try-catch 간만에 빠르게 훑어볼 수 있었다. 실무에서는 mysql위주로만 다뤄봤는데, mongoDB를 쓰니 확실히 JSON기반이라 그런지 좀 더 간편하게 느껴진다. 물론 mongoDB 자체가 아직 처음이라 그렇게 느낄 수 있지만 첫인상자체는 좋다!:)

다음주 코드챌린지를 보니 이틀짜리인데, 강의분량이 꽤 됬다. 주말에 시간되는대로 틈틈히 미리미리 강의예습을 해야겠다!

오늘 공부 느낀점

오늘은 시간분배를 잘못한편이다. 오늘 코드챌린지하는데 막힘이 있다보니 해결하려고 고민하고 또 고민하다가 몇시간을 써서 다른 할일할 시간까지 지장을 주고 말았다. 어느 정도 선에서 마무리했었어야했는데, 그게 쉽지 않다. 결국 오늘 하루 시간은 얼마안남았고 남은 할일은 4개인데, 우선순위대로 주간회고 6주차 작성 - 강의듣기 - 벨로그 작성 이렇게 진행하고 모딥다 읽기는 스터디까지 아직 6일정도 남았으니 내일 마저 진행하고자 한다. 오늘 강의에서는 드디어 몽고디비를 통한 진짜 데이터 실습이 들어갔다. 몽고디비 셋업 및 스키마 에 대한 부분이 살짝 나왔다. 쉬운 파트는 아니지만 드디어 데이터 실습을 해보는구나! 싶다. 설렌다! 내일도 화이팅해보자!

오늘 공부 느낀점

챕터6 데이터베이스 파트에 입성했다!! 물론 몽고디비로 바로 들어가기 직전, fake DB를 통해 POST Method, req.body를 활용해서 어떻게 데이터를 전송하는지 기본 개념 위주로 먼저 학습했다. 데이터베이스에 대한 파트를 공부하면서 감회가 새롭다.

실무를 할 당시, 들었던 이야기가 '데이터가 어디서 와서 어디로 가는지 그 흐름을 보아라였다. 개발에 대해 아는 게 없던 꼬꼬마 시절의 나는 저 소리를 처음 듣고 1년여가 지나서야 무슨 말인지 이해를 하게 된다. 풀스택을 이해한다는 건 결국 데이터의 흐름을 이해하는 거라고 생각한다.

아직 유튜브 클론강의도 많이 남았지만, 지금까지 강의에 나온 video router로 데이터 흐름을 추측해보자면, 프론트에서 video데이터를 입력해서 백앤드로 전송하면 백앤드에서 데이터베이스로 vidoe 데이터를 저장 후 그 저장된 데이터를 다시 프론트앤드로 전송해서 유저 화면에 그려주는거라고 본다.

공부할게 많지만 얼른 몽고DB로 데이터의 흐름을 만드는 작업을 해보고 싶다.

오늘 공부 느낀점

벌써 70일 스터디 기간 중 36일차다. 어느새 절반을 왔다. 10주가 길어보였는데, 시간 참 빠르다. 지금까지 데일리 과제 놓치지않고 잘 해온 나를 먼저 칭찬해본다. 남은 절반도 화이팅이다!

오늘 pug 템플릿 부분 강의를 다보았다. pug가 간편하면서도 새로운 규칙으로 코드를 작성해야하다보니 데일리 과제하면서 조금 헤맸던 것 같다. 그래도 과제로 직접 작성하면서 어느정도 감은 잡아서 다행 ㅎㅎ 다음 과제때는 덜 헤매고 작성할 수 있을 것 같다.

이제 내일 유튜브 강의 챕터6예습 들어간다. 챕터6는 드디어 데이터베이스다! 만만치않겠지만 기대도 된다! 즐겁게 공부해보자:)

오늘 공부 느낀점

오늘은 pug에 대해서 배웠다. React를 이미 익힌 입장에서 실무에서 pug를 사용해본 적은 없지만, react를 모르는 상태에서 js만으로도 풀스택이 가능하려면 pug는 필수라는 생각이 든다. 배워두면 나쁘지않다고 생각. 오늘은 어린이날이다. 휴일이라고 생각하니 괜시리 아침에 일어날때부터 게을러지는 마음이다. 잠도 더 자도 될 것 같고 말이다. ㅋㅋㅋㅋㅋ 그래도 휴일 아침에 해야할 일(과제, 강의듣기, 벨로그 작성)들을 후딱 끝내서 마음 편하다:) 연휴 잘쉬고 다음주에 또 달려보자!

오늘 공부 느낀점

URL parameter를 익히면서 자연스럽게 정규식 표현에 대해서도 언급되었던 강의였다. 정규식 표현이 여전히 생소한 나는 어쩔 수 없이 강의 끝나고도 모딥다 31장 정규식 파트를 한번 읽어보고 express routing쪽 문서항목도 한번 더 읽어보면서 이해해야했다. 정규식 표현 그동안 미루고 미뤄왔는데, 결국은 이렇게 맞닥뜨렸다 ㅋㅋㅋㅋ 모딥다에서 말한것처럼 정말 가독성은 구리다. 이 구린 가독성때문에 내가 그동안 공부를 안했던걸지도 ㅋㅋㅋㅋ 그래도 정규식이 없으면 조건문쓸때 힘든 부분이 존재하니 계속 필요할때마다 찾아보고 공부하자. 당장 오늘 배운 url parameter에서도 요긴하게 쓰이지 않았는가. 그렇다고 이걸 모두 외우긴 힘들고 적어도 모딥다에서 말하는 기본규칙들 정도는 어느정도 알고 있어야겠다.

오늘 공부 느낀점

처음 유튜브 강의를 들을때, 이 부분이 갑자기 헷갈리기 시작했다. 왜냐면 니꼬쌤이 코드 정리를 하면서 서버파일, 컨트롤러파일, 라우터파일 등 갑자기 파일이 늘어나서 혼란스러웠던 기억이 난다. 그래도 2회차에 들으니 왜 분리하는지 어떻게 아키텍처가 흘러가는지 이해가 되서 다행이다. 라우터, 컨트롤러 내부 코드가 점점 기능이 추가됨에 따라 늘어날테니 분리시켜놓은 것이다. 그럼서 모듈 import, export에 대해서도 간만에 복습했다. 강의에 그치지 않고 모딥다 48장 모듈 파트까지 읽어보면서 더 숙지해야겠다.

오늘 배운 개념 적용

어제 배운 미들웨어 기본과 morgan을 복습해보았다.

1) 미들웨어 기본 코드

직접 logger함수를 구현해보았다. express문서를 참고해서 http method를 나타내는 req.method/ url을 나타내는 req.path / 응답코드를 나타내는 res.statusCode를 활용해보았다. 그리고 브라우저 화면에 나타내기 위해 res.send를 활용했고, html의 b태그를 사용해서 진하게 폰트가 나오도록 만들었다.

import express from "express";

const app = express();

const logger = (req, res, next) => {
  console.log(req.method, req.path, res.statusCode);
  next();
};

const home = (req, res) => {
  return res.send("<b>home</b>");
};

app.use(logger);
app.get("/", home);

app.listen(() => console.log("listen"));

2) morgan 실습

직접 logger함수를 만들 필요없어 외부 미들웨어 morgan을 쓰면 된다. 기존 미들웨어 사용방법처럼 app.use를 활용하면 된다.

import express from "express";
import morgan from "morgan";

const app = express();

const home = (req, res) => {
  return res.send("<b>home</b>");
};

app.use(morgan("dev"));
app.get("/", home);

app.listen(() => console.log("listen"));

오늘 공부 느낀점

오늘 강의들은 #3.7 - 3.11은 감사하게도 앞부분 강의의 복습강의였다. 덕분에 아리까리했던 서버와 미들웨어 개념이 좀 정확하게 잡혔다. 그리고 3.11에서 morgan이라는 실제 사용 미들웨어를 통해 어제 의문을 가졌던 미들웨어의 사용목적을 알게되었다. 내가 생각하는 미들웨어의 사용목적은 응답하는 함수와의 기능 분리라고 생각한다. 즉, 응답하기전 해야할 일들을 모아놓은 것 같다. 그래서 컨트롤러라고 따로 부르나?? 여튼 노마드코더는 복습강의가 있어서 참 좋다. 정리하고 다음으로 넘어갈 수 있어서 좋다.

오늘 공부 느낀점

미들웨어라는 중요개념을 익혔다. 원래 계획대로라면 3.5 - 3.11까지 강의를 모두 듣는게 맞지만, 개인일정상 오늘 시간을 많이 못낸 부분도 있고 '미들웨어'라는 개념을 정확히 익히고 넘어가는게 좋겠다싶어서 3.5, 3.6 부분만 반복적으로 돌려서 보았다. 그리고 미들웨어에 대한 express공식문서도 한번씩 읽어보았다. MVC에 대한 개념은 어렴풋이 듣긴 했는데, 그중 C, Controller가 바로 미들웨어라는 사실을 이번에 다시한번 익혔다. 다만, 3.6까지 들은 상태에서는 미들웨어 개념만 이해한 정도라서 미들웨어함수를 왜 따로 나누는작업을 하는건지 완전 이해는 안간다. 적용하는 강의를 보면 이해가 가려나..차근차근 계속 공부해나가보자.

오늘 공부 느낀점

오늘 들은 유튜브 클론 강의에서는 서버의 기초에 대해 이해하는 시간을 가졌다. 확실히 코코아톡, 바닐라JS때와는 다른 새로운 개념이라서 조금 더 심도있게 공부를 해야할 것 같다. 상대적으로 서버에 대해 다룬 경험이 적기도 하고 말이다. https://expressjs.com/ko/guide/routing.html 강의에 그치지 않고 위 express문서에서 강의 배운 내용까지는 읽어보았다. 이전엔 문서를 읽는 거에 대해 크게 생각하지 않았는데, 요즘은 문서의 중요성을 느끼고 있다. 왜 개발자분들이 문서를 외치는지 알 것 같다. 이쯤되면 나도 초보자의 영역을 조금은 벗어난건가 싶다. 그래도 방심은 금물!

오늘 공부 느낀점

어제 바닐라JS강의를 끝내고, 오늘부터 유튜브 강의 예습을 시작했다. 사실 유튜브 강의가 완전 처음은 아니다. 작년에 실무를 하면서 백앤드적인 지식도 급하게 익혀야했기에 유튜브 강의를 이미 77퍼센트정도 들은 상태이다. 다만 급하게 듣기도 했고, 시간도 많이 지나서 이번 스터디를 통해 유튜브 강의도 정확하게 이해하면서 들어야겠다는 생각이 든다. 본격적인 유튜브 챌린지 직전, 강의예습을 미리미리 해놓도록 하자

오늘 배운 개념 적용

오늘로 바닐라JS 크롬앱만들기 강의를 완강했다. 그러나 이내 완강하기엔 부족한 부분이 있는데, 바로 to do list 구현이다.

다시한번 코드리뷰를 해보자.

1) load to do

<form>
  <input type="text" placeholder="write a to do.." />
</form>
<ul></ul>

html은 간단하게만 작성했다.

const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");

form.addEventListener("submit", handleSubmit);

js에서는 html가져오는 부분들을 먼저 작성하고, submit이벤트에 해당하는 addEventListener를 작성했다.

let toDos = [];

function handleSubmit(e) {
  e.preventDefault();
  const toDo = input.value;
  input.value = "";
  const toDoData = {
    id: Date.now(),
    data: toDo
  };
  toDos.push(toDoData);
  saveTodo();
  paintList(toDoData);
}

submit이벤트에 따라 호출되는 handleSubmit함수를 만들고, submit이벤트를 줄때마다 새로고침되는 현상을 막기 위해 e.preventDefault()를 줬다. 그 다음, 입력값을 toDo변수로 받고 입력 후, 입력칸을 빈칸으로 두도록 했다. 입력값은 toDoData 객체로 뒀는데, 그 이유는 추후 deleteToDo를 구현할 때 필요한 id값이 필요하기 때문이다. toDos배열 안에 toDoData객체의 값이 들어가도록 하고, 데이터가 UI상으로 보이도록 paintList함수로 데이터를 전달한다.

function paintList(toDo) {
  const li = document.createElement("li");
  li.id = toDo.id;
  li.innerText = toDo.data;
  ul.appendChild(li);  
}

위처럼 createElement를 활용해서 li태그를 생성해주고, toDoData객체의 id를 li태그의 id값으로 할당한다. 그리고 innerText를 활용해서 toDoData객체의 data를 UI상으로 나타날 수 있도록 한다. 이때 위 js에서 html에서 가져온 ul변수에 대해 appendChild를 써서 li태그가 추가될 수 있도록 코드를 추가한다.

그런데 여기서 끝나면 새로고침 시 값들이 그냥 날라가기 때문에, localStorage에 저장하는 과정이 필요하다. saveToDo함수에 저장기능을 추가했다. 이때 JSON.stringify를 활용해 localStorage에 배열값이 string으로 저장될 수 있도록 한다.

function saveTodo() {
  localStorage.setItem(TODO_kEY, JSON.stringify(toDos));
}

그 다음 저장된 값을 가져오기 위해 localStorage의 getItem함수를 활용한다.

const savedToDo = localStorage.getItem(TODO_kEY);

입력값이 빈값인 경우 데이터가 저장되면 안되기때문에 조건문을 활용한다. 이때, 원래 저장값을 유지하기 위해, string화 시켰던 배열을 다시 배열화시키는 JSON.parse를 활용해서 배열그대로 가져와 toDos 배열에 할당한다. forEach를 활용해서 저장된 데이터 각각 배열 요소 값을 UI로 표시하기 위해 paintList함수로 데이터를 전달한다.

if (savedToDo !== null) {
  const parsedTodo = JSON.parse(savedToDo);
  toDos = parsedTodo;
  toDos.forEach(paintList);
}

여기까지 하면 to do 목록 데이터가 날라가지 않고 잘 표시된다.

2) delete to do

이번엔 원래 있는 목록을 클릭하면 delete가 되도록 구현해보겠다.

function paintList(toDo) {
  const li = document.createElement("li");
  li.id = toDo.id;
  li.innerText = toDo.data;
  ul.appendChild(li);
  li.addEventListener("click", deleteToDo);
}

paintList함수에서 li태그에 대해 클릭이벤트리스너를 적용하고 그에 따라 호출하는 deleteToDo함수를 만들었다.

function deleteToDo(e) {
  e.target.remove();
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(e.target.id, 10));
  saveTodo();
}

delete구현시 꼭 알아야하는건 filter개념이다. filter는 배열에 남겨놓을 요소들의 조건을 붙이고, 그 조건에 맞지않는 경우 제외되는 개념이다. 이 개념에 따라 클릭한 target의 id와 toDos 배열의 각 요소 id값을 서로 비교하면서 조건에 맞지않으면, 즉 여기서는 id값이 서로 같은 경우 배열에서 삭제가 된다. 주의할 점은, e.target.id값이 string으로 나오는 점이다. parseInt를 통해 숫자화시킨다. 마지막으로 saveTodo함수를 다시 한번 호출해서 localStorage 저장 데이터를 업데이트한다. 여기까지 하면 delete to do 구현도 완성이다! 가장 위에 있던 test1 데이터만 지우고 나머지만 남은 모습이다.

오늘 공부 느낀점

그동안 솔플로 진행하다가 처음으로 코어타임에 참여했다. 사실 오늘 아침부터도 하기 싫은 마음이 많이 올라왔는데, 신기하게 코어타임방에 참여해서 다른 분들 공부하시는 모습을 보니 의욕이 생기기 시작했다!! 신기방기. 음소거도 되어있고, 카메라에 서로 얼굴이 나오지도 않았는데도 불구하고 누군가와 함께 공부한다는 자체만으로도 학습의욕을 높여주었다. 이래서 함께 하면 멀리 간다고 했구나!! 코어타임 많이 활용해야겠다!!

오늘 공부 느낀점

어제 하루 푹쉬었다. 마침 일월 이틀 챌린지였고, 일요일에 바로 제출을 했기 때문에 월요일 하루 제대로 휴식하기로 결정했다. 하루하루 일일스프린트 잘 챙기고 있고, 주말에 일정이 있을때는 미리미리 해놓거나 이동 중에 할 수 있는건 하거나 이런 식으로 빠짐없이 내 할일들을 챙기고 있는데 그냥 이대로 하면되는데, 하기 싫은 마음이 올라오는 요즘이다. 무언가를 매일매일 꾸준히 한다는건 쉬운 일이 아니라는 것을 다시한번 느껴본다. 그래도 해야겠지..오늘도 완전한 의욕은 안나지만 해야할 일들을 천천히 하나씩 하나씩 해보자. 막상 시작하면 할테니까..

오늘 공부 느낀점

어제는 강릉 당일치기 여행을 다녀오느라 퀴즈 제출 외에는 공부한 부분이 없다. 어제 제출한 퀴즈 오답 점검부터 하자면,

getElementBy("id이름")으로 찍어야하는 것을 순간적으로 querySelector와 헷갈려서 "#id이름"이 들어간 것으로 선택해서 틀렸다. 후우... ㅋㅋㅋ 그리고 className은 여러 개를 대체할 수 있지만 classList는 그렇지 않다는 부분을 반대로 찍어서 틀렸다.

퀴즈를 풀때마다 알면서도 문제가 헷갈리곤 한다. 헷갈린다는건 제대로 안다는 뜻이 아니겠지?? ㅋㅋㅋㅋㅋ 남은 퀴즈도 정확하게 문제를 읽고 답할 수 있도록 하자!

오늘 강의는 시계 구현과 인용구, 그림 랜덤구현을 익혔다. 그중에서 새롭게 익힌 개념

createElement / appendChild

그림을 새로 추가할때, 없는 html태그를 새롭게 추가할때 쓴 코드들이다. JS에서 HTML 컨트롤할 수 있는건 참 신기한 것 같다. 니꼬쌤처럼 Super Cool!을 외쳐본다.

오늘 챌린지는 2일챌린지였지만, 난 바로 끝내고 제출했다. 아직 시간이 남긴 했지만, 내일부터 오늘 배운 개념들로만 미리 크롬앱 졸업과제를 시작해봐야겠다.

오늘 배운 개념 적용

오늘 배운 input value와 localStorage, 그리고 어제 배운 classList까지 적용한 '오늘 가장 중요한 일을 남겨주세요' 기능을 구현해보았다.

const form = document.querySelector("form");
const input = document.querySelector("input");
const h1 = document.querySelector("h1");

function handleSubmit(e) {
  e.preventDefault();
  const toDoValue = input.value;
  h1.innerText = toDoValue;
}

form.addEventListener("submit", handleSubmit);

확인버튼을 누르면 handleSubmit함수를 호출하고 함수 내부에서 input입력값을 h1태그로 구현하도록 기본적으로 먼저 위와 같이 짰다.

그런다음 classList를 활용하여 input값을 입력 후에는 입력값h1태그부분만 남도록 구현해보겠다.

function handleSubmit(e) {
  e.preventDefault();
  const toDoValue = input.value;  
  form.classList.add("hidden");
  h1.innerText = toDoValue;
  h1.classList.remove("hidden");  
}

classList가 잘 적용되었음을 확인할 수 있다.

DB연결이 없으면 임시적메모리가 들어가면 새로고침으로 입력값 데이터가 날라가기 때문에, localStorage를 이용해서 값을 저장해보자!

const form = document.querySelector("form");
const input = document.querySelector("input");
const h1 = document.querySelector("h1");

function handleSubmit(e) {
  e.preventDefault();
  const toDoValue = input.value;
  form.classList.add("hidden");
  h1.classList.remove("hidden");
  localStorage.setItem("toDo", toDoValue);
  h1.innerText = `오늘 가장 중요한 일: ${toDoValue}`;
}

const savedTodo = localStorage.getItem("toDo");

if (savedTodo === null) {
  form.classList.remove("hidden");
  form.addEventListener("submit", handleSubmit);
} else {
  h1.classList.remove("hidden");
  h1.innerText = `오늘 가장 중요한 일: ${savedTodo}`;
}

입력값을 보내는 함수 handleSubmit함수 내에 localStorage에 저장하는 setItem함수를 넣는다. 그 다음 savedTodo라는 변수 안에 localStorage에 저장한 데이터를 가져오는 getItem함수를 할당 후 h1태그에서 표시되게끔 했다. 여기서 메모리에 데이터가 날라가지 않으려면 localStorage에 저장된 데이터로 가져와야만 한다. 이제 새로고침해도 데이터가 날라가지 않고 그대로 있으면 브라우저 - Application탭에서도 데이터가 잘 저장되어있음을 확인할 수 있다.

오늘 공부 느낀점

오늘 section 4만 쭈욱 들으며 input value, form, localStorage, classList까지 모두 자그맣게라도 실습을 해보았다. 강의들을때는 쏙쏙 잘들어왔는데 직접 구현하려니 왜이렇게 헷갈리는지ㅋㅋㅋㅋㅋㅋ 앞으로 코드챌린지하면서 계속 연습해야겠다. 역시 코딩은 조그만거라도 만들어봤을때 내것이 되는 것 같다.

오늘 배운 개념 적용

마침 코드챌린지는 미리 제출했기때문에, 오늘 배운 classList를 통해 자체적인 코드챌린지를 해보기로 했다. 구현기능은 간단하다. open버튼을 클릭하면 alert창을 열고, 열렸을때는 close버튼으로 변경하려고 한다. 먼저 open기능을 하는 함수를 만들고 console.log를 통해 잘 작동하는지 보았다.

function handleOpenAlert() {
  console.log("open");
}

const alertBtn = document.querySelector(".openAlert");
alertBtn.addEventListener("click", handleOpenAlert);

이벤트가 잘 적용되므로 다음 단계로 넘어가겠다.

이제 함수 안에 조건문을 추가해서 classList를 활용해서 해당css에 해당하는 className을 조건에 따라 숨기고 보여주고를 구현할 것이다.

function handleOpenAlert() {
  if (alert.classList.contains("hidden")) {
    alert.classList.remove("hidden");
    alertBtn.innerText = "close";
  } else {
    alert.classList.add("hidden");
    alertBtn.innerText = "open";
  }
}

const alertBtn = document.querySelector(".openAlert");
alertBtn.addEventListener("click", handleOpenAlert);
const alert = document.querySelector(".alert");

Alert창이 닫힌 상태에서는 open버튼만 화면에 보인다. open버튼을 누르자 close버튼으로 변하고, Alert창이 보인다.

function handleOpenAlert() {
  alert.classList.toggle("hidden");
}

toggle을 이용하면 코드 수가 현저히 줄어들면서, 기능은 줄어든다. 단 버튼 이름이 open과 close로 서로 바뀌는 부분까지 구현은 안되서 요건 버튼명을 하나로 하거나, 다른 방법을 찾아봐야겠다.

오늘 공부 느낀점

오늘은 코드챌린지가 없어서 그냥 쉴까하다가 할 수 있는건 해보자고 생각하고 2가지를 실행했다.

1. 코코아톡 클론 졸업과제 수정
2. 위 classList 자체 코드챌린지

먼저 1번은 오늘 주간회의에서 지난 코코아톡 클론 졸업과제 발표하는 날인데, 내가 발표자는 아니지만 내 과제도 조금씩 언급이 된다고 해서 다시한번 기능에 문제없는지 살펴봤다. 역시나 다시보니 position관련해서 엉성한 부분을 발견해서 바로 수정했다. 어디선가 개발자는 코드를 지속적으로 개선하려는 자세를 가져야한다고 들었는데, 비록 이미 제출한 과제지만 수정하고 넘어가길 잘했다는 생각이 든다.

2번도 원래 강의 미리 예습하고 필기만 하고 넘어갈까하다가 마침 코드챌린지도 일찍 제출해서 오늘 할게 없던 차에 스스로 작은 코드라도 구현해서 복습하자는 생각이 들어서 진행했다. 역시나 코드 공부는 조그만거라도 만들어봐야 확실히 들어온다. 하면서 classList개념을 정확히 익혀서 좋았다.

오늘 공부 느낀점

사실 그동안 JS코드 짜면서 document, window 개념 잘 알지도 못한 상태에서 그냥 작동되니까 썼던 것 같다. 이번에 document와 window에 대해 정확히 익힐 수 있어서 도움이 되었다. 오늘 코드챌린지도 document, window개념을 적용하는 챌린지라서 확실히 익힐 수 있는 시간이었다. 그리고 document, window, event까지 모두 JS의 object이라는 것도 직접 console에 쳐보니 좀 더 정확히 이해가 되는 것 같다.

스터디 시작 전, React를 좀 더 공부해야하나 고민을 했지만, 자바스크립트를 다시 보니 아직도 모르는게 많구나를 느낀다. 그동안 어설프게 익혔다는 사실도 느꼈다. 물론 맨 처음엔 자바스크립트 모든 개념이 다 들어오지 않았지만 말이다. 한번 더 공부하니 전체적으로 보이기 시작해서 기분 좋은 요즘이다. 이번 웹기초 스터디를 통해 자바스크립트 확실히 뽀개자!