나의 디딤돌

안녕하세요 오늘은 자바스크립트 변수 선언을 할 때 사용되는 키워드를 알아보도록 하겠습니다.
먼저 설명드리기 전에 

간단하게 전역변수 지역변수를 설명드리자면,

각각 범위를 뜻하는 것으로,

전역 변수는 해당 코드 내에서 어느 곳에서든 사용을 할 수 있는 변수입니다.

그리고 지역변수는 그 범위 내에서만 사용할 수 있는 것이지요.

예를 들어 지역변수는 클래스나 함수 내에서만 사용할 수 있는 것으로 생각하시면

될 것 같습니다.

더욱 예를 들자면

지역 변수는 임의로 만든 함수 function test(){

이 안에서만 사용할 수 있는 변수

}

라고 보시면 될 것입니다.

var

자 그럼 다시 var let const 차이점을 알아보자면

먼저 ES6 이전에는 변수를 선언할 수 있는 키워드는 var 뿐이었습니다.

var 같은 전역변수처럼 사용되며, 어느 곳에서든 똑같은 이름으로

var 변수명 이렇게 해서 사용해도 오류가 뜨지 않습니다.

때문에 빈번하게 사용할 경우 수정할 때 일일이 바꿔주어야 한다는 문제점이 있습니다.

또한 var같은 경우 처음에 선언할 때 초기값을 주지 않아도 된다는 점도 있습니다.

또한 기본적으로 var로 되어있어서 var 변수명으로 선언하지 않아도 에러가 나지 않는 점도 있습니다.

예를 들어 나는 변수를 선언할 때 키워드를 붙이지 않았는데도 오류가 뜨지 않는다 싶다면 이미 기본적으로

var 키워드가 붙어 있는데 생략이 된 것으로 보는 것으로 에러가 뜨지 않는 경우가 있습니다.

var로 선언할 경우 초기값이 없을 경우는 자동으로 undefined를 초기값으로 하여 메모리에 할당합니다.

let const

이 외에 ES6버전 이후부턴 let과 const키워드가 추가되어 이용할 수 있게 되었습니다.

let과 const 키워드는 우리가 자바스크립트 외에 다른 언어에서 볼 수 있듯이 처음에 let이나 const로 사용한 후엔

다시 같은 변수명으로 let과 const를 이용하게 되면 오류가 발생하게 됩니다.

let 같은 경우 var과 같이 초기값을 선언해주지 않아도 되지만 const는 반드시 초기값을 설정해주어야 하고

const는 한번 할당한 값은 변경할 수 없습니다.

그리고 let과 const는 var과는 다르게 자동으로 초기값을 할당하지는 않습니다.

그렇다면 어떤 것을 사용하는 게 좋을까요?

저 역시 아직 공부하는 입장이라 부족한 상태이지만 알아본 결과

var 같은 경우 버그가 발생할 수도 있고 메모리 누수 위험 그리고 코드가 길어질 경우 예상치 못한 위치에 

같은 변수명 때문에 문제가 발생할 수도 있습니다.

때문에 let이나 const를 사용함으로써 그 문제를 예방할 수 있다고 합니다.

그리고 혹시라도 코딩 테스트를 준비하시는 분들이 있다면

키워드 세 가지를 동시에 사용하면 감점 요인이 있다고 들었습니다.

그러니 세 키워드 모두 사용하는 것은 피하는 게 좋을 것 같습니다.

안녕하세요 오늘은 비주얼 스튜디오 코드를 한글로 바꾸는 방법과

한 가지 유용한 확장 플러그인을 알려드릴까 합니다.

그럼 바로 알아보도록 하겠습니다.

먼저 한글 에디터로 바꾸는 방법부터 알아보겠습니다.

비주얼 스튜디오 코드를 실행한 다음

아래 사진처럼 좌측 Extensions를 클릭해주시거나

단축키

Ctrl + Shift + X

실행시켜줍니다.

이후 검색 부분에다가 korean을 입력해주면

다음처럼 나오는데 install를 눌러주시면 됩니다.

설치를 완료하면 아래에 재시작을 할 것인지 나오게 되는데요

Restart를 눌러주면 자동으로 한글 에디터로 변경돼서 실행됩니다.

이렇게 한글버전으로 잘 바뀐 것을 확인하실 수 있습니다.

이번엔 간단하게 유용한 확장 플러그인 하나를 소개해드리고자

하는데요, html 작성 도중에 특정 단어만 css를 바꾸고 싶다

예를 들어 대한민국 이 단어에서

각각 색깔을 입혀주고 싶다 할 때 일일이 다 span이나 p태그를 붙여주면

약간 번거로운 이때 사용하기 유용합니다.

약간의 시간을 절약하게 되는 것이죠 

이번에도 마찬가지로 Extensions 클릭해주신 다음 

검색 창에 htmltagwrap를 입력해줍니다.

저는 이미 설치한 상태라서 저렇게 설정 버튼이 나오는데요, 이 전에도 설명드렸듯이,

설치를 하지 않으면 한글 버전으로 변경할 때처럼 Install 버튼이 나오고

저처럼 설치를 이미 했다면 이렇게 설정 버튼이 나오게 됩니다.

이후 설치가 완료되었다면, html 문서로 가서

중간에 변경하고 싶은 부분에 가서 마우스로 드래그해줍니다.

예를 들어 다음과 같은 코드가 있을 때,

<div>안녕하세요 반갑습니다. 그럼 이만</div>

그럼 부분을 마우스로 드래그해서 묶어줍니다. 

그다음 Alt + W를 눌러주면

p태그로 묶어주게 됩니다.

이렇게 해서 태그 이름을 바꿔주시거나 또는 클래스를 붙여,

css에서 변경해주시면 특정 단어만 css를 다르게 적용할 수 있습니다.

안녕하세요 오늘은 간단하게 비주얼 스튜디오의 몇 가지 확장 플러그인에 대해 

알아보겠습니다.

비주얼 스튜디오 코드에는 다양한 확장 플러그인을 제공해주는데요.

그중 거의 필수적으로 사용하는 라이브 서버란 게 있습니다.

따로 서버에 등록하지 않고 즉시 테스트 할 수 있도록 웹페이지가 열리도록 해줍니다.

실제 서버에 등록해서 웹피이지가 뜨기 전에 미리 보는 것이지요.

다만 테스트라 다른 사람은 못들어 온다는 점. 기억해두시면 좋을 것 같습니다.

그럼 바로 알아보도록 하겠습니다.

먼저 비주얼 스튜디오 코드(이하 VSCode로 하겠습니다.)를 실행합니다.

이후 사진처럼 직접 좌측 메뉴에 Extensions를 클릭해줍니다.

또는 Ctrl + shift + x 를 눌러주시면 됩니다.

Extensions을 클릭하게 되면 저렇게 검색을 할 수 있게 나오는데요

live server를 입력해줍니다.

그럼 이렇게 맨 위에 Live Server가 있는데요. 설치하신 분은 Install이 나오지 않을 것이고

처음이신 분은 아마 저처럼 Install이 나올겁니다. 그럼 Install를 클릭해서

설치해주시면 됩니다.

설치하고 나시면 버튼 두개는 사라지고 톱니바퀴(설정 이미지)가 나오면 설치가 완료된 것입니다.

그럼 이제 html 파일을 을 켜주신 다음 Alt+ O + L를 눌러주시면 

웹 사이트가 뜨게 됩니다.

안녕하세요 이번에는 자바스크립트에서 글자를 바꾸는 세 가지 차이점을

알아보고자 합니다.

textContent와 innerHTMl은 따로 포스팅을 했으나 아직 value는 포스팅을 하지 않았는데요,

일단 간단히 value 역시 값을 가져와서 넣을 수 있습니다.

나중에 따로 포스팅 할 기회가 있을 텐데 그때 간단히 설명드리겠습니다.

value와 textContent or innerHTML 

value 같은 경우 역시 값을 변경하긴 하나, input으로 닫히는 태그가 없는 경우에

값을 변경할 수 있습니다.

닫힌 태그 즉,

<h1></h1> 이런 식으로 뒤에 </>이렇게 오는 태그에는 사용할 수 없습니다.

사용해도 먹히지를 않습니다.

<input type="text" id="input-test" value="안녕">

var btn = document.getElementById("btn");

btn.addEventListener("click",function(){
    document.getElementById("input-test").value = "반갑습니다.";
})

이렇게 있을 경우

버튼을 클릭하면 아래와 같이 바뀝니다.

이렇게 value와 textContent or innerHTML은 차이는 닫힌 태그가 없을 경우는

전자인 value를 사용해 값을 변경할 수 있고,

닫힌 태그가 있을 경우 후자인 textContent와 innerHTML을 사용해서 바꿀 수 있습니다.

textContent와 innerHTML

이 둘 역시 글자를 변경 할 수 있는데요, 다만

둘의 차이점은 사용자에게 보여지는 텍스트 값만 읽어오느냐 아니냐의 차이입니다.

아직 포스팅을 하지 않았으나 css에서 

display:none을 이용할 경우 브라우저에서 사용자에게 보이지 않도록 할 수 있는데요.

이때 textContents는 보여지지 않는다 하더라도 그 값들을 다 가져오지만

innerHTML은 보여지지 않는 값을 가져오지 않습니다.

display:none으로 설정된 것은 사용자에게 보이지 않기 때문에

가져오지 않는것이지요.

간단히 alert() 함수를 이용해서 보면 확인하실 수 있습니다.

var btn = document.getElementById("btn");

btn.addEventListener("click",function(){
    alert(document.getElementById("test").textContent);
   
})

혹시나 해보 실 분이 있으시다면 이렇게 간단하게 확인 하실 수 있습니다.

다른 차이점은

예를 들어 사용자가

("하나    두울~")  

이런 간단한 예제가 있을 경우

textContent는 그대로 가져오게 됩니다.

하나    두울~

이렇게 띄어쓰기(공백) 그대로 가져오게 됩니다.

또한 style태그와도 상관없이 텍스트 값을 그대로 가져오는 것이죠.

하지만

innerHTML 같은 경우는 사용자에게 보이는 그대로에 텍스트 값을 가져오게 되죠

또한 공백 같은 경우도 하나로 가져오게 되는데요.

위 예제 같은 경우 

하나 두울~

이렇게 다수의 공백이라도 하나의 공백으로 가져오게 됩니다.