SPACE SPACE

우리가 웹상에서 웹사이트를 볼 수 있는 것은 브라우저에서 javascript를 실행할 수 있는 환경을 제공한다는 의미이다. 브라우저는 Browser APIs나 다른 요소들이 있는데 이번에 살펴볼 것은 javascript 엔진이다. javascript는 인터프리터 언어이다. 인터프리터란 코드를 실행함과 동시에 한 줄씩 실행한다는 의미이다. 다른 언어를 예를 들어 보자면 우리는 컴파일이라는 과정이 존재하고 (High level 언어를 low level 언어로 바꾸어주는 과정 즉, 영어로 코딩한걸 머신이 이해하기 쉬운 기계어로 바꾸어준다는 의미) 그 후 실행 명령어를 통해 해당 코드를 실행했다. 그러나 javascript 엔진은 그 중간 과정을 생략하고 실행과 동시에 컴파일을 진행한다. 그래서 javascri..

Javascript는 var, let, const와 같은 변수 생성 방법이 존재한다. 우리는 간혹 Hoisting을 생각할 때 var과 함수는 Hoisting 되지만 let과 const는 호이스팅이 되지 않는다고 생각한다. 그러나, 이는 틀린 말이다. 먼저 Hoisting의 정의에 대해 알아보자. Hoisting은 MDN 문서에 따르면 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. (🌸호이스팅의 ECMAScript 2015 언어 명세 이후 나타났습니다.) 여기서 var과 let의 차이가 하나 발생하게 되는데 바로 선언과 초기화의 차이이다. 우리는 javascript에 변수가 할당되는 곳까지 총 3개의 단계로 나누어 볼 수 있다. 1. 선언 단계 2. 초기화 단계 3. ..

Javascript의 값에는 두 가지 종류의 카테고리가 존재한다. 바로 원시 값과 참조 값이다. 오늘은 두개의 차이에 대해 공부하고 포스팅 해보고자 한다. 자바스크립트의 7개 대표적인 값(String, Number, Boolean etc)의 경우 원시 값이라고 할 수 있다. 원시 값은 메모리에 저장되고 보통 스택이다. 상대적으로 짧게 동작하기 때문인데, 이 값은 자바스크립트가 쉽게 제거할 수 있고 또한 비용이 저렴하기에 쉽게 복제할 수 있다. 이곳에서 보통 스택이라고 말한 것의 의미는 만약 작업이 길어지게 될 경우 힙에 저장하여 장기적으로 사용할 수도 있다는 의미이다. 원시 값에서 변수를 복사한다는 것은 원시 값을 가진 새로운 변수를 할당한 뒤 실제로 값을 할당한다는 것이다. 조금 복잡하게 설명했는데 예..

var의 경우 ES5까지 사용하던 변수 생성 방법이다. 그리고 let과 const는 ES6부터 변수와 상수를 생성하기 위하여 사용하고 있다. 오늘은 이 세 가지에 대해 차이점을 살펴보고자 한다. 먼저 위에서 언급했지만 var와 let의 경우 공통적으로 변수를 생성한다. 그리고 const의 경우 상수를 생성한다는 것이 명확한 차이점이라고 볼 수 있다. 그렇다면 var와 let의 차이점에는 무엇이 있는가? 둘 다 공통적으로 변수를 생성한다면 굳이 있을 필요가 없지 않을까? 하는 생각이 들 수 있을 것 같다. var은 javascript의 초기부터 지속적으로 사용해 오던 것으로 함수 & 전역 scope이다. 그리고 let과 const의 경우에는 Block Scope라고 할 수 있다. 그렇다면 Block Sco..

자바스크립트를 처음 마주했을 때 가장 헷갈렸던 3가지에 대해 정리하고자 한다. 자바스크립트에는 다음과 같은 3가지가 존재한다. 바로 null,undefined,NaN이다. 가장 먼저 헷갈렸던 부분은 바로 null 과 undefined의 차이였다. 둘 모두 javascript의 타입이며 원시 값이라고 할 수 있다. 🌟자바스크립트의 원시 값은 변경할 수 없는 값을 의미한다. 그렇다면 둘은 동일한 것일까? 정답만 놓고 보자면 둘은 엄연히 다른 것이라고 볼 수 있다. 우리가 한 변수를 선언할 때는 다음과 같은 형태를 사용하고는 한다. let value = [실제로 넣을 값]; 이렇게 될 경우 변수를 선언함과 동시에 타입을 결정 지을 수 있다. 하드 코딩을 할 경우에는 변수에 string 값을 집어넣을 경우 va..

수강 중간에 자주 사용하던 문법 한개가 눈에 거슬리기 시작했다. src={item.author ? item.author.photoURL ?? 'URL주소' : 'URL 주소'} 해당 코드는 진행하는 프로젝트에서 가지고 온 코드의 일부분이다. 이와 같이 자바스크립트에서는 삼항 연산자를 다음과 같은 물음표를 사용한 뒤 참과 거짓에 따라 구분한다. 🍳 그런데 잠깐, 삼항 연산자는 보통 다음과 같은 형식을 띄운다. 참과 거짓으로 나눌 수 있는 조건? 참일때 실행할 문장:거짓일때 실행할 문장 그렇다면 물음표 두개를 붙여쓰면 사항 연산자인걸까? 🎀 강의에 대한 소개는 다음 글에 있어요! https://coding7281.tistory.com/9 [#1day] 프론트엔드 공부 주저리 한참 프로젝트를 경험하고 공부하기..

오늘은 이전 포스팅하던 것과 별도로 다른 이야기를 하기 위해 블로그를 작성하기 시작했다. 바로 Vercel과 Netlify 의 차이점에 대한 부분이다. 먼저 Vercel과 Netlify는 프론트엔드와 백엔드를 따로 두지 않고 프론트엔드에서 플랫폼으로 배포할 수 있도록 해준다. 추가적으로 github pages를 통한 배포 역시 서버리스 배포를 의미한다. (프론트엔드와 백엔드를 함께 제공하는 wix와 같은 사이트도 존재한다.) ❓ 어라, 그렇다면 두 플랫폼 서비스 회사의 경우 정말 서버 없이 구동이 되는 것인가? 이것저것 찾아본 바로는 서버가 없다는 의미에서가 아닌, 서버를 생각할 필요가 없다는 뜻에서 서버리스 배포라는 단어가 사용된다는 것이었다. (물론 이것도 참고해서의 결론이지 정확한 내용은 아니다.😥..

수강 중간에 궁금증이 생긴 나 참을 수 없어서 알아본 뒤 정리겸 포스팅하게 되었다. 🎀 강의에 대한 소개는 다음 글에 있어요! https://coding7281.tistory.com/9 [#1day] 프론트엔드 공부 주저리 한참 프로젝트를 경험하고 공부하기 위해 이것저것 지원하던 어느 날 인프런에 들어갔는데 수업이 하나 눈에 띄었다. 바로, [만들면서 배우는 프론트엔드 DO IT 코딩] 이라는 수업이었다! 하루 하 coding7281.tistory.com 해당 프로젝트에서는 react의 createContext를 import 하여 사용하게 된다. 그런데 이때, VisualStudio Code에서 createContext를 확인해보면 두개의 createContext를 확인할 수 있는데 바로 node.js의..