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 = () ..
콜백(CallBack)함수 이거 보고도 모르면 바보
·
웹개발/JavaScript
콜백함수 뭔가 들었을때 어려울거 같지 않아요? 괜히 막 거부감들고 하기싫고..저는 그랬답니다^^ ㅎㅎ하지만 후에 필요한 Promise, async/await를 이해하려면 콜백함수를 확실히 이해해야하는데요, 저도 몰랐을때 처럼.. 최대한 쉽게 이해시켜보겠습니다. 가시죠.콜백 함수 개념부터.JavaScript에서 콜백함수는 다른 함수가 "끝난 후에 실행할 작업"을 담은 함수입니다.예를 들어, 어떤 함수가 하나의 작업을 하고 있을 때, 그거 끝나고 바로 뭔가 해야해!!!바로 해야하는 작업을 콜백함수를 이용하여 쉽게 만들 수 있습니다. 콜백 함수 예시.아래는 c라는 함수가 callback이라는 함수 인자를 받아서 실행하는 예시입니다.const a = () => console.log("A");const b = (..
JavaScript 함수의 호이스팅
·
웹개발/JavaScript
Function Hositing. 함수 호이스팅입니다.함수 호이스팅이란, JavaScript에서 JS엔진이 코드를 실행시키면, 돌아가기 전에 코드의 함수 선언에 대한 부분을 끌어 올립니다. 즉, JS엔진이 실행전에 코드 전체를 한 번 훑어보고 선언된 부분부터 먼저 읽는다~ 라고 생각하시면 편할 것 같습니다.함수 호이스팅에 대해 알기 전에, JS에서는 함수를 정의하는 방법이 2가지가 있죠?1. 함수 선언식2. 함수 표현식차례대로 설명드리겠습니다. 1. 함수 선언식함수 선언식은 호이스팅이 적용됩니다. 그러면 함수 표현식은요?? 뒤에 말씀드릴게요.JavaScript 코드를 실행시에 선언에 대한 코드는 맨 위로 끌어 올려 처리가 됩니다. 즉 선언식에서는 함수가 선언되기 전에 호출이 가능합니다.console.lo..
GitHub에 프로젝트 올리는 방법
·
웹개발/GIt
아.. 급하게 폴더 만들어서 거기다가 작업을 하고 있었는데,github에 올리고 싶으면 어떡해야하지 싶으신 분들은 글을 참고해주세요.폴더 하나 만들어서 정리하다가,"아.. 이거 깃헙에 올려야하는데, 새로 레포파서 처음부터 다 다시 해야하나??" 싶었는데 아니더라고요.1. GitHub에 새로운 레포지토리 생성먼저 레포지토리를 생성합니다.그리고 주소를 가지고 있는 상태에서 작업해둔 파일의 VSCode로 넘어갑니다. 2. Git 초기화VSCode로 넘어오셨다면, 작업중인 폴더, 즉 로컬 프로젝트 폴더에서 Git저장소를 초기화합니다.밑에 명령어는 해당 폴더를 Git저장소로 만들어주고, .git이라는 디렉토리가 생성됩니다.git init  3. GitHub레포와 로컬프로젝트 연결로컬저장소(git init으로 생성..
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, NaN 뭔지는 알고 있자
·
웹개발/JavaScript
혹시 NaN(Not a Number)이라는 결과를 본적이 있지 않으신가요?없으시다면,, 고수시거나 뉴비시거나 둘중 하나일 테지요.. 하하하 NaN이란 "Not a Number"라는 뜻으로 자바스크립트에서 "숫자가 아니다."를 나타내는 특수한 값이에요. 숫자 연산 중에서 정상적인 숫자 값을 얻을 수 없는 경우에 NaN이 반환이 됩니다. 가장 쉬운예시로 24+"2" 이런식이죠,더 많은 예시를 보여드릴게요.console.log(Number("hello")); // NaNconsole.log(10 / "two"); // NaNconsole.log(Math.sqrt(-1)); // NaN이 코드에서 알 수 있듯이, 문자열을 숫자로 변환할 수 없거나, 0으로 나누거나 등등 잘못된 연산에서 NaN이 발생..
JavaScript 리터럴이란 무엇인가
·
웹개발/JavaScript
공부하다가 갑자기 리터럴이라는 단어가 되게 낯설게 느껴지는거 있죠?저 스스로에게 설명해보라 하는데 저도 명확이 얘기를 못하더라고요..그래서 정리해봤습니다.리터럴이란...코드에 직접 작성하는 값을 의미합니다. 쉽게 말해서 변수나 함수에 저장되는 것이 아닌, 코드 자체에 포함되어 있는 값을 말하는데요, 잘 이해가 안되시죠?코드로 설명드릴게요.// 변수에 저장된 값let name = "Jun";// 코드에 직접 작성된 값 (리터럴)console.log("문자열1");console.log(24); // 숫자 리터럴여기서 "Jun", "문자열1", 24가 모두 리터럴에 해당합니다.1. 문자열 리터럴 (String Literal)문자열 데이터를 표현할 때 사용합니다. ' ', " ", 또는 벡틱 ` `을 사용할 수..