neda의 블로그

230612 Nodejs http모듈로 페이지 만들어보기 nodejs http 서버 열기 http 서버 만들기 const http = require("http"); const port = 3000; const server = http.createServer((req, res) => { res.writeHead(200, { "Content-Type": "text/html" }); res.end('server is open'); }); server.listen(port, () => { console.log(`Server running at port ${port}`); }); '/' 경로로 들어왔을 때 응답 보내기 const http = require("http"); const port = 3000; cons..

2306011 내일배움캠프 4주차 WIL Facts 내일배움캠프 자바스크립트 마지막 주 과제로 팀과제를 했다. 팀과제에서 TMDB에서 가져온 유튜브 영상 키를 이용해 유튜브 모달을 만들었다. Feelings 팀과제 발제 첫 날이 금요일 밤이라 초기 프로젝트 구상을 제대로 못했고, 결과적으로 프로젝트의 시작이 늦어졌던 점이 아쉽다. 현재까지 3주동안 자바스크립트를 배웠지만 모두 학습한 정도가 달랐다. 그래서 구현할 기능의 난이도보다는 원하는 것을 맡아서 동기부여 삼아 만들어 보는 것이 낫다고 생각했다. 이번에는 모두가 한 페이지, 하나의 자바스크립트 파일에서 작업해서 git 충돌이 자주 생겼다. 충돌을 해결한다고 해결했지만, 지웠던 부분이 다시 살아나기도 있던 부분이 사라지기도 하고 우여곡절이 많았다. F..

230610 stackblitz에서 nodejs 프로젝트 npm 명령어 자동 실행하기 stackblitz에서 node 프로젝트를 만들고 실행을 하기 위해서는 터미널에 명령어를 입력해야 한다. 자신의 프로젝트라면 직접 입력하면 되지만, 공유를 할 때는 자동으로 명령어를 실행되게 하면 상대방이 편하게 볼 수 있다. 공유 또는 임베드 시에 명령어 자동 실행하기 1. package.json 파일에서 scripts에 npm 명령어 만들기 { ... "scripts": { "start": "node index.js" }, ... } 2. 공유 또는 임베드하는 url의 쿼리 스트링으로 npm 명령어를 지정 -> startScript = npm명령어 stackblitz.com/fork/github/{gh_usernam..

230609 git rebase git rebase는 말 그대로 기준(base)을 다시(re) 잡는 명령어이다. 평소에는 pull을 받고 merge를 통해 합치지만, 간혹 git에서 rebase를 사용하여 해결하라는 메시지가 뜰 때가 있다. rebase는 merge 처럼 다른 브랜치의 간 병합을 위해 사용되지만, 과정은 다르다 git rebase란 git rebase 역할 실제로 일어나는 일을 설명하자면 일단 두 브랜치가 나뉘기 전인 공통 커밋으로 이동하고 나서 그 커밋부터 지금 Checkout 한 브랜치가 가리키는 커밋까지 diff를 차례로 만들어 어딘가에 임시로 저장해 놓는다. Rebase 할 브랜치(역주 - experiment)가 합칠 브랜치(역주 - master)가 가리키는 커밋을 가리키게 하고 ..

230608 youtube iframe player api 볼륨 값 localStorage에 저장하고 불러오기 youtube iframe player api는 몇 가지 이벤트를 제공하지만, 볼륨 값이나 음소거 여부가 변경 되었을 때 알려주는 이벤트리스너는 없었다. 그래서 setInterval() 함수를 통해 주기적으로 값을 가져오기로 했다. setInterval()로 볼륨 값 계속 가져오기 player가 시작되는 onReady 이벤트나 onStateChange의 콜백으로 아래와 같은 함수를 호출하여 500ms마다 볼륨 값과 뮤트 값을 가져와서 updatePlayerOptions()를 통해 localStorage에 저장한다. const youtubePlayer = { player: null, // yout..

230607 자바스크립트 타입을 고려해 sum() 함수 만들기 reduce()로 만들기 가장 간단하게 만들 수 있는 함수지만, 문자열이나 다른 값에 대한 예외 처리가 존재하지 않는다. const sum = (array) => array.reduce((acc,cur)=> acc+cur,0) sum([1,2,3,4,5]) // 15 lodash의 sum()함수 lodash에서의 sum 구현 코드는 배열의 길이와 while문을 사용하여 모두 더한다. if문을 통해 undefined를 code 정보: https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L16487 const identity = (value) => value function baseSum(array..

230606 자바스크립트 random() 대안으로 getRandomValues() Math.random() 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 생성 -MDN Math.random() // 0 crypto.getRandomValues(new Uint8Array(1))[0] / 255; 이렇게 사용하면 통계적으로 한 쪽에 치우친 값을 반환하게 된다. const getRandom = () => crypto.getRandomValues(new Uint32Array(1))[0] / (2**32); 이렇게 사용하는 것이 그나마 좋은 방법이다.

230605 타입스크립트 클래스 자바스크립트의 클래스는 프로토타입을 만들기 유용하지만, 몇 가지 지원하지 않는 사항들이 있다. 타입스크립트에서는 이러한 기능을 지원하여 클래스를 더욱 다양하게 사용할 수 있게 해준다. 추상 클래스 abstract abstract class ClassName { } 인터페이스로 부터 클래스 타입 지정 interface Parent { } class ClassName implements Parent { } 읽기 전용 속성 abstract class ClassName { public readonly readonlyName: string = 'Class'; } public static 외부 접근 가능한 정적 속성 또는 메서드 public: 외부에서 접근 가능자 (기본값) stat..

WIL Facts 내일배움캠프가 개강하고 개인 과제를 진행했다. 프로그래머스 0레벨 자바스크립트 문제를 풀었다. Feelings 저번 팀과제보다 난이도가 낮아 혼자하기 수월했다. 0레벨 문제인데도 난이도가 높은 몇 문제가 있었다. Findings 자바스크립트 문제를 풀기 위한 기초와 DOM 조작에 익숙해졌다. innerHTML = '' 구문은 가독성은 좋지만, DOM을 조작할 수 없고 이벤트 등록이 안되니 여러 가지로 불편한 점이 있다. Future 자바스크립트 문제 1레벨을 도전해봐야 겠다.

230603 TMDB 영화 관련 영상 유튜브 iframe 모달 만들기 TMDB에서 영화 정보와 해당 영화의 관련 영상을 가져오고, iframe으로 모달을 띄우기 TMDB에서 해당 영화의 비디오 목록 가져오기 유튜브에서 비디오 정보 가져오기 동영상 정보에서 썸네일 정보 찾기 IFrame Player API로 유튜브 플레이어 띄우기 1. 영화 상세 페이지의 url에서 query string으로 영화 id값 가져오기 function searchParam(key) { return new URLSearchParams(location.search).get(key); } searchParam('id') 2. TMDB에서 해당 영화의 비디오 목록 가져오기 TMDB에서 Id값으로 해당 영화의 관련 비디오 목록 가져오기 ..