전체 글

[백준] 1026번 - 보물 (nodejs)

1026번: 보물 첫째 줄에 N이 주어진다. 둘째 줄에는 A에 있는 N개의 수가 순서대로 주어지고, 셋째 줄에는 B에 있는 수가 순서대로 주어진다. N은 50보다 작거나 같은 자연수이고, A와 B의 각 원소는 100보다 작거 www.acmicpc.net 결과만 놓고 보자면 A는 오름차, B는 내림차로 정렬해서 곱하면 간단하게 풀리겠지만, 나는 문제에서 제시한대로 정직하게 B는 냅두고 A만 재배열하는 방법을 고안해 풀어보았다. 문제 옛날 옛적에 수학이 항상 큰 골칫거리였던 나라가 있었다. 이 나라의 국왕 김지민은 다음과 같은 문제를 내고 큰 상금을 걸었다. 길이가 N인 정수 배열 A와 B가 있다. 다음과 같이 함수 S를 정의하자. S = A[0] × B[0] + ... + A[N-1] × B[N-1] S의..

[Project] Youtube Party 만들기 (4) - socket 모듈 만들기 (Nextjs, Express로 채팅 기능 구현)

개요 저번 글에서는 Express로 만든 방 번호 생성 API와 Next의 ServerSideProps의 기능을 이용해 url의 roomId가 유효하지 않다면 리다이렉트 시키는 기능까지 구현해봤다. [Project] Youtube Party 만들기 (3) - Nextjs 채팅방 페이지로 이동하는 기능 만들기 +) getServerSideProps 리다 개요 저번 "(2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기" 편에서는 채팅방을 생성하는 서버측 코드를 작성했다. [Project] Youtube Party 만들기 (2) - Express 디렉토리 구조 설정, 채팅 room 생 bluepebble25.tistory.com 이번 게시글은 그렇게 리다이렉트되지 않고 채팅방 페이..

[Project] Youtube Party 만들기 (3) - Nextjs 채팅방 페이지로 이동하는 기능 만들기 +) getServerSideProps 리다이렉트

개요 저번 "(2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기" 편에서는 채팅방을 생성하는 서버측 코드를 작성했다. [Project] Youtube Party 만들기 (2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기 채팅인데 방 생성 API를 만드는 이유 나는 기존에 튜토리얼에서 흔히 하듯이 유저가 직접 방 이름을 입력해 socket 채팅방에 참여하는 방식이 아니라, 서버에 의해 방 이름을 받아 접속하도록 하고 bluepebble25.tistory.com 이번 시간에는 그렇게 생성한 방 생성, 조회 API를 가지고 클라이언트측에서 채팅방 페이지로 이동하는 기능을 만들 것이다. 그 과정에서 만약 유효하지 않은 roomId 페이지로 이동했다면 ge..

[Project] Youtube Party 만들기 (2) - Express 디렉토리 구조 설정, 채팅 room 생성 API 만들기

채팅인데 방 생성 API를 만드는 이유 나는 기존에 튜토리얼에서 흔히 하듯이 유저가 직접 방 이름을 입력해 socket 채팅방에 참여하는 방식이 아니라, 서버에 의해 방 이름을 받아 접속하도록 하고 싶었다. 그래서 방 POST, GET API를 만들었는데, 그것을 이용해 채팅방을 생성하는 과정은 다음과 같다. Nextjs에서 유저가 방 생성 버튼을 클릭하면 API에 방 생성 요청을 보낸다. 서버는 랜덤 문자열을 생성하고, 그 문자열을 roomId로 하는 방 객체를 만든다. 그리고 클라이언트에게 roomId를 전달한다. 클라이언트는 받아온 roomId에 해당하는 페이지로 이동한다. ex) localhost:3000/party/dflc24dfsd 처음 roomId에 해당하는 페이지로 이동해 connect될 ..

[Project] Youtube Party 만들기 (1) - 프로젝트 환경설정 | Nextjs + Typescript + Express

설치 한 repository에서 클라이언트, 서버 둘 다 관리하게 할 것이므로. youtube-party라는 폴더 아래에 client와 server 폴더를 만들고, 그 안에 각각 Nextjs와 Express를 설치해줬다. 클라이언트 Nextjs를 typescript 옵션을 줘서 설치한다. npx create-next-app --typescript 서버 Express 설치 npm install express Typescript 관련 패키지 설치, ts-node 설정 typescript ts-node (node 대신 typescript 파일을 실행하게 할 녀석) @types/express (express를 위한 type이 정의되어 있다.) 이 세가지를 dev dependency로 설치해준다. npm inst..

[Project] Youtube Party 만들기 - 프로젝트 주제, 컨셉

프로젝트 주제 넷플릭스 파티, 유튜브 파티라는 브라우저 확장 프로그램이 있다. 친구와 함께 같은 영상을 보며 채팅을 할 수 있는 프로그램인데, 재생바를 이동하는 등 영상의 싱크도 맞출 수 있다. 이걸 확장 프로그램이 아니라 사이트로 구현해보고 싶다는 생각이 들었다. 그리고 넷플릭스 / 유튜브 파티를 쓰면서 느꼈던 몇 가지 문제점을 어떻게 해결할 수 있을까 고민해보고 싶기도 했다. 기존의 유튜브 파티 확장 프로그램 분석 가장 유명한 두 가지 프로그램을 사용하고 아쉬운 점을 분석해봤다. 모두가 컨트롤 권한을 가지도록 구현된 프로그램(youtube party)을 사용해보니 무심코 이동하거나 정지를 누르는 경우 신호가 가서 불편하다. 공평하다는 장점이 있지만 역시 방장만 컨트롤 가짐 옵션은 꼭 넣어야 하는 듯 ..

[JS] 랜덤 숫자 생성법 이해하기 | Math.random()

Math.random()은 0부터 1 사이의 난수를 생성하는 메소드이다. 더 자세히 말하자면 0부터 0.99999... 사이의 수를 생성한다. 따라서 어떤 범위 사이의 랜덤 숫자를 생성하고 싶다면 여기에 적절한 값을 더하거나 곱해서 응용하면 된다. 다음은 상황별 예시이다. 1) 0~7 범위의 랜덤 난수 생성하기 Math.floor(Math.random() * 8); Math.random()으로 0부터 0.999999... 사이의 수가 생성된다. 여기에 8을 곱해서 0부터 7.999999... 사이의 수가 생성된다. Math.floor()로 소수점 이하를 절삭해서 0부터 7이하의 난수를 얻는다. 따라서 0 이상 n 이하의 수를 얻고 싶다면 Math.random()에 n보다 1 큰 수를 곱한 다음, 소수점을..

프로그래머스 Lv.0 | 저주의 숫자 3

문제 - https://school.programmers.co.kr/learn/courses/30/lessons/120871 풀이 for i는 0부터 n까지 1씩 증가하며 count를 증가시킨다. 만약 증가시킨 수가 3의 배수거나 3을 포함한다면, 그것을 벗어날 때까지 계속 1씩 증가시킨다. 그렇게 n번 숫자를 세면 최종 결과를 반환한다. function solution(n) { let count = 0; for(let i = 0; i < n; i++) { count++; while(count % 3 === 0 || count.toString().includes('3')) count++; } return count; }