![]()
크롬 익스텐션을 작업할 때 불편한 점이라면 크롬 확장 앱 관리자에 들어가서 업데이트 버튼을 눌러야 새로운 코드가 적용된다는 점이다. 거기다 지난 글처럼 React, TypeScript로 작업하면 과정이 하나 더 추가된다. 코드가 변경될 때마다 $ npm run build 커맨드를 날리고, 크롬 확장앱 관리자에서 새로고침(업데이트 버튼)를 눌러야 확인할 수 있다. 크롬 익스텐션 만들기는 3부작이며 이번 글이 마지막 글이다. 새로운 이슈가 나오지 않는다면 추가로 글을 쓰겠지만 지금은 계획이 없다.HTML, JS로 크롬 익스텐션 만들기 - 아주 기초적인 HTML, JS로 만드는 최소한의 기능을 갖고 있는 확장앱 만들기HTML,JS에서 React, TS로 마이그레이션 하기 - JS, HTML, CSS 같은 바..
![]()
프론트엔드에서는 JavaScript보다는 TypeScript의 생산성이 훨씬 더 좋기에 옮겨가야한다. 또한 프론트엔드에서는 평범한 HTML보다는 React나 다른 라이브러리, 프레임워크를 선호하며 생산성도 더 좋을 때가 많아서 옮겨가야한다. 따라서 이번 글에서는 크롬 확장앱을 마이그레이션해서 생산성있고 우아하게 React와 TypeScript로 변화시켜보자. HTML, JS로 크롬 익스텐션 만들기에서 HTML, JS로 크롬 익스텐션을 만들었다. 이 익스텐션을 활용할 예정이다. 크롬 익스텐션 만들기는 3부작으로 만들 예정이며 이번 글은 두 번째 글이다.HTML, JS로 크롬 익스텐션 만들기 - 아주 기초적인 HTML, JS로 만드는 최소한의 기능을 갖고 있는 확장앱 만들기(이번 글) JS, HTML, CS..
![]()
최근 우연한 계기로 크롬 익스텐션을 만들게 되었다... 그래서 기록을 남기고자 이 글을 적는다. 익스텐션 만들기는 글은 3부작 시리즈로 작성할 예정이다.1. (이번 글) 아주 기초적인 HTML, JS로 만드는 최소한의 기능을 갖고 있는 확장앱 만들기2. JS, HTML, CSS 같은 바닐라(?)한 환경이 아닌 React, TS 환경에서 작업하기3. 테스트용 로컬 익스텐션에 hot-reload 기능을 만들어서 크롬 브라우저를 직접 클릭하지 않기딱 hot-reload까지 글을 올리고 나서는 기존에 올리던 Lynx 공식문서 뿌수기를 공부하고 업로드 꼭꼭...해야지 오늘의 주제 - Chrome Extension 만들기 101 간단한 크롬 확장앱을 만들면서 어떤 파일들로 작업하는 지 알아보자!작업할 앱 : pop..
![]()
Lynx의 튜토리얼은 Product Gallery 만들기와 Product Detail 만들기로 구성되어 있다. 나는 그 중에서 갤러리 만들기를 먼저 해볼 예정이다. 지난 Quick Start에 이어서 공식문서 탐방을 하고 있다.Tutorial: Product Gallery를 보며 기록했다. 주로 복붙했다. 작업하면서 뭔가 이상하다고 느낀 부분의 코드만 살짝살짝 바꿔서 했다. 블로그 글로 업로드하는 내용은 분량상 2편으로 나눠서 진행한다. 이 글은 지난 글에 이어서 쓰는 Part 2다.Part 1 : 프로젝트 세팅부터 global style, component 하나 만들기, useState 사용하기Part 2 : list 태그 사용하기, Auto-Scrolling, MTS(Main Thread Scri..
![]()
Lynx의 튜토리얼은 Product Gallery 만들기와 Product Detail 만들기로 구성되어 있다. 나는 그 중에서 갤러리 만들기를 먼저 해볼 예정이다. 지난 Quick Start에 이어서 공식문서 탐방을 하고 있다.오늘은 Tutorial: Product Gallery를 보며 기록했다. 주로 복붙했다. 작업하면서 뭔가 이상하다고 느낀 부분의 코드만 살짝살짝 바꿔서 했다.블로그 글로 업로드하는 내용은 분량상 2편으로 나눠서 진행할 예정이다.Part 1 : 프로젝트 세팅부터 global style, component 하나 만들기, useState 사용하기Part 2 : list 태그 사용하기, Auto-Scrolling, MTS(Main Thread Script)로 메인 스레드 다루기 이 튜..
![]()
이번엔 Lynx 공식문서의 Quick Start 파트를 통해 Lynx 세팅을 하고 처음 실행하는 일을 해볼 생각이다.공식문서 - Quick Start를 읽고...이 글은 Lynx 프로젝트를 세팅하고 처음 실행해보는 일을 따라한다.그리고 맥북에 iOS 시뮬레이터로 실행한다. (Xcode는 이미 깔려있다.)pnpm으로 진행하는데, 이건 상관 없을 것 같다.(또한 2025년 4월 기준인 만큼 버전 이슈는 미래에 알 수 없다.) RequirementsNode.js 18 버전 이상(Type Script를 쓰기 위해선 Node.js 18.19은 되야한다.) Installation1. Create a new Lynx project[create-respeedy]Rspeedy라는 툴을 사용해서 Lynx 프로젝트를 빌드한..
![]()
영어 공부 겸 새로 나온 기술을 공부하고자 공식문서를 읽고 조금씩 읽고 정리한 글이다.공식문서의 메인 페이지와 Why Lynx라는 글을 읽었고 구글링, ChatGPT와 함께 내 나름대로 정리했다. 지금부터 공식문서의 메인 페이지와 메인페이지에서 바로 들어갈 수 있는 Why Lynx를 통해 Lynx가 추구하는 바를 알아보자.Lynx공식 홈페이지를 읽고Empower the web community and invite more to build across platforms아무튼 웹에서 사용했던 기술(JS, TS, React)을 활용해서 React Native나 Flutter처럼 크로스 플랫폼을 구현하겠다라는 얘기인 것 같다. 틱톡을 만든 바이트 댄스에서 만든 오픈소스로 그쪽 회사의 프로덕트는 모두 이 기술 L..
![]()
시작에 앞서 재작년부터였을까. 아니면 작년부터였을까. 어쩌다보니 JS가 가장 편해졌고 어느 순간 프론트를 메인으로 잡고 가고 있었다. 그런데 딱히 싫지 않다. ㅎㅎ 백엔드도 JS로 되니까~ 그간 공부할 때 봤던 사이트, 책을 정리해놓고자 한다. 공식 문서 프론트엔드를 해야겠다! 리액트를 해야겠다! 라고 할 때 가장 많이 본 것은 사실 책이 아니라 공식문서였다. 요즘 공식문서가 너무 많이 잘 되있다. 모든 API 레퍼런스와 튜토리얼까지 자세하게 나와있기 때문에 책보다 중요하다. 리액트 공식문서(튜토리얼) : https://react.dev/learn 타입스크립트 핸드북 : https://www.typescriptlang.org/docs/handbook/intro.html NextJS 공식문서 : https..
![]()
7장. 크롬 개발자 도구 파트를 읽고 개요 웹 개발을 배우게 되면서 개발자 도구를 알게 됐다. 처음에는 HTML, CSS를 알기 좋은 Elements탭, 자바스크립트를 실행할 수 있는 Console탭을 먼저 배우게 됐다. 그리고 어느순간 약간 sources 탭, 그리고 특히 Network 탭을 많이 들여다보게 됐다. (API가 꽂혔는지, 이미지 파일이 꽂혔는지 등 확인하기 시작하면서 였을 것이다.) 이 글 외에도 책에서는 정말 많은 내용을 다루지만 당장 개발자도구에서 뛰적뛰적 사용하기 좋은 것을 정리했다. Source 탭 sources 탭에서 Ctrl + P를 통해 Open File을 하면 웹 페이지에서 사용되는 소스코드를 다 확인할 수 있다. Ctrl+Shift+P로 Run Command 킬 수 있다...
![]()
인트로 나는 사실 클래스 컴포넌트를 써본 적도 배워본 적도 없다. 그렇지만 백엔드 입장에서 봤을 때 클래스를 사용하면 기존에 많이 나온 패턴들을 통해서 더 정형화된 코드, 정리된 코드를 만들 수 있을 텐데. 굳이 함수형을 쓰는 이유가 있을까? 라는 질문을 받았고 그에 대해서 궁금해서 찾아본 결과를 정리하고자 한다. 클래스 컴포넌트? 난 써본 적도 없다. 어떻게 생겼을까;;; React에 hooks가 생긴 16.8 버전 이후 함수형이 대세를 잡았다고 보여진다. 그렇기 때문에 17버전의 후반기, 지금의 18버전만 봐본 나는 써본 적이 없는... 방식이었다. 자, 본격적으로 들어가기 앞서 Class, Function 컴포넌트의 형태는 어떻게 생겼을까? // 클래스형 import React, { Componen..
![]()
주로 web.dev 사이트의 pattern 탭에서 breadcrumbs 아티클을 읽어보면서 약간의 참고 자료(MDN), 약간의 GPT, 그리고 구글링을 한 후 나만의 방식으로 정리했다. Breadcrumbs 빵부스러기로 표시한 길.(헨젤과 그레텔에 나온 그거임) 이게 뭐냐면 쿠팡에 들어가보면 카테고리 → 패션의류/잡화 → 여성패션 → 의류 로 소비자는 내가 어느 카테고리 계층에 있는 지 확인할 수 있다. 그리고 ‘난 남성패션만 보고 싶다’라고 한다면 다른 계층인 여성 패션에 있다가도 바로바로 카테고리를 통해서 들어갈 수 있다. 그리고 남성 패션 → 의류로 들어오면 위 캡처처럼 유저는 내가 어디에 있는지 확실하게 알 수 있다. 현재의 위계, 맥락을 알려주고 유저가 원하는 위치로 들어갈 수 있도록 하는 컴포..
![]()
모던 자바스크립트 튜토리얼 내용 정리 남용은 금지! 존재하지 않아도 괜찮은 대상에만 사용 등장 배경 요소가 없을 때 발생한 에러를 처리하고자 하는 마음let user = {}; alert(user.address.street); // TypeError 발생 해결 과정 AND(&&) 연산을 사용한다면? let user = {}; alert(user && user.address && user.address.street); // undefined. 옵셔널 체이닝 등장 평가 대상이 undefined, null이면 평가를 멈추고 undefined를 반환let user = {}; alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다. 주의 사항 ?.의 '앞..
![]()
[JavaScript] 즉시 실행 함수 (IIFE) IIFE (Immediately Invoked Function Expression). 정의되자마자 실행되는 JavaScript Function을 말한다. 즉시 실행 함수 (function imFunc() { alert("Welcome"); }());익명함수로 실행 (function() { alert("Welcome"); }());변수 사용 가능 (괄호 안쪽, 바깥쪽 둘 다 가능) // 괄호 안쪽 let data = 'welcome'; (function(data) { alert(data); }(data)); // 괄호 바깥 let data = 'welcome'; (function(data) { alert(data); })(da..
![]()
[JavaScript] 함수를 선언식, 표현식, 화살표로 만들어보기 함수명은 CamelCase로! (시작은 소문자!) 선언식 표현 function 함수명(매개변수1, 매개변수2, ...) { 함수가 호출되었을 때 실행하고자 하는 실행문; return 함수 밖으로 내보내고 싶은 값; } 표현식 let method = function (매개변수1, 매개변수2, ...) { 함수가 호출되었을 때 실행하고자 하는 실행문; return 함수 밖으로 내보내고 싶은 값; } 화살표 Arrow 표현식으로 만드는 익명함수에서 사용let arrow = function() { console.log('arrow function'); }; arrow = () => {console.log('arrow fun..
