본문 바로가기

전체 글

(60)
[JS 알고리즘] 순차 탐색과 이진 탐색 순차 탐색이란? 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 하나씩 확인하는 탐색법이다. 시간복잡도는 O(N)이다. 이진탐색이란? 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법이다. 시간 복잡도는 O(log N)이다. 각 단계마다 탐색 범위를 2로 나누며, 범위가 반으로 감소하므로 로그 복잡도를 가진다. 이진 탐색을 사용할 때 좋은 점 넓은(억 단위 이상)탐색 범위에서 최적의 해를 찾아야 하는 경우 데이터를 정렬한 뒤에 다수의 쿼리를 날려야하는 경우 const binarySearch = (arr, target, start, end) => { if (start > end) return -1; let mid = parseInt(start + end / 2); if (..
[네트워크] 웹 소켓과 소켓 통신의 차이는? 웹소켓과 소켓 통신의 차이 소켓이란? 네트워크상에서 동작하는 프로그램 간 통신의 종착점으로 1대1 동신의 경우 양측 모두 소켓이 존재해야 통신이 가능합니다. 현재, 대부분의 통신은 인터넷 프로토콜(TCP,UDP)에 기반하여 대부분의 네트워크 소켓은 인터넷 소켓입니다. 웹 소켓이란? 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜입니다. 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다. 3. 차이점 동작 계층(OSI 7계층) 소켓은 인터넷 프로토콜에 기반하므로, TCP,UDP가 속한 4계층에 위치한다. 웹 소켓은 어플리케이션 계층인..
[네트워크]HTTP와 HTTPS란? HTTP에 대해 설명해 주세요. 네트워크 장치 간에 정보를 전송하도록 설계된 애플리케이션 계층 프로토콜이며 네트워크 프로토콜 스택의 다른 계층 위에서 실행됩니다. HTTP의 일반적인 흐름 클라이언트 시스템에서 서버에 요청한 다음 서버에서 응답메시지를 보내는 작업 공개키와 대칭키에 대해 설명해주세요. 대칭키란? 암복호화키가 동일하며 해당 키를 아는 사람만이 문서를 복호화해 볼 수 있게 된다. 장점: 공개키 암호화 방식에 비해 속도가 빠르다 단점: 안전한 키교환 방식이 요구되며, 사람이 증가할수록 키관리가 어려워진다. 키 교환 중 탈취될 수 있는 문제가 있다. 사람이 증가하면 따로따로 키교환을 해야해서 관리해야할 키가 방대해진다. 대표적 알고리즘: DES, 3DES, AES, ARIA 공개키란? 대칭키의 키..
[네트워크] TCP와 UDP의 차이란? TCP와 UDP의 차이는 무엇일까요? TCP(Transmission Control Protocol)란? IP 규칙으로만 통신하기에 부족하거나 불안정하던 여러 단점들(패킷 순서가 이상하거나 패킷이 유실)을 커버해, 패킷 전송을 제어하여 신뢰성을 보증하는 프로토콜로 보면 된다. 원활한 통신을 위해 전송흐름을 제어하는 기능을 프로토콜 자체에 포함되어 있다. IP규칙은 목적지까지 도착했을 때 적용(배달지) TCP 규칙은 올바르게 도착했는지, 정확히 누구에게 전달되어야 하는지 세세하게 살펴보는 것이다.(부가 정보) 예시: 수신자 정보를 받아야하는 은행 업무나 메일 더보기 IP란? 인터넷 프로토콜로서 복잡한 인터넷 망 속에서 클라이언트와 서버 간에 통신할 수 있게 IP주소와 패킷과 같은 규칙을 통해 통신을 하게 하..
[React] useInfiniteQuery로 페이지네이션 적용하고 난 후 데이터 깜빡임 현상 페이지네이션 적용하고 난 후 Cache된 데이터가 보이는 현상처음에는 removeQueries key값 하나만 주고, 댓글을 삭제하면 Cache된 곳에서 대댓글을 다 삭제하게 로직을 재구성했었다.곰곰히 생각해보니, 상관없는 Cache된 데이터도 삭제해버리니, 정작 react-query의 이점을 제대로 못 적용하고 있다고 생각이 들었고, 다른 기록의 댓글을 클릭하니깐 약간 깜빡임처럼 기존의 댓글이 보이는 현상을 확인 할 수 있었다.    해결 방안id값을 key값으로 인자를 더 넣어주어서 해당 id만 Cache된 데이터만 삭제하게 해주었다. 그리고 invalidateQueies를 적용하여 대댓글을 다시 불러오게 설정을 해주었다.const useNewCommentDeleteMutation = ({ recor..
[JS 알고리즘] 백준 17609 문제 회문(回文) 또는 팰린드롬(palindrome)은 앞 뒤 방향으로 볼 때 같은 순서의 문자로 구성된 문자열을 말한다. 예를 들어 ‘abba’ ‘kayak’, ‘reviver’, ‘madam’은 모두 회문이다. 만일 그 자체는 회문이 아니지만 한 문자를 삭제하여 회문으로 만들 수 있는 문자열이라면 우리는 이런 문자열을 “유사회문”(pseudo palindrome)이라고 부른다. 예를 들어 ‘summuus’는 5번째나 혹은 6번째 문자 ‘u’를 제거하여 ‘summus’인 회문이 되므로 유사회문이다. 여러분은 제시된 문자열을 분석하여 그것이 그 자체로 회문인지, 또는 한 문자를 삭제하면 회문이 되는 “유사회문”인지, 아니면 회문이나 유사회문도 아닌 일반 문자열인지를 판단해야 한다. 만일 문자열 그 자체로..
[React-Query] react-query useInfiniteQuery를 이용해서 페이지네이션 개선하기 현 사항전에 팀원분이 페이지네이션 hook을 구현해 놓으셨는데, setState와 useEffect를 이용해서 구현을 해놓으셨다. 굳이 2가지의 요소를 사용하지 않아도 react-query의 useInfinteQuery를 이용해서 페이지네이션을 구현할 수 있다고 생각이 들어서, 다시 재제작을 해보았다. 구현 코드처음에는 조건문을 사용하지 않고, 아래처럼 구현을 했었는데 처음에는 0을 불러왔는데, 버튼을 클릭하니 페이지 2를 불러오는 문제점이 발생했다. lastPage.last?undefined:allPages.length + 1그래서 api 조건을 살펴보았는데, 우리쪽 백에서 page=0부터 시작하게 설정을 해놓아서, 아래처럼 조건문을 설정해놓았다! const useFeedInfiniteQuery = (..
[React] useInfiniteQuery page별로 받아오는 데이터 병합하기 현 사항지금 더 보기를 누르면 페이지를 불러오는 식으로, 페이지네이션을 구현하였는데, 같이 함께 했던 팀원이 따로 페이지네이션이라는 hook을 만들어서 setState와 useEffect를 이용하여 구현을 해 놓은 상태였습니다.하지만, react-query를 사용하고 있는 상황에서 이 페이지네이션 hook보다는 react-query의 useInfiniteQuery를 이용하여 개선을 하는게 좋다고 생각이 들어서 모든 페이지를 적용하고 있는데, 각 페이지마다 상황이 다르니깐 여러가지 문제가 생기게 되어서 정리를 하게 되었습니다. 문제 사항우선, 저의 경우에는 데이터가 오면 날짜 별로 데이터를 Grouping을 하였는데, useInfiniteQuery를 이용하다보니, 페이지가 서로 다르면 페이지 별로 날짜가 ..