GoldenKey GoldenKey

개요 최근에는 뉴스나 블로그에 많이 사용되는 reading time 라이브러리에 대해서 활용해보고자 합니다. 보통 글의 header 부분의 제목 에 article을 읽는데 대략 어느 정도가 걸리는지 알려줘 결정에 도움을 줄 수 있게 안내하는 기능입니다. 이런식으로 읽는데 얼마나 걸리는지 가늠할 수 있게 표시해줌 블로그에 도입해보고자 기능을 확인하고 익혀봅니다. 공식 깃허브 : https://github.com/michael-lynch/reading-time GitHub - michael-lynch/reading-time: A simple, lightweight jQuery plugin used to display an estimated time to read some text. A simple, ligh..

개발 문서를 따라가다 보면 npm install 과정이 나온다. 이것은 어떤 것일까 node.js에서 빠질 수 없는데 npm이다 npm은 node package manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해 관리하고 배포하고 있다. 이것은 다른 사람이 만들어 놓은 모듈들을 npm을 통해 설치하여 사용이 가능하다는 점이며 이 모듈이 사용하고 있는 다른 모듈의 의존성 또한 자동으로 해결해준다. npm install 명령어로 말이다. 다른 언어에서 비슷한 개념으로 ruby의 gem php의 composer C#의 NuGet java의 Jpm python의 pip 등이며 대부분 이런 패키지 매니저가 의존성도 해결해주고 있다. 지금은 node.js만 설치하면 자동으로 설..

Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어다. CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보면 된다. CSS 단점 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다. 결국 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 된다. CSS 전처리기(Preprocessor) 언어 란? HTML, CSS를 깊게 다뤄본적이 있..

GitHub CLI는 컴퓨터의 명령줄에서 GitHub를 사용하기 위한 오픈 소스 도구 리포지토리 보기, 생성, 복제 및 분기 이슈와 풀 리퀘스트 생성, 닫기, 편집, 보기 pull 요청 검토, 비교 및 ​​병합 워크플로 실행, 보기 및 나열 릴리스 생성, 나열, 보기 및 삭제 요점 생성, 편집, 나열, 보기 및 삭제 코드 공간 나열, 생성, 삭제 및 연결 깃 설치 https://git-scm.com/downloads 깃 CLI 설치 https://github.com/cli/cli/releases/tag/v2.11.3 루비 설치 https://rubyinstaller.org/downloads/

마크다운이란 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용해 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃허브때문인데 깃허브 저장소 repository에 관한 정보를 기록하는 README.md는 가장 먼저 접하게 되는 문서다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높인다. 장점 간결성 별도 도구없이 작성가능 다양한 형태 변환 가능 텍스트로 저장되어 용량이 적음 텍스트파일로 버전관리시스템 이용 변경이력을 관리할 수 있음 지원하는 프로그램과 플랫폼이 다양함 단점 표..

box-sizing은 박스의 크기를 어떤 기준으로 계산할지를 정하는 속성이다. 기본값 : content-box 상속 : No 애니메이션 : NO 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box 콘텐트 영역을 기준으로 크기를 정한다. border-box 테두리를 기준으로 크기를 정한다. initial 기본값으로 설정한다. inherit 부모 요소의 속성값을 상속받는다. 예제 content-box border-box

JavaScript에서 변수를 선언할때 "var"로 선언한다. 이외에도 let, const가 존재하는데, 이 세가지 변수 선언 차이는 무엇일까 1) var는 함수 단위, let과 const는 블럭 단위의 범위를 지정한다. 와 같이 먼저 var를 선언했다고 가정한다면 이를 실행해 콘솔에 찍히는 1~5번 a를 확인해보면 3번 a에서 var a=100;을 선언하자 4번과 5번 a도 100으로 찍혀 있다. 이는 1번 a에서 var 변수를 이미 할당해놓았고, 하위의 모든 블럭내에서 a를 재선언하면 최초 선언된 a 변수가 전역변수로써 기능을 수행하기에 새로 만들어내는 것이 아니라 이 a를 덮어쓴다. 그래서 3번 a부터는 바뀐 a가 콘솔에 찍힌다, 블럭 범위 단위인 let의 예제 이전의 var와 동일하게 3번째에서 ..

css를 이용해 position 값을 사용하다보면 주로 사용하는 값은 static, relative, avsolute, fixed 이다. sticky의 경우엔 IE(익스플로어)에선 지원을 하지 않는 속성이기 때문에 평소 사용하는데 어려움이 있다. 하지만 IE의 점유율이 줄어들고 IE를 고려하지 않는 작업이 많아지고 모바일 작업을 중점으로 하는 경우 sticky 알아두면 좋다. 개념 단어에 뜻에서 알 수 있듯이 속성값을 선언한 영역의 위치값을 고정시켜주는 역할을 한다. 위의 소스로 출력하면 검은색 상자모양의 영역이 스크롤할때 고정되어 노출된다. 주의할 점은 position : sticky 를 사용하면 top, left와 같은 위치값을 반드시 작성해줘야 sticky 속성을 적용할 수 있다. fixed와 st..