티스토리

꾸준하게
검색하기

블로그 홈

꾸준하게

hyongti.tistory.com/m

hyongti 님의 블로그입니다.

구독자
4
방명록 방문하기
공지 티스토리 시작 모두보기

주요 글 목록

  • 2022-08-08 적절한 debounce 시간..? https://ux.stackexchange.com/questions/95336/how-long-should-the-debounce-timeout-be How long should the debounce timeout be? When using the debounce() operator for form validation how long should the debounce timeout be? I currently have mine set to 400 milliseconds but idk if that is too short. ux.stackexchange.com https://stackoverflow.com/questions/42361485/how-long-should.. 공감수 0 댓글수 0 2022. 8. 9.
  • 객체지향 프로그래밍 객체지향 프로그래밍이란? 프로그래밍을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍(imperative prograaming)의 절차지향적 관점에서 벗어나 여러개의 독립적 단위, 즉 객체(obejct)의 집합으로 프로그래밍을 표현하려는 프로그래밍 패러다임 객체지향 프로그래밍은 실세계의 실체(사물이나 개념)을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작합니다. 실체는 특징이나 성질을 나타내는 속성(attribute/property)을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있습니다. 예를 들어, 사람은 이름, 주소, 성별, 나이, 신장, 체중 등 다양한 속성을 갖고, "이름이 홍길동이고 나이는 30세인 사람"과 같이 속성을 구체적으로 표현하면 특정한 사람을 다른.. 공감수 0 댓글수 0 2022. 5. 13.
  • 잘 쪼갤 수 있을까(1) SettingPage랑 MainPage를 쪼개야 한다. 원래는 SettingPage에서 설정한 avatar, nickname, speakerDeviceId, micDeviceId를 쿼리스트링에 담아 MainPage로 이동하는 거였는데, 쿼리스트링에 담아서 보내면 링크를 복사해서 다른 사람에게 링크를 공유했을 때, 복사를 해서 접속한 사람이 공유해준 사람의 설정을 그대로 따라간다는 문제가 있다. 지금은 avatar랑 nickname은 리덕스를 통해 전역상태관리를 하게 바꿔놓은 상태고, 마이크와 스피커 장치를 선택하고 바꾸는 것도 전역으로 관리하고 싶다. 메인페이지에서도 마이크랑 스피커를 설정하는 컴포넌트가 필요해서 전역으로 관리할 필요가 있어보인다. (살짝 훑어보니 마이크 설정 변경 시, 이미 webRTC.. 공감수 0 댓글수 0 2022. 3. 16.
  • 잘 쪼갤 수 있을까(0) 몇달 전 웹 기반 음성채팅 메타버스라는 이름으로 4개월 간 진행했던 프로젝트가 있다. 공개SW 개발자대회에 참여했었는데, 향후 계획이 마켓플레이스 같은 것을 도입해서 아바타를 추가하고 사고 팔 수 있도록 그래픽모듈, webRTC 모듈, 오디오 모듈을 쪼개서 원하는 부분을 가져다 쓸 수 있도록 프로젝트를 발전시키는 거였는데, 남은 42서울 과정도 끝내고.. 취업준비도 한다고 미뤄두던 걸 이제 해보려고 한다. 거창한 건 아니고.. 일단 컴포넌트들을 보기 좋게 쪼개는 일부터 시작하려고 한다. 원본 https://github.com/hyongti/VoiceSpace/tree/64a1f7e5e98f0bd122a8c939e0a10bafa44a6f09 GitHub - hyongti/VoiceSpace: 피로감은 덜하.. 공감수 0 댓글수 0 2022. 3. 15.
  • 프로퍼티 어트리뷰트 코드 내에서 함수를 정의하고, 해당 함수를 console.dir로 조회하면 함수 포스팅에서 살펴봤던 arguments, caller와 같은 프로퍼티 외에 [[FunctionLocation]], [[Prototype]], [[Scopes]]가 있는 것을 볼 수가 있습니다. 이렇게 이중 대괄호([[...]])로 감싼 이름들을 내부 슬롯(internal slot)과 내부 메서드(internal method)라고 합니다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)입니다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트.. 공감수 0 댓글수 0 2022. 3. 4.
  • 스코프 스코프(scope, 유효 범위) 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 이를 스코프(식별자가 유효한 범위)라 합니다. var x = 'global'; function foo() { var x = 'local'; console.log(x); // 1️⃣ 'local' } foo(); console.log(x); // 2️⃣ 'global' 코드의 가장 바깥 영역과 foo 함수 내부에 같은 이름의 변수 x를 선언하고, 1️⃣과 2️⃣에서 x를 참조합니다. 이때 자바스크립트 엔진은 이름이 같은 두 변수 중 어떤 변수를 참조할 것인지를 결정해야 합니다. 이를 식별자 결정(identifier resol.. 공감수 0 댓글수 0 2022. 3. 3.
  • 함수 함수는 일련의 과정을 문(statements)으로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것 함수는 (다른 프로그래밍 언어도 마찬가지겠지만) 자바스크립트에서 가장 중요한 개념입니다. 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있습니다. 이들을 이해하고 사용하기 위해 피해갈 수 없는 핵심 개념입니다. 프로그래밍 언어의 함수도 수학의 함수와 같이 입력을 받아서 출력을 내보냅니다. 이때, 입력을 전달받는 변수를 매개변수(parameter) 입력을 인수(argument) 출력을 반환값(return value) 라고 합니다. 함수는 값이며, 여러개 존재할 수 있으므로 함수를 구별.. 공감수 0 댓글수 0 2022. 3. 2.
  • 객체 리터럴 자바스크립트는 객체(object) 기반의 프로그래밍 언어로, 자바스크립트를 구성하는 거의 모든 것이 객체입니다. 원시 타입(number, string, boolean, undefined, null, symbol)을 제외한 나머지(함수, 배열, 정규표현식 등)가 모두 객체입니다. 객체는 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조(data structure)입니다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성됩니다. (일반적인 값과 프로퍼티의 값을 구분하기 위해, 프로퍼티의 값은 value라고 하겠습니다.) var person = { name: 'Lee', age: 20 }; name: 'Lee'와 age: 20가 각각 프로퍼티이며 nam.. 공감수 0 댓글수 0 2022. 3. 1.
  • 문(statements) (ex. 선언문, 반복문..) 지금까지 반복문이나 조건문, 선언문이란 말을 사용해왔는데 문(statements)이 정확히는 무엇인지 몰랐습니다. 함수 표현식과 함수 선언문에 대해 공부하던 중 표현식과 선언문이 어떻게 다른지가 궁금해졌고, 문을 살펴보면 되겠다 싶어 정리합니다. 문에 대해 얘기하기 위해서는 값(value)과 리터럴(literal), 표현식(expression)을 먼저 짚고 넘어갸아 합니다. 간단하게 정리하자면, 값: 식(표현식)이 평가(evaluate)되어 생성된 결과를 말합니다. (10 + 20의 값은 30입니다.). 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간(의 이름)이죠. 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)을 말합니다. 코드를 작성하면서.. 공감수 0 댓글수 0 2022. 2. 28.
  • 실행 컨택스트 (0) 실행 컨택스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다. 실행 컨텍스트를 바르게 이해하면, 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐와 함꼐 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식 을 이해할 수 있습니다. 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분합니다. 각각의 소스코드는 실행 컨텍스트를 생성합니다. 전역 코드(global code): 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 x 함수 코드(function code): 함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의.. 공감수 0 댓글수 0 2022. 2. 24.
  • Tree, Graph란 min-heap은 완전이진트리(complete binary tree)의 일종이라고 했습니다. 그렇다면 트리란 무엇일까요? Tree(트리) 트리란 노드로 이루어진 자료구조로, 하나의 루트 노드(node)를 가지고 있습니다. 루트 노드는 0개 이상의 자식 노드를 가지고 있습니다. 그 자식 노드 또한 0개 이상의 자식 노드를 가지고 있고, 자식 노드 역시 0개 이상의 자식 노드를 가지고 있고... 위 그림처럼 부모와 자식의 개념, 즉 계층구조를 가지고 있습니다. 그리고 배열이나 리스트와 다르게 하나의 자료 뒤에 여러 자료가 존재할 수 있는데, 이를 비선형(nonlinear) 자료구조라고 합니다. 각 노드는 어떤 자료형으로도 표현할 수 있습니다. 트리와 관련된 용어는 다음과 같습니다. 루트 노드(root nod.. 공감수 0 댓글수 0 2022. 2. 23.
  • min-heap이란 이벤트루프에 대해 알아보던 중, setTimeout과 같은 함수들은 Timer phase의 min-heap에 타이머를 저장했다가, 이벤트루프가 Timer phase에 진입하게 되면 min-heap을 탐색하면서 시간이 경과된 타이머의 콜백을 실행한다는 것을 보게 되었습니다. min-heap이란? 완전이진트리(complete binary tree)의 일종으로, 최솟값을 빠르게 찾아내기 위한 자료구조입니다. min-heap은 부모노드의 키 값이 자식 노드의 키 값보다 작습니다. 반대로 부모노드의 값이 더 큰 max-heap도 있습니다. 힙에 무언가를 삽입할 땐, 다음의 과정을 거칩니다. 1. 맨 마지막 노드에 데이터를 추가 2. 부모 노드와 값을 비교하여, 부모가 더 크다면 부모 노드와 자식 노드의 위치를 교.. 공감수 0 댓글수 0 2022. 2. 23.
  • queue와 stack 어떤 데이터의 구체적인 구현 방식은 생략한 채, 데이터의 추상적 형태와 그 데이터를 다루는 방법만을 정해놓은 것을 가지고 ADT(Abstract Data Type) 혹은 추상 자료형이라고 합니다. queue(큐) 큐는 선입선출(FIFO, First In First Out)의 특성을 가지는 자료구조입니다. Javascript에서는 배열을 사용해서 간단하게 큐를 구현할 수 있습니다. class Queue { constructor() { this._arr = []; } enqueue(item) { this._arr.push(item); } dequeue() { return this._arr.shift(); } } const queue = new Queue(); queue.enqueue(1); queue.enq.. 공감수 0 댓글수 0 2022. 2. 23.
  • javascript는 인터프리터 언어일까? https://meetup.toast.com/posts/77 자바스크립트 엔진의 최적화 기법 (1) - JITC, Adaptive Compilation : NHN Cloud Meetup 자바스크립트 엔진의 최적화 기법 (1) - JITC, Adaptive Compilation meetup.toast.com 공감수 0 댓글수 0 2022. 2. 23.
  • 이벤트 루프란? 이 글은 2018년 2월 20일 Paul Shan이 작성한 Node.js event loop workflow & lifecycle in low level을 번역한 글입니다. 의역이 있을 수 있습니다. - 제가 번역하면서 (공부한 내용)도 각 문단의 뒤에 링크로 추가해놨습니다. - 번역 투가 마음에 안 들지만.. 잘 몰라서 더 잘 번역할 수가 없었습니다 ㅠㅠ 1년 전 setImmediate & process.nextTick의 차이점을 설명하면서 노드 이벤트 루프의 저수준 아키텍처에 대해 약간 썼습니다. 놀랍게도 그 게시물의 독자들은 나머지 부분보다 이벤트 루프 부분에 더 관심을 갖게 되었고, 나는 그 부분에 대한 질문을 많이 받았습니다. 그래서 node.js 이벤트 루프의 저수준 workflow에 대한 큰.. 공감수 0 댓글수 0 2022. 2. 23.
  • Compiler vs. Interpreter vs. Transpiler 이 포스팅에는 2021년 12월 17일, John Smith가 작성한 Compiler Vs. Interpreter: What's the Difference?가 포함되어 있습니다. What is Compiler? 컴파일러는 고급 프로그래밍 언어로 작성된 코드를 기계어 코드로 변환하는 컴퓨터 프로그램입니다. 사람이 읽을 수 있는 코드를 컴퓨터 프로세서가 이해할 수 있는 언어(1 또는 0)로 변환하는 프로그램입니다. 컴퓨터는 해당 작업을 수행하기 위해 번역된 기계어 코드를 처리합니다. 컴파일러는 작성된 프로그래밍 언어의 구문 규칙을 준수해야 합니다. 그러나 컴파일러는 프로그램일 뿐 해당 프로그램에서 발견된 오류를 수정할 수 없습니다. 따라서 실수를 하면 프로그램 구문을 변경해야 합니다. 그렇지 않으면 컴파일되.. 공감수 0 댓글수 0 2022. 2. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.