😒들어가며
데브코스를 시작한지 4주차가 되었다. 분면 1주차 시점에서는 오전에 일어나서 오전 시간을 활용했었는데 코어 타임 이후에도 종종 야근을 하다보니 이제는 오전 시간에 충분한 휴식을 취하는데 집중하는 것 같다ㅜㅜ
그리고 현재까지 강의를 수강하면서 느낀 점은 정말 기본기가 없는 상태로 교육을 들으면 힘들겠다고 생각이 든다. 나는 그래도 프로젝트 경험도 있어서 알고있는 내용들이 많았고 다시 복습하는 느낌이였다. 무엇보다도 백엔드 경험이 있던게 매우 큰 느낌이였다.
요즘 가끔씩 팀원들이 이해하기 힘들어할 때 지식을 공유하면서 많은 도움이 되는 것 같다. 앞으로 더 많은 도움을 줄 수 있게 더 열심히 해야지라는 동기부여도 되어 데브코스에서 공부 외적으로도 많이 성장하는 것 같다.
✅ VanillaJS를 통한 자바스크립트 기본 역량 강화 I(4) 10.09
모듈
html에 스크립트 파일을 src로 불러올 경우, 불려진 스크립트들은 전역 범위에 선언된 변수나 함수는 어디에서나 사용이 가능하다. 이는 전역 범위가 불필요하게 많은 변수나 함수를 담고 있고 변수, 함수 명이 중복될 위험도 있다.
모듈을 사용하게 되면 각 모듈 파일은 독립적으로 존재했다가 import 한 경우에만 꺼내서 꺼낸 장소에서만 사용이 가능해 전역 범위를 오염시키지 않는다.
또한 스크립트 태그로 로딩하는 경우 불러오는 순서가 중요하지만, import로 불러오는 경우 순서가 무관하다.
🤔
프로젝트를 하면서 모듈 사용법은 익숙해서 이해하기 쉬운 내용이 였다. 하지만 모듈이 도입되기 전 오직 script 태그로 js를 로딩하던 시절...
script 태그가 전역 범위를 가지고 자바스크립트의 사용성이 커지면서 모듈을 활용하여 단점들을 해결할 수 있고 모듈이 어떤 문제를 해결하기 위해 생겨난지 이해했다.
비동기 다루기 callback
비동기 종류
- addEventListener
- setTimeout
- setInterval
- XMLHttpRequest(XHR)
sync 동기 방식으로 사용하면 가독성도 좋아지고 코드가 깔끔해지지만 요청 후 응답이 오기전까지 브라우저가 굳어버린다.
코드가 깊어지고 복잡해져도 자바스크립트는 단일 스레드로써 비동기 방식이 필요한 경우에는 비동기 async 방식을 사용해야한다.
🤔
express로 백엔드 개발할 때 처음으로 비동기라는 개념을 마주했었다. 당시에는 정말 이해가 안되서 동기적으로 데이터를 받는데만 급했던 기억이 난다.
현재는 자바스크립트의 엔진과 이벤트 루프를 통해 어떻게 비동기로 동작하는지 이해하며 비동기 함수를 마주했을 때 쫄지않고 다룰 수 있는 것 같다.
✅ VanillaJS를 통한 자바스크립트 기본 역량 강화 I(5) 10.10
Promise
🤔
express로 비동기 작업을 할때 처음 배운 Promise를 다시 공부했다. 당시에는 간단한 비동기 작업이여서 깊게 공부하지 않았다. 하지만 이번 기회에 Promise에 다양한 내장함수를 알게 되었고 차후 프로젝트에서 활용할 생각에 걱정 반 기대 반 이다..
async, await
🤔
강사님 께서 async, await을 사용할 때 가독성과 유지보수성 면에서 크게 이점을 가져다 주지만, Promise에 대한 이해 없이 async/await만 사용하는 것은 권장되지 않으며, 비동기 코드의 동작 원리를 제대로 파악하고 사용하는 것이 중요하다고 강조하셨다.
이 말에 나는 진짜 많이 공감했다. 학부 시절 프로젝트에서 비동기와 Promise 이해 없이 편한 방법의 async await을 좋다고 막 사용하다가 반환 값으로 Promise 객체를 받고 해제 하는 방법도 몰라서 혼동이였다.
fetch api
🤔
fetch API 파트에서는 사용법과 정확한 성공 처리가 크게 와닿았다.
사실 HTTP 통신을 하기 위해 Ajax, fetch, axios 이렇게 알고 있었지만 제일 사용하기 편한 axios만 사용하고 있었다.
이번에 fetch 파트를 공부하면서 axios와 다르게 response 데이터를 따로 .json()을 통해 따로 객체로 변환해줘야 했다. 그리고 현재까지 status의 상태 값으로만 성공 여부를 처리했는데 ok메서드와 함께 사용하여 더 탄탄한 처리를 할 수 있는 것을 알게 되었다.
✅ VanillaJS를 통한 자바스크립트 기본 역량 강화 I(6) 10.11
fetch API를 통해 간단한 App을 만드는 방법을 배웠다. 강사님 코드를 보면서 처음 알게된 부분과 궁금한 점이 있었다.
find
find 메소드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소 값을 반환한다. 만약 그런 요소가 없다면 undefined를 반환
원본 배열을 변경하지 않으며 순차적으로 검색하므로 같은 조건을 여러 개 가진 경우 가장 먼저 발견한 하나만 처리한다.
const array = [5, 12, 8, 130, 44];
const found = array.find(element => element > 10);
console.log(found); // expected output: 12findIndex
findIndex 메서드는 find()와 유사하게 동작하지만 차이점은 해당 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다는 점입니다. 만약 그런 요소가 없다면 -1을 반환합니다.
원본 배열을 변경하지 않으며 순차적으로 검색하므로 같은 조건을 여러 개 가진 경우 가장 먼저 발견한 하나만 처리합니다.
const array = [5, 12, 8, 130, 44];
const foundIndex = array.findIndex(element => element > 10);
console.log(foundIndex); // expected output: "1"closest
현재 요소부터 가장 가까운 상위 요소 중 주어진 선택자와 일치하는 첫 번째 요소를 반환한다. 일치하는 요소가 없으면 null을 반환
이 때, 검색은 현재 노드부터 시작하여 자기 자신도 포함될 수 있습니다.
<div id="grandparent">
<div id="parent">
<div id="child"></div>
</div>
</div>
<script>
const child = document.querySelector('#child');
const closestDiv = child.closest('div'); // 자기포함 위로 div 태그 찾기
console.log(closestDiv.id); // "child"
const closestParent = child.closest('#parent'); // 자기포함 위로 id값 parent 찾기
console.log(closestParent.id); // "parent"
</script>✅ VanillaJS를 통한 자바스크립트 기본 역량 강화 I(7) 10.12
history API
🤔
React로만 가능할 줄 알았던 SPA를 자바크스립트로만 구현하는 것이 정말 신기했다.
처음 보는 history API의 사용방법과 특징을 이해하고 활용하여 SPA를 구현해보면서 아!!! React가 이러한 부분을 사용하기 쉽고 편리하게 도와주는 라이브러리구나 하고 또 한번 생각되는 시간이였다.
나중에는 React가 어떻게 동작되길래 이러한 부분을 편하게 사용할 수 있는지 멘토님께서 React를 까보는것도 추천하셔서 한 번 오픈 소스를 보면서 이해해봐야 겠다.
✅ VanillaJS를 통한 자바스크립트 기본 역량 강화 I(8) 10.13
UX 사용자 경험
- 낙관적인 업데이트
데이터 추가시 리스트에 새로 추가할 경우 데이터 추가를 성공했다고 가정하여 리스트에 데이터를 미리 추가하고 백엔드에서 처리를 하는 업데이트
- 이전 입력 값 새로고침 시 미리보기
localStorage를 활용하여 사용자의 입력 값을 onChange 이벤트로 저장하고 그 데이터를 활용하여 사용자가 이전 입력 값을 localStorage를 활용하여 바로 볼 수 있다.
🤔
현재까지 배운 fetch, async await, history API 등 모두 활용하여 TodoList 기능을 강화하는 시간이였다.
좀 복잡했지만 천천히 따라가면서 강사님께서 FE 개발자에게 UX란 어떤 의미인지 설명해주시고 중요성을 강조해주셨다.
정말 사소하거나 디테일한 UX를 신경쓰고 개발한다는 것은 그런 하나하나가 정말 좋은 웹 페이지가 된다고 하셨다.
이때까지 UX에 대한 진지한 생각을 한 적이 있었나?? 하고 한 번 돌아보는 시간도 되었고 사용자 경험을 좋게 해주는 여러가지 방법도 배운 시간이였다.
🥱마치며
데브코스 4주차가 끝나고 이전의 나의 모습과 많이 비교 해봤다. 그래서 많이 바뀌어 성장한 모습들이 있다.
첫 번째
코드 리뷰 등을 통해 항상 다른 사람이 내 코드를 본다는 생각에 어떻게 하면 더 가독성이 좋을까? 어떻게 하면 더 리뷰하기 편할까 등 클린 코드에 집중하며 신중히 코드를 작성하게 되었다.
두 번째
무지성 개발을 하던 나에게 컴포넌트 방식으로 설계를 통해 개발하는 방법을 배운뒤로 인제 웹 페이지만 보면 어떻게 컴포넌트를 분리하면 좋을까?, 또한 앞으로 있을 노션 프로젝트에서도 어떻게 컴포넌트를 분리할까 등 엄청 좋은 방향으로 생각하며 개발하고 있다고 느꼇다.
세 번째
또한 팀원들과 자바스크립트 스터디를 진행하면서 개인적으로 자바스크립트 지식이 빠삭하다고 생각했는데 그냥 아직 애기 수준이였다. 모딥다 책을 통해 공부하면서 아는 내용을 더 탄탄히 이해하고 몰랐던 내용도 수두룩하게 쏟아졌다.
생각해보면 더 있겠지만 이 내용들은 한 달 회고록에 작성하는 것이 더 좋을거 같다.
