본문 바로가기

전체 글37

검색엔진에 티스토리 favicon 적용하는 법 파비콘 설정은 아래의 경로에서 할 수 있다.블로그 관리 페이지 > 사이드 메뉴 > 관리 > 블로그     브라우저 탭에서 적용된 favicon 확인 가능  검색엔진에 반영되는 시간구글에 검색해보면 여전히 적용이 안되어 있다.  검색엔진에 적용되는 시간이 필요하기 때문에 며칠 기다리면 적용된 모습을 볼 수 있다. 2024. 3. 15.
number 와 bigint에 관하여 (feat. nestjs) BigInt는 ECMAScript2020(ES11)에 추가된 새로운 타입이다.  BigInt는  Number 타입으로 표현할 수 없는 매우 큰 정수를 다룰 수 있다.  먼저 Number에 대해 알아보자 1. Number는 32 또는 -3.25와 같은 부동소숫점 숫자를 나타낸다. 2. 자바스크립트 코드 내에서 255와 같은 숫자 리터럴은 정수가 아닌 부동소수점 값이다.255 === 255.0 // true 3. 자바스크립트의 Number 타입은 Java나 C#의 double과 같은 64비트 이중 정밀도 바이너리 형식 IEEE 754 값이다. 4. 이는 분수 값을 나타낼 수 있음을 의미하지만, 저장된 숫자의 크기와 정밀도에는 일정한 제한이 있다. 5. 소숫점 이하 17자.. 2024. 3. 14.
github에 잘못 올린 파일 삭제하는 방법 github에 올라가면 안되는 파일을 모르고 commit 후 push한 상황이다. ㅜㅜ 잘못 올린 파일명은 test.tsx이다. 실패한 방법 1. 파일을 프로젝트 폴더에서 직접 삭제한다. 프로젝트 폴더에서 우클릭 후 git bash를 열자 2. git diff 명령어로 test.tsx파일이 삭제된 것을 확인한다. $ git diff diff --git a/test.tsx b/test.tsx deleted file mode 100644 index b32c9dd..0000000 --- a/test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const Test = () => { - return test; -}; - -export defa.. 2024. 3. 13.
useFormState hook으로 Form 상태를 다루자 useFormState란? form action의 결과를 기반으로 state를 업데이트 할 수 있도록 제공하는 hook이다. useFormState의 parameter와 returns에 대해 알아보자 const [state, formAction] = useFormState(fn, initialState, permalink?); Parameter fn 1. form이 submit 되었을 때 호출되는 함수 2. 이전 state와 FormData를 argument로 받는다. async function increment(previousState: number, formData: FormData) { return previousState + 1; } initialState 초기값 permalink (optiona.. 2024. 3. 10.
자바스크립트 Set를 활용하여 중복을 제거하자! 개념 - 자료구조에서의 Set란 순서가 없으며 중복되지 않은 데이터의 집합이다. - 즉 Set는 동일한 요소가 존재할 수 없다. - 배열은 데이터를 순서있게 저장하고 index를 통해 저장된 데이터에 접근한다. - 배열에는 동일한 값을 다른 index에 여러 번 저장 가능하다. - Set는 인덱스를 통해서 접근할 수 없다. - 자바스크립트 Set는 ES6에 추가된 기능이다. - 자바스크립트의 Set은 요소를 삽입한 순서대로 반복 할 수 있다. 어디에 사용하면 좋을까? - 여러 상품 목록에서 추출한 키워드 리스트가 필요할 때, 배열 대신 Set에 저장한다면 중복을 제거할 수 있다. - 사용자 ID, 이메일 주소 등 고유해야하는 값들을 관리할 때 사용할 수 있다. Set 생성 - Set는 class이므로 n.. 2024. 3. 7.
shadcn/ui 를 활용하여 공통 컴포넌트를 쉽고 빠르게 ! UI Framework 1. UI Framework에서 제공하는 공통 UI 컴포넌트를 통해 빠르게 아름다운 UI를 구현할 수 있다. 2. 대표적으로 bootstrap, material-ui가 있다. 3. 그러나 위의 framework를 사용하다보면 custom 하기가 불편하다. 4. 당연하게도 정해진 rule 안에서 이쁘고 빠르게 구현할 수 있도록 도와주기 때문에 내 입맛에 맞도록 하려면 다른 방법을 찾는게 맞긴 하다. 5. 더 큰 문제는 컴포넌트들이 여러 기능을 지원하기 때문에 무겁고 복잡하다. 6. Button 하나를 표현하는데 수 많은 Element, CSS와 animation, javascript 이벤트가 실행된다. 7. 또한 UI Framework로 만든 결과물은 비슷하기 때문에 나만의 또는 우.. 2024. 3. 5.
nextjs 최신 버전 프로젝트 설정 (eslint, pretter) 프로젝트를 생성할 경로에서 다음 명령어 실행 npx create-next-app@latest yarn, pnpm을 사용하려면 다음 옵션 추가하여 실행 npx create-next-app@latest --use-pnpm npx create-next-app@latest --use-yarn 1. 프로젝트 이름 설정 2. typescript를 사용하면 runtime 에러를 최소화 할 수 있다. 3. typescript 문법 검사를 위해 eslint 설정 4. tailwindcss의 사용 추천 ! 5. page router 대신 app router 설정 권장 6. ./src/* 경로를 @/*로 사용할 수 있도록 설정한다. import Card from "@/components/card"; prettier 설치 p.. 2024. 3. 5.
React 19 버전 canary React의 새로운 버전인 canary가 곧 latest 버전으로 출시된다. Asset Loading, Document Metadata 부분에서 획기전인 변화가 있어서 18.3이 아닌 19버전으로 출시된다. 추가될 내용에 대해서 간단하게 살펴보자. React Compiler 1. React는 상태 변경시에 너무 많이 리렌더링 되는 경우가 있다. 2. 초기부터 이 문제를 해결하기 위해 수동으로 memoization을 사용해왔다. 3. useMemo, useCallback, memo API를 적용하여 수동으로 상태변경에 따른 리렌더링을 조정했다. 4. 그러나 이 방법들은 코드를 지저분하게 만들고 잘못 사용하기 쉽고 최신 상태로 유지하는데 추가 작업이 필요하다. 5. React 팀은 상태변경시 UI의 정확한 .. 2024. 3. 5.
elasticsearch 기초 정의 1. elasticsearch는 빠른 검색을 위해 document를 indexing(인덱싱) 과정을 거쳐서 Inverted Index(역색인)를 만든다. 2. 그리고 원본 데이터와 함께 인덱스에 저장한다. document 1. 원본 데이터를 JSON 형식으로 구조화한 것이다. 2. elasticsearch에서 단일 데이터 단위이다. {"keyword":"맛은 그대로 지방은 제로, 제로 탄산 사이다", "hit_count":"1000"} . indexing (색인) 데이터가 검색될 수 있는 구조로 변경하기 위해 원본 문서를 검색어 토큰들로 변환하여 저장하는 과정 index document들을 indexing하여 inverted index(역색인)와 함께 원본 데이터를 저장하는 논리적인 저장소 inverte.. 2024. 3. 4.

티스토리툴바