프로그래밍
[VScode] Fira Code 폰트 적용 방법, 간단 정리
[VScode] Fira Code 폰트 적용 방법, 간단 정리
2021.10.09[VScode] Fira Code 폰트 적용 방법, 간단 정리 1. Fira Code 폰트란? 화살표 함수를 쓰다보면 하다보면 가끔 이런 생각이 든다. => 기호를 ⇒ 로 쓰면 안될까? 더 직관적인거 같은데,, 하지만 이는 엄연히 다른 기호이다. 이는 다른 유니코드이기 때문이다. 방법은 있다. Fira Code 폰트를 사용하면, => 로 적어도 화면에는 ⇒ 기호로 표현해준다. 아래 코드 예시처럼, 화살표 기호 뿐만 아니라 여러 부등호 또한 직관적인 기호로 변환하여 화면에서 볼 수 있다. 2. VS code에 적용하는 방법 1. fira font 파일 다운로드 및 설치 아래 페이지로 이동, Download & Install 로 다운로드 하여 ttf 파일 설치 (혹시 안된다면 아래 설치파일 다운로드) htt..
[JS] 모듈 import/export 문법 빠르게 정리하기
[JS] 모듈 import/export 문법 빠르게 정리하기
2021.09.18[JS] 모듈 import/export 문법 빠르게 정리하기 자바스크립트의 import, export 사용법 빠르게 정리해보겠습니다. export 문은 JavaScript 모듈에서 변수, 함수, 클래스를 내보낼 때 사용 다른 파일에서 내보낸 값을 import 문으로 가져올 수 있음 export 사용법 변수, 함수, 클래스 선언할 때, 앞에 export 를 붙이면 내보내기 가능 📌 주의 대부분의 자바스크립트 style guide에서 클래스, 함수 선언부 앞에 export를 붙여 내보내기 시에, 선언 끝에 세미콜론 붙이지 말라고 권유 import 사용법 항목별로 불러오고 싶다면 import { ... } 불러올 항목이 많다면 import * as 📌 주의 import할 모듈이 모두 사용할 경우가 아니라면, ..
CSS 만 사용하여 특정 비율 + 반응형 요소 만들기
CSS 만 사용하여 특정 비율 + 반응형 요소 만들기
2021.07.31종종 이미지, 비디오 등 요소들은 브라우저의 사이즈에 따라 확대 혹은 축소되는 스펙을 구현해야 되는 경우가 많습니다. 보통 요소의 width/height 가 특정 비율(ex: 2:1)을 유지해야하는 스펙이 함께 있습니다. 보통 해당 스펙은 CSS 만으로 구현하기 어렵기 때문에 JS를 사용하여 구현하는 경우가 많습니다. 하지만 JS로 처리할 경우 스크립트 처리에 대한 추가 공수가 필요할 뿐 아니라 viewport 사이즈가 변경될 때마다 영역을 계산해서 다시 렌더링 해줘야 하기 때문에 성능에 악영향을 끼치게 됩니다. 이는 사용성 저하로 인한 유저 이탈로 이어질 수 있습니다. 사실 이 스펙은 CSS의 % 단위의 값 과 padding-top 만으로 구현할 수 있습니다. 자세히 알아보겠습니다. 비율을 유지하면서 ..
[html/css] a태그에 대한 거의 모든 것
[html/css] a태그에 대한 거의 모든 것
2021.07.19[html/css] a 태그에 대한 거의 모든 것 태그(앵커 태크)는 href 특성 을 통해 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만드는 기능을 가진 태그 입니다. Attributes a. href 1. 태그를 클릭시 이동하는 URL 지정하는 속성 2. 페이지 내부 영역을 가리키는 fragment URL 3. tel: URL을 사용하는 전화번호 4. mailto: URL을 사용하는 이메일 주소 5. 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 Navigator.registerProtocolHandler()를 통해 지원할 수 있습니다. b. download 링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니..
[node] yarn workspaces 빠르게 알아보기
[node] yarn workspaces 빠르게 알아보기
2021.07.18[node] yarn workspaces 빠르게 알아보기 workspace 란? Workspaces는 단일 최상위 루트 패키지 내에서 로컬 파일 시스템의 여러 패키지를 관리할 수 있도록 지원하는 npm cli의 기능 집합을 가리키는 일반 용어입니다. Workspace를 통해 로컬 파일 시스템에서 연결된 패키지를 훨씬 더 효율적으로 처리할 수 있습니다. npm install의 일부로 연결 프로세스를 자동화하고 현재 node\_modules 폴더에 심볼링해야 하는 패키지에 대한 참조를 추가하기 위해 npm link를 수동으로 사용할 필요가 없습니다. 또한 npm install 중에 자동 동기화되는 패키지를 하나의 workspace로 지칭합니다. workspace의 package.json 에 명시적으로 정의된..
[JS] scope 와 실행 컨텍스트
[JS] scope 와 실행 컨텍스트
2021.06.11scope와 실행 컨텍스트 의아한 예제 라이프 사이클(Life Cycle) 이해하기 왜 필요할까? 위 예제 코드를 살펴보면, 변수 a와 b는 메모리 주소(0x1234 / 0x1235)에 a, b라는 이름을 붙인 것이고, 실제 데이터는 해당 메모리 주소에 저장된다. (마치 네이버의 url인 www.naver.com 이 ip주소 125.209.222.141을 가리키는 것처럼..) 코드에서 자원들(값, 변수, 함수 등)이 선언되면, 컴퓨터의 자원(보통 컴퓨터의 메모리)에 저장되게 됩니다. 하지만, 컴퓨터 시스템의 모든 자원은 유한한 것이고 한정적이기 때문에, 프로그래밍 언어에서 자원은 라이프 사이클 이라는 것을 갖습니다. 라이프 사이클이란? 코드에서 자원들이 생성되고 사용되며(열리고) 소멸되는 메커니즘을 의미..
[JS] this란? 모든 케이스를 정리해보자
[JS] this란? 모든 케이스를 정리해보자
2021.06.08[JS] this란? 모든 케이스를 정리해보자 ⚡️ this란? '그'는 나에게로 와서 꽃이 되었다. 위 문장에서 '그' 는 누굴까? 상황에 따라 바뀔 것이다. 옆집 아저씨가 될 수도 있고, 할아버지가 될 수도 있고, 편의점 알바생이 될 수도 있다. 그를 파악하기 위해서는 전, 후 문장에서 단서가 필요하다. 그 단서를 통해 문맥 상황에서 '그'가 누군지 추론할 수 있다. - 자바스크립트 세계관에서도 '그' 와 같은 개념이 this 라는 예약어이다. - this는 자바스크립트 엔진에 의해 암묵적으로 생성되기 때문에, 상황에 따라 가리키는 대상이 바뀔 수 있다. 즉, this는 문맥에 따라 그 의미(값)가 변경된다. 👨🏻💻 예시 코드 const name = 'something box'; function g..
[JS] 화살표 함수, 쉽고 빠르게 정리하기
[JS] 화살표 함수, 쉽고 빠르게 정리하기
2021.05.11화살표 함수(Arrow function)란? 함수 표현식보다 단순하고 간단한 문법으로 함수를 만드는 방법이다. const arrowFunc = (arg1, arg2, ...argN) => expression; function originFunc(arg1, arg2, ...argN) { return expression; } arrowFunc 는 arg1~argN 을 인자로 받는 화살표 함수 이다. 화살표 함수는 화살표(=>) 우측의 표현식(expression) 을 평가하고 평가 결과를 반환(return)한다. arrowFunc는 originFunc 의 축약 버전이라고 할 수 있다. 구체적 예시 let sum = (a, b) => a + b; /* 위 화살표 함수의 원본 */ let sum = functio..
[YOU DON'T KNOW JS 정리] THIS (1)
[YOU DON'T KNOW JS 정리] THIS (1)
2021.05.08[YOU DON'T KNOW JS 정리] THIS (1) 해당 포스팅은 카일 심슨의 you don't know js - this와 객체 프로토타입, 비동기와 성능 편 중 This 내용을 정리한 포스팅 입니다. 자바스크립트에서 가장 헷갈리는 개념 중 하나가 this 키워드이다. this는 모든 함수 scope 내에 자동으로 설정되는 특수한 식별자이다. 경험이 많은 js개발자도 this가 무엇을 가리키는지 정확히 파악하는건 힘든일이니. 모른다고 부끄러워 하지말고 정확하게 공부해보자. 1.1 this 가 필요한 이유 일단 this가 "무엇을 가르키는지" 보다 "왜" 필요한 지부터 살펴보자. ⇒ this 의 유용함과 필요성을 먼저 파악해보자. identify() { return this.name.toUpperC..
[JS] arguments 객체 그리고 유사배열 객체
[JS] arguments 객체 그리고 유사배열 객체
2021.05.05[JS] arguments 객체 그리고 유사배열 객체 arguments 객체란? 자바스크립트에서 함수를 호출 할 때, 함수에서 인자를 받기로 정해둔 형태로 인자를 넘기지 않아도 에러를 발생시키지 않는다. function sum(x, y) { console.log(x, y); return x + y; } sum(); // undefined undefined sum(1); // 1 undefined sum(1, 2); // 1 2 sum(1, 2, 3); // 1 2 sum(1, 2, 3, 4); // 1 2 1. 필요 인자 보다 적은 수의 인자가 전달되었을 때 : sum(), sum(1) ⇒ 값이 주어지지 않은 인자에는 undefined 가 할당된다. 2. 필요 인자 보다 많은 인자가 전달되었을 때 : s..
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리
2020.12.29[JS] 문법정리 > 확실한 프로토타입 체이닝 정리 '자바스크립트'는 기존 C++ 이나 자바 같은 객체지향 프로그래밍 언어와는 다른 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 즉, 프로토타입(prototype) 에 대해 잘 이해하고 있어야, 자바스크립트의 동작 과정을 제대로 이해할 수 있다. 이번 포스팅의 결론이자 규칙을 먼저 기억하자. 📌규칙 JS에서 "모든 객체" 는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체(부모 객체)로 취급한다. 예제 function Factory(name) { this.name = name; } // box 객체 생성 var box = new Factory('box'); console.dir(Factory); cons..
[CSS] 스크롤바 확실하게 숨기는 방법
[CSS] 스크롤바 확실하게 숨기는 방법
2020.12.28[CSS] 스크롤바 숨기는 방법 요소 안에 담기는 컨텐츠의 길이가 요소보다 길어지게 되었을 때, overflow: scroll 속성을 주게 되면 스크롤이 가능한 요소로 만들 수 있습니다. overflow 속성에 대한 정리가 필요하시다면, 아래 포스팅을 참고해주세요. overflow 관련 포스팅 이 때 다른 설정을 하지 않으면 리스트에 스크롤바가 노출됩니다. CSS .list { overflow: scroll; /* IE scroll 숨김 */ -ms-overflow-style: none; } .list::-webkit-scrollbar { display: none; width: 0 !important; } 이럴 경우 위와 같이 CSS를 설정하면 스크롤 동작은 되면서 스크롤바가 숨김처리 됩니다. 예제 Se..