Front-end/Javascript
-
Web worker(웹워커)에 대해서 알아보자Front-end/Javascript 2023. 8. 14. 11:49
이번에 web-worker를 사용할 일이 생겨서 web-worker에 대해 간단히 정리를 해보려고 한다. 우리 프로젝트의 경우, CSV 파일로 바꿔서 다운로드 할 수 있도록 만드는 경우에 사용하고 있다. Web worker란? Web worker는 Javascript 기반의 기술이며 주로 웹 브라우저 환경에서 사용된다. 이는 멀티스레딩을 지원하기 위한 기술로 별도의 백그라운드에서 실행되며, 메인 스레드와 별개로 작업이 이루어진다. Javascript를 사용하는 사람들이라면 Single-thread에 대해 많이 들어봤을 것이다. V8 엔진에는 스택이 있는데, 여기서 LIFO 방식으로 하나씩 쌓이고 또 실행이 된다. 그러다보니 만약 많은 양의 데이터나 복잡한 로직을 사용하게 된다면 하나씩 처리되어야 하는 스..
-
uuid 설치 없이 unique ID 만들기 (crypto.randomUUID)Front-end/Javascript 2023. 2. 5. 21:24
UUID 나는 Javascript(or Typescript)를 기준으로 작업을 하고 있다. id를 줄 때는 항상 unique하게 사용하여야한다는 것을 알 것이다. 그러다보니 보통 uuid를 설치해서 아래와 같이 사용하곤 했다. import { v4 as uuid } from 'uuid' uuid는 MAC 주소와 현재 날짜 및 시간의 조합을 사용하여 생성되며 가능한 조합 수가 2의 128승으로 굉장히 많은 수이기 때문에 수년 동안 매초 수조 개의 ID를 생성하지 않는 한 똑같은 ID를 나타내기 거의 불가능하다고 한다. 그래서 이런 uuid를 설치해서 사용하게 되는데, 어쨋든 이런 것이 node_modules의 사이즈를 크게 만든다. 그래서 uuid를 설치하지 않고 unique ID를 사용 할 방법을 찾았는..
-
[json-server] 프론트엔드 연습용 백엔드 데이터가 필요하다면!Front-end/Javascript 2021. 10. 4. 20:23
많은 프론트엔드 공부를 하는 분들이 초반에는 html, css, javascript 위주로 공부를 하다가, 나중에는 데이터를 다루게 되는 공부를 하게 된다. 그런데 이 때 백엔드 지식이 아직 준비되어있지 않은 경우 데이터를 어디서 사용해야할지 고민하게 된다. 주로 APIs를 불러와서 사용하는 경우가 있는데, 이 외에 서버처럼 사용하는 경우 또한 연습을 할 수 있으면 좋을 것이다! 이렇게 백엔드 지식 없이 백엔드를 사용하여 프론트엔드를 연습해 볼 수 있는 것이 바로 json-server 이다. ref: https://www.npmjs.com/package/json-server 우선 CRA를 통해서 리액트를 설치해준다. 그리고 json-server와 concurrently를 설치해준다. yarn add js..
-
ES6에 추가 된 Map 객체Front-end/Javascript 2021. 9. 26. 10:54
Javascript를 이용한 함수형 프로그래밍을 공부하다가 Map 객체에 대해서 나와 과거에 잠깐 보았던 Map 객체에 대해서 가물가물하여, 정확하게 알아야겠다는 생각에 정리를 하게 되었다. MDN Map : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Ref. site : https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming 우선 Javascript의 객체(Object)는 기본적으로 key : value 형태로 내부 프로퍼티를 관리하며 추가, 삭제 할 수 있으므로 컬렉션의 한 형태로 볼 수 있다. Map..
-
자바스크립트 원시 값(Primitives values) : index[ ]로 string을 바꿀 수 없다!Front-end/Javascript 2021. 7. 21. 14:08
오늘 아침부터 함께 스터디하며 도움을 받고 있는 분과 함께 재미있는 이야기를 했다. 요즘 Javascript와 Node.js의 내부 사정에 대해서 공부를 하고 있는데, 그러다보니 이런 문제가 나온 것 같다. 아마 당연하다고 생각하시는 분들도 있겠지만, 의외로 주니어의 경우 모르는 분들 또한 많을 것 같다고 생각 되어 정리를 해둔다. 첫 번째 문제는 이것이었다. var name1 = { name: "javascript" }; var name2 = { name: "javascript" }; name1 == name2 자 이것의 답은 무엇일까? name1과 name2는 같은 것일까? 이전에 정리해 둔 포스팅인 이벤트루프 편을 읽어보시면 조금 더 빨리 감을 잡을 수 있을 것이다! 정답은 바로! false 이다...
-
Javascript Event Loop 자바스크립트 이벤트 루프Front-end/Javascript 2021. 7. 8. 11:23
비전공자로써 처음 Javascript를 공부하기 시작한 분들이 아마 다 비슷비슷할 것이다. 처음부터 var, let, const 등을 시작으로 문자열, 객체, 클래스, 함수 등을 배우게 된다. 즉, 눈 앞에 코드를 쳐보면서 시작을 하는 것이다. 처음에는 그런 것이 재미있게 느껴졌기 때문에 시작을 하는 입장에서는 좋은 방법이라고 생각은 든다. 하지만 이제는! Javascript의 맛을 조금 봤다면, 발을 조금 담궈봤다고 한다면! Javascript의 Event Loop에 대해서도 공부를 해봐야 할 것이다. " Event Loop를 모른다면 Javascript를 안다고 말할 수 없다 " 라는 말을 하는 만큼 Javascript를 사용하는 분들이라면 누구든지 이벤트 루프에 대해서 알아야 할 것이다! 우선은 전..
-
Javascript Scope (스코프) 기초Front-end/Javascript 2021. 6. 28. 11:21
Javascript를 공부할 때 흔히들 헷갈린다고 하는 것이 있는데 그것이 바로 오늘의 주제이다. 오늘은 스코프(Scope)에 대해서 정리를 해보려고 한다. 우선 Scope에 대한 정의는 강의를 하는 사람, 혹은 책 마다 조금씩 다르다. 몇 가지를 살펴보자면 아래와 같다. 1. 참조 할 수 있는 유효범위에 있으면 접근 가능한 것 2. 변수에 접근 할 수 있는 범위 3. 값이나 표현식이 보이거나 참조 할 수 있는 현재 범위 그런데, 이들을 살펴보면 공통적인 것이 있다. 바로 범위, 접근과 같은 단어들이다. 총싸움 게임을 하거나, 총 관련 혹은 군대 관련 한 것을 좋아하는 분들은 scope 라고 하면 느낌이 올것이다. 바로 저격총 위에 꽂는 망원경을 스코프라고 말한다. 스코프는 이와 비슷하다고 할 수 있다...