전체 글 136

[Python] 피보나치 함수 (백준 1003번)

🤔 문제 https://www.acmicpc.net/problem/1003  🔍 문제 풀이 과정 전형적인 dp 문제입니다. dp[n]에 fibonacci(n)을 호출했을 때, 0과 1이 각각 몇 번 출력되는지 저장하도록 해보겠습니다.배열의 첫 원소는 0이 출력되는 횟수, 두 번째 원소는 1이 출력되는 횟수를 저장하는 식으로 구현하겠습니다. 먼저 손으로 dp[0]부터 값을 채워보면서 규칙을 찾아보겠습니다. dp[0]과 dp[1]은 예시에서도 나와있듯이 [1,0]과 [0,1]입니다.dp[2]는 dp[0]과 dp[1]을 호출하므로 두 값을 합한 값인 [1,1]이 되고,마찬가지로 dp[3]도 dp[1]과 dp[2]를 합한 값이 됩니다. dp[i][0] = dp[i - 1][0] + dp[i - 2][0]dp..

[Python] 색상환 (백준 2482번)

📜 문제 https://www.acmicpc.net/problem/2482 🔍 문제 풀이 과정 일단 규칙성을 찾아보기 위해 n=4부터 7, k=1부터 4까지의 값을 손으로 계산해 보았습니다.  풀면서 찾게 된 점화식은 다음과 같습니다.dp[n][k] = dp[n-2][k-1] + dp[n-1][k]예를 들어, 각 색상을 1번부터 n번까지의 번호라고 가정하고 1번과 n번이 연결되었다고 해보겠습니다.n=7, k=3 인 상황에서 가능한 경우는 다음과 같습니다.1 3 61 4 62 4 72 5 73 5 71 3 52 4 6위의 경우를 잘 살펴보면 n=5, k=2일 때 가능한 값에6과 7이 추가된 경우의 수가 있고1 3 + 61 4 + 62 4 + 72 5 + 73 5 + 7n=6, n=3일..

[Python] 타일 채우기 (백준 2133번)

🤔 문제 https://www.acmicpc.net/problem/11726  🔍 문제 풀이 과정  예전에 풀었던 2xn 타일링 문제와 비슷해서 바로 dp 문제라는 것을 떠올릴 수 있었습니다. dp 테이블은 dp[n]이 3*n 크기의 벽을 채울 수 있는 경우의 수로 가정하고 만들었습니다. 규칙을 찾기 위해서 위의 그림처럼 하나씩 경우의 수를 그려가며 풀어보았습니다. 그 결과n=홀수 인 벽은 채울 수 없다.n=2인 경우에는 3가지 경우가 가능n=4인 경우부터는 기존의 조합을 사용하지 않는 2개의 새로운 경우와, 기존의 조합을 활용한 경우의 수가 존재한다.라는 규칙을 찾았습니다. 조금 더 구체적으로 설명하면, n=4 이상일 때 가능한 경우의 수는 다음과 같습니다.기존 경우의 수로 채우지 못하는 2가지 경..

자바스크립트가 숫자를 저장하는 방법 (IEEE 754)

1. 개요   자바스크립트에서 0.1 + 0.2는 0.3이 아닙니다.  사실 알고 보면 C언어와 자바, 파이썬에서도 같은 오류가 발생합니다.왜 이런 오류가 발생하고, 어떻게 정확한 실수 연산을 할 수 있을지 알아보도록 하겠습니다. 2. 자바스크립트가 숫자를 저장하는 방법 우선 자바스크립트에서는 숫자를 어떻게 저장하는지 알아보겠습니다. 자바스크립트는 C언어의 int, float, double처럼 실수와 정수를 구분하지 않고, 모든 숫자를 number 타입으로 저장합니다.ECMAScript 사양에 따르면, number 타입은 IEEE 754 표준을 이용해 숫자를 저장합니다. IEEE 754는 부동소수점을 표현하는 가장 널리 쓰이는 표준으로, C와 C++, Java의 double 타입, Python의 floa..

WEB/💡 Javascript 2024.04.28

[Javascript] 마이크 변경과 볼륨 조절하기

마이크 볼륨 시각화하기 에 이어서, 마이크 변경과 오디오 볼륨을 조절하는 방법을 간단히 살펴봅니다. 바닐라 Javascript로 개발한 예제코드는 아래에서 확인할 수 있습니다.https://codepen.io/vchgekmq-the-flexboxer/pen/poBWNbE 1. 입력 마이크 변경하기입력 마이크를 변경하는 기능을 간단히 추가해 보겠습니다. 이전에 만든 볼륨 시각화 코드에서 이어서 개발할 예정이므로, 이전 게시글을 참고해 주시면 감사하겠습니다. Javascript로 마이크 볼륨 시각화하기기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다. 게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다. 웹 페이지sir..

WEB/💡 Javascript 2024.03.23

실시간 화이트보드 공유 지연 최소화하기

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.  실시간 화이트보드 공유 서비스를 운영하며 생긴 지연 문제의 해결 과정을 정리한 글입니다.해당 서비스를 처음 구현한 과정은 이전 개발 일지에 정리했습니다. 💭 0. 문제 상황  화이트보드에 쓴 글씨가 많아지면 참여자 페이지에서 느리게 보이는 문제가 발생했습니다. 이러한 문제점이 생기는 원인은 아래와 같이 세 가지를 추정해 봤습니다.강의자 페이지에서 화이트보드 정보를 저장하는 시간이 오래 걸린다.강의자가 보내는 화이트보드 데이터의 용량이 커서 서버를 통한 전송이 오래 걸린다.참여자 클라이언트에서 처리해야 할 데이터..

<함께 자라기 : 애자일로 가는 길> - 김창준

작년 여름에 처음 읽었던 책이다. 겨울에 프로젝트를 하면서도 종종 읽어보았고, 오늘에서야 독서 기록을 남겨본다. 애자일 방법론을 소개해온 김창준 대표가 쓴 이 책은 “자라기” / “함께” / “애자일” 총 3부로 구성되어 있다. 우리는 (거의) 평생 세수와 양치질을 꾸준하게 반복했건만 왜 세수와 양치의 달인이 안 될까요? 예컨대 10년이 지나도 여전히 양치질을 제대로 못 해서 치과에 갈까요. 가서는 의사에게 "이쪽 치아는 하나도 안 닦으시나 봐요" 같은 소리를 듣고요.53p “자라기” 에서는 1만 시간의 법칙을 이야기하면서 그냥 수련이 아닌 ‘의도적 수련(Deliberate Practice)’이 필요하다고 말한다. 예컨대, 우리는 평생 양치질을 해왔지만 양치질의 달인이 되지는 못한다. 이러한 수련이 아닌..

<나는 네이버 프런트엔드 개발자입니다> - 김지한, 하성욱, 장기효, 윤정현, 손찬욱, 김다현, 박재성, 윤영제

처음에는 프런트엔드 개발자로 취업하기 위해 갖출 점을 찾기 위해 읽기 시작했지만, 취업 이야기만큼이나 선배 개발자들의 성장 이야기도 인상적이었던 책이었다. 책은 총 8명의 네이버 프런트엔드 개발자가 말하는 이야기로 만들어졌다. 딱딱한 개발 이야기만 있는 것이 아니라 프런트엔드 초창기 개발 이야기, 다양한 일과 업무를 거쳐 프런트엔드 개발자가 되기까지의 이야기 등 가볍게 읽을 수 있는 내용도 많아 읽는 데 부담은 없었다. 개발자님들의 각 이야기는 다음과 같이 구성되어 있다. 프런트엔드 개발자가 되려면 무엇을 공부해야 하나요? (김지한)미국의 신입 개발자 한국으로 돌아오다 (하성욱)프런트엔드 개발 상담, 무엇이든 물어보세요 (장기효)오류와 실수, 신기술 도입, 성능 지표 이야기 (윤정현)꿈을 현실로, 프런트..

실시간 화이트보드 공유 구현하기

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.   실시간 화이트보드 공유 서비스를 구현하기까지의 과정을 정리한 글입니다.Fabric.js로 화이트보드를 구현하는 과정은 이전 게시글에 정리했습니다.💭 1. 강의자 canvas의 내용을 어떻게 참여자에게 전달해서 표시해야 하는가? 실시간으로 강의자의 화이트보드(canvas) 내용을 참여자들에게 전달하는 것을 목표로 프로젝트를 시작했습니다. 강의자의 화이트보드는 Fabric.js 라이브러리를 이용해서 구현을 마쳤고,음성 브로드캐스팅은 WebRTC를 사용한 미디어 서버를 통해 완성한 상황이었습니다. 프로젝트 발표까지..

Javascript로 마이크 볼륨 시각화하기

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.   웹 페이지에서 마이크를 통해 음성을 입력받고, 볼륨을 시각화 하는 과정을 정리합니다. 바닐라 Javascript로 개발한 예제코드는 아래에서 확인할 수 있습니다.https://codepen.io/vchgekmq-the-flexboxer/pen/MWLVJeO?editors=1111🎤 1. 마이크를 통해 사용자의 음성을 입력 받기navigator.mediaDevices .getUserMedia({ audio: true }) // 마이크 권한을 요청 .then((stream) => { ..