전체 유저에서 접속중인 유저만 불들어오도록 변경 서버에서 전체 유저 리스트를 받아와 현재 온라인인 유저만 불이 들어오도록 했다. 일단 useQuery를 사용한 서버의 전체 유저 데이터를 받아왔다. const { allUsers } = useAllUsers(); 그리고 실시간으로 접속중인 유저의 데이터는 socket.io를 사용해서 가져오고 allUsers, onlineList는 모두 이름 순으로 정렬시켰다. useEffect(() => { // 서버에서 온라인 리스트 배열로 받음 socket?.on('onlineList', (data) => { // 배열에서 중복요소 제거해서 새로운 배열 생성 const userArray = data.filter((ele, i) => { return data.indexO..
문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 조건 n은 1이상, 50000000000000 이하인 양의 정수입니다. 나의 풀이 function solution(n) { var answer = 0; let sqrt = Math.sqrt(n); if(sqrt % 1 !==0) { answer = -1; }else{ answer = Math.pow(sqrt+1,2); } return answer; } 마무리 숫자의 제곱근을 구해서 식에 맞게 리턴하는 문제인데, 일단 문제를 풀 때 제곱근을 구하는 방법을 몰랐다. 구글링..
문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 조건 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 나의 풀이 function solution(arr) { var answer = 0; for(let i=0; i a + b) / array.length; } 마무리 숫자 배열의 평균 값을 구하는 문제였다. 배열의 값 하나씩 for문으로 돌려 변수에 저장하고 배열의 길이로 나누어 평균 값을 구해서 풀었다. 다른 사람의 풀이를 보니 단 한줄로 reduce 를 사용 해 각 배열의 값을 모두 더해 배열의 길이로 나누었다. reduce 메소드도 익숙해지도록 노력해야겠다.
문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 조건 n은 0 이상 3000이하인 정수입니다. 나의 풀이 function solution(n) { var answer = []; for(let i=0; i a + b, 0); return sum; } 다른 풀이 function solution(num) { let sum = 0; for (let i = 1; i
유저 실시간 접속상태 socketio로 유저 접속 시 백에서 배열에 저장해놨다가 중복검사를 해서 돌려주는 코드를 작성했었다. 그 배열을 돌려주는 객체에서 토큰과 유저명을 가져와 로그인중인지 확인 하는 방법을 선택했지만, 그러려면 useQuery랑 같이 사용해야하고 그 과정이 너무 복잡했다. socket.io만 사용해서 실시간으로 접속상태를 바꾸고 싶어서 소켓을 통해 데이터를 주고 받고 접속하면 온라인 상태인 것 까지는 성공했다. 하지만 브라우저를 종료할 경우 실시간으로 접속상태가 바뀌지도 않고 로그아웃이 되지도 않았다. 하루종일 너무 과몰입해서 머리가 조금 꽉 막힌 상태여서 조금 쉬었다가 다시 시도해봤다. // 서버 const SocketIO = require('socket.io'); module.exp..
포스트 클릭 시 글번호로 찾아 해당 페이지로 이동 기능 글을 누르면 해당 글의 페이지로 이동되는 기능을 추가했다. 일단 글을 누르면 서버로 글의 번호를 보내고 const Post = ({ post, userName, postDate, postId }) => { const navigate = useNavigate(); const onPostHandler = () => { axios .get(`api/posts/${postId[0]}`, { withCredentials: true }) .then((res) => { console.log(res.data); navigate(`/posts/${res.data}`); }) .catch((err) => console.log(err)); }; return ( 글내용:..
랜딩페이지 레이아웃 설정 메인 랜딩페이지를 그냥 기본적인 구조로 만들었다. NavBar: 로고와 로그인/로그아웃/내정보 기능 Write: 바로 글 작성 할 수 있는 공간 TopPosts: 좋아요를 많이 받은 순서로 정렬된 글 RecentPosts: 최근에 등록된 순서로 정렬된 글 UsersStatus: 실시간으로 접속하고있는 유저리스트 Footer: 개발자 정보 및 기타 등 크게 이렇게 메인 컴포넌트들로만 나눠놨고 기능을 구현하면서 디테일을 잡아갈 예정이다. 글 작성 기능 추가 메인 랜딩페이지에 글 작성을 바로할 수 있는 컴포넌트를 만들어놨다. 한글로만 작성할 수 있도록 정규표현식과 여러 조건들을 추가했다. const onSubmit = useCallback( (event) => { event.preve..
토스트 라이브러리 추가 레드핫 토스트 라이브러리를 설치해서 성공/실패 시 토스트알림으로 나오게 구현했다. 예를들어 로그인 컴포넌트에서 토스트를 하면 랜딩페이지로 넘어가면서 토스트가 먹통이 되는 경우가 생겼는데, 이때 각페이지마자 Toast Provider를 추가하는게 아니라 메인 App컴포넌트 아래에만 Toast Provider를 추가하니 해결이 됐다. import App from './App'; import GlobalStyle from '@styles/global'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-..
iTerm2과 Oh My Zsh를 이용해서 터미널을 커스텀 해봤다. 사용자 이름 변경 + 이모티콘 테마 바꾸기 New line 적용하기 VisualStudio Code에 적용하기 설치 Homebrew 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" iterm2 설치 brew install iterm2 zsh 설치 brew install zsh Oh My ZSH 설치 스크립트 sh -c "$(curl -fsSL https://raw.github. com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 커스터마이징 폰트 적용 brew tap homebre..
문제 나의 풀이 const fs = require("fs"); const filePath = process.platform === 'linux' ? '/dev/stdin' : '.input.txt'; let input = fs.readFileSync(filePath).toString().trim(); console.log(`${input}??!`); 마무리 백틱(`) 기호와 ${변수} 를 사용 해서 문자열과 변수를 같이 출력하는 문제였다.
