> 개발/Javascript16 [Javascript ] Vanila JS 투두리스트 - 항목 추가 매서드 사람들이 언어에 적응하기 위해 가장 많이 만드는 투두리스트를 자바스크립트로 만들어보았다. 리액트로는 hook을 이용해서 쉽게 만들 수 있는데 자바스크립트로 만들 생각을 하니 앞이 깜깜했다. 그래서 유데미에서 '블랙커피 Vanila JS 문벅스 카페 메뉴 앱 만들기' 인강을 섹션 2까지 들었다. 많이 듣지 않았는데도 자바스크립트로 DOM 조작을 어떻게 할지 방향을 잡는 데 큰 도움이 되었다. 강의에서 DOM 조작을 많이 하기 때문에 간편하게 선택자를 파라미터로 받아서 querySelector를 사용하는 $ 함수를 만든다. 그걸 보고 querySelectorAll도 마찬가지로 쉽게 가져올 수 있도록 $all 함수를 응용해서 만들었다. 덕분에 매우 간편하게 DOM 조작을 할 수 있었다. const $ = (s.. 2023. 3. 29. [Javascript] 실행 컨텍스트 지난 글에 이어 오늘은 모던 자바스크립트 딥 다이브를 참고해서 실행 컨텍스트를 정리했다. 아직 제대로 이해를 못해서 단순 요약글에 그칠 예정이다. 나중에 이해가 되면 내가 이해하지 못했던 부분을 알기 쉽게 변경할 예정이다. [이전 글] [Javascript] 변수의 스코프, 호이스팅, TDZ 지난 번에 변수의 정의와 선언, 할당에 대한 글을 정리했었다. 이번에는 모던 자바스크립트 딥 다이브 책을 참고해서 변수 스코프를 공부해보고 설명할 예정이다. [이전글] [Javascript] 변수의 정 dalsong-00.tistory.com 실행 컨텍스트 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. 실행 컨텍스트를 알아야 자바스크립트가 어떻게 동작.. 2023. 3. 15. [Javascript] 변수의 스코프, 호이스팅, TDZ 지난 번에 변수의 정의와 선언, 할당에 대한 글을 정리했었다. 이번에는 모던 자바스크립트 딥 다이브 책을 참고해서 변수 스코프를 공부해보고 설명할 예정이다. [이전글] [Javascript] 변수의 정의와 선언, 할당 오늘부터 틈틈이 모던 Deep Dive를 정독하면서 정리한 개념을 블로그에 올릴 예정이다. 개발 공부를 막 시작했을 땐 이 책을 보고 좌절했었는데, 개발 공부를 어느 정도하고서 책을 다시 보니 내용 dalsong-00.tistory.com 변수의 스코프 스코프(Scope)란 '유효 범위'라는 의미이다. 그러니 변수의 스코프는 변수의 유효한 범위를 의미할 것이다. 스코프를 이해하기 위해 다음 예제를 살펴보자. console.log()의 결과 var1, var2, var3은 정상적으로 1, .. 2023. 3. 14. [Javascript] parseInt()와 toString() 2023년 2월 5일 작성 알고리즘 문제를 풀다가 내가 parseInt()에 대해 제대로 파악하지 못하고 사용했단 걸 알았다! 깨달음을 얻게 해준 문제는 이진수 더하기이다. 처음에는 특정 진수끼리 더하게 해주는 매서드가 있는 줄 몰라서 10 + 11 을 하면 21이고, 2를 10으로 바꿔서 101 로 나타나게 해줘야 하나? 하면서 고민을 했다. 그러다가 매서드를 검색하고서 '아니 parseInt()에게 이런 기능이 있단 말야?' 하고 깜짝 놀랐다. 나에게 parseInt()는 가끔 숫자를 입력했는데도 불구하고 그것이 숫자가 아니라고 하는 혹시 모를 오류를 방지하기 위한 수단이었다. 그래서 매개변수를 하나만 받는 줄 알았는데 알고 보니 선택적으로 다른 매개변수를 받을 수 있었다! parseInt(strin.. 2023. 3. 10. [모던 Deep Dive] 브라우저의 렌더링 과정 * 이 글은 모던 Deep Dive 자바스크립트 브라우저의 렌더링 과정을 단순 요약한 글입니다. 브라우저의 렌더링 과정 브라우저 렌더링 과정은 브라우저가 서버로부터 필요한 것을 요청하고, 서버는 응답해주는 방식으로 진행된다. 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고, 서버는 응답한다. 2. 브라우저 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성한다. 그리고 이를 결합하여 렌더 트리를 생성한다. 3-1. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax tree)를 생성하고 바이트 코드로 변환하여 실행한다. 3-2. 자바스크립트에서 DOM AP.. 2023. 3. 8. [Javascript] find()와 reduce() 2023년 1월 13일 백엔드와 통신을 할 때 프론트엔드에서 백엔드로 데이터를 보내줘야하는 경우가 있었다. 그때 백엔드에서 원하는 형태의 데이터로 가공을 해 데이터를 보내줘야했다. 장바구니 페이지에서는 1. 장바구니에서 구매할 항목을 체크 후 주문하기를 누르면 선택한 항목들의 cartId가 배열에 담기는데, 그 배열에 담긴 항목의 cartId와 productId, quantity를 보내줘야 했다. 2. 내가 구매할 아이템들의 총 가격을 보내줘야 했다. 그래서 값을 구하기 위해 find와 reduce를 활용했다. find() find() 는 배열에서 특정 조건에 맞는 값을 찾는 함수이다. 조건에 부합하는 첫 번째 값을 리턴하고, 만약 조건에 일치하는 값이 없을 경우 undefinded를 리턴한다. 나는 f.. 2023. 3. 5. 이전 1 2 3 다음
