두 입력 값 비교 코드

두 개의 입력이 있을 때 이 입력의 값이 같은지 알고싶을 때 보통은 ===을 사용합니다.  하지만 값이 원시값이 아니라면 객체, 배열, Map, Set이라면 우리가 봤을때는 같은 값이더라도 저장된 위치(주소)가 달라 같지 않다는 결과를 받을 수 있습니다.  따라서 우리가 원하는 결과를 얻기 위해선 객체, 배열, Map, Set은 각각 값을 비교해줘야 합니다. 이를 비교할 때마다 하나하나 비교하는 코드를 작성하기엔 비효율적이기 때문에, 함수를 하나 만들어보았습니다. 코드function areEqual(value1, value2) { // 먼저 두 값이 동일한지 확인합니다. if (value1 === value2) return true; // 타입이 다르면 무조건 다릅니다. if (typeof val..

  • format_list_bulleted 언어 정리/JavaScript
  • · 2024. 8. 9.
  • textsms

[Vanilla JS 문서편집기 설명 및 개선] 1. vite 번들러 추가

목적 기존 프로젝트에선 번들러를 따로 사용하지 않고 vscode의 Live Server를 이용해 페이지가 잘 동작하는지 확인했습니다. 하지만 프로젝트를 다시 다듬게 되었을 때 제가 여러가지를 놓치고 있다는 생각이 들었고, 해당 부분을 vite 번들러를 이용한다면 많은 부분을 해소할 수 있다고 생각했기 때문에 이번 기회에 추가해봤습니다.  제가 얻을 수 있는 장점은 다음과 같습니다.오류 사전 탐지 : 빌드했을 때 오류가 발생하는지코드 최적화의존성 관리 용이CSS, 이미지, 폰트 등 자산 관리호환성 : babel 등 트랜스파일러를 이용해 최신 JS 문법을 구형 브라우저에서도 동작할 수 있도록 변환 추후 github action을 이용해 main으로 merge시 build에 오류가 존재하지 않을 때만 merg..

  • format_list_bulleted 프로젝트/Vanilla JS 문서편집기
  • · 2024. 8. 8.
  • textsms
Copilot 대신 VSCode에서 Continue 사용해보기

Copilot 대신 VSCode에서 Continue 사용해보기

오늘은 개발을 할 때 사용하는 코드 작성 도우미 Copilot을 사용해보고 싶지만, 자주 사용하지 않기 때문에 한달에 4만원을 내기는 부담될 때 사용할 수 있는 방법을 알려드리려합니다. 바로 오픈소스 Continue를 이용하는 방법인데요, 다만 이 방법은 chat GPT를 사용하기 때문에 무료는 아니고 상대적으로 저렴한 방법입니다. 만약 이용량이 많다면 Copilot을 사용하는 것을 추천드립니다. (gpt는 사용하는 만큼 비용이 청구됩니다. 반면에 Copilot은 많이 사용하든 적게 사용하든 항상 같은 가격입니다!) 시작하기먼저 VSCode extention에서 continue를 검색해 다운받습니다.  맨 위의 항목을 설치해줍니다.  이후 선택사항이지만 제작자는 Continue를 sidebar 오른쪽에 ..

  • format_list_bulleted 개발 공부/기타 (개발 공부)
  • · 2024. 8. 7.
  • textsms
글자 깜빡임 현상(FOIT,FOUT) 해결하기

글자 깜빡임 현상(FOIT,FOUT) 해결하기

FOIT, FOUT이란?Flash Of Invisible Text, Flash Of Unstyled Text로 페이지에 진입했을 때 폰트 적용이 늦게되어 깜빡이거나 갑자기 글자가 나타나는 현상을 발견했던 경험이 있을 것입니다.이는 사용자 경험에 부정적인 영향을 주게됩니다. 이 현상은 왜 일어나는 것일까요?발생 원인 : 브라우저 동작브라우저에 진입할 때 동작을 설명하면1. 브라우저가 HTML 문서를 요청한다.2. DOM 구성 & CSS,JS 및 기타 리소스 요청3. CSSOM 구성 & 렌더트리 구축, 폰트 리소스 요청4. Reflow, Repaint -> 폰트를 사용할 수 없는 단계면 브라우저는 글자를 렌더링하지 않을 수 있음주목해야할 부분은 CSSOM을 생성하는 과정인데, 이 과정에서 폰트 리소스를 다운..

  • format_list_bulleted 개발 공부/기타 (개발 공부)
  • · 2024. 8. 7.
  • textsms
[Github Actions] dev->main 정해진 날에 자동 Merge하기 + fork한 리포지토리 자동 업데이트

[Github Actions] dev->main 정해진 날에 자동 Merge하기 + fork한 리포지토리 자동 업데이트

안녕하세요, 프로젝트를 하던 중 주기적으로 main에 배포를 해줘야하는 상황이 반복되어 제가 편하려고(!) 자동으로 배포하는 action을 만드려 합니다.제가 참고한 글은 카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까? 입니다.Github Action이란?CI/CD 같은 workflow를 자동화할 수 있는 도구Github에서 특정 이벤트 발생시 (push, pull, merge ...) 정해놓은 동작을 실행시키는 도구Dev -> Main으로 자동 Merge하기먼저 workflows 폴더 안에 merge-to-main.yml 파일을 생성해준 뒤 아래의 코드를 입력합니다.저는 매주 월요일, 수요일 UTC+9 기준으로 9시에 받도록 설정했습니다.name: Merge to Mainon: sc..

  • format_list_bulleted 개발 공부/Github
  • · 2024. 8. 7.
  • textsms

stale & cache time

Tanstack query에는 두가지 개념이 있다.stale정해진 시간(기본 0초)동안 데이터의 신선함(최신 데이터인지)을 보장하는 시간데이터는 처음에 fresh 상태였다 stale time이 지나면 stale 상태로 변한다.cache우리가 아는 그 캐시설정 되어있는 시간 만큼(기본 5분) 기존의 데이터를 메모리에 저장해놓는다.그냥 생각해봤을 때는 stale만 사용해도 될 것 같기도하고, cache만 사용해도 될 것 같은데Tanstack Query는 왜 두 개념을 모두 사용할까?동작 방식만약 stale time이 10초이고 cache time을 5분으로 설정해놓았다면..API를 불러왔을 때 불러온 fresh한 데이터는 10초 뒤 stale이 될 것이고 5분간 캐시에 남아있을 것이다.만약 캐시가 삭제되기 ..

  • format_list_bulleted 개발 공부/Tanstack Query
  • · 2024. 8. 7.
  • textsms