Language
-
[Typescript] typescript의 유용성, 기본적인 type 지정 방법Language/Typescript 2023. 1. 1. 18:20
1. Why use typescript 타입안정성이 좋아진다! 어떻게? 타입안정성이 주는 장점은 무엇인가? 코드를 실행하기 전에 런타임 에러가 날 수 있다는 것을 알 수 있다. 즉 모든 코드를 실행해보지 않고서는 그 코드가 오류가 없을 것이라는 보장이 없다. unit test 등등 여러 테스트를 거치긴하겠지만, 다른 오류도 아니고 타입에러 때문에 발생하는 오류를 잡기 위해 테스트에 리소스를 쏟는 것 보다 타입스크립트를 써서 코드 작성부터 타입에러 방지를 하는 것이 효율적일 것이다. 코드가 개발자의 의도와 다르게 작동하지 않도록 제어할 수 있다. 즉, 개발자에게 코드에 대한 제어권, control능력을 주게 된다. 작성하는 코드에 타입을 지정해준다는 것은 어떠한 의도를 가지고 코드 문서를 작성하는 세부 규..
-
Typescript 기본 세팅Language/Typescript 2022. 12. 26. 22:13
Typescript 기본 세팅 1. 시작 npm init-y 2. 필수 모듈 설치 로컬 환경에서만 사용하는 모듈은 -D 옵션을 추가하여 설치한다. @type/* : 자바스크립트 환경에서 구동되는 모듈을 TS 환경에서 사용하기 위해 내부 변수들과 함수들의 타입을 정의한 *.d.ts파일이 포함된 패키지도 함께 설치한다. { "name": "project_name", "version": "1.0.0", "description": "", "main": "server.js", "jest": { "setupFiles": [ "dotenv/config" ] }, "scripts": { "test": "DOTENV_CONFIG_PATH=.env.test jest --setupFiles=dotenv/config", "t..
-
Sync Audio with Text Using JavascriptLanguage/JavaScript 2022. 12. 26. 20:35
Logic 1. [back] 영상 관련 대본을 vtt 파일 포맷으로 저장 webVTT - 웹 비디오 텍스트 트랙 형식 (WebVTT) VTT 파일 만드는 법 - Caption Studio 2. [back] vtt파일을 JSON 형태로 바꾸어 front로 전송 vtt-to-json 패키지 활용 - vtt-json 예시) var vttToJson = require("vtt-to-json") let vtt = `00:01.684 --> 00:02.785 웅이형, 잠깐만요! wait!` vttToJson(vtt) .then((result) => { console.log(result) }); // return [{start: 1684, end: 2785, part: "웅이형, 잠깐만요!"}, {start: 168..
-
Binary / Base64 / Blob / ArrayBuffer / FileLanguage/JavaScript 2022. 12. 22. 23:20
1. Binary Binary란 이진 데이터를 의미하며 1과 0만을 사용하여 2개의 수를 나타내는 진법을 뜻하는, 컴퓨터를 다루는데 있어 가장 근본이 되는 체계라고 한다. 2. Base64 컴퓨터는 모든 데이터를 0과 1로 저장한다. 그렇다면 컴퓨터 안에 저장된 바이너리 데이터를 꺼내 쓸 수 있을까? 메모리에 저장된 바이너리 데이터를 변수에 적재해놓고, 필요하면 변수를 호출해 바이너리 데이터를 다룬다. 그렇다면 숫자, 스트링이 아닌 이미지 비디오 같은 멀티미디어 파일들은? 이때 Base64 인코딩을 활용하는데, Bas64는 0과 1로 이루어진 바이너리 데이터를 인코딩하여 텍스트 형식으로 변환하는 것을 말한다. 변수에 이미지 url(웹 url이든 로컬의 file path든)을 저장하는 건 링크라는 징검다리..
-
배열에서 최대값, 최소값 구하기Language/JavaScript 2022. 10. 29. 22:42
Q. find_longest_word 함수를 만들어 주세요. 주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있도록 함수를 완성해주세요. console.log(find_longest_word(["PHP", "Exercises", "Backend"])) // --> "Exercises" 이 문제는 풀이 접근을 잘 못했던 문제다. 1. 단어의 길이 수를 구한다. 2. 가장 긴 단어의 길이 수를 뽑는다. 3. 그 단어를 반환한다. 이 로직을 구현하기 위해 코드를 작성하고자 했으나, 가장 긴 단어의 길이를 구하는 로직이 복잡하게 느껴졌다. 배열에 있는 모든 요소의 길이를 구하고, 그 길이를 전부 개별로 비교할 수 있는 로직. 그래서, 첫 요소와 나머지 요소를 모두 비교하고 첫 요소보다 길이가 긴 요소만 필..
-
indexOf 메소드 하드코딩하기Language/JavaScript 2022. 10. 29. 16:54
Q. 문자와 문자열이 주어졌을때, 주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환하는 getFind 함수를 작성하세요. Notes: 문자열의 첫번째 문자는 인덱스 값 0 을 가집니다. 만약 문자열에 해당 문자가 여러번 나타나면, 첫번째로 나타나는 위치를 반환해야 합니다. 만약 문자가 문자열에 존재하지 않는다면, -1 을 반환해야 합니다. 중요!! indexOf 함수를 사용하지 마세요. const output = getFind('a', 'I am a hacker') console.log(output) // --> 2 이 문제를 풀 때 주어진 filter가 sentence에서 처음 나타나는 index를 반환 하는 로직을 만드는 것은 어렵지 않았다. function getFind(filter, s..
-
JavaScript 100제 오답노트 37번_반장선거Language/JavaScript 2022. 10. 24. 11:05
37. 반장 선거 Q 새 학기를 맞아 호준이네 반은 반장 선거를 하기로 했습니다. 그런데 표를 하나씩 개표하는 과정이 너무 번거롭게 느껴진 당신은 학생들이 뽑은 후보들을 입력받으면 뽑힌 학생의 이름과 받은 표 수를 출력하는 프로그램을 작성하기로 하였습니다. 입력 원범 원범 혜원 혜원 혜원 혜원 유진 유진 출력 혜원(이)가 총 4표로 반장이 되었습니다. //답안 // 1. 입력된 str을 arr로 만든다. => (split) // 2. 최다 요소를 뽑는다. // -> 배열 요소를 프로퍼티 키로 갖는 객체를 생성하고 요소의 개수를 프로퍼티의 값으로 지정한다. // => (for in 문) // 3. 최다 요소 갯수를 뽑는다. // -> 객체의 프로퍼티 값을 비교한다. // => (reduce) const n..
-
다시 봐도 헷갈리는 배열 메소드 정리_filter, map, forEachLanguage/JavaScript 2022. 10. 21. 21:50
배열 메소드를 공부하고 돌아서면 까먹는다. 화.난.다.정.말 이 메소드가 배열을 반환하는지, 평가만 하는지 혼란스럽고 결국 MDN을 찾아보게 된다. 물론 언제든지 메소드를 사용할 때 찾아보면서 코딩하면 되겠지만, 언제까지나 그럴 수는 없다. 그래서 이참에 이번 프리코스 기간동안 나를 괴롭혔던 배열 메소드를 정리해본다. 1. filter() filter 메소드는 주어진 조건에 맞는(함수의 return을 true로 만드는) 요소 전체를 담은 배열을 반환한다. 어떠한 요소도 테스트를 통과하지 못하면 빈 배열을 반환합니다. filter는 배열 내 요소를 탐색해서 원하는 요소를 뽑아낼 때 사용합니다. 함수명 그대로 필터링 하는 것이죠. let results = arr.filter(function(item, ind..
-
[CSS] Position : 레이아웃을 독립적으로 배치하는 방법Language/HTML&CSS 2022. 10. 19. 09:39
Position position은 페이지의 어떤 레이아웃을 특정 위치에 배치하기 위해 사용하는 CSS 속성이다. 핵심적으로 기억해야 할 내용은 언제 이 속성을 사용하는지이다. (출처 : https://velog.io/@yeonbot/CSS-position-absolute-fixed-%EC%B0%A8%EC%9D%B4) 1. position:fixed는 스크롤이 내려가더라도 떠있는 header modal 오른쪽 하단에 항상 떠있는 floating 버튼 2. position: absolute는 특정 엘리먼트 내에서 다른 엘리먼트와 관계 없이 움직여야 하는 경우 position 프로퍼티는 요소의 위치를 정의한다. 프로퍼티 값으로 fixed, absolute, relative, static이 있으며 보통 부모요소..
-
[HTML] box-sizing: border-boxLanguage/HTML&CSS 2022. 10. 19. 09:09
css는 산수다 css를 적용하면서 느껴왔던 것이다. Box-model에 의해서, 패딩값이나 마진값 등등 요소의 사이즈를 조절할 때, 계산하는 것이 골치 아팠기 때문이다. 그래서 웬만하면 크기 조절을 rem과 em 등 상대 단위로 하고 있다. 상대단위란 ? - 상대단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 따라서, 상대 단위로 작성된 사이즈는 그 기준 수치만 바꿔주면(일단 처음에 상대 단위 사이즈를 넣을 때 레이아웃을 반영했을 것이기 때문에) 일괄적으로 함께 바뀐다. - em, rem, %, vw, vh 등이 있다. - em과 rem은 font-size의 속성 값에 비례해서 결정되는 상대 단위이다. 둘의 차이는, em은 해당 단위가 사용되고 있는 요소의 ..