Function Hositing. 함수 호이스팅입니다.함수 호이스팅이란, JavaScript에서 JS엔진이 코드를 실행시키면, 돌아가기 전에 코드의 함수 선언에 대한 부분을 끌어 올립니다. 즉, JS엔진이 실행전에 코드 전체를 한 번 훑어보고 선언된 부분부터 먼저 읽는다~ 라고 생각하시면 편할 것 같습니다.함수 호이스팅에 대해 알기 전에, JS에서는 함수를 정의하는 방법이 2가지가 있죠?1. 함수 선언식2. 함수 표현식차례대로 설명드리겠습니다. 1. 함수 선언식함수 선언식은 호이스팅이 적용됩니다. 그러면 함수 표현식은요?? 뒤에 말씀드릴게요.JavaScript 코드를 실행시에 선언에 대한 코드는 맨 위로 끌어 올려 처리가 됩니다. 즉 선언식에서는 함수가 선언되기 전에 호출이 가능합니다.console.lo..

아.. 급하게 폴더 만들어서 거기다가 작업을 하고 있었는데,github에 올리고 싶으면 어떡해야하지 싶으신 분들은 글을 참고해주세요.폴더 하나 만들어서 정리하다가,"아.. 이거 깃헙에 올려야하는데, 새로 레포파서 처음부터 다 다시 해야하나??" 싶었는데 아니더라고요.1. GitHub에 새로운 레포지토리 생성먼저 레포지토리를 생성합니다.그리고 주소를 가지고 있는 상태에서 작업해둔 파일의 VSCode로 넘어갑니다. 2. Git 초기화VSCode로 넘어오셨다면, 작업중인 폴더, 즉 로컬 프로젝트 폴더에서 Git저장소를 초기화합니다.밑에 명령어는 해당 폴더를 Git저장소로 만들어주고, .git이라는 디렉토리가 생성됩니다.git init  3. GitHub레포와 로컬프로젝트 연결로컬저장소(git init으로 생성..

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..

배열 [ ] 의 typeof는 뭐일까요? => object 객체입니다.객체 { } 의 typeof는 뭐일까요? => object 객체입니다.너무나도 당연한 사실이죠. 그런데 null 의 typeof는 뭐엇일까요?놀랍게도 object객체가 나옵니다. 이유는 JavaScript 초기 설계에 오류가 있었기 때문입니다. 그냥 개발이 잘못된 거에요.typeof null === "object"는 자바스크립트의 설계 상의 버그로, 수정되지 않고 현재까지 남아있는 역사적인 흔적입니다.

혹시 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이 발생..

공부하다가 갑자기 리터럴이라는 단어가 되게 낯설게 느껴지는거 있죠?저 스스로에게 설명해보라 하는데 저도 명확이 얘기를 못하더라고요..그래서 정리해봤습니다.리터럴이란...코드에 직접 작성하는 값을 의미합니다. 쉽게 말해서 변수나 함수에 저장되는 것이 아닌, 코드 자체에 포함되어 있는 값을 말하는데요, 잘 이해가 안되시죠?코드로 설명드릴게요.// 변수에 저장된 값let name = "Jun";// 코드에 직접 작성된 값 (리터럴)console.log("문자열1");console.log(24); // 숫자 리터럴여기서 "Jun", "문자열1", 24가 모두 리터럴에 해당합니다.1. 문자열 리터럴 (String Literal)문자열 데이터를 표현할 때 사용합니다. ' ', " ", 또는 벡틱 ` `을 사용할 수..

프로그래밍에서 네이밍 컨벤션은 코드의 가독성과 유지보수성을 크게 향상시킵니다.이때 사용할 수 있는 4가지의 네이밍 컨벤션을 설명하겠습니다.1. 카멜 케이스 (Camel Case)첫 단어는 소문자로 시작하고, 이후 각 단어의 첫 글자를 대문자로 표기하는 방식입니다.// 변수명let firstName = "Kimjunsu";const maxCount = 100; let isActive = true;// 함수명function getUserData() { ... }function calculateTotal() { ... }// 객체의 프로퍼티const user = { firstName: "Kim", lastName: "Junsu", phoneNumber: "123-456-7890"};낙타의 등 ..

혹시 기술블로그 보다보면 이런식으로 코드표현된거 본적 있지 않으신가요? 본적이 없다고 하더라도- 깃헙에 ReadMe파일을 작성할때 코드를 예쁘게 보여주고 싶은 경우- 기술블로그에 코드를 올리고 싶은데 밋밋해 보일때- 코드리뷰할 때 특정 부분만 캡쳐해서 공유하고 싶을때이럴때 사용하기 좋은 라이브러리가 있는데요,VSCode의 확장프로그램CodeSnap입니다!Crtl + Shift + X 단축키로 확장프로그램 창을 연 후,CodeSnap입력후 찾아서 설치하시면 됩니다.설치 후, 코드캡쳐 방법1. 캡처할 코드를 드래그 합니다.2. 우클릭 후 하단의 CodeSnap을 선택한다.3. (1)번을 눌러 이미지를 저장하거나, (2)번을 우클릭하여 복사할 수 있다.