ALL

[알고리즘 JS] Sliding window - 중복이 없는 가장 긴 문자열의 길이 찾기

주어진 문자열에서 중복이 없는 가장 긴 길이를 구하는 문제이다. 처음에는 부분 문자열을 매번 구하고 해당 부분 문자열에 현재 문자열이 존재하는지를 찾는 방법이 떠올랐다. 이 경우 시간 복잡도가 O(n^2) 이므로 상당히 비효율적이다. 이 때 슬라이딩 윈도우 기법을 사용하면 문자열 길이만큼 반복하여 O(n) 의 선형 시간 복잡도로 문제를 해결할 수 있다. [findLongestSubstring] Write a function called findLongestSubstring, which accepts a string and returns the length of the longest substring with all distinct characters. ex) findLongestSubstring(''),..

[Project] 🪙데일리 옥션 최종 회고🪙

Links 원격 저장소 : https://github.com/dailyAuction/project_daily_auction 배포 링크 : http://dailyauction.site/ 팀 노션 : https://www.notion.so/Daily-Auction-d180ab58cea74a9f9ad2592ba7a91db9 요구사항 정의서 : https://docs.google.com/spreadsheets/d/1eA0DrcsMQVfrVcueWP3xH4EueExcl0PKA2HXubzB63w/edit?usp=sharing API 문서 : https://docs.google.com/spreadsheets/d/1eA0DrcsMQVfrVcueWP3xH4EueExcl0PKA2HXubzB63w/edit?usp=shari..

SAP UI5 에 대해서 알아보자

SAP UI5로 서비스를 만드는 과제를 받게 되었다. 프레임워크가 좀 생소하기 때문에 이 과제를 위해 공부하는 과정을 기록해보려고 한다. 글을 작성하는 동안 참고한 자료는 하단 참고자료 섹션을 통해 확인할 수 있다. SAP UI5란 무엇인가? HTML, CSS, JS 베이스로 화면(UI)를 구축할 수 있는 일종의 Frame work 이다. 주로 Enterprise 용 서비스를 만들 때 사용되고, 호환성 / 유지보수성 / 국제화 / 견고성 / 보안 / 접근성 / 대용량 데이터 처리 / 효율적인 ui 개발 및 여러 UI 위젯을 포함한다고 한다. 이 프레임워크를 통해 만들어진 서비스를 통틀어서 Fiori 라고 부른다. (이 글에 따르면 Fiori란 SAP 기반 프로덕트의 디자인 시스템을 의미한다고 함. UI ..

242. Valid Anagram

https://leetcode.com/problems/valid-anagram/description/ var isAnagram = function(s, t) { if(s.length !== t.length) return false; const sMap = {}; const tMap = {}; [...s].forEach(key => sMap[key] = (sMap[key] || 0) + 1 ); [...t].forEach(key => tMap[key] = (tMap[key] || 0) + 1 ); for(let sKey of Object.keys(sMap)) { if(!tMap[sKey]) { return false; } if(tMap[sKey] !== sMap[sKey]) { return false; }..

# 작업 일지 21 / code splitting with named export components

성능 최적화를 위해 코드 스플리팅을 적용하려고 한다. React 에서는 Suspense 와 Lazy import를 지원하기 때문에, 별도 모듈로 분리했던 Router 에 적용해보자. https://reactjs.org/docs/code-splitting.html#named-exports 이 링크를 보면 React.lazy의 경우 export defaul 만을 지원한다고 한다. 별도의 처리를 해주어야 하는데, 여기서는 아래와 같은 방법을 추천하고 있다. 이렇게 변경할 경우 모든 컴포넌트에 대해서 이런 처리를 해주어야 하는데.. 다른 방법은 없을까? https://github.com/facebook/react/issues/14603#issuecomment-726551598 이 글에 나온 코드를 적용하여 해결..

# 작업일지 20 / SSE 알림 기능 상태관리, 화면 렌더링!

1. 현재는 실시간 알림 데이터를 쿼리 데이터로 직접, 즉시 업데이트 하도록 하고, 이를 getQueryData로 가져오고 있다. useQuery를 사용해 가져온 데이터의 경우 이전 쿼리데이터와 현재 쿼리데이터를 비교해서 변경시에 화면에 자동으로 리렌더링이 일어난다. 하지만 위와 같이 가져온 데이터에 대해서는 적용되지 않는다. 이를 수정하기 위한 방법은 useNotification에서 가져오는 notifications 데이터를 useQuery를 사용해서 가져와야 한다. 전체 알림을 조회하는 API가 있으면, 먼저 useQuery로 해당 데이터를 가져오고, setQueryData로 쿼리데이터를 직접 업데이트 하게 된다. 위와 같이 api를 호출하고 성공시 업데이트 하도록 메서드를 사용해주었다. 그런데 이상..

# 작업일지 19 / SSE 연결하여 알림 기능 구현하기

오늘은 지난 시간 다 하지 못한 SSE로 알림 기능 구현하기- 를 진행했다. 1. 알림을 어떤 컴포넌트가 마운트 되었을때 연결하지 말고, 전체 앱에서 전역으로 관리할 수 있도록 호출 위치를 변경해주었다. 그렇게 해야 어떤 페이지에서든 접근이 가능하고, 중복 연결을 방지할 수 있음! 최초로 페이지가 마운트 될 때 SSE라는 컴포넌트가 마운트 되도록 하면서 로그인이 되어있는 경우 SSE를 연결한다. 2. 알림 데이터를 어떻게 관리할까. 우선 알림 데이터는 전역으로 관리하려고 한다. 이유는 먼저 알림 연결 지점은 SSE라는 최상단 컴포넌트이고, 실제로 이 데이터를 사용하는 지점은 메인 헤더와 알림 페이지 두 곳이다. 우선은 fetchSSE 함수를 실행하면 아래와 같은 코드가 실행된다. EventSource 객..

# 작업일지 18 / 조건에 따른 데이터 refetch, 검색 기능 로직 수정

이틀간 SSE와 싸워 지쳤던 나는, 나머지 마무리 하지 못한 기능을 마저 완성하기로 했다. 1. queryClient.refetchQueries(key) 메서드로 실시간 데이터가 업데이트 될 때마다 refetch 되도록 했다. 상품 상세페이지에서 입찰 후 실시간 데이터가 변경이 될 때, 웹소켓으로 받아오지 않는 나머지 데이터에 대해서도 업데이트 되도록 했다. 이제 훨씬 자연스럽고 더 실시간으로 변경되는 느낌이 난다. 위와 같이 key값을 넘기면 간단하게 사용이 가능하다. option에 enabled 라는 속성에 boolean 값을 넣으면 평가에 따라 refetch 하도록 할 수 있는데, 나의 경우 response 데이터가 변경될때마다 상태를 처리하는 것보다 refetchQueries 라는 메서드를 쓰는게..

# 작업일지 17 / SSE 야! 이미 연결 되어있는데 왜 자꾸 끼어들어!

SSE를 활용한 알림 기능을 구현하고 있다. 계속 서버가 다운되는 문제가 있었는데, SSE 연결이 되어있는 상태에서 연결이 끊어지지 않고 계속 되어서 스레드 풀을 잡아먹고, 사용 가능한 스레드 풀을 다 채워서 서버가 자꾸 죽는 것이었다. 이미 SSE가 연결된 상태에서 끊어지지 않는 이유가 뭘까? 클라이언트 측에서는 아래와 같이 EventStrem을 생성한 후 특정 시점에 연결을 종료하려고 하였다. 현재는 EventStream이 메인 헤더 컴포넌트에 종속적이어서, 이 컴포넌트가 마운트 될 때 event를 연결하고, 언마운트될 때 연결을 끊고자 하였다. 그런데 이상하게 서버 로그를 확인해도 그 어디에서도 연결이 끊어진 것을 볼 수가 없고, 컴포넌트가 새롭게 마운트 될 때마다 연결만 가중되는 현상이 있었다. ..

# 작업일지 16 / SSE를 연결해보자! Event source polyfill 라이브러리 사용해보기. 연결은 왜 끊어지지 않는가.

알림 데이터 수신을 위해 아래와 같이 SSE 연결 코드를 작성했다. 로그인시에 그전 알림이 한꺼번에 수신되는건 안되어서, 이벤트를 발생시켜 보았다. 일단 알림을 수신할 대상에게 제대로 알림이 오는 것을 확인! EventSourcePolyfill 을 사용했더니 45000밀리세컨드마다 리커넥팅을 시도한다. 서버가 계속 다운되는 이유는 SSE로 확인되었다. SSE 연결 전 2개에 불과했던 스레드 풀이 연결 후 12개 18개 그리고 맥시멈으로 지정했던 20개를 넘어서면서 에러가 발생하는 것으로 확인되었다. 조금 찾아보니 SSE 연결이 되어있는 상태에서 제대로 연결을 종료하지 않고 새로운 연결을 시도했을 때 이런 문제가 발생할 수 있다고 하고, 45000밀리초마다 새로 연결을 시도하는게 연관이 있는 것 같아 이를..