자바스크립트15 자바스크립트 옥탈 리터럴? Octal literals are not allowed 에러 원인과 해결 방법 🤔 오늘의 에러 0으로 시작하는 숫자가 포함되었을 때의 예외 처리를 해야하는데, 이를 테스트하는 코드를 작성하다 아래와 같은 에러를 만났다. Octal literals..? 처음 보는 에러에 처음 들어보는 단어였다. 일단 사전을 찾아보니 octal은 8진법이라는 뜻이라고 하니, 자바스크립트에서는 8진법에 대한 어떠한 규칙이 있나보다 추측했다. 우선은 에러 메시지가 추천해 주는 방법처럼 숫자가 아닌 문자열로 만들었는데, 이 에러가 왜 발생하는지, 옥탈 리터럴은 무엇인지, 그리고 다른 해결 방법은 없는지 궁금해 찾아보았다. 🧐 처음 작성한 코드 describe('시도 횟수 유효성 검사', () => { const validTryCounts = [1, 5, 99]; const invalidTryCounts =.. 2023. 12. 2. 사용 목적? 성격? 상수 이름에 어떤 의미를 담으면 좋을까 1. 고민고민 🤔 어떤 이름이 좋을까? 정규식을 상수화하는 과정에서 상수 이름을 어떻게 지어야 하는지 고민이 있었다. (역시나 코딩하면서 늘 변수에 대한 고민이 있다) 이 주제를 스터디원들과도 이야기해 보았는데, 한 번쯤 고민해 볼만한 주제인 것 같아 기록을 해둔다. 양의 정수를 나타내는 정규식, 그리고 공백 없이 영문, 한글, 숫자, 쉼표가 포함된 문자열을 나타내는 정규식. 이 두 개를 상수화하는 가운데, 처음에는 해당 정규식이 어디에 어떻게 사용될지의 관점으로 이름을 작성했다. 이름의 조건을 나타내기 위해 allowed_name 이런 식으로 말이다. 🤔 내가 아닌 동료 개발자가 본다면? 그런데 만약 이 코드를 동료 개발자가 처음 본다면 allowed_name에 어떤 조건이 포함되었는지 단번에 알 수 .. 2023. 12. 1. 초등학생도 이해하기 쉬운 자바스크립트 '단축평가' 본격, 자바스크립트 쉽게 설명하며 스스로 이해하기 📝 👩🏻🏫 단축 평가란 무엇일까요? 한 마디로 말하자면, 단축 평가는 두 가지 조건 중 하나만 충족되면 결과를 바로 내놓는 것이랍니다. 아직 이 개념이 잘 와닿지 않을 테니 예시를 통해 설명해 볼게요. && : 초콜릿 먹기 🍫 여러분이 초콜릿이 먹고싶어서 자바스크립트 가게에 방문했어요. 가게에는 '킷캣', '킨더', '하리보' 세 가지 상품이 보여요. 첫 번째로 하리보를 집었는데 바구니가 이렇게 말해요. 🛍️: "삐빅, false 입니다! 다시 담아주세요." let 하리보 = false; let 킨더 = true; 하리보 && 킨더 // false 왜일까요? 바로 하리보는 초콜릿(true)이 아닌 젤리(false)기 때문이에요. 바구니는 처음부터 fal.. 2023. 9. 24. 자바스크립트 symbol은 언제 사용하면 좋을까? 의문이 든 이유 자바스크립트 symbol은 ECMAScript6(2015)에 도입된 7번째 타입이라고 들어는 봤지만, 그다지 깊게 파본적이 없었던 것 같아서 깊게 공부하는 중이다. 생각해 보니 (몰라서 그랬을 수도 있지만) 코딩을 할 때도 적극적으로 사용할만한 상황이 없던 것 같다. 하지만 알아두면 나중에 다 쓸 데가 있을 테니 언제 사용하면 좋은지, 사용했을 때의 장점도 한번 정리해 보자. 일단, symbol이란? 책 에 따르면, symbol에 대한 설명은 아래와 같다. 심볼(symbol)은 ES6에서 도입된 7번째 데이터 타입으로, 변경 불가능한 원시 타입의 값이다. 심볼 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다.. 2023. 9. 19. 자바스크립트 앞에 붙는 단어가 궁금해 - '모던' 편 들어가며 자바스크립트를 처음 공부하는 사람들이라면 자바스크립트 앞에 붙는 수식어인 '모던'이 무엇인지 궁금할 것이다. 개발자들은 너무나도 자연스럽게 사용하는 '모던 자바스크립트' 라는 단어를 더 자세히 알아보자. 일반적인 모던 자바스크립트의 의미 모던 자바스크립트란, ECMAScript6(2015) 이후의 방법론을 구현한 자바스크립트다. 한마디로 정의하자면, 모던 자바스크립트에서의 '모던'은 현재의 개발 표준과 관행을 따르며, 최신 브라우저와 웹 개발 도구에서 지원되는 자바스크립트 버전 및 기술을 가리킨다. 이는 ECMAScript 6 (ES6) 이후의 기능과 개선된 개발 방법론을 포함한다. 필자가 이전에 작성한 를 보면 알 수 있듯이, 자바스크립트의 그간 역사에서 ES6를 빼놓고 이야기할 수 없을 정도.. 2023. 9. 15. 알아두면 재미있는 자바스크립트의 역사 자바스크립트의 역사를 왜 알아야 합니까 새로운 언어를 배울 때 바로 문법 공부에 전념하는 것보다 그 언어의 탄생 배경에 대해 이해하는 것이 중요하다고 한다. 과거를 알아야 현재가 보이고, 미래를 예측할 수 있다고 하지 않나. 자바스크립트가 어떻게 탄생했으며 어떤 문제를 해결하기 위해 만들어졌고, 이 언어를 다룰줄 알면 어떤 분야에 더 활용할 수 있는지 알 수 있기 때문이 아닐까 싶다. 문법 공부보다는 상대적으로 우선순위가 낮을 수 있지만, 알아두면 재미있는 자바스크립트의 역사에 대해 정리해 보자. 태초에 모자이크라는 게 있었단다 1993년, 집집마다 컴퓨터가 없었던 그 시절에는 컴퓨터를 잘 모르는 사람들도 쉽게 쓸 수 있는 UI 요소가 더해진 MOSAIC 웹브라우저가 시장에 나오게 된다. 이 MOSAIC.. 2023. 9. 10. 이벤트 루프(Event Loop)의 동작 원리 0. 시작하며, 이벤트 루프는 들어봤지만, 어떻게 동작하는지 잘 모를 수 있다. 이해하기 쉬운 예시 코드와 그림을 통해 원리를 샅샅이 파헤쳐보자. 1. 비동기 코드 예시 먼저, 아래의 예시 코드를 보자. console.log('잘 들어갔어?'); setTimeout(function() { console.log('똑똑'); }, 1000); console.log('들어간거 맞아?'); 중간에 있는 setTimeout은 두 번째 인자로 들어간 시간(단위: ms)만큼 기다린 후에, 첫 번째 인자로 들어간 함수를 실행시키는 메소드다. 이와 같이 특정 함수의 인자로 들어가는 함수를 '콜백 함수'라고 부른다. 2. 콜백함수 콜백 함수는 다른 함수의 인자로 전달되고, 콜백 함수를 감싸고 있는 수신함수에 의해 특정 시.. 2023. 9. 2. JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 👩🏻💻 JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 알림창 Open 💁🏻♀️ 요약하자면 , 페이지 로딩 속도를 향상시킬 수 있고, DOM 조작 및 이벤트 처리가 효율적으로 이루어질 수 있기 때문입니다. 1. 로딩 순서 웹 브라우저는 HTML 문서를 위에서 아래로 파싱하며 로딩하는데, HTML 문서 내에 있는 요소들을 만나면 해당 요소들을 순서대로 처리하게 됩니다. 따라서 HTML 문서에 포함된 JavaScript 코드도 순차적으로 처리됩니다. 만약 JavaScript 코드가 HTML보다 위에 위치한다면, HTML 파싱 중에도 JavaScript 코드를 만나게 됩니다. 이 경우 브라우저는 JavaScript 코드를 실행하려면 HTML 파싱을 중단하고 코드를 처리해야 하.. 2023. 8. 29. 컴포넌트 분리, 3가지만 기억하자. 평소 ‘컴포넌트’라는 말을 많이 쓰는데, 정확히 어떤 것인지, 왜 써야 하는지 잘 모르고 쓰는 것 같다. 일단 GPT에게 물어보니 아래와 같이 답변해 준다. 컴포넌트란 무엇인가? 컴포넌트란? 컴포넌트(Component)는 소프트웨어 개발에서 재사용 가능하고 독립적인 기능 또는 모듈을 말한다. 이러한 컴포넌트는 소프트웨어 시스템을 구성하고 빌드하는 데 사용되며, 주로 모듈화와 추상화의 원칙을 따른다. 컴포넌트의 기능 컴포넌트는 다양한 분야에서 활용되며, 소프트웨어 개발에서는 사용자 인터페이스(UI) 컴포넌트, 데이터베이스 접근 컴포넌트, 네트워킹 컴포넌트 등 다양한 종류의 컴포넌트가 있다. 이러한 컴포넌트들을 조합하여 큰 시스템을 구축하고 관리하는 것이 가능하다. 컴포넌트의 주요 특징 (1) 재사용성 컴포.. 2023. 8. 17. JavaScript의 스코프에 대해 설명해 주세요. 👩🏻💻 스코프에 대해서 설명해 주세요. 💁🏻♀️ 요약하자면 , 스코프는 변수에 접근할 수 있는 범위를 의미합니다. 자바스크립트 스코프에는 두 가지 타입이 있는데, 하나는 global(전역)과 local(지역) 입니다. 두 가지 차이 전역 스코프는 말그대로 전역에 선언되어있어 어느 곳에서든 해당 변수에 접근할 수 있다는 의미이며, 지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서는 접근할 수 없다는 의미 입니다. 함수 스코프 자바스크립트에서는 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하는데요. 이때 함수 몸체 안에서 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있으며 이를 함수 스코프라고 합니다. 바로 함수 스코프가 지역 스코프의 예시라고 할 수 있습니다. 중요한.. 2023. 3. 13. undefined와 null의 차이를 설명해 보세요. 👩🏻💻 undefined와 null의 차이를 설명해 보세요. 코딩을 하다보면 불분명한 값으로 추정되는 undefined와 null이 등장합니다. 그런데 이 둘의 의미는 각각 무엇이며, 각각 어떨 때 출력되는 것일까요? 차이점을 명확하게 설명해 주세요. 💁🏻♀️ 요약하자면 , undefined는 변수를 선언하고 값을 할당하지 않은 상태이며, null은 변수를 선언하고 빈 값을 할당한 상태 입니다. JavaScript에서 undefined와 null 둘 모두 개별적으로 아무 것도 나타내지 않는다는 공통점이 있으나, undefined는 암시적이고, null은 명시적이라는 것이 가장 큰 차이점입니다. undefined는 아무것도 모르는 경우를 암시적으로 나타내고, null은 "값 없음"을 명시적으로 딱 나타.. 2023. 3. 5. JavaScript 원시 자료형과 참조 자료형에 대해 쉽게 이해해 보자. 1. 원시 자료형과 참조 자료형이란? number, string, boolean, undefined, null과 같은 자료형은 고정된 저장 공간을 차지한다. 이런 특징을 가진 자료형을 원시 자료형(primitive data type)이라는 이름으로 분류한다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체, 함수 등의 자료형은 참조 자료형(reference data type)이라고 분류한다. 원시 타입 데이터는 각 변수간의 원시타입 데이터를 복사할 경우, 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지 않음. 참조 타입 데이터는 주소를 복사한다. 때문에 복사한 데이터에서 원소를 변경하게 된다면 주소 안에 있는 데이터가 변경이 되는 것이기에 기존의 데이터에도 영향이 가는 것이다. 쉽게 설명하자.. 2023. 3. 2. 이전 1 2 다음
