즐겁게, 코드

크롬이나 웨일 등의 최신 브라우저는 다양한 익스텐션을 지원하는데요, 오늘은 리액트로 익스텐션 앱을 빌드하는 방법을 소개하려 합니다. 프로젝트 세팅 먼저 create-react-app 으로 리액트 앱을 빌드한 다음, public 폴더의 manifest.json 파일을 확인합니다. 그럼 아래와 같이 매니패스트 파일이 생성되었음을 알 수 있습니다. { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png",..

커링은 sum(a, b) 처럼 단일 호출로 처리되는 함수를 sum(a)(b) 처럼 여러 번의 호출로 분리하는 기법입니다. const sum = (a, b) => { return a + b; } console.log(sum(1,2)); // 3 두 수의 합을 구하는 평범한 함수인데요, 위의 sum 함수는 두 인자를 입력받아 계산한 값을 리턴합니다. 그러나 커링을 적용하면 아래처럼 두 인자를 입력받아 계산한 값을 리턴하는 함수를 리턴하게 됩니다. const curriedSum = (f) => { return (a) => { return (b) => { return f(a, b); }; }; }; const sum = (a, b) => { return a + b; }; let res = curriedSum(s..

최근 깃허브 스타 1k를 돌파한 hook-flow 라는 프로젝트가 있습니다. 리액트 훅의 모호한 실행 순서가 보기좋게 정리되어 있어 저도 이미지를 저장해서 보고 있습니다. 😁 그런데 이상하게도, LayoutEffects라는 낯선 이름이 하나 보이네요. 오늘은 useLayoutEffect 라는 생소한 훅을 소개해 보겠습니다. useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) useLayoutEffect를 인텔리센스가 자동으로 완성한 모습입니다. 그런데 어디서 많이 본 형태 아닌가요? useEffect(() => { effect return () => { cleanup } }, [input]) 맞습니다! u..

혹시 페이스북을 사용해 보신 적 있으신가요? 페이스북을 사용해 보신 분들이라면 들어갈 때마다 로그인을 수행하는 대신 항상 로그인 상태가 유지되고 있는 것을 알고 계실 것입니다. 바로 이런 기능이 "쿠키" 를 활용해 구현된 기능인데요, 오늘은 쿠키를 활용하는 방법에 대해 알아보겠습니다. 쿠키(Cookie)란? 쿠키는 키 - 값 쌍으로 이루어진 작은 데이터입니다. 서버는 브라우저에 쿠키를 전달하고, 브라우저는 쿠키를 저장해 두었다가 다음 번 요청부터 보관하고 있던 쿠키를 서버에 전달합니다. 쿠키는 주로 세션 관리나 트래킹 등 용도로 사용되는데요, 트래킹의 예시로 현재 창에서 개발자 도구를 열고 document.cookie 를 입력해 보면 카카오 애드핏과 구글 애널리틱스 등 트래킹 도구에서 여러분의 접속 정보..

일부 커뮤니티나 웹 페이지는 컨텐츠 유출을 방지하고자 마우스 우클릭을 비활성화하거나 복사를 물리적으로 비활성화하기도 합니다. 오늘은 브라우저에서 지원하는 클립보드 API를 활용해 이를 구현해보도록 하겠습니다. copy 이벤트 사용자가 복사를 시도하는 것을 어떻게 알 수 있을까요? window.addEventListener("keydown", (e) => { if ((e.ctrlKey || e.metaKey) && e.key == "c") { alert("복사 수행됨"); } }); keydown 이벤트를 활용하면 컨트롤 키를 비롯한 모든 키의 입력을 감지할 수 있는데요, 위처럼 control(맥에서는 command) 키와 c 키를 같이 누르면 복사가 수행됩니다. 그러나, 키보드 입력을 감지하는 방법으로는..

가끔씩 HTML 코드를 살펴보면 data- 라는 접두사가 붙은 수상한 속성들을 만날 수 있습니다. id과 class는 뭔지 알겠는데 data-clk-prefix는 대체 무슨 속성일까요? HTML 요소의 속성 모든 HTML 요소는 특정한 속성을 가질 수 있습니다. 예를 들어 태그는 이미지의 너비와 높이를 지정하는 width, height 라는 속성을 가질 수 있고, 태그는 입력값의 타입을 정하는 type 이라는 속성을 가질 수 있습니다. 그렇다면 혹시 "author" 처럼 기존에 존재하지 않던 특성을 마음대로 사용할 수도 있을까요? 나스닥 거품, 과연 꺼질 것인가 물론 사용할 수는 있습니다. 다만 author 라는 속성은 사전에 약속된 속성이 아니라 우리가 임의로 명명한 속성이므로 사전에 약속된 속성들과 ..

자바스크립트의 자료형은 원시형과 객체 타입으로 구분됩니다. 원시형 : Number, String, Boolean 객체 : 나머지 전부 객체 타입이 원시형과 구분되는 가장 큰 차이는 변수에 실제 값이 담기는 원시형과는 달리 객체 타입은 해당 데이터의 참조(reference) 값이 저장된다는 것입니다. (C나 C++의 일반 타입과 포인터를 떠올리면 됩니다.) 이게 뭐가 중요하다고 갑자기 이 얘기를 꺼내는 걸까요? 이제부터 코드를 통해 살펴봅시다. let number1 = 1; let number2 = number1; number2 = number1 + 9; console.log(`number1 : ${number1}, number2 : ${number2}`); // number1 : 1, number2 : ..