하수도키의 성장일기

개발일기/Javascript

[Javascript] 값과 변수(Values, Variables)

이번 포스팅에는 값(Value)과 변수(Variables)에 대한 차이점을 살펴보고, 원시 값과 참조 값에 데이터 할당되는 과정을 살펴보자. 원시 값과 참조값에 대한 설명은 이전 포스팅을 참조 2021.11.14 - [개발일기/Javascript] - [Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value) [Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value) 자바스크립트 처음 공부해보면 데이터 타입이 가장 처음에 나온다. 원시값(Primitive Value), 참조값(Reference Value)으로 데이터 타입을 나눈다. 원시값, 참조값에 대해 알아보기 타입 체크하기 크..

개발일기/Javascript

[Javascript] 데이터 타입 정리(Data type, Primitive Value, Reference Value)

자바스크립트 처음 공부해보면 데이터 타입이 가장 처음에 나온다. 원시값(Primitive Value), 참조값(Reference Value)으로 데이터 타입을 나눈다. 원시값, 참조값에 대해 알아보기 타입 체크하기 크게 2개의 챕터로 나눠서 포스팅을 진행하겠다. 기본적으로 값(Value)은 내 코드에서 사용할 순 있지만 내 코드에는 존재하지 않습니다. 이미지 참고 원시값(Primitive Value) String, Numbers, Undefined, Null, Boolean, Symbol로 이루어져 있다. 최근 BigInt도 추가되었다. Symbol, BigInt는 아직 많이 사용하진 않는다. 이 원시값들은 자바스크립트에서는 영구적인 부분이다. 즉, 가져다가 사용할 수 있지만 변경하거나 삭제할 순 없다 ..

개발일기/Javascript

JavaScript - DOM이란?

DOM 이란 뭘까? HTML 태그? JavaScript로 접근 하는 것? Node? 트리구조? 등등 용어만 들었을뿐 정확히 설명을 못했다.(이것뿐만 아니라 공부한 모든것들을 설명할 수가 없어 차근차근 정리해볼 계획이다.) DOM 정의(MDN 참조) 문서 객체 모델(Document Object Model)은 JavaScript Node 개체의 계층화된 트리다. DOM은 HTML, XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM이 뭘까? HTML 파일이 쓴 것들이 DOM인가? No 소스보기에 보여지는 것들이 DOM인가? No 크롬 개발자 도구에서 보여주는 것..

개발일기/Javascript

Javascript timezone, language 구하기(타임존, 언어, 국가)

이번에 살펴볼 내용은 타임존, 언어 구하기이다. 다국어 사이트 작업 또는 이 사람이 어떤 언어를 사용하고 있는지에 대한 데이터를 얻고자 할 때 필요한 내용이다. 타임존, 언어, 국가 코등 등 검색을 할 텐데 여기서는 서버, 클라이언트에서 구하는 방법을 몇 개 살펴보겠다. 서버에서 구하기 Accept-Language 모던 브라우저에서 언어를 설정한다면, HTTP 요청할때 header에 Accept-Language을 포함시켜 보낸다. 보통 Accept-Language: en-Ca, ar-Eg:q=0.5 이런 식으로 보낸다. 여기서 q 값은 가중치이다. 명시적으로 적지 않으면 기본값은 1.0 이다. 위 예를 살펴보면 사용자가 en-CA(Canadian English) 를 1.0으로 선호하고 그다음 ar-EG(..

개발일기/Javascript

[Javascript] URL페이지를 Location, Redirect, Reload 통해 살펴보자.

Javascript를 통해 URL 페이지를 관리할 때 loaction.load, location.href 등을 많이 사용했다. 사용할 때마다, 자연스럽게 손에 익어 타자를 치고 실행을 했지만 정확하게 살펴본 적이 없었다. 운 좋게 미디엄 포스팅에서 관련 내용이 있어서 한번 의역 위주로 번역해보았다. 원문은 아래 링크를 참고 https://betterprogramming.pub/redirect-refresh-and-access-the-url-of-the-current-page-in-javascript-3d9160e8317e Redirect, Refresh, and Access the URL of the Current Page in JavaScript JavaScript’s location object be..

개발일기/Javascript

[자바스크립트] 얕은 복사, 깊은 복사 간단히 살펴보기(Learn Deep & Shallow Copy with Tricky JavaScript Questions)

이 포스팅은 아래 포스팅을 보고 의역한 겁니다. 자세한 내용은 링크를 참고해주세요. javascript.plainenglish.io/learn-deep-shallow-copy-with-tricky-javascript-questions-c563cdb5a4dd 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)는 자바스크립트 책을 볼 때, 간간이 들려오는 질문들에 항상 포함되어 있다. 그때마다 구글링을 하거나 대충 기억을 더듬더듬 거리면서 이해하는 걸로 넘어갔다. 운 좋게 간단하고 이해하기 쉬운 포스팅이 있어 정리할 겸 포스팅을 작성해보겠다. 우선 아래 코드들을 보고 차이점을 살펴보자. const flower = [{ name: 'Lily', color: 'white' }] const clo..

개발일기/Javascript

[Javascript] replace를 이용해 문자열을 치환하는 방법(How to replace a string in javascript)

JS - replace(regx) 오늘 포스팅할 주제는 자바스크립트를 이용해 문자열을 치환하는 방법이다.(How to replace a string in javascript) 우리는 코드를 작성하면서 일괄 수정할때 보통 CTRL + F로 찾은 다음 바꾸기를 하거나 일괄적으로 한번에 원하는 단어를 치환한다. 에디터에서 하는 기능을 자바스크립트에서는 어떻게 구현하는지 알아보자. replace 를 한국어로 치환한다고 정의해서 포스팅 글을 쓰겠다. 목차 1. replace 알아보기 2. replace 활용하기 전체 문자열 모두 치환하기 대소문자 구분하여 치환하기 전체 문자열 대소문자 구분없이 치환하기 replace 알아보기 replace 메서드는 원하는 패턴을 정해서 치환할 문자열에 적용해 문자열을 원하는 대로..

개발일기/Javascript

디버깅에 유용한 콘솔(Console) 사용법 알아보기

개발도중 브라우저에서 디버깅으로 주로 사용하는 명령어는 consoel.log이다.(데이터 값을 확인할때 주로 사용한다.) 브라우저에서는 console.log 말고 다른 명령어를 사용하여 더 효율적인 디버깅을 알아보자. console.dir() 이 명령어를 사용하기 위한 객체를 만들어 보자. const infomation = { name : 'doki', phone : 010-0000-1111, location : 'Seoul' } console.log(infomation) console.dir(infomation) Object 라고 명시적으로 표시를 해줘서 정확한 타입을 알 수 있다. console.table() 이 명령어는 서버 응답으로 받은 긴 데이터를 확인할때 유용하다. const infomatio..