고양의 성장일기

URL을 문자열로 막 생성하면 안 되는 이유엄밀히 말하면, URL을 문자열로 생성, 사용한다고 해서 크게 잘못된 방식은 아닙니다. 다만 프로젝트의 규모가 커지고 여러 개발자들과 협업을 해야 한다거나, URL에 붙는 조건과 경우의 수가 복잡해짐에 따라단순히 문자열로 URL을 조합하는 방식은 URL의 구조와 파라미터 규칙이 코드 전반에 암묵적으로 분산되면서,점차 변경 시 영향 범위를 예측하기 어려운 상태로 이어지기 쉽습니다. 이 글에서는 URL을 생성, 할당하는 여러 가지 방법을 가볍게 다루며 왜 URL을 체계적으로 다루는 것이 중요한지 알아보겠습니다.변수에 URL 할당하기자바스크립트에서 URL을 변수에 할당하는 방법은 크게 두 가지가 있습니다.문자열로 생성URL 객체 활용두 가지 경우 모두 뚜렷한 장단점이..

정규식으로 헥스 코드 추출하기헥스 코드는 색을 표시하는 16진수의 코드입니다.흔히 "#ff3e1a"와 같은 여섯 자리로 표시되지만, 투명도를 담당하는 '알파채널'이 추가되어 8자리로 이루어지는 경우도 있습니다. 어떤 요소의 클래스로 헥스 코드가 박혀있고 이를 자바스크립트로 가져와야 할 때 아래와 같은 방법으로 가져오면 됩니다.document.addEventListener("DOMContentLoaded", () => { const button = document.querySelector("li button"); const classes = button.className.split(" "); const colorCode = classes.find(className => /^[a-fA-F0-..

IIFE 알아보기IIFE(Immediately Invoked Function Expression)는 함수 표현식을 즉시 실행하는 방식입니다.이 표현식은 코드의 범위를 제한하거나, 전역 변수 오염을 방지하는 효과가 있습니다.자세히 알아보도록 하겠습니다.IIFE 문법IIFE는 일반적으로 아래와 같은 형태로 작성됩니다.ES6에서는 화살표함수 형태로 작성할 수 있습니다.(function() { // 즉시 실행될 코드})();(() => { // 즉시 실행될 코드})();이 표현식은 함수 선언문의 경우 아래와 같은 코드와 유사하게 동작합니다.const app = function() { // 즉시 실행될 코드};app();동작 결과가 같다면 왜 굳이 이런 형태로 함수를 선언하고 실행할까요?이어서 알아보겠습..

싱글 스레드인 자바스크립트가 비동기 작업을 수행하는 방법자바스크립트를 다루다 보면 한 번은 마주치는 질문이 있습니다.자바스크립트는 싱글 스레드라면서요? 그런데 어떻게 동시에 여러 작업을 처리하죠? 결론부터 말하자면, 자바스크립트의 실행은 싱글 스레드이지만, 비동기 처리 환경은 멀티 구성이기 때문입니다.이 글에서는 그 구조를 차근차근 풀어보겠습니다.자바스크립트는 왜 싱글 스레드일까자바스크립트의 실행 모델은 기본적으로 단일 호출 스택(Call Stack) 기반입니다. 한 번에 하나의 함수만 실행 가능하고,동시에 여러 개의 자바스크립트 코드를 실행할 수 없습니다.function a() { b();}function b() { c();}function c() { console.log('hello'..

자바스크립트 비동기 3부작 지난 글에서 비동기를 처리하는 방법과 관련해 Promise와 async / await 방식에 대해 살펴보았습니다.이번 글에서는 그보다 더 근본적인 비동기 처리 패턴인 Callback에 대해 정리해보려 합니다.Callback이란 무엇인가콜백이란 어떤 작업이 끝난 뒤 실행할 함수를 다른 함수의 인자로 전달하는 방식을 의미합니다. 자바스크립트에서 함수는 1급 객체로서변수에 할당할 수 있고다른 함수에 인자로 전달할 수 있으며객체로 참조할 수 있습니다.이 특성에 의해 자바스크립트는 비동기 작업의 완료 시점을 직접 기다리고 관측하는 대신"작업이 끝났을 때 무엇을 할지"를 함수로 전달하는 구조를 사용하곤 했었습니다. 그 덕분에 비동기 작업의 완료시점을 보장받을 수 없는 자바스크립트에서 안정..

자바스크립트 비동기 3부작 자바스크립트는 기본적으로 단일 스레드를 가지고 동작하기 때문에 시간이 오래 걸리는 작업을 동기적으로 처리하면 종종 화면이 멈추는 문제가 발생합니다.이 문제를 해결하기 위해 자바스크립트는 비동기 처리 방식을 제공하는데,비동기를 처리하는 여러 가지 방법 중 하나가 이번 글에서 알아볼 Promise입니다.Promise가 뭐죵지금 당장은 결과를 알 수 없지만 나중에 언젠가 성공 또는 실패의 결과를 반환할 작업을 표현하는 객체입니다.Promise는 작업의 상태(State)와 결과(result)를 관리하며 항상 아래 3가지 상태 중 하나를 가지게 됩니다.Pending : 아직 처리중이유fulfilled : 성공했슈rejected : 실패했슈약속 잡기 Promise 생성하기Promise 객..

Fisher-Yates 알고리즘으로 랜덤 값 가져오기Fisher-Yates 알고리즘은 '완전히 균등한 확률의 무작위 순열'을 보장하는 알고리즘입니다.자바스크립트에서 무작위 값을 추출할 수 있는 Math.random() 함수와 어떤 차이가 있는지쉽게 알아보겠습니다.차이점먼저 두 알고리즘은 사용의 목적이 조금 다릅니다. Fisher-Yates 알고리즘은 무작위 순열을 생성하기 위해 사용되며 Math.random() 함수는 임의 값을 생성합니다.즉, n개의 요소를 가진 배열을 무작위로 섞고 싶은지, 아니면 무작위 인덱스 한 개를 뽑아내고 싶은지에 따라 다릅니다.Fisher–Yates 알고리즘의 구조Fisher-Yates 알고리즘은 배열을 순회하면서 뒤에서부터 하나씩,아직 섞이지 않은 영역에서 무작위로 하나를 ..

"==" 그리고 "==="유명한 자바스크립트 관련 짤입니다.왜 자바스크립트를 최악의 언어라고 하는지 그 이유가 한 장에 모두 담겨있죠 그중 "true==1"이라는 표현식과 "true===1"이라는 표현식이 보입니다.각각 표현식의 값은 true와 false로 갈립니다. 등호가 하나 더 붙고 안 붙고의 차이로 결과가 갈렸습니다. 왜 그럴까요?느슨한 비교 vs 엄격한 비교자바스크립트에서 값의 일치 여부를 비교하는 연산자 ==와 ===에는 큰 차이가 하나 있습니다.바로 "암묵적 형변환"을 수행하는지, 하지 않는지의 차이입니다.== (느슨한 비교)형변환을 수행합니다: ==는 비교하는 두 값의 데이터 타입이 다르면, 자바스크립트가 암묵적으로 형변환을 수행하여 같은 타입으로 변환한 후 비교합니다.예를 들어, 1 ==..

헤드 태그 내부엔 여러 가지 메타데이터나 CSS 등 HTML 전역 구조와 스타일에 영향을 미치는 요소가 포함됩니다.같은 맥락으로 아래와 같은 경우 스크립트 태그는 헤드 태그 내부에 위치하게 됩니다. 1. 라이브러리를 로드하는 경우2. 소셜미디어 API를 초기화 / 호출3. DOM을 초기화 또는 전역변수 / 함수 선언4. SEO 및 Google Analytics와 같은 추적 코드 바디 태그 내에 스크립트 태그가 포함되는 것은 일반적이지 않지만, 바디태그 내부에 스크립트가 위치해야 하는 경우가 있습니다.광고나 소셜미디어 위젯과 같이 특정 DOM 안에서만 작용해야하는 경우 해당 요소 내부에 스크립트 태그가 배치됩니다. 왜 일반적이지 않은지 그 이유는 아래에서 설명하도록 하겠습니다.가장 일반적이고 좋은 ..

객체 접근법 파헤쳐보기, 점 표기법 vs 대괄호 표기법자바스크립트에서 객체에 접근하는 방법은 크게 두 가지로 나뉩니다.각각 어떤 차이와 장단점이 있는지, 또 실전에서의 활용법은 어떻게 나뉘는지 정리해 보겠습니다.객체혹시 객체를 잘 모르는 분이 계실까 봐 간단히 짚고 넘어가고자 합니다. 자바스크립트에서 객체란 여러 개의 키(key)와 값(value) 쌍으로 이루어진 데이터 집합체를 의미합니다.객체는 보통 아래와 같은 구조로 이루어집니다.const obj = { no : 1 key1 : 'value1', key2 : 'value2',}각각의 키-값 쌍은 속성(property)라고도 하며 값에는 문자열, 숫자뿐 아니라 배열과 다른 객체도 할당될 수 있습니다.심지어는 이모지도 키와 값에 포함..

자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법이전 글에서는 getElementsBy...와 같은 전통적인 방식으로 DOM 요소를 선택하는 방법에 대해 간단히 다뤄봤습니다.이번 글에서는 가장 범용적으로 쓰이는 querySelector 함수에 대해 예제 중심으로 정리해보겠습니다.🎯querySelector / querySelectorAllquertSelector 함수는 "CSS 선택자"를 인자로 받아서 조건에 맞는 DOM 요소 하나를 반환합니다.querySelectorAll 함수는 조건에 맞는 모든 요소를 NodeList 형태로 반환합니다.const one = document.querySelector('.example'); // 가장 첫 번째 .example 요소const all = do..

자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법자바스크립트를 이용해 특정 요소를(또는 요소들을) 가져오는 방법을 정리해 보겠습니다.다양한 예제를 적어두고 지능이 퇴행되기 시작하면 종종 꺼내 읽도록 하겠습니다.getElementById('id')매개변수로 받은 문자열을 id 속성으로 갖는 요소를 반환합니다.하나의 dom에서 id 속성은 유일해야 하기 때문에 당연하게도 반환되는 요소의 개수는 1개입니다. const fruitContainer = document.getElementById('fruits');const appleDiv = document.getElementById('apple');const pineapplePane = fruitContainer.getElementById('p..