배경
면접을 제안받은 스타트업의 CTO님과 이야기를 나눌 기회가 있었다.
풀스택 개발자로 최종 지향하려면 프론트엔드는 React.js가 필수라고 하셨다. iOS 파트로 개발만하였지만 언젠가 웹 프론트도 건드려야할 때라고 생각하고 있었다. 장기적으로 보면 풀스택이 되어야하고 풀스택 다음에는 한 회사의 CTO를 지향하고 있기 때문이다.
이런 관점에서 프론트엔드 툴과 언어에 대해 잠깐 공부해보고자 한다.
React.js란?
React는 JavaScript라는 언어를 사용해서 웹 UI를 만들 수 있는 프레임워크이다.
사실 기본적으로 웹 UI는 html과 css, javascript로 만들 수 있다. 그럼에도 불구하고 React가 이렇게 인기가 많게 된 이유는 동적 UI를 만들기 쉬운 프레임워크이기 때문이다.
*유저와 상호작용하며 UI가 달라지는 것을 동적 UI라고 한다.
JavaScript
자바스크립트는 웹개발 언어이다. 리액트는 어쨋거나 자바스크립트의 라이브러리이기 때문에 자바스크립트 문법을 기본적으로 알아야한다.
1. Switch문
swift와 비슷하다.
let age = prompt('나이를 알려주세요.', 18);
switch (age) {
case 18:
alert("Won't work"); // prompt 함수는 항상 문자열을 반환하므로, 이 case문엔 절대 도달할 수 없습니다.
break;
case "18":
alert("낭랑 18세이시군요!");
break;
default:
alert("어떤 case문에도 해당하지 않습니다.");
}2. 함수 정의
기본적으로 파라미터를 넣어주고 function으로 정의한다.
하지만 swift와 달리 파라미터에 타입을 주지않는다.
function sum(a, b) {
let result = a + b;
return result;
}그리고 특이하게 함수를 선언하는 방법이 여러가지이다.
함수를 상수로 저장
let sum = function(a, b) {
let result = a + b;
return result;
};화살표 함수 선언 방식
// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;
// 중괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
// ...
return a + b;
}
// 인수가 없는 경우
let sayHi = () => alert("Hello");
// 인수가 하나인 경우
let double = n => n * 2;3. while, for과 같은 반복문은 비슷하다.
// 1
while (condition) {
...
}
// 2
do {
...
} while (condition);
// 3
for(let i = 0; i < 10; i++) {
...
}변수, 상수
변수, 상수를 정의할 때 재밌는점을 발견했다.
swift에서 상수는 let, 변수는 var로 선언하는데, 자바스크립트에서는 변수를 let, 상수는 const로 선언한다고 한다.
그 이유는 원래는 변수에 var을 썼는데 아래 케이스처럼 로컬 변수로 선언해도 외부에서 참조할 수 있기 때문에 원하지않는 사이드 이펙트가 발생하기 때문에 var는 현재 쓰지않는다고 한다.
if (true) {
var x = 10;
console.log(x); // 10
}
console.log(x); // 10
To be continued
Reference
