자바스크립트 개념정리
2020. 11. 29. 20:41ㆍ카테고리 없음
자바스크립트(JS)
정리에 들어가기에 앞서 자바스크립트에 대한 생각을 정리하려고 한다. 편의상 JS라고 하겠다. 수많은 프로그래밍 언어가 있지만, 그중 가장 많이 사용되는 언어가 JS다. 그 이유는 유일한 프론트엔드 언어로 대체가능한 언어가 없기 때문이다. 모든 브라우저는 JS로 돌아간다고 보면된다.
웹의 발전 = JS의 발전이라고 할 수 있다. 그렇기에 JS는 눈부신 속도로 발전하고 있다. 예전에 봤을땐 React가 분명 최신 기술이었는데 어느새 Vue가 등장하고...Typescript... 등등 빠른 속도로 기술이 개발중이다. 내가 React를 제대로 공부하고 있을 즈음에는 또 다른 강력한 프레임워크가 나올것같다...
JS는 커뮤니티가 활발하고 하나의 언어이기에 어떤 조직에서도 소통이 가능하다는 장점이 있다. 이러한 점에서 JS는 가히 최고의 프로그래밍 언어라고 생각한다. 사실 JS가 발전하면서 프론트와 백의 경계가 모호해지고 있다. JS만으로 풀스텍을 커버할 수 있다.
JS 관련 기술소개
3대장 : React, vue, angular
그외 : ES5, ES6, ES2015, CoffeeScript, TypeScript, ClojureScript,Backbone, Ember, jQuery 등등
다른 블로그에서 세 가지 프레임워크를 재밌게 비유한 글이 있어 첨부한다.
Angular는 모든 것이 준비된 주방으로 우리의 Web App에 필요한 모든 tools와 재료들을 가지고 있다. 만약 수 많은 개발자들이 일하는 거대한 회사라면, 나는 모든 개발자들이 동일한 패턴으로 일을 하는 Angular를 좋아한다.
React는 oven (오븐) 이다. 케이크를 굽는 과정에서 분명히 추가적인 tools가 필요하지만 이것은 필요한 것을 만드는 과정에서 tools를 선택하는 유연함을 줄 수 있다. 내가 기술적인 회사에서 능력있는 몇몇 senior 개발자들과 함께 일을 하고 있다면 React는 좋은 선택이다.
Vue는 쉽고 효율적인 방법으로 요리를 정말 빠르게 만들 수 있다. 만약 startup 회사에서 새로 생긴 팀에서 엄격한 deadline을 가지고 있다면 나는 VueJS를 좋아할 것이다.
바닐라 JS
자바스크립트를 잘 하기 위해서는 바닐라JS가 가장 중요하다고 한다. 위에 소개한것처럼 강력한 기술들이 많은데 왜 바닐라JS를 배워야하고 중요하다고 하는걸까?
라이브러리나 프레임워크는 화장에 비교할 수 있다. 즉, 바닐라 JS가 밑바탕이고 나머지는 이를 꾸미는 도구나 수단에 불과하다. 그렇기 때문에 바닐라 JS에 대한 깊은 공부가 필요하다. 또 다른 예로 사진을 설명할 수 있다. 당신이 사진작가라면 바닐라 JS는 사진에 대한 이해와 찍는 기술이라고 할 수 있다. 즉, 바닐라 JS를 잘 하지 못하고 React나Typescript 등을 잘하는 것은 사진의 색감이나 구도 등에 대한 베이스는 없는데, 포토샵을 잘하는 것과 같다.
이러한 이유로 바닐라 JS는 JS의 근간이라고 얘기하고 싶다.
JS의 기본 문법과 핵심
JS문은 HTML의 <body>안에, 그리고 마지막에 추가하는 것이 좋다.
console.log()가 JS에서 출력코드다.
좋은 코드와 나쁜 코드
JS는 문법의 허용범위가 넓다. 이런점에서 Python과 상당히 유사한 부분이 있다. 다만, 자칫하면 나쁜코드를 계속해서 사용하기 쉽다. 다음은 나쁜 코드와 올바른 코드의 예시다.
//나쁜 코드
a = 221;
b = a-5;
a = 4;
console.log(b,a);
//올바른 코드
let a = 221;
let b = a - 5;
a = 4;
console.log(b,a);둘 다 [216 4]가 출력되어 결과값은 동일하다.
다만, 모든 언어에 약속이 있듯이 JS에서도 변수를 선언할 때 let이나 const를 붙여준다. 이렇게 간단한 경우에는 문제가 없지만, 코드가 길어질 때는 의도와 다르게 처리될 가능성이 농후하다.
여기서 JS를 공부해본 사람이라면 의문이 생길 수도 있다. 그냥 var를 사용하면 되는 것이 아닌가? 라는 생각이 들 것이다. 하지만 놀랍게도 var는 구식문법이고 let과 const가 최근에 나온 문법이다.
let의 특징은 언제든지 값을 바꿀 수 있고 반면 const는 constant(상수)의 약자로 값을 고정시킨다. 즉, 이전까지는 어떤 구분없이 var를 사용했다면 이제는 상황에 따라 let과 const를 유용하게 사용할 수 있게 되었다. 가령 다른 사람과 협업을 할때 다른 사람이 바꿀수있게 하려면 let을 쓰고, 허용하지 않으려면 const를 쓰면된다. 웬만하면 const를 쓰길 추천!
변수명 작성규칙
camal case에 따른다. camal case란
변수명을 언제나 소문자로 시작해서, 변수명 중간에 스페이스가 필요하면 스페이스 대신 대문자로 대체하는 일종의 rule이다.
Array와 Object
Array는 파이썬의 list와 동일한 개념이고 문법도 비슷하다. [ ] 사용
color = ["red","blue","green","pink","yellow"]
console.log(color[2])결과값 : "green" 출력
Object는 파이썬의 Dictionary와 동일한 개념이고 문법도 비슷하다. Array와 달리 각 Value에 이름을 부여할 수 있다. { } 사용
info = {
name : "kim", favorite_color : "blue", age : 20
}
console.log(info.name)결과값 : "kim" 출력
함수생성
function 함수명(arg1,arg2 ... ){~~~~}
함수의 예...출력문으로 사용하는 console.log()에서 log가 바로 함수다!! console을 출력해보았다.
console.log(console)
이처럼 console이라는 Object안에 log를 포함한 다양한 함수(Function)이 들어있음을 확인할 수 있다. 자바스크립트가 어떤 식으로 만들어지고 구성되어 있는지 알 수 있는 부분이다.
`(백틱) 활용
콤마 없이 $와 {}로 출력가능
`(백틱)을 사용하지 않을경우
function sayhello(name,age){
return "hello " + name + " you are " + age + " years old" ;
}
const greet = sayhello("kim",20)
console.log(greet)`(백틱)을 사용할 경우
function sayhello(name,age){
return `hello ${name} you are ${age} years old` ;
}
const greet = sayhello("kim",20)
console.log(greet)