스터디 개설
과정중 첫번째로 하게 된것은 JS 스터디였습니다. 같은 뜻을 가진 분들과 모여 스터디가 이루어졌고 얼떨결에 조장을 맡게 되었습니다... 모두들 많은 경험을 가진 분들이 아니다보니(저도 JS는 문외한..) 어떻게 스터디를 구성해야 할지 굉장히 난감했었으나 여러 의견을 취합하여 우선은 문법공부를 각자 해오기로 했습니다. 그리고 나서 프로그래머스 lv1부터 시작하여 점점 문법에 익숙해지려는 계획이에요.
사실 제가 JS스터디를 신청한 이유는 간단합니다. 어떻게보면 프론트엔드의 시작과 끝, 알파이자 오메가이기 때문이죠. React를 하고싶어하시는 분들 굉장히 많았지만 결국 기본은 JS라고 생각했었습니다. 더군다나 프론트엔드라는 분야는 몇년 간격으로 대격변이 일어나는 분야입니다. 그러나 그런 격변 속에서도 JS는 흔들리지 않고 몸집을 키워나가고 있네요. 따라서 저는 JS기본기부터 심화까지 정복하는것이 제 목표입니다. 이렇게 된다면 프레임워크와 html/css는 최대한 실시간 강의에서 많이 얻어가야겠죠.
아무튼 슬랙도있고 노션도있고 개인 블로그도있고 나름의 스터디 구색은 갖춘거 같아 다행입니다. 스터디장으로서 조원들을 잘 이끌고 싶은데 제 스스로가 너무 부족한게 많아 걱정입니다. 아무쪼록 모두들 쭉쭉 성장해나가는 스터디가 됐으면 좋겠어요.
Javascript
그래서 이번주는 저도 초심자의 마음으로 새롭게 공부중입니다. 앞으로 일주일에 2번정도는 글을 써보려 해요. 강의는 박영웅 강사님의 프론트엔드 초격차 베이스입니다.
Ch2. JS시작하기
기본 세팅
VScode를 기반으로 했습니다. Live server기능으로는 큰 프로젝트를 handle하기 어려우므로 NPM으로 서버를 설정하였습니다. 부가적으로 원래 쓰던 Prettier(auto format)과 한글화를 진행해주었습니다.
export import로 외부 함수 불러오기
export default function getType()
import getType from "./getType.js";함수가 길이가 길어지게 되면 복붙으로는 한계가 있습니다. 따라서 높은 가독성을 위해 파일로 따로 빼놓고 간단하게 import를 해주어 사용할수 있습니다.
데이터 타입 확인
typeof data
Object.prototype.toString.call(data) 기본적으로 typeof기능을 활용하여 data type을 확인할수 있습니다. 그러나 완벽하게 정확한 type을 전달해주진 못합니다. 예를들어 null을 null로 반환했으면 좋겠는데 object로 반환을 한다던지.... 그렇게 때문에 Object와 프로퍼티를 활용하여 정확한 type을 반환하는 법을 배웠습니다.
산술연산자 할당연산자
+-*/% 등등 다른 언어에서 쓰이는것과 같습니다. 하나 추가하자면 몫을 구할때는 //기능이 없고 parseInt와 같이 정수부분만 따로 빼내는 방법을 사용해야할것 같습니다.
할당연산자 =, +=, -= 등등... 모든 언어가 같은듯 합니다.
비교, 논리 연산자
&&, >, || 같은것도 다른언어와 동일합니다. 그러나 JS만의 독특한것이 하나있으니..
console.log(2 == '2'); //true
console.log(2 === '2'); //false
console.log(2 !== '2'); //true이런 문법입니다. 일치연산자, 불일치연산자로 불리는듯해요. 첫번째 줄부터 굉장히 신기합니다. Number와 String이 어떻게 같은걸까요...(알고보니 형변환의 개념에서 같아지는것 같습니다). 그러나 === 와 !== 같은 경우는 type마저도 일치하는지 불일치하는지 판단합니다. 따라서 위와같은 결과가 나오게 됩니다. JS만의 특징이니 유심히 볼 필요가 있는것 같습니다.
3항연산자
흔하디 흔한 3항연산자입니다. 간단한 if문 대용으로 쓸수있겠네요.
if-else문
if - else if - else로 분기됩니다. C++과 동일한것 같습니다.
switch문
기능은 비슷하지만 특이하게도 '{' ,'}' 이 아닌 ':'를 사용하여 분기를 해줍니다. 역시나 break는 필요하고 나머지 처리는 default를 사용하여 해줍니다.
for문
for사용법또한 C++과 동일합니다. 그러나 이번엔 for문이 실제 html문법과 어떻게 어울려 사용되는지를 확인할수 있었습니다.
const ulEl = document.querySelector("ul");
for (let i = 0; i < 10; i++) {
const li = document.createElement("li");
li.textContent = `list-${i + 1}`;
if (i % 2 == 0)
li.addEventListener("click", function () {
console.log(li.textContent);
});
ulEl.appendChild(li);
}- querySelector로 필요한 태그를 가져옵니다.
- for문 매 반복마다 createElement로 li요소를 만들어줍니다.
- textContent 즉, 값을 할당해줍니다.
- if문 조건과 addEventListner를 통하여 click시에만 작동하게 설정합니다.
- appendChild로 상위 요소에다가 붙여줍니다.
짝수일때만 동작하게 for문과 query문을 섞어본 예제입니다. 아직 query와 eventListner다루는것을 자세히 알진 못하지만 실제로 어떻게 쓰이는지를 알 수 있었습니다.
변수 유효범위
var, let, const의 특징을 살펴보았습니다.
var: 함수 레벨 scope를 가지므로 블록 외부에서도 사용이 가능합니다. 그러나 ES5까지만 쓰이고 현재는 잘 쓰이지 않는다고 합니다.
let: mutable하고 블록 레벨을 가집니다.
const: immutable하고 블록 레벨을 가집니다.
변수 사용시 오류를 안가지려면 선언 자체를 바깥쪽에다 하는 습관을 가질 필요가 있을것 같습니다.
ES6 표준에서는 let과 const위주로 사용을 하겠습니다.
형변환
아까 잠시 언급된 형변환입니다.
동등연산자 == 은 사실 자동으로 형변환이 이루어지므로 아까와 같이
2 == '2' 가 true가 나오는 현상이 발생한것입니다.
따라서 JS에서는 정확성을 위해 일치연산자 ===를 사용하는게 좋을것 같습니다.
Boolean true값들 -> truthy
true, 1, 2, {}, [], 'false' ... 굉장히 많습니다
Boolean false값들 -> falsy
false, '', null, undefined, 0, NaN
false값들을 외워주고 나머지는 true인것으로 이해를 해야합니다.
특정 값의 truthy, falsy 판단을 위해서는 앞에다가 !!를 붙여주어 확인해보는것도 방법입니다.
!![] //true
!!{} //true
!!NaN //falseJS에서는 특이하게 [], {}가 true로 취급이 됩니다.
