본문 바로가기

Javascript50

[JS] Nested 객체 다루기 안녕하세요 :) 사이드 프로젝트로 간단한 캘린더 어플을 만들고 있는데요. 날짜 데이터가 은근히 다루기가 까다롭네요 ㅠㅠ 날짜(+ 약속) 데이터를 어떻게 하면 잘 정리된 상태로 보관하면 좋을지 생각을 해보다가 아무래도 중첩 객체 형태로 데이터를 다루는 게 좋겠다고 생각했습니다. {"year": { "month: { "date": [] } } } 이렇게 데이터를 보관하면 탐색과 저장 속도가 빠르고 서버와의 소통에도 장기적으로 용이하다고 생각했기 때문입니다. 문제는 배열의 경우 물음표 식별자를 통해 "undefined" 처리를 하기가 쉽지만 객체에서는 꽤나 까다로운 부분이 있었습니다. 키값이 있는지 없는지 확인을 해야하기 때문에 if문이 줄줄이 늘어나는 문제가 있었습니다. 그래서 객체의 중첩된 내부객체 값을 .. 2024. 2. 29.
[JS] 일정 값 사이의 랜덤 값 생성 함수 export const randomNumBetween = (min, max) => { return Math.random() * (max - min + 1) + min } 2023. 2. 28.
[JS] Event Delegation 작동방식 안녕하세요, 개발자 Sean입니다. 오늘은 Event Delegation에 대한 좋은 글을 읽어 번역해 옮겨보려고 합니다. How JavaScript Event Delegation Works 자바스크립트 세계에서 가장 핫한 방법론 중 하나로 event delegation이 있습니다. Event delegation을 사용하면 특정 노드에 이벤트 리스너를 추가하지 않아도 되지요. 대신 부모 엘리먼트에 이벤트 리스터를 추가하면 됩니다. 그렇게 되면 해당 이벤트 리스너는 버블링 된 이벤트를 분석하여 하위 요소에서 일치하는 항목을 찾을 수 있죠. 기본 개념은 매우 간단하지만 많은 사람들이 event delegation이 작동하는 방식을 알지 못합니다. 이번 포스팅에서 event delegation이 작동하는 방식.. 2023. 2. 20.
[JS] 배열 데이터 순서가 갑자기 바뀔때는 mutation을 의심해보자 어제오늘 필자를 극한으로 괴롭히던 문제가 있었는데 오늘 동료 개발자와 열띤 논의 끝에 원인을 찾아냈다. 문제 서버로 부터 받아온 배열 데이터의 순서가 렌더링 과정에서 변경되는 문제가 발생했다. 서버로 받아온 데이터 렌더링 도중 변경되는 데이터 원인 자식 컴포넌트 중에 해당 데이터 배열에 .sort()를 사용한 코드가 있었다. 문제의 코드 {data && data ?.sort((a, b) => b.exposure - a.exposure) .map((el, i) => { return ( .sort()는 mutable 한 매서드로 원본 배열의 순서를 변경한다. 따라서 기존의 데이터 배열 원본을 변경시켰고 이에 따라 같은 배열을 사용하는 다른 컴포넌트에도 영향을 미쳤던 것이었다. 해결방법 문제의 코드를 깊은 복.. 2022. 9. 6.
[JS] 주니어 레벨의 프론트엔드 개발자가 되려면? 신입 개발자로 일을 하면서 여러 가지 상황에 부딪힐 때마다 드는 생각은 '이게 최선인 걸까?' 하는 고민이다. 그만큼 아직은 배워야 할게 많다는 뜻일까. 성장에 대한 고민을 하면서 여러 블로그 글을 읽다가 재밌는 글이 있어 번역해 옮겨본다. 2022년에는 주니어 프론트엔드 개발자(리엑트)라고 불릴 수 있을까? 안녕하세요. 많은 사람들이 소프트웨어 엔지니어를 희망하고 발리에서 재택근무와 고소득의 라이프 스타일을 바라고 있습니다. 그렇지 않은 사람이 있을까요? 하지만 몸 값이 높은 주니어 프론트엔드 개발자가 되는 것은 그렇게 쉬운 일은 아닙니다. 해가 갈수록 채용 담당자는 주니어 레벨의 개발자에게 더 많은 요구와 엄격한 잣대를 요구하고 있습니다. 바로 지금 여기서 당신이 주니어 레벨의 FE로 불릴 수 있는지.. 2022. 8. 26.
[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.
[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.

티스토리툴바