Javascript
-
[Hooks] useState 간단 원리개발/React 2022. 9. 23. 18:39
클로저에 대해 이것저것 공부하다가 살펴봤습니다. 어느 블로그에 안내된 코드인데 뭔가 좀 이상하더라고요. 아주 살짝 수정해서 모의로 동작 가능하게 해봤습니다. useState()로 얻은 setState() 함수로 값을 저장하면 해당 컴포넌트가 리렌더링되잖아요. 이 때 컴포넌트 안에 있는 것들이 새로 만들어지고 useState(initialValue)도 호출되는데 이렇게 해서 얻는 state 값은 당연히 initialState가 아니거든요. 이 동작을 이해할 수 있는 간단한 코드입니다. 리렌더링을 재현하기 위해 useState를 수동으로 호출해줬어요. // useState.js let componentHooks = []; let currentHookIndex = 0; // How useState works ..
-
[TypeScript] ReturnType, const개발/Javascript 2022. 7. 13. 01:56
type Color = 'red' | 'yellow' | 'orange'; // const color: Color = 'white' // error const color: Color = 'yellow'; // ok color 변수의 타입은 Color입니다. string이 아닙니다. 모든 string 값을 넣을 수 있는 것이 아니라 'red', 'yellow', 'orange'만 넣을 수 있는 타입입니다. 리덕스에서 보통 액션 생성 함수를 사용하는데요. 다음 코드는 반환값이 어떻게 추론될까요. const TEST = 'test'; const fn = () => ({type: TEST}) string으로 되어 버립니다. 의도한 것이라면 상관 없지만 리덕스에서 액션 생성 함수를 사용할 때는 string 타입이..
-
[Koa] 프레임워크에서 static 파일 경로 설정하기개발/Javascript 2022. 7. 6. 13:55
경험해본 프레임워크가 Java 스프링, ExpressJS, KoaJs 정도인데 공통적으로 정적 파일의 루트를 가상으로 지정해줄 수 있는 기능을 제공합니다. 이 기능이 필요한 이유는 크게 두 가지 정도인 것 같습니다. 1. REST API와 파일 저장 위치가 우연히 겹칠 경우 의도하지 않은 동작 2. 파일 저장 위치가 그대로 노출되는 보안 상의 문제 다음 예제는 템플릿 엔진으로 pug를 사용하고 서버 프레임워크는 koa를 사용했습니다. main.pug html head script(src="https://cdn.tailwindcss.com") body h1.bg-gradient-to-r.bg.from-red-300.to.bg-gray-400.p-16.text-4xl.font-semibold 채팅 서비스 d..
-
[NodeJs] Buffer와 Stream개발/Javascript 2022. 6. 28. 15:34
Buffer는 바이너리 데이터를 직접 다루는 클래스이며 Stream은 이름에서 알 수 있듯 데이터를 스트리밍할 수 있는 클래스입니다. Buffer는 처리할 데이터를 그대로 메모리에 올리고 Stream은 적은 메모리만을 사용해 데이터를 스트리밍합니다. 때문에 가용 메모리 용량이 충분하다면 Buffer가 빠르겠지만 메모리 사용 효율은 좋지 않을 것이고 Stream을 사용하면 Buffer보다 처리 속도가 느릴 수 있지만 메모리를 효율적으로 사용합니다. node로 500mb 상당의 파일을 불러와서 처리한다고 해볼게요. 다음 코드는 특정 문자에 대한 블록을 확인해 카운트하는 로직이므로 내용은 신경 안 써도 될 것 같습니다. Stream 사용 const rs = fs.createReadStream('local/bi..
-
[RegExp] $1개발/Javascript 2022. 6. 26. 02:32
카멜 케이스로된 변수 이름을 스네이크 케이스로 변환시켜주는 라이브러리의 동작 방식이 궁금했습니다. node_modules에서 코드를 살펴보니 처음 보는 정규식을 발견했습니다. /([\p{Lowercase_Letter}\d)([/p{Uppercase_Letter}])/gu \p는 문자가 유니코드에 속하는지는 검사합니다. 이를 사용하기 위해서 u 플래그를 써야 하죠. 그래서 g 플래그 뒤에 u를 추가해야 합니다. 여기에서 두 가지 캡처 그룹이 있는데요. 캡처 그룹은 ()를 사용해서 구분합니다. 여러가지 토큰을 그룹화해야할 때 캡처를 사용하죠. 위의 정규 표현식을 풀어보겠습니다. 1. ([\p{Lowercase_Letter}\d) - 유니코드에 속하는 소문자 혹은 숫자가 첫 번째 캡처 그룹\ 2. ([/p{U..
-
[JavaScript]중복 제거(feat. Set의 한계)개발/Javascript 2022. 6. 21. 17:20
다음 배열 안에 있는 두 객체는 사실상 같다고 볼 수 있습니다. const array = [ { name: "kim", age: 33, }, { age: 33, name: "kim", }, ]; 프로퍼티의 순서만 다를 뿐이지 프로퍼티의 이름과 데이터가 같기 때문입니다. Set을 이용한 중복 제거가 되지 않습니다. const array = [ { name: "kim", age: 33, }, { age: 33, name: "kim", }, ]; console.log(new Set(array)); // Set(2) { { name: 'kim', age: 33 }, { age: 33, name: 'kim' } } 배열의 findIndex 함수는 판별함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다..
-
[VScode] 익스텐션으로 Prettier 설정하기개발/Javascript 2022. 5. 31. 14:33
1. 좌측의 Extension(확장) 탭에서 Prettier을 설치합니다 2. 기본 Formatter를 Prettier로 설정합니다 Ctrl + ,를 눌러서 설정창을 띄운 다음 '설정 검색'에서 formatter을 검색합니다. Default Formatter을 Prettier로 선택합니다. 3. 필요한 설정 값을 넣어줍니다 설정창의 좌측 확장 탭에서 Prettier로 들어가서 필요한 걸 체크해도 되고 settings.json에서 직접 타이핑해줘도 됩니다. Ctrl + P(이름으로 파일 검색)를 타이핑하면 검색창이 나오고 settings.json을 띄워 필요한 값을 입력합니다. settings.json에서는 키에 prettier. 접미사를 붙여야 합니다. 만약 .prettierrc 파일에서 설정한다면 안 ..
-
[JavaScript] "Illegal invocation" errors개발/Javascript 2022. 5. 31. 03:14
"Illegal invocation" 오류는 함수 호출과 관련해서 발생합니다. JavaScript에서 this는 상황에 따라 달라지는데, 호출되는 함수가 동작 과정에서 this를 참조하고 있을 때 this가 참조하는 객체가 달라지면 문제가 됩니다. 다음 예제를 살펴봅시다. const $ = document.querySelector; $("#root"); // TypeError 언뜻 보면 문제가 없을 것 같지만, 살펴봅시다. document 객체의 메소드의 this는 document 객체를 가리킵니다. document 객체의 메소드에서 다른 메소드나 객체에 접근할 때 this가 필요합니다. 만약 this가 가리키는 객체가 document가 아니게 된다면 동작을 제대로 수행할 수 없기 때문에 오류를 발생시키..