JavaScript

Ajax에 대해서 (비동기적인 웹페이지 구성)

Ajax(Asynchronous JavaScript and XML)를 사용한 웹페이지를 방문했을 때, 웹페이지가 새로운 데이터로 갱신되었다면 필요한 부분에 필요한 데이터만 비동기적으로 받아와 렌더링 된다. Ajax는 자바스크립트와 DOM, 그리고 Fetch라는 핵심 기술로 구성된다. 과거 웹페이지는 form 태그를 통해 서버에 데이터를 전달하고 서버는 요청에 대한 응답으로 새로운 웹페이지를 제공해야 했다. (즉, 매번 새로운 웹페이지(HTML)를 제공했다.) 하지만, 자바스크립트를 통해 DOM을 제어할 수 있고, Fetch를 통해서 사용자가 웹페이지에서 작업하는 동안 서버와 통신할 수 있게 됨으로써, 필요한 부분만 변경할 수 있게 되었다. Ajax 기술의 발전으로, 서버와 데이터 통신을 원활하게 할 수 ..

즉시 실행 함수 (IIFE, Immediately Invoked Function Expression) 간단히 알아보기

즉시 실행 함수는 말 그대로 선언과 동시에 즉시 실행되는 함수이다. 과거에는 이것이 무슨 의미가 있는가, 생각했지만 지나고보니 자바스크립트에서 유용하게 쓰이는 문법이었다. 웹팩에서도 즉시 실행 함수를 통해서 js의 스코프 이슈를 해결했다고 하니, 알아두는 편이 좋다. 기본적인 사용법은 다음과 같다. (function(){ let i = 0; console.log(`변수i는 ${i}이다.`); })(); 이 js 파일을 실행하면 바로 콘솔창에 '변수i는 0이다'가 찍힐 것이다. (() => { let i = 0; console.log(`변수i는 ${i}이다.`); })(); 화살표 함수로도 표현할 수 있다. 즉시 실행될 함수이기에, 익명함수로 작성하여도 문제없다. 기본적인 형태는 말 그대로 () => {}..

tailwind css 사용하기 (CRA, Next.js)

설치 cra의 경우 tailwindcss의 설치만 하면 된다. develop 옵션을 주어 설치해준다. npm install -D tailwindcss npx tailwindcss init next.js의 경우 추가적인 라이브러리의 설치가 더 필요하다. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npx tailwindcss init -p를 통해서 tailwind.config.js 파일이 최상단에 자동으로 만들어지게 된다. tailwind.config.js 작성하기 cra의 경우 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/..

자바스크립트에서 싱글톤 패턴

싱글톤패턴은 프로세스 내부에서 클래스가 단 하나의 인스턴스만 생성될 수 있도록 구현된 것을 의미한다. 기본적으로 static 영역에 인스턴스를 생성하고, 생성자가 실행되었을 때 기존에 생성된 인스턴스가 있으면 다시 인스턴스를 생성하지 않고 기존의 것을 반환하는 방식으로 구현된다. 자바스크립트에서는 클래스 문법으로 이를 구현할 수도 있지만, 함수형 프로그래밍으로 클로저 문법을 이용하여 이를 구현할 수도 있다. Class 문법으로 구현 class Key { static #_instance; constructor() { if(!Key.#_instance) { Key.#_instance = this } return Key.#_instance; } static getInstance() { return Key.#_..

Blob과 File, FileReader 사용하여 파일(.txt) 읽고 쓰기

blob은 전에도 사용한 적이 있지만, 이번에 다시 사용하며 사용한 내용을 정리하기로 하였다. Blob은 JavaScript 네이티브 형태가 아닌 데이터또한 표현할 수 있다. File이 Blob에 기반한 인터페이스로, 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 상속해 기능을 확장한 것이다. Blob과 File은 생성자를 통해서 인스턴스를 만든다. import { useState, useEffect } from "react"; const IoComponent = ({setTexts, texts}) => { const [url, setUrl] = useState(""); useEffect(() => { const blob = new Blob([texts], {type: "text/plain"..

자바스크립트에서 큰 숫자 표현하기 (BigInt, bn.js)

자바스크립트에서는 숫자를 표현하는데 한계가 있다. Number로 수를 표현할 땐 2^53 - 1 이상의 수를 안정적으로 표현하기 어렵다. 때문에 이보다 큰 숫자를 표현할 때는 BigInt로 표현한다. const num = 123456789; const BigIntNum = BigInt(123456798789); // 또는 BigInt("123456798789"); const BigIntNumN = 123456798456n; console.log(typeof num, typeof BigIntNum,typeof BigIntNumN); // number bigint bigint BigInt와 Number 타입의 계산은 에러가 발생한다. const num = 132; const bigNum = 456n; con..

자바스크립트에서 배열 섞기 알고리즘 (피셔-예이츠 셔플)

배열을 랜덤으로 섞어야 하는 알고리즘의 구현을 해보기로 했다. 조사결과 피셔-예이츠 셔플이라는 알고리즘 방법을 알게되었고, 이를 자바스크립트로 구현하기로 하였다. 조건은 다음과 같이 설정하였다. inputs : 임의의 길이를 가진 배열 arr, 임의의 배열 arr의 길이 n output : 임의의 배열 arr이 무작위로 섞인 새로운 배열 shuffledArr 실제 구현은 다음과 같이 하였다. const shuffle = (arr, n) => { const shuffledArr = [...arr]; for(let i = 0; i < n - 1; i++) { // i ≤ < n인 임의의 정수 (최소값이 i, 최대값이 n - 1) const randomIdx = Math.floor(Math.random() *..

자바스크립트 코드 실행시간 측정하기

가장 먼저, console.time을 이용할 수 있다. console.time과 console.timeEnd 사이의 시간 차이를 출력할 수 있다. 인자로 같은 문자열을 넣으면, 그 사이에서 실행된 코드들이 얼마만큼의 시간동안 실행되었는지 콘솔로 확인할 수 있다. 그 사이에서 console.timeLog를 사용하면 콘솔 코드가 실행된 순간에 시간이 얼마나 지났는지도 확인할 수 있다. const checker = () => { for(let i = 0; i for of > for 순으로 빠른 성능을 보여주었다. 🍭 react native에서는 위의 코드 중에서 performance.now()가 유일하게 작동하였다. JS 벤치마킹 라이브러리로 benchmark를 사용할 수도 있다. https://www.npm..