undefined가 나타나는 세 가지 경우
·
웹개발/JavaScript
JavaScript에서 undefined가 발생하는 경우는 대표적으로 3가지가 있습니다.이 3가지에 대해 다뤄보도록 하겠습니다. undefined가 나타나는 세 가지 경우 1. 빈 객체일때객체를 선언만 하고 속성 값을 정의하지 않은 상태에서, 해당 객체의 속성을 호출하면 undefined가 반환됩니다.const obj = {};console.log(obj.name); // undefined여기서 객체 obj에는 { }로 속성이 정의되어 있지 않기 때문에, name이라는 key의 value를 호출해도 undefined가 반환됩니다. 2. 함수에 return이 없을 때함수에서 값을 반환하지 않으면, return이 없으면, 함수 호출의 결과가 자동으로 undefined가 됩니다.const text = () ..
JavaScript 함수의 호이스팅
·
웹개발/JavaScript
Function Hositing. 함수 호이스팅입니다.함수 호이스팅이란, JavaScript에서 JS엔진이 코드를 실행시키면, 돌아가기 전에 코드의 함수 선언에 대한 부분을 끌어 올립니다. 즉, JS엔진이 실행전에 코드 전체를 한 번 훑어보고 선언된 부분부터 먼저 읽는다~ 라고 생각하시면 편할 것 같습니다.함수 호이스팅에 대해 알기 전에, JS에서는 함수를 정의하는 방법이 2가지가 있죠?1. 함수 선언식2. 함수 표현식차례대로 설명드리겠습니다. 1. 함수 선언식함수 선언식은 호이스팅이 적용됩니다. 그러면 함수 표현식은요?? 뒤에 말씀드릴게요.JavaScript 코드를 실행시에 선언에 대한 코드는 맨 위로 끌어 올려 처리가 됩니다. 즉 선언식에서는 함수가 선언되기 전에 호출이 가능합니다.console.lo..
vite로 react 설치하기
·
웹개발/REACT
2이번 글에서는 Vite와 TypeScript를 사용하여 React 프로젝트를 설정하는 방법을 단계별로 설명드리겠습니다.1. 폴더 생성 2. VSCode로 폴더 열기 3. 터미널 열기(Crtl + j) // git bash로 열어주세요. 4. Vite를 이용하여 프로젝트 생성npm create vite@latestvite@latest (파일이름) 으로 파일 이름을 지정해줘도 되지만,우리는 이미 파일을 열었기 때문에 .(현재 파일에 설치)를 입력해줘도 됩니다. 5. 설치과정Select a framework: React (리액트 사용할거니까)Select a variant: TypeScript / TypeScript + SWC둘 중에 어느거를 설치해도 상관없지만 저는 SWC버전으로 설치합니다. SWC는 Spe..
null의 typeof가 object인 이유
·
웹개발/JavaScript
배열 [ ] 의 typeof는 뭐일까요? => object 객체입니다.객체 { } 의 typeof는 뭐일까요? => object 객체입니다.너무나도 당연한 사실이죠. 그런데 null 의 typeof는 뭐엇일까요?놀랍게도 object객체가 나옵니다. 이유는 JavaScript 초기 설계에 오류가 있었기 때문입니다. 그냥 개발이 잘못된 거에요.typeof null === "object"는 자바스크립트의 설계 상의 버그로, 수정되지 않고 현재까지 남아있는 역사적인 흔적입니다.
JavaScript 리터럴이란 무엇인가
·
웹개발/JavaScript
공부하다가 갑자기 리터럴이라는 단어가 되게 낯설게 느껴지는거 있죠?저 스스로에게 설명해보라 하는데 저도 명확이 얘기를 못하더라고요..그래서 정리해봤습니다.리터럴이란...코드에 직접 작성하는 값을 의미합니다. 쉽게 말해서 변수나 함수에 저장되는 것이 아닌, 코드 자체에 포함되어 있는 값을 말하는데요, 잘 이해가 안되시죠?코드로 설명드릴게요.// 변수에 저장된 값let name = "Jun";// 코드에 직접 작성된 값 (리터럴)console.log("문자열1");console.log(24); // 숫자 리터럴여기서 "Jun", "문자열1", 24가 모두 리터럴에 해당합니다.1. 문자열 리터럴 (String Literal)문자열 데이터를 표현할 때 사용합니다. ' ', " ", 또는 벡틱 ` `을 사용할 수..
4094Fixer: Next.js 4094 에러 자동 해결 프로그램
·
프로젝트/Componique: UI 컴포넌트 라이브러리
GitHub 레포지토리프로그램의 소스 코드는 GitHub 레포지토리에서 확인할 수 있습니다. 해당 레포지토리에서는 프로그램의 사용법과 설치 방법에 대한 자세한 설명이 포함되어 있습니다.kimjusnu/4094Fixer: Resolve Next.js 4094 errors with automatic cache clearing and package reinstalling. (github.com) GitHub - kimjusnu/4094Fixer: Resolve Next.js 4094 errors with automatic cache clearing and package reinstalling.Resolve Next.js 4094 errors with automatic cache clearing and pack..
JavaScript 개념 정리
·
웹개발/JavaScript
자바스크립트(JavaScript)는 동적인 웹 페이지를 작성하기 위해 사용되는 언어입니다.모든 웹브라우저에서 지원하며, 웹 페이지를 보다 상호작용적으로 만들 수 있게 해줍니다. HTML이나 CSS와 달리, 자바스크립트는 웹 페이지에서 동적으로 콘텐츠를 업데이트하거나 사용자 이벤트에 반응할 수 있습니다. 동적 웹 페이지 작성 언어: 자바스크립트는 사용자가 웹 페이지와 상호작용할 수 있도록 해줍니다.브라우저 호환성: 대부분의 웹 브라우저는 자바스크립트를 기본적으로 지원합니다.자바스크립트의 주요 특징들을 알려줘 인터프리터 언어: 코드를 한 줄씩 해석하여 실행하는 방식의 언어입니다.동적 타이핑(Dynamic Typing): 변수의 타입이 고정되지 않고, 실행 시점에 결정됩니다.객체 기반 언어: 객체를 중심으로 ..