🖥 dev-ruby

이번에 WebRTC 관련 hook을 만들었는데, 공부하면서 구현하기까지 시간이 꽤 걸렸던 것 같다. 그래서 내가 만든 훅을 npm package에 올려서 다른 분들이 도움을 받을 수 있으면 좋지 않을까! 라는 생각에 처음으로! 올려봤다. https://www.npmjs.com/package/@ruby-s/use-rtc @ruby-s/use-rtc React hook to connect to WebRTC. Latest version: 1.1.8, last published: 19 hours ago. Start using @ruby-s/use-rtc in your project by running `npm i @ruby-s/use-rtc`. There are no other projects in the np..

socket을 사용할 때마다 socket 객체를 전역에 선언해서 사용해야 할 지 컴포넌트 내에 선언해서 지역적으로 사용해야 할 지 항상 고민이였다.. 전역으로 사용하면 리액트에 앱에 접속 시, 바로 소켓에 커넥션되기 때문에 너무 불편했다 그렇다고 지역적으로 사용하려니까 커넥션이 렌더링될 때마다 생성되길래 렌더링이 자주 일어나는 서비스일 경우 부하가 심할 것이고, 실제로 WebRTC 화상 회의 구현을 하면서 엄청난 렉과 마주했다.. 아래는 내가 처음에 적용했던 소켓 코드다. function App() { const socket = io(env.SERVER_PATH + `namespace`); return ( // 어쩌고 ); } export default App; App 컴포넌트가 렌더링될 때마다 소켓 객..

부스트캠프 웹모바일 멤버십 그룹 프로젝트에서 WebRTC를 다루게 됐다. 본격적인 작업에 들어가기 앞서 WebRTC에 대해 무지한 상태였기에 미리 학습을 해보았다 처음 학습할 때는 진짜 이게 뭐지 싶었다.. 그래서 이해 못한 채 일단 개념이라도 마구 적어놨다 MDN 문서를 하나씩 살펴보고, 블로그 자료를 엄청 찾아 돌아 댕기다보니 어느정도 정리가 됐다 하단에 참고한 문서들 적어놨어요 🤗 WebRTC(Web Real Time Communication)란?? 브라우저와 모바일 애플리케이션에서 별도의 소프트웨어 없이 음성, 영상 미디어, 텍스, 파일과 같은 데이터들을 실시간 통신(RTC)으로 주고 받을 수 있게 해주는 기술이다. Peer To Peer 방식으로 전송하며, 시그널링 서버 하나만 있으면 된다. 시..

10월 20일 목요일에 네이버 1784로 부스트 컨퍼런스를 다녀왔다 내가 네이버 신사옥을 가보다니 .. 이런 경험을 또 언제 해볼까 너무 설렜다 ㅎㅎ 사실 후기 이런거 진짜 못쓴다ㅠ 글이라곤 쓸 줄 모른다.. 한정판 굿즈를 준다는 소식에 한번 아무말이나 끄적여보려고 한다 :) 점심시간에 같은 청주 사시는 경연님과 "그라도" 라는 이태리 식당에 방문했다 마스터 조은님이 추천해주신 맛집이라 궁금해서 가봤는데, 저 매콤 살라미 파스타? 가 엄청 맛있었따 뭔가 특유의 맛이 났는데 되게 비싸서 가끔 먹을 수 있을 것 같다 ㅎㅎ 언젠가 네이버로 간다면 자주 가야지 길을 헤매서 주변 분들에게 여쭤봐서 겨우겨우 찾아간 맛집이었는데, 동네 분들은 다들 아시는 맛집인 것 같더라! 들어가서 방문증을 겟! 했당 방문증을 목에..

부스트캠프 최종 합격까지 기나긴 여정이였다.. 하루에 백준 3~4문제씩 풀며 부스트캠프 준비에만 매달렸다 백준 문제 레벨은 골드 4-5 ~ 실버 1-2 정도로 꾸준히 풀었다 물론 프로그래머스도 풀었다 프로그래머스는 Lv.1 ~ 2문제는 이미 다 풀어둔 상태라 풀었던 문제를 다시 풀면서 준비했다 지난 기수나 지지난 기수 후기를 보면 코테 문제가 그리 어렵지 않고 CS가 요구된다는 후기가 대부분이라 CS공부도 조금(?)했다 사실 CS가 너무 광범위하기도 하고 1차 코테가 인터넷 검색이 가능했기 때문에 cs50? 강의 한 두번씩 훑어보는 정도로만 공부했다 자소서 지원 질문 (공백 포함 400자 내외) 1. 왜 개발자가 되고 싶은지 부캠에서 이루고자 하는 목표와 함께 서술 2. 소프트웨어 개발을 더 잘하고 싶어..

6월 27일 - 7월 1일까지 첫째주 실리콘 밸리 인턴십을 시작했다 처음 배정 받은 팀을 확인했더니 내가 리더였다..! 하지만 첫날 팀원 2명이 탈주하게 되고.. 남은 4명이서 구현이 힘들 것 같아 라이언 멘토님께 문의를 드렸더니 팀 조정이 필요한 것 같다고 말씀하셨다 결국 팀 D와 같이 작업을 하게 되었고 우리는 총 8명으로 이루어진 대규모 팀이다 .. 나와 다른 한 분이 프론트엔드 개발을 맡았고, 백엔드 3명, AI 3명 이렇게 나눠졌다. 첫날은 주제를 정하고, 우리는 주변환경에 따른 노래 추천 서비스를 웹사이트로 제작하기로 했다 유저 시나리오 1. 유저가 사진을 업로드한다. 2. 선호하는 장르를 하나 선택한다. 3. 사진과 장르를 조합한 어울리는 노래 추천 결과를 조회한다. 4. 원하는 음악을 선택..

오늘 2022년 6월 4일 토요일. 넥스터즈 면접을 봤다 !! 30-35분 정도 진행이 됐고 그룹 면접인데 나 포함 2명이였다. 3명 정도는 될 줄 알았는데 면접자 2 면접관 3 이라 놀랐다 사실 난 대학교 올 때도 6교과로 와서 인생에 면접을 본 경험이 없다 그냥.. 없어 그냥.. 이번에 처음으로 제대로 준비해서 면접을 봤는데 잘 본건지는 모르겠다 ㅎ 말을 버벅였다ㅠ 근데 사실 예상 질문만 38개를 뽑았는데 그 중 하나? 둘? 그정도 나온듯 ㅋ.. 한번쯤 생각해볼만한 질문인데 예상 못한 질문들이 많았다.. 생각나는 질문들을 정리해보자면 1. Uiux에 관심이 많다고 하셨는데 디자이너와 의견조율이 절대 되지 않는다면 어떻게 할 것인지? ➡️ 처음에는 왜 그렇게 생각하시는 지 디자이너 분의 의견을 물어보고..

문제 https://www.acmicpc.net/problem/2502 2502번: 떡 먹는 호랑이 첫줄에 첫 날에 준 떡의 개수 A를 출력하고 그 다음 둘째 줄에는 둘째 날에 준 떡의 개수 B를 출력한다. 이 문제에서 주어진 D, K에 대해서는 항상 정수 A, B (1≤ A ≤ B)가 존재한다. www.acmicpc.net 풀이 function solve() { const aDp = [1, 0]; const bDp = [0, 1]; for (let i = 2; i < d; i++) { aDp[i] = aDp[i - 1] + aDp[i - 2]; bDp[i] = bDp[i - 1] + bDp[i - 2]; } const aCoef = aDp[d - 1]; const bCoef = bDp[d - 1]; f..

잘못된 내용이 있다면 댓글로 알려주세요 ! 😄😊 디바운싱과 쓰로틀링은 디바이스에 무리를 주지 않기 위해 사용하는 프로그래밍 기법이다. 일종의 최적화라고 보면된다. 그렇다면 각각의 의미를 알아보자. 디바운싱(debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식이다. 주로, 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용된다. 쓰로틀링(throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉, delay시간동안 호출된 함수는 무시하는 방식이다. 디바운싱 예시를 들어 쉽게 설명해보겠다. 식당에서 주문을 할 때, 첫번째 방법 1. 고객: 콜라 주문이요! 2. 직원: 콜라 주문넣기 ..

문제 https://www.acmicpc.net/problem/11497 11497번: 통나무 건너뛰기 남규는 통나무를 세워 놓고 건너뛰기를 좋아한다. 그래서 N개의 통나무를 원형으로 세워 놓고 뛰어놀려고 한다. 남규는 원형으로 인접한 옆 통나무로 건너뛰는데, 이때 각 인접한 통나무의 높이 www.acmicpc.net 풀이 function solve(n, tree) { tree.sort((a, b) => a - b); let maxLen = 0; for (let i = 2; i < n; i++) { maxLen = Math.max(maxLen, Math.abs(tree[i] - tree[i - 2])); } return maxLen; } const filePath = process.platform ===..

문제 https://www.acmicpc.net/problem/1946 1946번: 신입 사원 첫째 줄에는 테스트 케이스의 개수 T(1 ≤ T ≤ 20)가 주어진다. 각 테스트 케이스의 첫째 줄에 지원자의 숫자 N(1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개 줄에는 각각의 지원자의 서류심사 성 www.acmicpc.net 풀이 function solve(n, ranking) { ranking.sort((a, b) => a[0] - b[0]); let answer = 1; let minRank = ranking[0][1]; for (let i = 1; i < n; i++) { const rank = ranking[i][1]; if (rank < minRank) { minRank = rank..

문제 https://www.acmicpc.net/problem/1541 1541번: 잃어버린 괄호 첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 www.acmicpc.net 풀이 function solve() { let arr = []; for (let splited of input.split("-")) { let cnt = 0; let s = splited.split("+"); for (const op of s) { cnt += +op; } arr.push(cnt); } return arr[0] + arr.slice(1).reduce((acc, curr)..

이번에 우테캠 5기 2차 과제테스트를 준비하기 위해 프로그래머스에 고양이 사진첩 애플리케이션 이라는 과제테스트를 풀어보았다. 지난번에 고양이 사진 검색하기를 했었는데 그때 바닐라JS가 처음이라 진짜 아무것도 모르고 이것저것 뒤지면서 구현했더니 머리에 남아있는게 없다.. 바닐라 JS자체가 너무 재미없어서 꾸역꾸역 해서 그런것도 있는 것 같다 ㅎ 뭐 쨋든 서론은 이만하고, 이번 포스팅에서는 과제테스트를 딱 열었을 때 아무것도 없는 생 파일에 어떻게 구조를 구성해나가면 될 지 알아볼 것이다. 먼저 처음엔 index.html이 있을 것이다. 자바스크립트를 구현하면서 해당 파일안에 요소가 계속 추가 될 것이다. html파일에서 할 일은 js파일을 연결해주면 된다. 고양이 사진첩 script태그는 안에 넣어도, 안..

어느 Element에나 data-로 시작하는 속성을 사용할 수 있다. 화면에는 렌더링 되지 않게 정보를 엘리먼트에 담아놓을 수 있다. 사용법 ... Javascript에서 접근하기 자바스크립트에서 dataset객체를 통해서 data속성을 가져올 수 있다. 이때 접두사인 data-가 제거되고, 모든 대문자는 소문자로 변환된다. 그리고 data-다음에 오는 속성명은 -(dash)를 제거하고 camelCase로 변환된다. 예를 들면, data-node-id -> nodeId 로 변환. 따라서, 아래처럼 사용할 수 있다. const { nodeId } = e.target.dataset; e.target.dataset.nodeId; e.target.dataset['nodeId']; in 연산자로 해당 속성이 존재..

프로그래머스 고양이 사진첩 과제를 구현하던 중 위와 같은 에러를 만났다. 먼저 html에 아래와 같이 스크립트를 연결해줬다. export, import를 사용 할 것이기 때문에 type="module"이 필요하다. index.js import App from "./App"; new App(document.querySelector(".App")); import해줄 것이기 때문에 다른 js파일들은 html에 연결해주지 않아도 된다. index.js에서 App을 import 후 querySelector로 앱을 전달해줬는데..! 아래와 같은 에러가 뜬 것이다. App이라는 파일을 찾을 수 없나보다. net::ERR_ABORTED 404 (Not Found) 난 스크립트 태그의 순서에 문제가 있나 했더니.. 파일..