SPACE SPACE

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

이번 FE 게시글은 Udemy 강의를 수강하며 추가로 구현한 내용을 작성해보고자 한다. 먼저 듣고 있는 강의는 다음 링크에서 확인할 수 있다. https://www.udemy.com/course/javascript-zw/ JavaScript의 초반 부분 if-else를 가지고 간단한 몬스터 죽이기 웹 게임을 만드는 프로젝트를 하게 된다. 이곳에서는 html이나 css를 디자인하지 않으며 오로지 javascript를 조작하게 되는데, 처음 시작시 화면은 다음과 같은 모습을 볼 수 있다. 다음에서 내가 추가로 구현하고자 하는 부분은 바로 PLATER HEALTH의 바로 옆 부분에 쓰인 Bonus Life였다. 강의를 그대로 따라하면, Bonus Life의 경우 전체 게임이 돌아가는 중 지거나 이기거나 비겨서..

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

오늘 포스팅할 글은 협업을 위한 툴을 소개해보고자 한다. 협업은 타인과 함께하는 작업이고 개발에 있어서 거의 필수사항이라고 볼 수 있다. 그런데 사람마다 개발시 코드 스타일에 차이가 날 수 있기 때문에 나중에 협업 관리 툴(git, github 등등)을 확인해보면 아주 자유로운 코드들을 확인할 수 있다. 이런 코드의 문제점은 다음과 같다고 생각한다. 코드 가독성이 좋지 않다. 스파게티 코드가 될 가능성이 높다. 이후 추가 영입된 인원에게 코드를 인수인계할 경우 파악하는데 시간 소요가 오래된다. ✨오류가 날 확률이 크다 🍑 아무래도 가장 큰 문제는 바로 오류와 충돌이 날 확률이 크다는 것이 아닐까 싶다. 그렇기에 많은 이들이 협업을 할때 Lint와 Code Formatter를 통해 코드 스타일을 맞추어 g..

수강 중간에 자주 사용하던 문법 한개가 눈에 거슬리기 시작했다. 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의..