programing/Language
-
[CSS] 변수합성을 통한 테마 구현하기programing/Language 2021. 7. 3. 18:43
💡 해당 글은 CSS 변수 합성의 강력함을 읽고 정리한 글입니다. 색을 정의하는 방법 기존에 색을 정의하는 방식 중, 대중적인 두가지 방식에는 HEX code 방식과 grba함수를 사용하는 방식이 있습니다. :root { --main-blue: #2663f2; --secondary-blue: #0d4ad9; /* main blue도다 10% 어두운 색상 */ --main-blue-transparent: rgba(38,99,242,0.1); /* main blue도다 10% 불투명한 색상 */ } 색을 정의하는 방법이 여러개라 난잡합니다. :root { --main-blue: rgba(38, 99, 242, 1); --secondary-blue: rgba(13, 74, 217, 1); --main-blue..
-
Jsonnet 톺아보기programing/Language 2021. 5. 19. 15:00
Jsonnet 이란? A data templating language for app and tool developers Jsonnet은 JSON과 sonnet의 합성어로, 데이터 템플레이팅 언어입니다. 기존의 데이터 구조화에 사용되던 언어인 JSON의 확장판이라고 보시면 됩니다. JSON에 프로그래밍의 일부 기술을 접목했다고 보시면 될 것 같습니다. 기본적으로는 C++로 구현되어 있지만, 현재 Google이 관리하고 있어서 그런지 GO로 구현된 go-jsonnet도 있습니다. 현재 버전은 v.0.17.0이지만, 태그 날짜를 보니 활발히 개발되고 있는 듯 합니다. 참고로 발음은 "jay sonnet"이라고 합니다. 철학 Jsonnet은 각기 다른 환경을 하나로 통합하는 것을 목표로 개발되었습니다. 각각의 ..
-
[Shell Script] 정규표현식을 이용해 파일명 변경(치환)하기programing/Language 2021. 2. 13. 18:35
[KOR] 혹은 [kor]라는 접두사가 붙은 파일이 많이 있었습니다. 그런데 KOR 는 국가 코드이며, 언어 코드가 아니었습니다. 그래서 이러한 접두사들을 모두 [ko]로 바꿔야 했습니다. 하나하나 다 바꾸긴 귀찮아서, bash shell script로 구현해봤습니다. #!/usr/bin/env bash REGEX="^\[(k|K)(o|O)(r|R)\]" for file in * do if [[ ${file} =~ ${REGEX} ]] then result=$(sed -E "s/^\[kor\]/[ko]/gI"
-
[JavaScript] 정규표현식으로 문자열 쪼개기programing/Language 2020. 11. 22. 13:36
해당 정규표현식은 character class와 positive lookahead, quantifier 이용한 방법이다. const str = 'abcdefghijklmnopqrstuvwxyz'; const reg = /(?=\w{1})/g; str.split(reg); // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"] 만약 한글로 하고 싶다면 정규표현식을 /(?=[가-힣]{1})/g으로 변경하면 된다.
-
[JavaScript] yeild*programing/Language 2020. 10. 25. 15:44
Generator javascript에는 generator라는 개념이 있습니다. 이 제네레이터는 함수명 앞에 *를 붙여서 선언할 수 있습니다. function *foo() { yield 1; yield 2; yield 3; } const iterator = foo(); iterator.next(); // {value: 1, done: false} iterator.next(); // {value: 2, done: false} iterator.next(); // {value: 3, done: false} iterator.next(); // {value: undefined, done: true} 자세한 것은 [Functional] 제네레이터와 이터러블을 참고해 주시기 바랍니다. yield yield 키워드는 ..
-
deep copyprograming/Language 2020. 8. 27. 16:59
export function deepCopy(target) { const clone = target instanceof Array ? [] : {}; Object.keys(target).forEach((property) => { clone[property] = typeof target[property] === 'object' && target[property] !== null ? deepCopy(target[property]) : target[property]; }); return clone; } 재귀를 이용한 간단한 깊은 복사 유틸 함수입니다.
-
[JS] input element eventprograming/Language 2020. 8. 8. 14:30
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 input 엘리먼트의 세 가지 이벤트에 대해 정리해봤습니다. 인풋 이벤트 InputEvent 인터페이스를 상속합니다. isComposing 이란 속성은 해당 input 이벤트가 compositionstart 이후 & compositionend 이전에 트리거 될 지의 여부를 나타냅니다. 이벤트 종류 및 순서 beforeinput : 실험적 이벤트입니다. (브라우저 호환성을 확인해주세요.) 엘리먼트의 value 가 변경되기 직전에 발생합니다. input : value 가 변경된 직후 발생합니다. 따라서 조합 문자의 경우, 하나의 글자가 완성된 후 새로운 글자가 입력될 때 발생합니다. 위 이벤트들은 HTMLElem..