javascript69 [JS] 자바스크립트에서 불변성을 이용하는 경우 The case for Immutability in JavaScript 불변성 데이터 구조의 이점과 사용법 불변성은 아무것도 변하지 않는 불변의 상태를 뜻하고 이러한 의미를 우리는 코딩에서 변하지 않는 데이터 구조의 개념으로 이용하고 있다. 어떻게 이런 게 가능하며 왜 불변성을 이용하는 것일까? 이는 아주 좋은 질문이며 이번 포스팅에서 다룰 주제이다. 이 글이 끝날 때쯤 언제 불변성을 이용하고 언제 이용하지 말아야 하는지 이해할 수 있기를 바란다. 우선, 불변성 데이터 구조란 정확히 무엇일까? 위에서 언급했듯, 이는 절대 변하지 않는 구조이다. 설사 변하는 것 처럼 느껴진대도 내부적으로 새로운 구조가 만들어진다. 자바스크립트에서 한가지 좋은 예는 스트링 데이터 타입이 있다. 스트링은 불변성을 가진다. 예.. 2022. 5. 31. [JS] 구루처럼 자바스크립트 작성하기 How To Write JavaScript Like A Guru 이 3분짜리 블로그 글이 당신의 코드를 아주 깔끔하고 일관되도록 하는데 필요한 여러 가지 간단한 트릭을 알려줄 것이다. 아래의 코드를 한 번 보자 음.. 참 깔끔하지 않은가? 몇개의 if-else 문만으로 있기 때문에 딱히 최적화가 필요해 보이진 않는다. 자 그럼 코드 작성의 새로운 레벨로 들어가 보자. 매직 숫자와 스트링을 피해라 여기서 매직이란 의미를 가지지 않는 변수 혹은 상수명으로 대체될 수 있는 값을 의미한다. 우리의 예제의 경우 아래와 같이 변경해 볼 수 있다. 이는 잠재적 오타의 위혐을 줄이고 코드를 더욱 읽기 쉽도록 해준다. 필자는 typescript를 사용하길 강력히 권장한다. 강력한 타입 체킹으로 타입 에러를 효과적으로 줄.. 2022. 5. 30. [JS] CSV 데이터 다루기 토이 프로젝트 진행 중에 csv 파일로 대량의 데이터를 한 번에 업로드할 수 있는 기능을 구현하려고 하기 위해 자바스크립트로 어떻게 csv 파일을 읽어들이고 데이터를 다룰 수 있는지 여기저기 공부하다가 좋은 글이 있어 번역해 옮겨본다. JavaScript - Parse CSV data into an array 이번 튜토리얼에서는 HTML 엘리먼트로 CSV 파일을 어떻게 전달받고 자바스크립트 배열로 어떻게 내용을 파싱 할지에 대해 알아보겠다. CSV 데이터를 배열로 변환하기 위해선, readAsText() 메소드를 가지고 있는 자바스크립트의 FileReader 클래스를 사용해야 한다. readAsText() 메서드는 CSV 파일을 읽고 결과를 스트링 텍스트로 파싱 한다. 예를 들어 아래와 같은 CSV 파일.. 2022. 5. 7. [JS] 자바스크립트로 유니크한 ID 생성하기 이번 토이 프로젝트에서는 로그인되지 않은 게스트 유저도 자유롭게 단어장을 생성하여 사용하다가, 이후 회원가입을 하면 로컬에 저장되어 있는 단어장을 데이터베이스에 업데이트하는 신선한 시도를 해보려 한다. 토큰 저장용으로만 사용하던 로컬 스토리지를 게스트 유저에 한해서만 활용한다니 재미있는 작업이 될 듯하다. 그리고 또 다른 묘미는 필자가 웹 어플리케이션을 제작하고 다른 팀원이 모바일 어플을 제작하는 하나의 데이터베이스를 공유하는 두 개의 플랫폼 어플을 개발한다는 점이다. 그래서 여러 의논을 진행중에 있는데 한 가지 의논 거리는 단어장 데이터의 ID를 어떻게 생성할 것인가? 였다. 유저가 웹과 모바일 모든곳에서 단어장을 생성할 수 있기 때문에 혹여나 로컬 스토리지에 저장되어 있는 단어장의 ID가 중복된다면,.. 2022. 4. 17. [CORS] CORS 뽀개기 CORS Cross-origin resource sharing (CORS)란 외부 도메인의 자원에 제한적으로 접근할 수 있도록 하는 브라우저 메커니즘을 뜻한다. SOP에 유연성을 더하는 역할을 한다. 하지만 만약 웹사이트의 CORS 정책이 조악하게 설계되었다면 잠재적으로 크로스 도메인 공격을 받을 가능성이 있다. CORS는 CSRF와 같은 공격을 막는 용도가 아니다. Same-Origin Policy SOP란 외부 소스 도메인 자원과 교신하는 것을 막는 정택을 말한다. SOP는 다른 유저의 개인정보를 탈취하는 등 악의적 크로스 도메인 상호작용의 위험성을 막기 위해 고안되었다. Relaxation of the SOP SOP는 CSRF와 같은 공격을 막는 데는 효과적이었지만, 다른 도메인 리소스 접근을 막아.. 2022. 3. 25. [Algorithm] 다익스트라 알고리즘 다익스트라 알고리즘은 음의 가중치가 없는 그래프의 한 정점에서 모든 정점까지의 최단거리를 구하는 알고리즘이다. 다른 최단거리 알고리즘으로는 벨만 포드와 플로이드 와샬 알고리즘이 있는데 이는 다른 포스팅에서 다루기로 하겠다. 다익스트라 알고리즘의 핵심은 1. 노드간의 거리를 나타내는 매트릭스와 방문 기록 배열을 만든다. 2. 매트릭스에 노드간 거리를 넣는다. 3. 출발 노드에서 가장 작은 비용으로 갈 수 있는 노드를 구한다. 4. 최소거리 노드로 이동하며 방문 기록을 True로 변경한다. 5. 최소거리 노드까지 이동하는 거리를 더한 참조 배열을 만들고 출발 노드와의 거리와 비교해 더 작은 값을 대입한다. 6. 과정을 반복한다. 아래 예제를 풀어보자. https://www.acmicpc.net/problem.. 2022. 3. 24. [Node.js] Node.js와 브라우저의 차이 Node.js와 브라우저의 차이점이라... 서로 확연하게 다른 개념이라 이런 걸 굳이 알아야 하나 싶은 질문이지만 놀랍게도 공식문서에서 해당 개념을 설명해 놓았다! https://nodejs.dev/learn/differences-between-nodejs-and-the-browser Differences between Node.js and the Browser How writing JavaScript application in Node.js differs from programming for the Web inside the browser nodejs.dev 시간이 없으신 분들을 위해 번역해 옮겨 본다. Differences between Node.js and the Browser 브라우저와 Node... 2022. 3. 23. [JS] String에서 Date 전환할 때 시간 변경 문제 개발직 지원 서류 지원부터 광탈이라니... 예상했던 결과지만 멘탈에 금이 가는 건 어쩔 수 없는 것인가 보다... 하며 코딩이나 하자! 하고 코딩 테스트 문제를 푸는데 자꾸 Date 객체 변환에서 문제가 발생하고 있다. 오늘날이네 허.. 문제 2016-09-15 01:00:04.002 위의 string을 date 객체로 바꾸기 위해 아래와 같이 코드를 작성했다. let [date, time] = string.split(' '); return new Date(`${date}T${time}`); 그런데 결괏값이 자꾸 아래와 같이 변형되어 나타나는 것이 아닌가. 2016-09-14T16:00:04.002Z 무엇이 문제지? 하고 몇 시간을 헤맨 결과 아래와 같이 해결했다. 해결 let [date, time] =.. 2022. 3. 22. [JS] 프로미스와 콜백 오늘은 프로미스와 콜백에 대해 알아보자. 개념은 이해하지만 막상 말로 설명을 하려니 막막한 감이 있으니 이번에야 말로 해당 개념을 완전히 정복해 보자! 아래의 블로그에서 상세히 설명되어 있어 번역해 옮겨본다. 출처: https://www.loginradius.com/blog/async/callback-vs-promises-vs-async-await/ Callback vs Promises vs Async Await Learn fundamental concepts that JavaScript relies on to handle asynchronous operations. These concept includes Callbacks, Promises and the use of Async and Await to .. 2022. 3. 21. [HTTP] What happens when you type Google? 기술의 발달로 일반인들은 인터넷 웹페이지를 별다른 수고 없이 사용하고 있다. 하지만 그 내부에서는 수많은 일들이 처리되고 있다. 오늘은 웹상에 구글 페이지를 띄우기까지 어떤 일이 내부적으로 일어나고 있는지 알아보자. 관련해서 잘 쓰여진 블로그가 있어서 번역해 옮겨본다. 원본: https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a What happens when you type a URL in the browser and press enter? If you are in any technical profession, I am sure someone a.. 2022. 3. 21. 자바스크립트 파일을 브라우저에 한번에 로딩하면 어떻게 될까? 자바스크립트 파일을 브라우저에 한 번에 로딩하면 어떻게 될까? 답은 위의 짤이 잘 설명해주는 듯 하다. 정답은 "자바스크립트를 읽어들이느라 자바스크립트 아래의 HTML 파싱을 중단하게 되어 DOM구성을 차단당한다". 이렇게 되면 두 가지 문제가 발생한다. 1. 유저입장에서는 웹사이트가 반응을 하지 않으니 에러가 난 줄 알고 이탈을 한다. 2. 만약 자바스크립트가 아직 구성되지 않은 DOM을 이용해야 하는 경우이거나 아직 파싱 되지 않은 자바스크립트 코드에 의존적이라면 에러가 발생한다. 하지만...! 이런 상황을 해결하는데 도움이 되는 async와 defer 속성이 있다! async 위처럼 async 속성을 부여하면 스크립트를 읽어들이는읽어 들이는 동안 DOM 구성을 멈추지 않는다. 그리고 스크립트를 읽어.. 2022. 3. 19. [NodeJS] NodeJs는 싱글스레드일까? nodejs는 과연 싱글 스레드일까? 구글링을 하면 다소 모호한 답변들이 많이 올라와 있다. 싱글 스레드이지만 멀티스레드와 같이 동작한다... 뭐야 이게... 내가 산 주식 가격이 오를 수도 있지만 떨어질 수도 있다는 말이랑 똑같잖아... 오늘은 왜 이런 기이한 말이 나왔는지 알아보자. nodeJS 동작 원리 nodej의 v8엔진은 자바스크립트를 기계어로 번역하는 일을 하는데, 웹에서와 마찬가지로 스택에 이벤트를 쌓고 상단의 이벤트를 우선 처리해 반환하는 방식으로 작동한다. 우리가 싱글 스레드 언어라고 부르는 이유다. 하지만 한 번에 처리하기 어려운 작업이나 비동기 처리의 경우 v8엔진은 이벤트를 잠시 큐에 옮겨놓고 해당 요청이 처리되면 이벤트 루프가 다시 스택에 옮겨놓는 방식으로 동작하는데, 웹의 경우.. 2022. 3. 14. 이전 1 2 3 4 5 6 다음
