들어가며마지막 사이드 프로젝트 때 Tanstack Query를 사용했었고, 마음에 들어서 외주 프로젝트와 이후 사이드 프로젝트에도 Tanstack Query를 도입했었습니다.Tanstack Query를 쓰면서 '이런 기능이 있나? 있으면 좋을 것 같은데' 라고 생각했던 것들이 많았는데, 실제로 찾아보니 이미 있는 경우가 대부분이었고, 미리 한번 전체적으로 공식 문서를 정독했다면 두 번 찾아보지 않아도 되었겠다-라는 생각을 하게 되었어요. 그런 의미로, 이번 포스팅에서는 Tanstack Query에서 자주 쓰일 법한 개념들을 한번 전체적으로 정리하는 시간을 가져보도록 하겠습니다. Tanstack Query(React Query) 개요Tanstack Query는 서버 상태 데이터를 가져오고, 캐싱, 동기화 ..
들어가며얼마전 기술면접 준비를 하면서 React에서의 메모이제이션에 대해 다시한번 짚어보게 되었습니다.일반적으로 메모이제이션을 사용하는 것이 항상 좋지만은 않다고 알고 있지만, 정확히 왜 그러한지 좀 더 알아보고 싶어져서 포스팅을 해보려고 해요.메모이제이션이란?React에서 메모이제이션은 불필요한 재계산과 리렌더링을 방지하기 위해 존재하는 기술입니다.이전 계산 결과를 캐싱한다음, 재사용을 하게 하는 매커니즘을 가지고있어요.따라서 대규모 데이터 처리를 하는 경우에 성능 향상에 결정적인 역할을 할 수 있습니다.메모이제이션의 여러 방법들React에서 제공하는 메모이제이션의 대표적인 방법들은 여러가지가 있는데요.하나씩 알아보겠습니다.React.memo먼저 React.memo 입니다.const MemoizedCo..
들어가며성능 최적화에 대해서 이야기할 때, 백엔드와 프론트엔드에서 접근하는 관점이 꽤 다릅니다.예를 들어 백엔드에서는 데이터베이스 쿼리를 최적화나 서버 리소스 관리에 대해 주요하게 고려한다면, 프론트엔드에서는 페이지의 로딩 시간을 단축하여 사용자 경험을 향상 시키는 것에 초점을 맞추곤 하죠. 이처럼 프론트엔드 성능에 영향을 미치는 여러 요소 중에서도, 자바스크립트가 DOM 구성을 차단하는 현상은 특히 중요합니다.구글의 연구에 따르면 페이지 로딩 시간이 3초 이상 지연되면, 절반 이상의 사용자가 페이지를 이탈한다고 해요. 이번 글에서는 자바스크립트가 DOM 구성을 어떻게 차단하게 되는지, 이를 어떤 기법을 사용해서 최적화할 수 있는 지에 대해서 다루어보려고 합니다. 자바스크립트와 DOM 렌더링의 관계Cri..
들어가며저는 웹 외주 프로젝트에 프론트엔드 개발로 참여하며 팀원과 공유할 테스트용 배포 사이트가 필요했습니다.좀 더 구체적으로는 다음과 같은 프로세스를 가졌는데요.develop 브랜치에 개발한 기능을 올리고 EC2 서버에 develop 브랜치를 테스트용으로 배포하여, 팀원과 확인한 후 문제가 없을 시 main 브랜치에 최종적으로 merge하며 진행하였습니다.(현업에서는 더 구체적이고 체계적인 방식으로 진행하겠지만, 신속한 수정이 필요하고 팀원 구성이 적은 저희는 우선적으로 이렇게 진행하곤했습니다.)이 때 배포하는 방식은, 말 그대로 '수동 배포 방식'이라고 할 수 있었는데요.직접 EC2 서버에 접속해서 터미널 명령어로 배포를 위한 명령어를 입력해야했기 때문이에요. 하지만 배포의 빈도가 늘어나면서 다음과 ..
tanstack query(react) 의 개요를 찾아보다가, 이 tanstack-query 가 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와주는 라이브러리이며 클라이언트 상태과 서버 상태를 명확히 구분하기 위해서 만들어졌다는 내용의 글을 읽었습니다. 클라이언트 상태는 평소에 React에서 관리하고 사용하는 ‘state’ 의 개념으로 이해하면 될 것 같은데, 서버 상태는 정확히 무엇을 의미하는 것인지 궁금해졌습니다.이번 글에서는 클라이언트 상태와 서버 상태를 비교하며 차이에 대해 다루어볼게요. 개인적으로는 ‘서버 상태’ 라는 단어가 익숙하지 않았을 뿐이지, 새로운 개념은 아니었어요.다만, 클라이언트 상태와 서버 상태는 완전히 다른 개념이므로 정확히 이..
들어가며웹 애플리케이션을 개발하다 보면 종종 새 창(window)을 열어 작업해야 하는 경우를 마주하게 됩니다.특히 관리자 페이지나 기업용 웹 애플리케이션에서는 여러 창을 동시에 띄워놓고 작업하는 것이 사용자 경험 측면에서 더 효율적인 경우가 많습니다.예를 들어 사용자 목록을 보면서 특정 사용자의 정보를 수정하거나, 주문 목록을 확인하면서 개별 주문의 상세 내용을 수정하는 등의 작업이 있죠. 이런 상황에서 중요하게 고려될만한 것은 창 간의 안정적인 데이터 통신입니다.사용자가 새 창에서 데이터를 수정하고 나면, 그 변경사항이 원래 창에도 자연스럽게 반영되어야 하니까요.이를 위한 구현 방식으로는 크게 window.opener를 이용하는 방식과 URL 파라미터를 이용하는 방식이 있습니다.기술 스택이 글의 예제..
웹 개발에 있어 네이티브 앱과 같은 기능을 구현하는 것은 항상 고민이 되고, 도전적인 부분이라고 생각합니다. 특히 기기의 카메라에 접근해야하는 기능이라면 더욱 그렇습니다. 이번 글에서는 저희 스파키 Frontend팀에서 스냅피 프로젝트에서의 카메라 사진 촬영 기능을 구현한 경험을 공유드리려합니다.웹에서의 카메라 구현스냅피 프로젝트는 사람들이 쉽게 사진을 찍고, 업로드 할 수 있는 모임 사진 서비스입니다. 때문에 설치를 하지 않아도 링크를 통해 쉽게 접속할 수 있어야한다는 점을 고려하여 Next.js를 활용한 웹 서비스로 개발되었습니다. 하지만 앱을 다운로드 받거나 바로가기를 만들 수 있다는 점에서 PWA(Progressive Web App) 형태로 개발하기로 결정했습니다.프로젝트 초반에 가장 먼저 부딪힌..
들어가며JavaScript로 개발을 하는 대부분의 프론트엔드 개발자 분들은 setTimeout 함수를 사용해본 경험이 있으실 거라고 생각합니다. 주로 일정 시간 후에 코드를 실행하거나, 애니메이션 효과를 구현하는데에도 종종 사용하는 함수이죠. 이 setTimeout 함수를 setTimeout(fn, 0)과 같이 사용하면 함수가 즉시 실행될까요? 직관적으로 생각해보면 즉시 실행될 것 같지만, 실제로는 그렇지 않기 때문에 많은 입문 개발자들에게 혼란스럽게 다가올 수 있을 것 같습니다. 이 현상을 이해하려면 JavaScript의 이벤트 루프와 비동기 처리 메커니즘을 살펴볼 필요가 있습니다. 이 개념들은 JavaScript에서 작업들이 어떻게 처리되고, 실행 순서를 어떻게 결정하는지 설명해주는 원리인데요. 이 ..
git commit 후 git push 를 하려고 하는데 아래와 같은 에러가 뜨면서 실패하는 상황을 마주했다. error: RPC failed; HTTP 400 curl 22 The requested URL returned error: 400 send-pack: unexpected disconnect while reading sideband packet fatal: the remote end hung up unexpectedly 이런저런 시도들을 해봤지만, 결론적으로 해결할 수 있었던 방법은 버퍼의 용량을 늘리는 것이었다. https://git-scm.com/docs/git-config#Documentation/git-config.txt-httppostBuffer Git - git-config Docum..
웹페이지를 개발하고 배포했는데, 큰 용량의 SVG 파일이 많이 들어가는 페이지어서 그런지 렌더링이 오래걸리는 문제가 있었다.따라서 조금이라도 SVG 파일을 최적화해보고자했다. PageSpeed Insights객관적으로 점수 측정을 먼저 해보는 것이 좋겠다.아래의 사이트에 배포된 사이트의 링크를 입력하면 결과를 알 수 있다.https://pagespeed.web.dev/ PageSpeed Insights올바른 URL을 입력하세요.pagespeed.web.dev 먼저 휴대전화의 경우를 살펴보자. 데스크톱의 경우도 확인해보자. SVGOSVG 파일의 렌더링 시간을 줄이기 위해 SVG 최적화를 해보자.SVGO를 설치하고 사용하여 파일 크기를 줄이는 방법을 사용할 것이다. 1. SVGO를 설치한다.npm inst..
이 포스팅에서는 React.js로 개발하고 Vercel을 통해 배포한 프로젝트에 대해사이트맵을 생성하여 구글 서치 콘솔에 제출하는 방법에 대해 다룬다.이 과정에서 발생한 문제와 그 해결 방법도 함께 다루고자한다. 사이트맵이 로컬에서는 보여지는데, 배포를 하면 보여지지 않는 문제,배포해서 사이트맵이 보여지는데는 성공했는데, robots.txt 가 차단해서 URL 검사를 해도 크롤링을 하지 못하는 문제 등 다양한 문제를 마주했다 🥲결과적으로 아래와 같이 했을 때 사이트맵 인식에 성공할 수 있었다.과정google search console 에 먼저 해당 사이트를 등록한다. sitemap.xml 만들기https://www.xml-sitemaps.com/위 사이트에 들어가 사이트맵 파일을 만들어 다운로드 받는다..
최근에 서비스 홍보를 위한 온보딩 페이지를 개발하면서, 디자이너가 만들어주신 이미지들을 많이 페이지에 추가할 일이 있었다.이 과정에서 SVG 이미지 화질 깨짐 문제가 있었는데, 해결 과정을 공유하려한다.React.js, JavaScript, Tailwindcss 환경에서 진행함문제SVG 이미지를 사용하던 중, 특히 모바일 크롬 브라우저에서만 뿌옇게 이미지 화질이 떨어지는 문제를 발견했다.원래 SVG 파일의 장점이 고품질 벡터 그래픽이기에 SVG로 추가한 것인데, PC 브라우저에서는 깨지지 않게 보이고 모바일로 확인했을 때 깨지는 현상이 나타났다. 기존 코드해결 과정문제의 해결책을 찾으면서, SVG를 처리하는 방식을 변경하는게 화질 깨짐 현상을 해결할 수 있음을 알게되었다. 태그 대신에 수정된 코드 변경..
요즘 프로젝트를 개발하면서 api 호출하는 부분에 대해서 최적화할 수 있는 부분이 있다면 조금씩 리팩토링해보는 중이다.그 중에서도 똑같은 내용으로 api 를 호출했을 때, 다시 응답을 새롭게 기다려야하는 부분을 개선해보고 싶었다. 캐싱 이란?캐싱이란 어떤 데이터를 한번 응답으로 받으면, 임시로 데이터를 다른 곳에 저장해서 필요시에 더 빠르게 불러와서 사용할 수 있는 프로세스를 말한다. 즉, 똑같은 요청을 또 하는 불필요한 요청을 줄일 수 있다. 캐싱을 어디에하지?localStorage, sessionStorage 등 다양한 곳에 저장할 수 있다.나는 브라우저가 닫히면 캐시 데이터 또한 깔끔하게 삭제되길 원했기에 sessionStorage에 저장하는 방법을 택했다. * 영구적으로 저장하고 싶으면 local..
프로젝트에서 메뉴 기능을 개발하면서 useRef 기능을 이 참에 잘 이해하고 써보려고 했다. 햄버거 모양의 메뉴 버튼을 클릭하면 → 메뉴가 펼쳐진다 햄버거 모양의 메뉴 버튼을 다시 클릭하면 → 메뉴가 닫힌다 펼쳐진 메뉴를 제외한 화면의 다른 부분을 클릭하면 → 메뉴가 닫힌다 👉 이걸 구현하고자 함!! useState, useRef, useEffect 훅을 사용해서 메뉴의 열림/닫힘/메뉴 바깥 영역 클릭시 메뉴 닫힘 기능을 구현해보자. const [isMenuOpen, setIsMenuOpen] = useState(false); const menuRef = useRef(); // 드롭다운 메뉴에 대한 참조 먼저 useState 훅을 사용해서 메뉴의 열림/닫힘 상태를 나타내는 isMenuOpen 이라는 상..
TailwindCSS 에 폰트 적용하는 법을 정리해보려한다! 이전에 했었는데 생각이 안나서 다시 찾아봤다. 나중에 또 안 찾아보도록 ... 폰드 다운로드와 저장 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 우선 위 사이트에서 폰트를 다운받는다 폰트 ttf 파일을 프로젝트에 넣어둔다. 나는 src > assets 폴더에 fonts 라는 폴더를 하나 만들어서 여기에 ttf 파일을 저장했다. font-face @font-face { font-family: "Roboto"; src: url("../src/..
keyof keyof 키워드는 object 타입의 모든 key 를 가져와서 유니온 타입으로 반환한다. 아래의 예시를 보자 interface Person { age: number; name: string; } type PersonKeys = keyof Person; // "age" | "name" 위에서 PersonKeys 타입은 age와 name 중 하나의 문자열 값만 가질 수 있는 리터럴 타입이다. Mapped Types Mapped Types 를 이용하면, 기존의 타입을 새로운 타입으로 변환할 수 있다. object 의 각 속성에 대해 반복적으로 적용을 할 수 있어서 타입 변환 과정을 간결하게 만들어 준다. type TypeChanger = { [Key in keyof MyType]: NewType;..
interface와 implements 를 사용한 class 타입 확인 interface 는 object 의 타입을 지정할 때 사용할 수 있다. 그리고 또 다른 용도로, class 의 타입을 확인할 때에도 사용할 수 있다. 이 때, implements 키워드도 필요하다. 아래의 예시를 보자. class Car { model: string; price: number = 1000; constructor(a: string) { this.model = a; } } let 붕붕이 = new Car('morning'); 위의 Car 클래스에서 생성된 객체들은 model 과 price 속성을 가진다. 클래스가 특정 속성을 가지고 있는지 타입으로 확인하고 싶을 때, interface 와 implements 키워드를 사..
개념 d.ts 파일은 TS에서 타입 정의를 저장하는 파일이다. 여기서 'd' 는 Definition 의 약자이다. 이 파일들은 TS 컴파일 과정에서 JS로 변환되지 않으며, 타입 정보만 포함한다. 주로 2가지 용도로 사용된다. 1. 타입 정의 저장 : 타입 정보만을 분리하여 저장하고, 필요한 곳에서 import 해서 사용한다 2. 레퍼런스 용 : 프로젝트에서 사용하는 타입을 정리해놓은 문서로 활용할 수 있다. d.ts 파일에서 타입 정의하기 d.ts 파일 내에서는 주로 type 키워드, interface, 함수 타입 정의를 포함할 수 있다. 함수 본문을 정의할 수는 없고, 파라미터과 return 타입만 지정할 수 있다. export type Age = number; export type Multiply ..
JS 파일에 선언된 변수 TS 파일에서 사용하기 JS 파일에서 선언된 변수를 TS 파일에서 사용하고 싶을 때에는 declare 키워드를 사용한다. declare 키워드를 사용하면 TS 파일 내에서 JS 파일에 정의된 변수나 함수의 타입을 명시할 수 있다. declare let a: number; 위 예시처럼 TS 파일에 declare 를 선언하면 '변수 a 는 number 타입이며, 이미 어딘가에 정의되어 있다' 라고 TS 컴파일러에게 알리는 것이다. declare global 'declare global' 은 TS 모듈 내에서 전역 변수나 타입을 선언할 때 사용된다. 일반적으로 TS 파일은 자체 scope 를 가지고 있어, 파일 내에서 선언된 변수나 타입은 그 파일 내에서만 접근이 가능하다. 하지만 때..
Tuple type Tuple 은 타입스크립트에서 고정된 수의 요소를 가지면서, 각 요소의 타입이 명시적으로 지정된 배열의 타입이다. 각 요소의 타입은 다를 수 있고, 배열의 길이는 고정된다. 예를 들어 첫번째 요소가 문자열이고, 두번째 요소가 숫자인 배열을 정의하고 싶다면 다음과 같이 작성할 수 있다. let exampleTuple: [string, number] = ['hello', 42]; Tuple 응용 : Rest Parameters 함수의 매개변수로 '...' (rest 연산자)를 사용하면 인자를 배열로 받을 수 있다. 이 기능을 tuple 이랑 결합해보자. 예를 들어 첫번째 인자는 문자열이고, 두번째 인자는 숫자여야 하는 경우에 다음과 같이 작성할 수 있다. args 라는 배열에 string..
문제 Vite로 생성한 React 프로젝트를 개발하는 과정에서 나는 react-router-dom 라이브러리를 활용해서 라우팅을 진행했다. import { Route, Routes } from "react-router-dom"; import TreeBranchView from "./pages/TreeBranchView"; import MemberBranchView from "./pages/MemberBranchView"; function App() { return ( ); } export default App; 코드를 모두 작성하고 Vercel 로 배포한 후 배포된 주소로 접속하는데 분명 로컬에서는 잘 라우팅 되어 접속되었던 주소가, Vercel로 배포한 주소로 들어갔을 때에는 404: NOT_FOUNT..
React 프로젝트 생성 타입스크립트의 셋팅이 완료된 새로운 프로젝트를 생성하는 법이다 npx create-react-app 프로젝트명 --template typescript 만약 기존 프로젝트에 타입스크립트만 추가하고 싶다면 다음과 같이 터미널에 입력한다 npm install --save typescript @types/node @types/react @types/react-dom @types/jest Typescript로 만든 React 프로젝트 일반 프로젝트와 다른 점은 컴포넌트 파일에 js 가 아닌 tsx 확장자를 사용해야한다는 것이다. 그러면 리액트 프로젝트에서 typescript 문법을 어디에 응용할 수 있을지 알아보자 JSX 타입지정 리액트에서는 변수나 자료에 를 담아서 쓸 수 있다. 리액트..
Generic function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) 위와 같은 코드를 보자. unknown 타입의 array 자료를 입력하면, array의 맨 앞 첫번째의 요소를 리턴해주는 함수가 있다고 해보자. console.log 로 콘솔에 찍힌 a 의 타입은 뭘까? unknown 이다. 입력하는 array 도 unknown 타입이기 때문이다. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a + 1) 때문에 이런 경우에는 에러가 날 것이다. 왜냐하면 a 는 unknown 타입인데, 숫자인 1을 더하려고 했기 때문이다. 이런 문제를 해결..
type import export a.ts 파일에 있는 것을 b.ts에서 쓰고싶다면 다음과 같이 코드를 작성할 수 있다. (a.ts) export type Name = string | boolean; export type Age = (a :number) => number; (b.ts) import {Name, Age} from './a' let 이름 :Name = 'kim'; let 함수 :Age = (a) => { return a + 10 } namespace 과거에는 자바스크립트의 import export 문법이 없었다 그래서 코드를 써서 다른 파일들을 일종의 첨부처럼 했는데 이러면 파일이 많아질 수록 변수명이 겹치는 위험이 발생할 수 있었다. 그래서 외부파일에서 사용하지 않을 변수들은 함수로 감쌌었..
protected class 에 관련해서, extends 라는 문법을 쓰면 class 를 복사해서 사용할 수 있다. 근데 private 으로 선언한 것은 기존 class 안에서만 사용할 수 있다. extends 로 만든 class 에서 원본의 class 속성을 쓰고 싶다면 protected 로 선언하면 된다. private 이랑 같으면서도, extends 된 class 안에서도 사용가능하게 해준다. class User { protected x = 10; } class NewUser extends User { doThis(){ this.x = 20; } } NewUser class 는 User class 를 extends 한다. NewUser 에서 this.x 처럼 x 를 쓰려고 하면, 기존에 privat..
객체 지향 언어에서 제공하는 public, private, static, protected 와 같은 키워드들을 타입스크립트에서 사용가능하다. public 타입스크립트는 class 안에서 public 키워드를 사용가능하다 class User { public name: string; constructor(){ this.name = 'kim'; } } let user1 = new User(); user1.name = 'park'; 위 코드에서는 public 으로 선언된 name 이라는 속성이 있다. 이렇게 name 처럼 public 이 붙은 속성은 user1과 같은 자식 object 들이 마음대로 사용/수정이 가능하다. 만약 public 을 안 붙인 채로 만든다고 해도, 기본적으로 자동으로 아무것도 안붙인 경..
서비스 홍보 페이지를 만들면서 스크롤에 따라서 화면에 특정 컴포넌트가 나타날 때, 위에서 자연스럽게 올라오는 애니메이션을 적용해보고싶어졌습니다. 라이브러리 선택 구글링을 해보니 react-reveal 과 framer motion 이라는 2가지 라이브러리를 찾을 수 있었는데, react-reveal 은 마지막 업데이트가 오래되기도 했고 npm install 을 해보니 버전때문에 충돌이 나는 부분이 있어, framer motion 라이브러리를 선택했습니다. framer motion 설치 npm install framer-motion 적용 방법 일단 제가 구현하려는 것은 다음과 같았습니다. 스크롤에 따라서 화면에 자식 컴포넌트가 나타나면, 자식컴포넌트에 애니메이션이 실행될 것. 스크롤을 올려서 자식컴포넌트가 ..
문제 이미지를 추가했는데 'unable to load image asset' 이라는 오류가 뜨면서 이미지가 렌더링 되지 않는다. 1. pubspec.yaml 파일 제대로 썼는지 확인 띄어쓰기도 올바르게 작성했다. 2. 이미지 경로를 잘 썼는지 확인 오타없이 잘 작성했다. 3. 최후의 수단 실행시키던 걸 중단하고, 터미널에 들어가 flutter clean 명령어를 작성하고 enter 를 누른다. 이후에 코드들에 오류가 갑자기 엄청 많이 생기는데, 신경쓰지말고 다시 디버깅을 실행한다. 이미지가 잘 렌더링 되는 것을 확인할 수 있다.
관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데 백엔드 없이 로그인 기능을 구현해야하는 상황이었다. 하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면 새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다. 그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다. 나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다. 쿠키란 localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다. 기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다. 브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다. 설치 npm install reac..
ref : Flutter & Dart - The Complete Guide [2023 Edition] 23-24 GDSC HUFS 플러터 스터디를 진행하며 수강한 강의를 정리한 포스팅입니다. Flutter 프로젝트 생성 터미널의 원하는 경로에서 다음을 입력 flutter create [프로젝트이름] 또는 VSCode 를 사용할 경우 cmd + shift + p 로 팔레트 열어서 flutter new project 를 선택해도 됨 Understanding Types 다트는 type-safe 언어이다. 다른 말로는 type-safety(타입 안전성)을 가진 프로그래밍 언어라고 할 수 있다. 여기서 타입 안전성이란? 프로그램이 컴파일 시간에 타입 오류를 감지하고 실행시간에 타입 관련 문제를 방지하는 개념 Da..
