자바스크립트7 [Javascript] 스탑워치 만들기 스탑워치를 만드는 방법 스탑워치 구현 방법을 생각했을 때 가장 먼저 떠올랐던 생각은 시작 버튼을 클릭한 시간 - 현재 시간을 실시간으로 재면 되지 않을까? 였다. 이 방법을 사용하면 정지 버튼을 눌렀다가 시작 버튼을 눌렀을 때 멈춰있던 시간부터 다시 이어서 시간을 재기 어렵는 문제가 있었다. 그래서 0초부터 1씩 더하다가 정지를 하면 더하기를 멈추고, 다시 시작을 누르면 다시 1을 더하는 방식으로 구현하기로 했다. time = 0 으로 설정해주고, 시작 버튼을 누르면 time ++ 이 된다. 시간은 시간 단위, 분 단위, 초 단위로 쪼개져서 각각 hour, minute, second 에 저장된다. 그리고 그걸 화면에 나타내도록 구현했다. let time = 0; let timerState = null; .. 2023. 5. 21. [Javascript] JSON과 open weather map API : 날씨 정보 가져오기 에고공 요새 자전거를 타느라 바빠서 블로그에 신경을 못 썼다. 오랜만에 글을 쓴다. 큐큐 코드를 작성할 때 통신 기능을 구현하는 경우가 많기 때문에 API 이해도가 높아야 한다. 그래서 open weather map API를 활용하면서 JSON 데이터를 다루는 법을 공부해보려고 한다. JSON 이란? JSON은 Javascript Object Notation의 줄임말이다. JSON은 문자 기반의 데이터 교환 형식이다. typeof 로 JSON의 데이터 타입을 확인하면 string이 나온다. JSON의 구조는 객체 리터럴 작성법을 따르기 때문에 마치 객체처럼 생겼다. 하지만 객체와 달리 키에 꼭 큰따옴표가 있어야 하며, 값에도 꼭 작은 따옴표가 아닌 큰따옴표를 사용해야 한다. 그리고 데이터를 교환하기 위해.. 2023. 5. 18. [Javascript ] Vanila JS 투두리스트 - 항목 추가 매서드 사람들이 언어에 적응하기 위해 가장 많이 만드는 투두리스트를 자바스크립트로 만들어보았다. 리액트로는 hook을 이용해서 쉽게 만들 수 있는데 자바스크립트로 만들 생각을 하니 앞이 깜깜했다. 그래서 유데미에서 '블랙커피 Vanila JS 문벅스 카페 메뉴 앱 만들기' 인강을 섹션 2까지 들었다. 많이 듣지 않았는데도 자바스크립트로 DOM 조작을 어떻게 할지 방향을 잡는 데 큰 도움이 되었다. 강의에서 DOM 조작을 많이 하기 때문에 간편하게 선택자를 파라미터로 받아서 querySelector를 사용하는 $ 함수를 만든다. 그걸 보고 querySelectorAll도 마찬가지로 쉽게 가져올 수 있도록 $all 함수를 응용해서 만들었다. 덕분에 매우 간편하게 DOM 조작을 할 수 있었다. const $ = (s.. 2023. 3. 29. [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] 객체 만드는 방법 2022년 12월 24일 작성 데이터 타입 자바스크립트에서 데이터 타입은 크게 두 가지로 나뉜다. 원시 타입과 객체 타입이다. 원시타입은 '변경 불가능한 값'으로 우리가 자주 쓰는 number,string, boolean을 포함해 null, undefinded, symbol이 있다. 원시타입을 제외한 나머지 타입은 객체 타입이다. 객체 타입은 key와 value로 구성된 프로퍼티(dog(key) : 'happy'(value)) 또는 함수인 메서드로 구성된다. 자바스크립트는 객체 기반의 언어이기 때문에 자바스크립트에서 객체는 매우 중요한 부분이고, 차후 서버에 데이터를 요청하고 받을 때 객체에 담긴 데이터를 주고 받으니 객체를 좀더 공부해야겠다는 생각이 들었다. 그래서 오늘은 나에겐 아직 낯선 class .. 2023. 2. 23. 이전 1 2 다음
