처음 숫자 뽑기할 때 이게 너무 헷갈려서 따로 뺐다. 이 방법이 안전한 방법이 아니라서, 중요한 곳에서 랜덤한 값을 얻을 때는 또 다른 방법을 쓴다고 한다. 이 방법은 자바스크립트 랜덤함수를 이해하기에 적합한 것 같다. // 1이상 10미만의 정수 얻기 console.log(Math.floor(Math.random()*9)+1); // 특정 범위의 랜덤 정수를 얻는 함수 function random(min = 0, max = 10) { return Math.floor(Math.random() * (max - min) + min); } console.log(random()); // 0이상 10미만의 랜덤 정수 console.log(random(11, 20)); // 11이상 20미만의 랜덤 정수 conso..
JAVASCRIPT
심볼(Symbol) 변경이 불가한 데이터로 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있다. // 심볼 (Symbol) // 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있다. // Symbol('설명') // '설명'은 단순 디버깅을 위한 용도일 뿐, 심볼 값과는 관계가 없음 const sKey = Symbol('Hello World!'); const user = { key: '일반 정보!', [sKey] : '민감한 정보!' } console.log(user.key); // 일반 정보! console.log(user['key']); // 일반 정보! console.log(user[sKey]); // 민감한 정보! console.log(user[S..
History 브라우저 히스토리 (세션 기록) 정보를 반환하거나 제어한다. // 속성 // .length: 등록된 히스토리 개수 // .scrollRestoration: 히스토리 탐색시 스크롤 위치 복원 여부 확인 및 지정 // .state: 현재 히스토리에 등록된 데이터(상태) // 메서드 // .back(): 뒤로 가기 // .forward(): 앞으로 가기 // .go(위치): 현재 페이지 기준 특정 히스토리 '위치'로 이동 // .pushState(상태, 제목, 주소): 히스토리에 상태 및 주소를 추가 // .replaceState(상태, 제목, 주소): 현재 히스토리의 상태 및 주소를 교체 // > 모든 브라우저(사파리 제외)는 '제목' 옵션을 무시 console.log(history); his..
이번 부분은 좀 짧은데 그래도 새롭게 알게 된 게 있어서 강렬하게 기억에 남는다. 나무위키나 그런 곳 보면 항목 별로 링크가 걸려있는데, 그걸 누르면 해당하는 창으로 이동한다. 그런데 그게 url도 변경되는 거인 줄은 몰랐다. 뒤로가기 하면 누르기 전 장소로 바뀐다는 것도 알았지만 주소값이 변경되는 줄은 몰랐는데 그게 # (해쉬) 였던 거다. #이 이런 기능을 할 줄이야... 앞으로 더 유심히 보게될 거 같다. Location 현재 페이지 정보를 변환하거나 제어한다. // Location // 현재 페이지 정보를 변환하거나 제어 // .href: 전체 URL 주소 // .protocol: 프로토콜 // .hostname: 도메인 이름 // .pathname: 도메인 이후 경로 // .host: 포트 번호..
console 중에 아는 건 console.log() 말곤 없었다... JS를 다루는 사람들에겐 뗄 수 없는 동반자가 아닐까. 아무튼 이 console에도 여러 메서드가 있다는 걸 알았다. console console은 브라우저의 디버깅에 대한 엑세스를 제공한다고 한다. 아래 코드들을 살펴보면서 무슨 말인지 알아보도록 하자 이번에 console.clear()라는 걸 알고 친구들과 단톡방에서 누군가 염장지르는 말을 하면 저걸 치고 카톡방을 나갔다 오고는 한다. 썩 괜찮은 드립일지도 모른다. 컴과생들만 재밌는 드립을 치고 있었을 줄이야. // console // .log(), .warn(), .error(), dir() // 콘솔에 메시지나 객체를 출력 // - log: 일반메시지 // - warn: 경고메..
진성 뉴진스 팬인 나로서 쿠키는 정말 너무 반가운 단어다. 노래 참 좋은데... 식사랑 음료가 없으면 곤란하다. 쿠키(Cookie) 인터넷 사용자가 임의의 어떤 웹 사이트를 방문할 경우, 사용자의 웹 브라우저를 통해 로컬 (인터넷 사용자의 컴퓨터나 다른 기기)에 설치되는 작은 기록 정보 파일을 말한다. 쿠키는 세션 관리, 개인화, 트래킹 등에 사용되며 세션(session)은 쿠키를 이용한다. (찾아보면 아이콘이 실제로 쿠키모양이다.) 4KB 이상은 저장할 수 없다. 세션(Session) 웹 서버에 접속한 시점부터 웹 브라우저를 종료하여 연결을 끝내는 시점을 말한다. session-id를 할당해주는데, 이를 이용한 예시가 로그인을 하고 창을 이리 저리 이동해도 로그인이 풀리지 않는다. 그리고 메일을 쓸 수..
클로저... 내가 아는 클로저는 2016년에 나온 The Chainsmokers의 Closer와 LCK 미드라이너 Clozer 선수, 야구에서 마무리 투수를 의미하는 클로저밖에 몰랐지만 이번에 또 하나 추가로 알게 됐다. 말 나온 김에 closer 한 번 들어야겠다... Closure closure는 폐쇄라는 의미를 가지고 있다. 이 뜻이 도대체 무슨 관련이 있을까? 위키백과에는 '컴퓨터 언어에서 클로저는 일급 객체 함수의 개념을 이용하여 스코프에 묶인 변수를 바인딩 하기 위한 일종의 기술이다.' 라고 나와있다. 말이 너무 어렵다... 조금 더 풀어서 알아보자. 클로저는 함수가 선언될 때의 유효 범위(렉시컬 범위)를 기억하고 있다가, 외부에서 호출될 때 그 유효범위의 특정 변수를 참조할 수 있는 개념이다..
쓰레기 수집 (Garbage Collection) 프로그래밍을 하다가 웬 쓰레기 수집...인가 싶었지만 개념을 듣고 보니 이것만큼 이름을 잘 지은 것도 없는 것 같다. 쓰레기 수집(혹은 가비지 컬렉션)은 Javascript의 메모리 관리 방법으로, JavaScript Engine이 자동으로 데이터가 할당된 메모리에서 더이상 사용되지 않는 데이터를 해제하는 것을 말한다. 이 가비지 컬렉션은 사람이 직접 강제 실행하거나 관리할 수 없다고 한다. 여담으로, C나 C++은 가비지 컬렉션 없이 손으로 직접 메모리 관리를 해주어야 한다는데 얼마나 헬일지 상상도 안간다. C나 C++ 다루는 사람에게 경의를 표한다. 장점 메모리 관리를 철저하게 해줄 필요는 없다. 단점 가비지 컬렉션이 언제 일어나는지 알 수 없다. 이..
메모리 누수 (Memory Leak) 더 이상 필요하지 않은 데이터는 삭제되어야 하는데, 그러지 못하고 메모리를 계속 차지하고 있는 현상을 말한다. 메모리 누수가 지속되면 프로그램의 성능이 떨어지거나 죽어버리는... 경우가 발생할 수 있으니 주의해야한다. 자바스크립트는 쓰레기 수집가(Garbage Collector)가 안쓰는 데이터를 메모리에서 해제 해 주기도 하지만, 그러지 못하는 경우가 있으니 알아두자. garbage collector가 없는 C는 정말 지옥일거야. 메모리 누수는 불필요한 전역 변수의 사용, 분리된 노드 참조, 타이머 해제X, 잘못된 클로저 사용 등에 의해 발생한다. 1. 불필요한 전역 변수의 사용 // Case 1 - 불필요한 전역 변수 사용 window.hello = 'Hello ..
얕은 복사 (shallow copy) 와 깊은 복사 (deep copy) 얕은 복사와 깊은 복사는 참조형에만 해당된다. 얕은 복사 javascript의 참조형은 가변성 때문에, 데이터를 복사해오는 것에 주의가 필요하다. 이때 얕은 복사는 참조형 데이터의 1차원 데이터만 복사한다. 더 깊은 차원의 데이터는 깊은 복사를 이용해서 가져온다. 얕은 복사는 객체의 경우 Object.assign()을 통해, 배열의 경우 concat()을 통해 할 수 있으며, 두 가지 데이터 모두 공통적으로 스프레드 연산자 ... 을 사용할 수 있다. // 얕은 복사(shallow copy) - 참조형의 1차원 데이터만 복사 let a = 1 let b = a // a 주소의 메모리 주소가 b에 할당됨 b = 2 console.lo..
