전체 글
웹 폰트 CDN와 패키지 다운로드 방식의 차이점
웹 폰트를 사용할 때, HTML link와 패키지 다운로드는 두 가지 다른 방식으로 폰트를 웹 페이지에 포함시키는 방법입니다. HTML link를 이용한 방법: 외부 폰트 호스팅 서비스 사용: 일반적으로 웹 폰트는 외부 호스팅 서비스(예: Google Fonts)를 통해 제공됩니다. 이 서비스에서는 웹 폰트 파일을 호스팅하고, 웹 페이지에서 이 폰트를 사용할 수 있도록 HTML link 태그를 제공합니다. 예시: htmlCopy code 위의 예시에서는 Google Fonts에서 Open Sans 폰트의 400과 700 두 가지 굵기를 사용하도록 지정한 것입니다. 패키지 다운로드를 이용한 방법: 폰트 파일을 직접 다운로드: 폰트 파일을 웹 페이지에 포함하기 위해 직접 해당 폰트의 파일을 다운로드하여 사용..
연속부분수열1(Two Pointers Algorithm)
투포인트 알고리즘의 전형적인 문제 ( Two Pointers Algorithm ) : 배열 의 값을 연속으로 구해서 특정 값이 나오는 경우의 수를 구하는 문제 function solution2(m, arr){ let answer=0; // lt는 sum의 값이 let mius=0; // 번위내에 있는걸 축적해서 더한 값 let sum=0; for(let plus=0; plus=m){ sum-=arr[mius++]; if(sum===m) answer++; } } console.log(answer); return answer; } 하나씩(PLUS) 배열의 값을 더해서 누적한다(SUM). 누적된 값(SUM)이 특정 값(M)와 동일하면 카운터(ANSWER) 한다. while : 여기서 누적 된 값(SUM)이 특..
공통원소구하기(Two Pointers Algorithm)
교집합이란? 집합론에서, 두 집합 A와 B의 교집합 A ∩ B는 그 두 집합이 공통으로 포함하는 원소로 이루어진 집합이다. 예를 들어, 두 집합 {★, ●, ◆}, {●, ◆, ♥}의 교집합은 {●, ◆}이다. 두 집합에 교집합을 취하면 아무 원소도 남지 않게 되는 경우도 있다. 공통원소구하기 : 두배열의 교집합구하는문제 //ME function solution(a1 , a2){ const n = a1.length; const m = a2.length; let arr = []; for (let i = 0; i < n; i++) { for (let j = 0; j < m; j++) { if(a1[i] === a2[j]) arr.push(a1[i]); } } let asewer = arr.sort((a,b)..
두 배열 합치기 ( 투 포인트 )
투포인트란? 투 포인터란? 이번 글에서는 Two pointers technique (algorithm)을 설명해보도록 하겠습니다. 일단 이름 그대로 두 가지 포인터를 사용하여 문자열이나 배열(또는 리스트)에서 원하는 값을 찾거나 반복문을 써야 할 때 쓰기 좋은 방식입니다. 두 배열 합치기 : 투포인트 기본 문제 두가지 배열를 순서대로 재배열 시키는 문제 //me function solution(a1 , a2){ let asewer = a1.concat(a2).sort((a,b)=>a -b ) return asewer }; // 강의 function solution2(arr1, arr2){ let answer=[]; let n=arr1.length; let m=arr2.length; let p1=p2=0;..
defaultProps
defaultProps 란? defaultProps : props를 따로 지정해주지 않아도 기본값으로 전달 해주는 props defaultProps 사용법 defaultProps 사용법은 간단합니다 2가지 방법을 살펴보겠습니다. MainComponent.js 생략 코드 => state 개념잡기 참고 방법 1. import React, { Component, Fragment } from 'react' export default class MainComponent extends Component { } MainComponent.defaultProps = { name:"초기값" } // or export default class MainComponent extends Component { static defa..
Typescript 병합 선언과 개별 선언
* 같은 파일에서 동일한 이름에 타입과 함수가 있으면 에러가 발생하지 않지만 import 해서 동일한 이름에 타입으로 가져와 사용한다면 에러가 발생한다. //todoList.tsx import type { Mybodyinfo, TodoData, TodoAdd } from "@components/home/type"; . . . // error ms : Individual declarations in merged declaration // 'TodoAdd' must be all exported or all local.ts(2395) export const TodoAdd = (props: TodoAdd) => { return ( {props.Icon} {props.text} ); }; * 단순하게 타입으로 네..
웹 소켓 활용한 채팅구현
웹 소캣을 활용한 채팅을 구현 할려고한다. 전반적인 작업이 처음 하는 작업이다 보니깐 실수가 많았다. stemp를 사용하는데 특정 컴퍼넌트 안에서 구독해야만 사용할수 있다는 걸 모르고 js파일를 따로 만들어서 axios로 인스턴스로 만들어서 api를 각 함수로 만들어 관리하는것 처럼 관리해서 import해서 리덕스스토어 안에 미들웨이로 컴퍼넌트에서 구독해서 사용하게 로직을 만들었는데 서버와 연결이 안되는거다 한참을 찾다가 stomp를 구독방식으로 컴퍼넌트 안에서만 선언 해야 한다는걸 알았고 다시는 초보적인 실수를 하지 않을러고 한다. 웹소캣이란? Transport protocol의 일종으로 쉽게 이야기하면 웹버전의 TCP 또는 Socket이라고 이해하면 된다. WebSocket은 서버와 클라이언트 간에 ..
Clean-up function
프로젝트를 작업 하면서 프로젝트를 계속 사용하고 있으면 속도가 느려지는 버그를 확인 했다. 처음에는 크롬이 또 말썽을 부리는구나 생각해 브라우저를 닫거나 캐쉬도 주기적으로 제거하고 안 쓰는 코드도 지웠다 하지만 속도 변화는 없었고 라이트 하우스로 속도 측정을 했지만 문제점은 발견 하지 못했다. 콘솔에 react-action에 표시된 store에 데이터를 확인해 보니깐 안쓰는 데이터가 엄청 쌓여 있던고 알고 보니깐 리플레쉬하면 리덕스가 비워지는 현상만 믿고 리덕스를 주기적으로 비우는 작업을 하지않아서 생기는 오류 였다. 버그를 발견하고 리덕스에 스토어 마다 스토어 state를 리셋하는 action를 만들어서 컴퍼넌트가 없어지면 리셋하게 useEffect에 return에 걸어서 스토어를 주기적으로 비우니깐 ..