분류 전체보기 (8) 썸네일형 리스트형 그루브스톤 gs104 저소음 너울축 리뷰 이번에 이직을 하면서 집에서 쓰던 한무무(한성컴퓨터 무접점 키보드)를 회사로 가져가게 되어 집에서 쓸 키보드가 없다는 명분으로ㅋㅋㅋ 키보드를 알아보던 중 마침 이번에 그루브스톤 gs 라인 키보드가 새롭게 출시 된다는 소식을 듣고 2/28 출시일에 맞춰 구매하게 되었습니다. 😀 정가 : 139,000원 색상 : 라벤더, 민들레, 스카이, 라이트, 아미 색상은 총 다섯가지 인데, 아미는 3월 출시 예정 이라고 해서 제가 구매한 당시에는 아미 색상은 없었어요! 이전 엠스톤(그루브스톤)은 수제 윤활로 유명했는데, 이번에 나온 gs 시리즈는 표준 윤활로 축은 하늬축 / 저소음 하늬축 / 너울축 / 저소음 너울 축 / 청축 총 다섯가지 특주축과 키압은 45g으로만 출시 됐습니다. 저는 하늘색을 좋아해서 스카이 색상.. 📁DOM 과 브라우저 렌더링 과정 오늘은 기본적이지만 중요한 내용인 DOM에 관련된 개념과 브라우저 렌더링 과정에 대해서 정리해 보려고 한다. DOM(Document Object Model)이란, 우리가 html 파일을 만들면, 브라우저에서 html 파일을 읽게된다. 브라우저 에서는 html 파일을 읽을때 body,section,img,h1 태그등 각각의 태그들을 분석해서 노드(Node)로 변환하게 된다. 즉, 브라우저가 이해할 수 있는 자신들만의 obj로 변환하게 되는 것이다. (=HTML 파일의 tag가 Node라는 obj로 변환이 되는것이다!) => Node의 obj에는 태그에 들어있는 cls나 텍스트 정보들이 포함되어져 있다!!! 👉 자세히 정리해보자면, Node라는 obj는 Event Target obj를 상속한다. (즉, 모든.. 📐Window Size 1. 윈도우 사이즈 - window.screen : 모니터 / 스크린 사이즈 - window.outer : 브라우저의 전체 사이즈 - window.inner : 스크롤까지 합한 웹페이지 전체 사이즈 (url와 tab사이즈는 제외) - document.Element.ClientWidth/Height : 웹페이지 문서 자체를 의미하며, 전체적인 페이지이나 스크롤바가 있으면, 스크롤바를 제외한 오로지 웹페이지 문서만을 포함한 영역 사이즈를 말한다 2. 브라우저 좌표 📌 client x, y VS page x, y - client x, y : 브라우저 window에 있는 좌표값에서 값이 결정된다. 즉, 브라우저 사이즈 기준으로 좌표값이 생성된다. - page x, y : 웹문서 제일 상단부터 계산된다. . 💻Web API 란 무엇일까? API(Application Programming Inerfaces)는 사용자가 만들 응용프로그램에서 해당 기능들을 사용/제어할 수 있도록 중간에서 상호작용을 해주는 문서이다 ⭐ API의 종류 DOM APIs : 웹페이지에 있는 요소들을 생성/삭제 하거나 스타일을 바꾸는 것들을 조작하는 기능을 제공한다. Graphics APIs : 서버와 통신할 수 있는 기능들을 제공한다. Audio/Video APIs : 멀티미디어 와 관련된 API Device APIs : 사용자가 온라인 인지 오프라인 인지 디바이스의 상태정보를 받아오는 API File APIs : 사용자의 파일을 읽거나 저장하는 API Storage APIs : 사용자의 정보를 저장할 수 있는 Storage API ⭐ Web APIs securit.. ✍모듈 번들러 / Webpack 🌈 모듈 번들러(module Bundler) 모듈(module)이란, 프로그래밍이라는 관점에서 기본적으로 '본체에 대한 독립된 하위 단위' ( 즉, 프로그램을 구성하는 구성요소 중 하나의 구성요소의 단위를 이야기 한다.) 웹 애플리케이션의 규모가 점차 커지면서 파일의 양도 점점 커져 발생하는 문제점들이 생겨났는데, 모듈간의 스코프가 구분이 되지 않아 다른 파일에 영향을 끼치는 일이 발생하고 또, 파일의 양이 많아지면서 많은 파일을 응답하는데 다소 많은 시간이 소요되는 일이 발생하기도 하였습니다. 이와같은 문제들을 해결하기 위해 번들러(Bundler) 가 등장하게 된 것입니다. 즉, 모듈 번들러는 여러개로 나뉘어 있는 파일들을 하나의 파일로 묶어주는 역할을 함으로써 위와같은 문제들을 해결해 주는 역할을 합.. 🖐forEach / for of / for in 차이점 ⭐forEach forEach는 array를 순회하는 함수이며, 인자로 함수를 받아 각 배열 요소에 해당 함수를 적용한다. const num = [123,456,789,10]; num.forEach((number) => { console.log(number) // 123,456,789,10 }); ⭐for of (es6) for of는 array만 사용 가능한 forEach와는 달리 array와 obj 모두 사용가능하다. (순회 가능한(iterable) 객체에 사용이 가능하다.) const weather = ["sunny","clear"] for(let sky of weather){ console.log(sky) // sunny , clear } ⭐for in for in은 모든 객체에 사용이 가능하다... 📕ES6 주요 문법 정리 ⭐ 새로 추가된 string 메서드 startsWith( ) : string의 시작이 일치하는 문자열이 있는지 판단한다. endWith( ) : string의 끝이 일치하는 문자열이 있는지 판단한다. includes( ) : 해당 문자열이 포함되어 있는지 판단한다. const weather = "The weather is sunny today."; weather.startsWith("The"); // true weather.endsWith("today"); // true weather.includes("is"); // true weather.includes("rain"); // false ⭐ shorthand property names obj의 key와 value의 이름이 동일하다면, 축약해서 이름 하나.. 🙌Process와 Multithread란? Process란? 운영체제 위에서 연속적으로 실행되고 있는 프로그램을 말한다. Process안에는 각각 code, stack, heap, data가 있으며 간단히 설명하자면, code : 프로그램을 실행하기 위한 코드 stack : 코드와 프로세스 안에서 함수들이 어떤순서로 실행되어야 하는지, 함수가 끝나면 다시 어디로 돌아가야 하는지의 대한 정보를 저장하고 있다. heap : 오브젝트를 생성하거나 데이터를 만들때, 그 데이터들이 저장되는 공간 (동적으로 할당된 변수들이 저장) data : 전역변수, static변수들이 할당되어 저장된다. Multithread란? 한 Process안에서 여러가지 동작을 할 수있도록 다수의 Thread가 동시다발적으로 수행되는것을 말한다. 하나의 Process안에는 공통적.. 이전 1 다음
