WEB 32

JavaScript에도 String Pool이 있을까? - V8의 String Table 알아보기

📝 1. 서론`let a = 'abc'; let b = 'abc'` 일 때, a와 b는 같은 주소를 참조하나요?  스터디에서 JavaScript의 string 타입을 이야기하던 날, 위와 같은 질문을 받았습니다. Java에서는 스트링 풀(String Pool)을 이용해서 동일한 문자열을 재사용하는데, JavaScript에서도 비슷한 개념이 있는지를 묻는 질문이었습니다. 위 질문에 대한 답을 찾는 과정이 이번 글의 주제입니다. 미리 정답부터 말하자면, ‘그렇다’ 입니다. V8 엔진에서는 String Table 구조를 이용하여 동일한 문자열을 한 번만 저장하는 최적화가 이루어집니다. 이 글에서는 먼저 V8 엔진을 사용하는 환경에서 동일한 문자열을 가지는 두 변수가 실제로 같은 주소를 참조하는지 확인하고, ..

WEB/💡 Javascript 2024.11.09

[JavaScript] 비교적 정확한 타이머 만들기

자바스크립트로 정확한 타이머를 만드는 것은 어렵습니다. 어려운 이유는 무엇인지, 그리고 어떻게 비교적 정확한 타이머를 만들 수 있는지 알아보겠습니다. 🤔 1. setInterval()과 setTimeout()이 정확하지 못한 이유 JavaScript에서 타이머 기능을 구현할 때 자주 사용하는 `setInterval()`과 `setTimeout()` 함수는 브라우저 환경에서 일정 시간 간격으로 코드를 실행할 수 있게 해 줍니다.`setTimeout()` 함수를 이용해 1초 간격으로 실행되는 타이머를 만들어 보겠습니다. const INTERVAL = 1000; // 1초 간격let startTime = Date.now();function timerFunction() { const currentTime..

WEB/💡 Javascript 2024.08.15

[Javascript] HTML 페이지에 TOC(Table of Content, 목차) 만들기

블로그 서비스에서 페이지 오른쪽에 목차가 있는 것을 보신 적이 있나요? 클릭하면 해당 항목으로 이동하고, 스크롤하면 현재 위치에 맞춰 목차가 강조되어 편리합니다. JavaScript를 사용해 HTML 페이지에 이런 목차를 추가하는 방법을 알아보겠습니다. 1. 동적으로 목차를 생성하고 링크 추가하기 우선, 목차를 담을 공간을 만들어 보겠습니다. body { background-color: #F2F0EE; display: flex; flex-direction: column; justify-content: center; align-items: center;}.toc { position: fixed; top: 20px; right: 20px; width: 250px; bac..

WEB/💡 Javascript 2024.07.12

[CSS] 해와 달이 뜨고 지는 다크모드 버튼 만들기

다크모드가 대중화 되면서 여러 모양의 다크모드 버튼을 만나볼 수 있습니다.이미 여러 디자인이 공개되어 있지만, 저는 조금 더 독특한 버튼을 만들어보고 싶었습니다. 이번 게시글에서는 위 이미지처럼 해와 달이 떠오르고 지는 애니메이션이 포함된 다크모드 버튼을 만드는 방법을 소개하겠습니다. 1. 다크모드 토글 버튼 만들기 🌜document.addEventListener("DOMContentLoaded", function () { const savedTheme = localStorage.getItem("color-theme") || "light"; document.documentElement.setAttribute("color-theme", savedTheme);});const toggleButton = ..

WEB/📘 HTML, CSS 2024.06.18

자바스크립트가 숫자를 저장하는 방법 (IEEE 754)

1. 개요   자바스크립트에서 0.1 + 0.2는 0.3이 아닙니다.  사실 알고 보면 C언어와 자바, 파이썬에서도 같은 오류가 발생합니다.왜 이런 오류가 발생하고, 어떻게 정확한 실수 연산을 할 수 있을지 알아보도록 하겠습니다. 2. 자바스크립트가 숫자를 저장하는 방법 우선 자바스크립트에서는 숫자를 어떻게 저장하는지 알아보겠습니다. 자바스크립트는 C언어의 int, float, double처럼 실수와 정수를 구분하지 않고, 모든 숫자를 number 타입으로 저장합니다.ECMAScript 사양에 따르면, number 타입은 IEEE 754 표준을 이용해 숫자를 저장합니다. IEEE 754는 부동소수점을 표현하는 가장 널리 쓰이는 표준으로, C와 C++, Java의 double 타입, Python의 floa..

WEB/💡 Javascript 2024.04.28

[Javascript] 마이크 변경과 볼륨 조절하기

마이크 볼륨 시각화하기 에 이어서, 마이크 변경과 오디오 볼륨을 조절하는 방법을 간단히 살펴봅니다. 바닐라 Javascript로 개발한 예제코드는 아래에서 확인할 수 있습니다.https://codepen.io/vchgekmq-the-flexboxer/pen/poBWNbE 1. 입력 마이크 변경하기입력 마이크를 변경하는 기능을 간단히 추가해 보겠습니다. 이전에 만든 볼륨 시각화 코드에서 이어서 개발할 예정이므로, 이전 게시글을 참고해 주시면 감사하겠습니다. Javascript로 마이크 볼륨 시각화하기기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다. 게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다. 웹 페이지sir..

WEB/💡 Javascript 2024.03.23

[React] 5. fetch 함수

fetch() 함수란? fetch 함수는 JavaScript에서 제공하는 API 중 하나로, 서버에서 데이터를 가져오기 위해 사용됩니다. fetch 함수는 네트워크 요청을 보내고, 서버로부터 응답을 받습니다. 응답은 promise 객체로 반환되며, 이를 통해 비동기적으로 데이터를 처리할 수 있습니다. ChatGPT에 물어봤을때 나온 답변인데, 다른곳에서 찾아본 내용과 비교했을 때 큰 차이가 없어 가져와 봤다. 위의 설명대로, fetch API는 백엔드 서버와 데이터를 주고받는데 사용한다. 간단하게 설명하자면 React에서는 Node.js 등과 데이터를 주고받기 위해 fetch 함수를 사용한다. 자세한 내용은 다음 링크들에 정리되어 있다. https://developer.mozilla.org/ko/docs..

WEB/⚛️ React 2023.02.22

[React] 4. CRUD 게시판 구현하기

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. React를 이용하여 CRUD( Create, Read, Update, Delete )기능을 구현한 게시판이다. 예전에 Node.js로 같은 기능을 구현한 적이 있는데, React로 구현하니 더 깔끔한것 같다. Node.js로 구현했던 CRUD 게시판은 아래 링크를 참고. https://sirius7.tistory.com/48 [Node.js] 8. CRUD 게시판 구현 CRUD CRUD란 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 의 약자로, 사용자 인터페이스가 갖추어야 할 기능을 말한다. Node.js로 CR..

WEB/⚛️ React 2023.02.16

[React] 3. state

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. State의 정의 state란? prop 과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어 준다. prop과 state 모두 이 값이 변경되면 새로운 리턴 값을 만들어서 ui를 바꾼다. state는 값이 변경되면 HTML이 자동으로 다시 랜더링 된다. (= 새로고침 하지 않아도 됨) 일반 변수는 값이 변경되어도 HTML이 자동으로 다시 랜더링 되지 X (= 새로고침 해야함) 변수 외에 데이터를 저장하는 또 다른 옵션으로 생각해도 됨 문자, 숫자, object, array 등을 저장 가능하다. useState()를 이용해서 만들어야 ..

WEB/⚛️ React 2023.02.11

[React] 2. 컴포넌트, props, event

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 컴포넌트 소스코드 정리정돈의 핵심 : 서로 연관된 것을 모은 다음(그룹핑) 이름을 붙인다. 리액트는 사용자 정의 태그를 만드는 기술이므로, 사용자 정의 태그를 이용해 연관된것을 모아 정리 정돈한다. 사용자 정의 태그 만들기 사용자 정의태그를 만들때는 함수를 정의한다. 사용자 정의태그를 만들때는 반드시 대문자로 시작해야 한다. 리액트에서는 사용자 정의태그를 컴포넌트(component)라고 부른다. 컴포넌트를 사용할 때의 장점 각 코드가 이름을 가지고 있기 때문에 어떤 취지의 코드인지 금방 파악 가능하다. 한번의 수정으로 컴포넌트를 사용하는 모든 ..

WEB/⚛️ React 2023.02.10