전체 글33 [React] Scroll event를 이용하여 Infinite scroll 구현하기 Infinite scroll을 구현하는 데에는 여러 방법이 있는데 아래 예시는 그 중 Scroll event를 이용하여 Hook을 만들었다. 현재 유저가 보고있는 View의 위치와 Document의 전체 길이를 비교하여 View가 Document의 가장 하단인지 확인한다. 가장 아래일 때 isFetching에 True를 세팅한다. ※ lodash의 throttle 함수를 이용하여 "Scroll" event가 과도하게 호출되는 것을 막는다. isFetching이 변경되면 이를 의존성 배열로 갖는 useEffect 함수가 실행된다. useEffect 함수 내에서는 isFetching이 True일 경우 매개변수로 전달된 Callback함수를 실행한다. Callback 함수는 Element를 추가하는 기능을 수.. 2023. 7. 2. [React] Redux Dev Tools, Development server 에서만 실행되게 설정하기 Redux Dev Tools는 디버깅에 매우 유용한 기능이지만 Redux 내 유저에게 공개되어서는 안되는 정보가 담겨있을 수 있어 배포 버전에서는 사용을 제한해야하는 경우가 있다. 이 때 아래와 같이 사용한다. // configStore.js import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: { }, devTools: process.env.NODE_ENV !== 'production' }, ); export default store; devTools: process.env.NODE_ENV !== 'production' 구문을 리듀서에 추가하여 설정할 수 있다. process.env.NODE_E.. 2023. 7. 2. [Programmers] 12985.py 예상 대진표 게임에서 승리할 경우 대진번호는 (a + 1) // 2의 값으로 변경되며 a와 b가 만나는 승리했을 경우의 대진번호가 같다. 이를 그대로 코드로 정리하면 아래와 같이 작성할 수 있다. def solution(n,a,b): answer = 0 while a != b: a = (a + 1) // 2 b = (b + 1) // 2 answer += 1 return answer 2023. 7. 2. [Programmers] 42747.py H-Index ※ 문제 오류 "나머지 논문이 h회 이하로 인용되어야 한다."라는 조건이 실제 풀이에서는 고려되지 않았다. "h회 이상 인용된 논문이 h개 이상"이라는 전제만 생각해야 풀 수 있다. def solution(citations): answer = 0 citations.sort(reverse=True) for index in range(len(citations)): if citations[index] >= index + 1: answer = index + 1 return answer 내림 차순으로 배열을 정렬하여 인용 횟수는 citations[index]로, 횟수 이하로 인용된 논문의 갯수는 정렬된 배열의 index(+1)로 구해 풀이했다. 다른 사람의 풀이 def solution(citations): cit.. 2023. 6. 30. [Programmers] 181834.py l로 만들기 처음에는 문제 그대로 풀고자 하였으나 제한 사항 1 ≤ myString ≤ 100,000 을 확인하고 반복문으로 myString을 전부 도는 것 보다 a~k까지만 도는 것이 더 효율적이라 판단하여 아래와 같이 해결. def solution(myString): for c in "abcdefghijk": myString = myString.replace(c, "l") return myString 이후 아래와 같이 myString의 char를 모두 탐색하는 방식으로 작성하여 테스트해보니 위의 방식이 더 빠름을 확인할 수 있었다. def solution(myString): return ''.join([ c if c > 'l' else 'l' for c in myString]) 주어진 myString에 따라 후자.. 2023. 6. 23. [Programmers] 120910.py 세균 증식 문제 그대로 풀이하여 해결. def solution(n, t): return n * (2 ** t) 다른 사람의 풀이에서 비트연산을 사용한 방식을 확인하여 비트연산에 대해 알아보았다. left shift 연산( 2023. 6. 22. [Projects] "라이어게임:비밀의 문" 게임 룰 구현하기 JavaScript와 React, WebSocket(SockJS, Stomp)을 사용하여 라이어게임을 Web으로 구현한 방식에 대한 간단한 설명. 이번 포스트는 제가 작성한 방식을 간단하게 설명하는 내용이며 더 좋은 다른 방식이 있을 수 있습니다. 😃 Github repository : https://github.com/HangHae-TheFinalProject/FrontEnd 라이어 게임의 룰을 살펴보면 크게 몇 단계의 스테이지로 이루어져 있다는 걸 알 수 있다. 각 유저에게 할당된 라이어여부/키워드를 공개하는 스테이지 각 유저가 키워드에 대해 발표하는 스테이지 라이어로 예상되는 유저를 투표하는 스테이지 라이어로 지목된 유저가 정답을 맞추는 스테이지 승/패를 출력하는 스테이지 이를 stageNumber.. 2023. 6. 11. [Projects] 라이어게임:비밀의 문 개요 개발기간 : 2022.11.04 ~ 2022.12.02 인원 : 총 6인 (FE 3인, BE 2인, Design 1인) 기술 : JavaScript, React, Redux, SCSS, WebSocket, WebRTC 주요기능 1. 화상채팅과 채팅 2. Web Socket을 이용한 게임 기능 3. 실시간 업적 달성 알림 기능 4. 게시글, 댓글 CRUD 및 검색 및 정렬 기능 5. 로그인, 소셜로그인 Github : https://github.com/HangHae-TheFinalProject/FrontEnd 시연 영상 작업 내용 Open vidu를 이용하여 게임 내 화상채팅 기능 구현 Class component로 작성된 Open-vidu 코드를 Function component로 변경하여 작업 게.. 2023. 6. 11. 이전 1 2 3 4 5 다음
