분류 전체보기

벨만-포드(Bellman-Ford) 알고리즘 1. 그래프에서 최단 경로를 찾는 알고리즘 중 하나 2. 간선비용이 양수,음수에서 모두 정상 동작함.: 간선 비용은 시간,거리,요금을 나타내서 양수가 일반적임.: 그러나 간선 비용이 음수인 경우에도 정상 동작함 (다익스크라는 음수인 간선에선 동작하지X) 3. 음수 사이클: 음수 사이클이 있는 경우 거리를 무한히 줄이게되서, 최단 경로를 정의할 수 없음. (최단거리가 존재X)구현 코드function bellmanFord(graph, start, end) { const numOfNodes = graph.length; // 10 const distance = Array(numOfNodes).fill(Infinity); // [0, 8, 2, 4, 9, 10, 1..

1. interceptor를 컴포넌트로 만들기✅ 문제처음엔 api에러시 공통 에러메세지를 팝업으로 띄우기 위한 interceptor를 js파일로 만들었다.그랬더니 공통 에러 메세지는 자동으로 관리되지만, 팝업을 띄우기 위한 UI는 컴포넌트에서 별도로 구현해야했다. ✅ 해결이러한 번거로움을 해결하기 위해 interceptor도 컴포넌트로 만들어 사용했다. ✅ 결과→ 에러메세지 팝업창을 interceptor에서 한번만 관리하면 된다.→ 단순히 로직만 공통하는게 아니라 UI까지 공통화 할 수 있어 더 편하다→ 앞으로 확장성을 고려해 js가 아닌 컴포넌트로 만들어 놓는게 좋겠다고 생각됐다.  2. 인터셉터 관리하기 - eject✅ eject메서드: 여러개 인터셉터를 설정한 후, 특정 인터셉터가 더 이상 필요하지..

✅ 문자열을 sort로 정렬시 문제점sort메서드는 문자열을 유니코드 값(아스키 코드)에 따라 정렬한다.그래서 한글의 사전 순서와 다를 수 있고, 대소문자/특수문자가 있는 경우 예기치 않은 결과가 나올 수 있다.유니코드와 아스키코드 대해서  sort로 정렬시 유니코드 순서로 정렬, 대소문자 구분이 되지 않는다.const words = ["apple", "Banana", "apple-pie", "Apple", "banana", "applepie"];words.sort(); // 결과 : [ "Apple", "Banana", "apple", "apple-pie", "applepie", "banana"]  ✅ localeCompare란문자열을 특정 언어의 규칙에 따라 비교 가능.- 언어별로 올바른 ..

✅ 이진 탐색 트리란이진 탐색 개념으 트리 구조에 적용한 것 ✅ 활용- (균형잡힌 트리인 경우) 효율적인 '검색'을 위해- 데이터 '삽입', '삭제'가 빈번할 경우- 우선순위가 필요한 작업 (최소값,최대값 빠르게 탐색)-  데이터베이스 인덱싱, 정렬, 검색 엔진, 네트워크 라우팅(라우팅 테이블 관리시) 등 ✅ 시간복잡도O(log n) : 모든 노드를 탐색하지 않고, 트리의 높이만큼 탐색하게 된다. (왼쪽, 오른쪽 트리의 높이가 비슷할 경우)O(n) : 그러나 트리가 한쪽으로 치우쳐 세로로 늘어진 경우 성능 저하  ✅ 특징1. 각 노드의 왼쪽 가지의 값들은 본인보다 작다: 10을 예로들면, 10 아래의 3,8은 10보다 작다 2. 각 노드의 오른쪽 가지 값들은 본인보다 크다.: 16을 예로들면, 23,..

회사에서 순수js로 디바운스를 구현해야 하는 일이 생겼다.프로젝트 내에 lodash를 여기저기 쓰고있어서 나는 디바운스 로직을 직접 구현하지 않고 편하게 쓰고있었다. 막상 직접 로직을 구현하려하니 많이 버벅였다.라이브러리를 쓰기 전에 그 로직의 원리를 이해해야 하는데 라이브러리에 너무 기대고 있었던걸까 다시 기본을 다지도록✅ 디바운스1.개념 : 여러번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행되도록 제한함 2. 사용: 사용자가 검색어를 입력할 때, 입력이 멈추면 서버에 요청을 보낼 때: 버튼 연타시 불필요한 api호출을 막기 위해 3. 효과 : 불필요한 이벤트 핸들러의 실행을 줄일 수 있음 4. 내가 구현한 코드- 버튼 클릭시 setTimeout함수가 반환한 Id를 Clear해서  setTime..

✅ 문제피그마 규격대로 똑같이 구현을 했는데 버튼의 너비가 틀어지는 현상 발생이유는 버튼 안의 글자가 피그마와 브라우저간 다르게 나타나기 때문이다. font weight나 자간이 다르게 출력된다. ✅ 원인1. 피그마는 자체 폰트 렌더링 방식이 있기 때문에 피그마는 브라우저등 사용자 환경에 구애받지 않고, 일관된 플래폼을 보여주기 위해 자체 렌더링 방식(antialiasing)을 사용한다. 안티앨리어싱 이란?: 픽셀로 되있어 나타나는 계단 현상을 줄이고 이미지를 부드럽게 만드는 기술.👉해결법피그마와 완전 동일한 표현은 불가하다.css속성을 사용하여 글꼴을 피그마와 비슷하게 표현해줄 뿐이다. 1. macOS : font-smooth 사용Font-smooth 속성은 글꼴이 렌더링될 때 앤티앨리어싱 적용을 막..

✅ 캐시 방법1. 로컬 캐싱: 클라이언트 측에 캐시를 저장하여 이전에 요청했던 리소스를 로컬에서 빠르게 제공할 수 있습니다.이렇게 되면 동일한 리소스에 대한 요청이 다시 서버로 전송되지 않으므로 대역폭을 절약할 수 있습니다. 2. 중간 캐시: 중간 캐시 서버(Proxy Server, CDN 등)가 클라이언트와 서버 사이에 위치하여 네트워크 트래픽을 캐시하여 처리합니다.클라이언트가 요청한 리소스가 이미 중간 캐시에 존재한다면, 서버로부터 다시 요청할 필요가 없으므로 대역폭을 절약할 수 있습니다. 3. CDN(Content Delivery Network): CDN은 전 세계에 분산된 서버 네트워크를 통해 콘텐츠를 캐시하고 제공합니다.이를 통해 지역적으로 가장 가까운 서버에서 콘텐츠를 제공할 수 있으며, 이로..

✅ 동일한 setState 함수를 ”setState(value) 형태로” 여러번 호출한다면?맨 마지막 업데이트된 state로만 반영됨.value = 6 , 12 , 18… 이 아닌, 3, 6, 9가 됨.const InputPrac = () => { const [value, setValue] = useState(0); // value = 3 6 9 ... const addNum = (e) => { setValue(value + 1); setValue(value + 2); setValue(value + 3); }; return ( {value} 클릭 );};export default InputPrac;설명리액트는 setState가 호출되면 state가..

# 외부 CDN의 위험성회사에선 UI 라이브러리로 vuetify2를 사용 중이다.공식 홈페이지에서는 폰트나 Material Design 아이콘을 사용하기 위해 외부 CDN을 연결하는 방법을 제시하고 있다.📌 문제 상황오늘 회사 서비스에 Material Design 아이콘이 제대로 나오지 않고, 폰트도 깨지는 현상이 발생했다.원인은 사용하고 있는 외부 CDN 서비스(jsdelivr)에서 발생한 문제였다.확인해보니, jsdelivrd에서 ssl 인증서 만료됐는데 갱신되지 않아 발생한 이슈였다. [문제의 코드]    📌 해결 방법✅ 방법1. 해당 스크립트를 다운받아 웹서버에서 제공하는 방식 (CDN에서 제공하는 아이콘,폰트 관련 파일을 직접 다운 받아, public폴더에 소스를 넣고 웹서버에서 제공하는 방..

✅  HTTP 데이터 구조HTTP는 문자형태로 데이터 전송되고, 필요한 부분을 파싱함시작줄- 시작줄과 헤더는 줄 단위로 분리되있음- 줄바꿈 문자열은 'CRLF' 라고 씀. 그러나 그냥 개행 문자로 받아들일 수 있어야 함- 사유구절 : 숫자로 된 상태 코드를 사람이 이해할 수 있도록 설명한 짧은 문구- 버전정보: HTTP/.  ex)HTTP/1.1: 메이저,마이너는 정수고, 각각 분리된 숫자로 다뤄진다: HTTP/2.22 는 HTTP/2.3보다 크다 (22>3): 요청은 HTTP/1.0으로, 응답은 HTTP/1.1로 받을 경우 : 이는 응답 보내는 애프리케이션은 1.1까지 이해할 수 있음을 뜻하는 것이다. 헤더- 헤더는 빈줄(CRLF)로 끝남. 본문body가 없더라도! 본문- 본문body는 비어있을 수도 ..