JH 개발 블로그

검색 엔터키 키가 눌렸다 떼지는 순간인 onkeyup 이벤트를 받을 곳은 버튼이 아닌 input이다. 만약 로그인 시 엔터 누르면 바로 로그인이 되도록 하는 기능을 구현하는 중이라면, 아이디-비번 순으로 입력하는 것이 일반적이므로 비밀번호를 입력하는 input 태그 내에 onkeyup 이벤트의 콜백함수를 지정해주면 되는 것이다. onkeyup 이벤트를 받고 수행할 콜백함수에는 이벤트 정보를 e로 담아준다. 이제 js 코드를 살펴보자. function onKeyUp(e){ if (e.keyCode == 13){ doSearch(); } /** if (e.key == 'Enter'){ doSearch(); } */ /** if (e.code == 'Enter'){ doSearch(); } */ } funct..

리액트(React) Lottie 애니메이션 적용 Lottie는 After Effects 애니메이션을 실시간으로 렌더링하는 iOS, Android 및 React Native 라이브러리입니다. 평소, gif, css 애니메이션을 사용한 결과물보다 더욱더 만족스러운 퀄리티를 만들어 낼 수 있다는 장점을 가지고 있습니다. 또 다른 장점으로는 디자이너가 원하는 완성된 결과물을 바로 적용하기 때문에, 개발자가 애니메이션에 구현에 대한 시간과 노력을 절약할 수 있습니다. 애니메이션에 대한 모든 정보가 JSON 파일로 저장되기 때문에 특별한 프로그램 설치가 필요없습니다. 사용 방법 json 파일을 따로 저장해준 후, 다른 파일에서 import LoaderJson from "./파일명.json"; 을 해줍니다. impo..

SVG 반응형으로 만드는 방법 화면의 크기가 달라져도 svg 요소의 크기는 고정되어 반응형에 취약한 모습을 보인다. 그러나, viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절된다. viewBox 속성의 값은 다음과 같다. viewBox=" " min-x 와 min-y 는 svg 가 그려지는 영역의 시작점, 왼쪽 상단의 꼭짓점으로, width와 height는 각각 영역 의 가로, 세로 길이로 볼 수 있다. before 가로, 세로가 375, 224 로 고정이 된다. after 가로, 세로의 비율이 375, 224 로 고정하되, 반응형 웹에 따라 크기는 유동적으로 변한다.

마이크로태스크 프라미스 핸들러(.then/catch/finally) 는 항상 비동기적으로 실행됩니다. 프라미스가 즉시 이행되더라도 .then/catch/finally 아래에 있는 코드는 이 핸들러들이 실행되기 전에 실행됩니다. const promise = Promise.resolve(); promise.then(() => console.log("프라미스 성공")); console.log("코드 종료"); 예시를 실행하면 '코드 종료’가 먼저, '프라미스 성공!'이 나중에 출력되는 것을 볼 수 있습니다. 프라미스는 즉시 이행상태가 되었는데도 말이죠. 뭔가 이상하네요. 왜 .then이 나중에 트리거 되었을까요? 그 이유에 대해 알아봅시다. 마이크로태스크 큐 비동기 작업을 처리하려면 적절한 관리가 필요합니다...

프론트의 예외 처리 백엔드에서 프론트로 데이터를 받아올 시 그 데이터가 null 이거나 undefined 일 수 있으므로, 프론트단에서는 이를 예외처리 시켜주어야 한다. 다음과 같이 brand 의 데이터 타입이 정의되어 있다. brand 중에 name 과 brandGroup 의 name 을 뽑아서 사용할 건데 이를 각각 brandName, brandGroupName 이라고 정의하겠다. 내가 사용하는 코드는 코드가 너무 길기 때문에 가독성을 위해 brandTree 라는 함수를 만들어서 따로 예외처리를 해주겠다. const { brandName, brandGroupName } = brandTree(brand); brandTree 함수 const brandTree = ( brand: | { __typename..

조건부 타입 조건부 타입이 뭐고 왜 굳이 쓰는 걸까? 다음 예시를 보자. function checkName(idOrName: string | number) { return idOrName; } checkName(1); checkName("ji"); 매개변수로 type 이 string 이나 number 가 들어갈 수 있다고 지정해주었다. 이제 checkName(1) 에 마우스를 올려보았을 때, function checkName(idOrName: string | number): string | number 위와 같이 타입이 추론된다. checkName("ji") 도 마찬가지다. 나는 checkName(1) 이면 number 로, checkName("ji") 이면 string 으로 추론되게 하고 싶다. 이럴 ..

제네릭 타입스크립트를 이제 막 배우기 시작한 단계라면 제네릭에 대한 이해가 많이 어려울 것이다. 내 생각엔 타입스크립트를 써보고 익숙해지면서(함수 타입과 interface extends 같은 것에 익숙해진 후) 나중에 제네릭을 배우면 좀 더 이해가 쉽지 않을까 싶다. (개인적인 추천) 제네릭이란 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다. 제네릭이 없다면... 위처럼 generic을 쓰지 않는다면, 1) 타입을 미리 지정하거나 2) any 를 이용하여 구현할 수 있다. 1) 타입을 미리 지정하자면, 확실한 타입체크가 이뤄질 수 있겠지만 항상 number라는 타입을 ..

package-lock.json 과 yarn.lock 파일의 정체는 뭘까 => 패키지 잠금을 위한 파일들 패키지를 프로젝트에 설치하거나 갱신 또는 삭제하는데 사용되는 도구를 패키지 매니저라고 하는데요. 현재 자바스크립트 커뮤니티는 npm과 yarn, 이렇게 두가지 도구로 양분이 되어 있는 상황입니다. 기본적으로 이 두가지 도구 모두 앞으로 설명드릴 패키지 잠금 기능을 지원하고 있는데요. npm은 package-lock.json 파일을, yarn은 yarn.lock 파일을 패키지 잠금 파일로 사용합니다. 즉, 패키지 잠금 파일은 자신이 개발을 하는 프로젝트에서 어떤 패키지 매니저를 사용하느냐에 따라 달라지게 됩니다. 패키지 관리 메커니즘 패키지 잠금을 이해하려면 먼저 패키지 매니저가 프로젝트가 의존하는 패..

async 코드의 문제는 에러가 발생했을 때입니다. 에러가 나면 어떻게 될까요? 아무 일도 일어나지 않습니다. 에러가 났는데 에러가 났다고 말을 안 하면 안 되겠죠? 그래서 generator 시간 때처럼 try catch문으로 감싸서 명시적으로 에러 처리를 해줍니다. async 함수는 return 또는 throw 값이 담긴 Promise를 리턴합니다. 위의 코드에서는 따라서 then(성공) 또는 catch(실패) 하면 됩니다. const returnPromise = async () => { return 'zero'; }; returnPromise().then((res) => { console.log(res); // 'zero' }); 근데 눈치 채셨나요? Promise를 리턴하기 때문에 이 코드를 다시 ..

클로저.. 개념은 많이 공부해봤지만 대체 언제 사용하는 것일까 문득 궁금해졌다. 클래스를 대체해서 사용한다고는 들었지만.. 전역 변수의 접근을 막기 위해서도 알고 있지만.. 정확하게!!!!!! 언제 어떻게 쓰이는지 궁금했다. 그래서 https://poiemaweb.com/js-closure 여기 인터넷에 있는 예시를 참고해서 클로저의 활용 사례를 정리해보려고 한다. (정리가 잘 되어 있으니 직접 읽어보는걸 추천) 즉시 실행 함수란? 클로저를 들어가기 전에 먼저 "즉시 실행 함수" 에 대해서 알아야 한다. 한 번만 실행하고 다시는 실행할 필요가 없는 함수들이 있다. 이럴 때 꼭 알맞은 기법이 있는데 바로 즉시 실행 함수를 만들어서 사용하는 것이다. 즉시 실행 함수는 함수를 정의하자마자 실행하게 만들어진 함..