programing/Language
-
[JS] input 태그에 한글 입력 막기programing/Language 2020. 8. 2. 22:39
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 움짤이 버벅거리거나 잘 보이지 않는다면 클릭해주세요. 요구사항 프로젝트에서 특정 input창에 왼쪽 방향키, 오른쪽 방향키, 백스페이스를 제외한 문자가 입력되는 것을 방지해야 했습니다. 저는 '음.. 조금 귀찮긴 하겠지만 할만하네' 라고 생각했습니다. 하지만 이때의 저는 험난한 여정이 시작될 것을 몰랐습니다.. 첫 구현 inputElement.addEventListener("keydown", function handleKeyDown(e) { console.log("key down", e.key, e.code); const whiteList = ['ArrowLeft', 'ArrowRight', 'Backspace']; if (!..
-
[ESLint, Airbnb] import/extensions 규칙 설정하기programing/Language 2020. 6. 28. 16:07
이번 포스트에서는 Vue CLI로 개인 프로젝트를 진행하던 중, ESLint의 import/extensions 규칙을 설정하는 경험을 공유하고자 합니다. Vue CLI로 프로젝트 스캐폴딩 하기 Vue CLI를 이용하면 위 사진과 같이 여러 가지 기능을 설정할 수 있습니다. 대부분의 프로젝트에는 코드 일관성을 위해 린터를 적용하곤 합니다. 저는 일단 ESLint와 Airbnb 설정을 하도록 하겠습니다. ESLint 에러 발생 vue나 npm 라이브러리를 제외한 녀석들을 import할 때 확장자명을 명시했더니 다음과 같은 에러가 발생했습니다. ESLint: Unexpected use of file extension "ts" for "@/components/Bus/Bus.ts"(import/extensions..
-
[LokiJS] 나의 삽질 후기programing/Language 2020. 5. 21. 23:06
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) LokiJS 개인 토이 프로젝트를 진행하다가 데이터를 저장해야 해야 할 필요가 생겼습니다. 그런데 저는 따로 서버를 구현하고 싶지 않았습니다. (AWS 프리티어도 만료되었슴..) 그래서 client-side in-memory DB를 라이브러리를 찾다가, LokiJS라는 라이브러리를 찾게 되었습니다. LokiJS is a document oriented database written in javascript, published under MIT License. Its purpose is to store javascript objects as documents in a nosql fashion and retrieve them wi..
-
[React] 함수형 컴포넌트와 훅programing/Language 2020. 5. 18. 17:52
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 이전 글에서, React의 클래스형 컴포넌트에 사용되는 생명주기 함수들을 정리했습니다. 그렇다면 이번 글에서는 함수형 컴포넌트의 생명주기 함수로 볼 수 있는 훅들에 대해 정리해보도록 하겠습니다. Hook 훅은 React 16.8.0부터 도입되었습니다. class 없이 리액트 컴포넌트를 사용할 수 있게 해 줍니다. 또한, 함수 컴포넌트에서 상태와 생명주기 기능lifecycle feature를 연동hook into할 수 있게 해주는 함수입니다. 단, 클래스 컴포넌트 내부에서는 동작하지 않습니다. 필요성 훅을 도입하게 된 배경은 다음과 같습니다. 컴포넌트 간 상태와 관련된 로직을 재활용하기 어려웠다. 복잡한 컴포넌트를 이해하기 어려..
-
[React] 클래스형 컴포넌트의 생명주기programing/Language 2020. 5. 18. 16:54
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 사실 React를 시작하면서, 클래스형 컴포넌트를 사용한 적이 없습니다. 하지만, 함수형 컴포넌트의 생명 주기를 이해하기 위해서는, 먼저 클래스형 컴포넌트의 생명 주기를 이해해야 한다고 생각합니다. 각 함수 헤드라인에 React 공식 문서 링크를 걸어 놓았으니, 참고하시면 좋을 것입니다. 생성 및 마운트 컴포넌트 인스턴스가 생성되고 DOM트리에 삽입될 때 까지, 다음의 함수들이 순차적으로 호출됩니다. constructor() 컴포넌트의 생성자입니다. getDerivedStateFromProps() 컴포넌트가 최초로 마운트 될 때와 갱신 시, render()함수를 호출하기 직전에 무조건 호출되는 함수입니다. (따라서, 성능 최적..
-
[TS] d.ts 파일 작성시 이모저모programing/Language 2020. 5. 17. 18:56
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 발단 최근 CRACreate React App와 TypeScript를 이용해 토이 프로젝트를 진행하고 있었습니다. TS를 사용하다 보니, 어쩔 수 없이 군데군데 사용자 정의 타입들이 생기게 되었습니다. 각 컴포넌트에 분산되어 있는 타입들을 한 파일로 모아서 관리하고 싶은 욕구가 뿜뿜 솟아났습니다. .d.ts vs .ts 하나의 파일로 관리를 할 때, 해당 파일의 확장자를 .d.ts로 할 것인지 .ts로 할 것인지 고민을 했습니다. 공식 레퍼런스를 보니, 어떤 선언(declaration)이든 export 키워드를 통해 익스포트 될 수 있다고 하며, 예제에서도 대부분 .ts파일을 사용합니다. 또한 구현이 없는 선언을 ambient..
-
[TS] 면접 대비용 TS 이모저모programing/Language 2020. 4. 29. 23:03
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 면접을 보다 보면, 어떤 기술을 왜 사용하는지, 어떤 철학이 있는지 물어보는 경우가 많습니다. 예를 들면 요즘 추세가 되고 있는 TS는 단순하게 JS에 타입을 추가한 것이지만, 더 깊이 이해하고 말하면 컴파일 타임에 미리 오류를 발견할 수 있고, 강타입으로 인해 undefined 에러를 방지할 수 있다와 같은 답변이 가능합니다. 사실 이런 정보는 구글링하면 쉽게 나오는 정보입니다. 왜 TS를 배워야 하는지, 어떻게 TS가 개선되어 왔는지, 철학은 무엇인지 잘 정리된 글을 찾기는 힘들죠. TS에 대한 전반적인 소개와 필요성, 개념들을 잘 정리한 페이지가 있어 공유하고자 링크를 남겨 봅니다. https://ahnheejong.gi..
-
[TS, React] styled-component에 ref 사용하기programing/Language 2020. 4. 17. 21:29
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 포트폴리오용 웹페이지를 구현하다가 React의 ref를 사용하려고 삽질한 후기를 공유하도록 하겠습니다. 원했던 그림 제가 하고자 했던 것은, 메뉴 버튼을 클릭하면 메뉴 컨테이너가 나타나는 기능이었습니다. 이를 위해 스타일을 클래스 네임으로 조작을 해야겠다고 생각했고, 클래스 네임을 조작하려면 컴포넌트에 대한 ref가 필요했습니다. Prop에 ref 추가하기 위 요구사항을 위해 다음과 열심히 찾아서 다음과 같이 구현했습니다. // NavBar.tsx import * as React from "react"; import {FunctionComponent, useCallback, useRef} from "react"; import ..