앞서 React란 무엇인지 다뤘다. React란 무엇일까? React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접적으로 와닫지 않는다. 그렇기에 React를 사용하 coding-leaf.tistory.com 굳이 React를 사용하지 않아도 어떤 웹사이트라도 구축할 수 있지만 더 복잡한 interface를 지닌 것을 구축할 때 React 같은 framework를 사용한다면 작업이 훨씬 수월해질 것이다. 사소한 문제들에 신경쓸 필요가 없으며, 오류도 덜 발생할 것이다. 그저 응용프로그램을 구성하고 핵심 비지니스 로직을 작성하는 것에 집중할 수 있을 것이다. 그것이 React와 같은 libra..
JSX란? 아래 코드를 보면 JavaScript 안에 있는 평소에 잘 보지 못하는 tag가 있다. // 📂 App.js function App() { return ( Let's get started! ); } export default App; 이것은 JSX라고 하며 JavaScript XML을 의미한다. JSX는 React project에서만 활성화되는 특수한 비표준 구문이다. 결국 HTML 역시 XML이라고 할 수 있기 때문에 문제없이 호환된다. React에 JSX 사용이 필수는 아니지만, 대부분의 개발자들은 JavaScript 코드 안에 interface 작업을 할 때 시각적으로 도움이 된다. 일반 .js 파일로는 이 용법을 해석할 수 없지만 뒷단에서 실행되는 JavaScript 파일로 변환되는 과..
Destructuring 한국어로는 구조 분할 할당이라고 불리며, 배열의 원소나 객체의 property를 추천해서 변수에 저장할 수 있도록 해준다. 얼핏 보면 이전 시간에 배운 spread operator와 비슷하다고 생각할 수 있겠지만 이 둘은 전혀 다른 것이다. Spread & Rest Operators Spread와 Rest 연산자 실제로 점 3개(...)로 이뤄진 연산자로 Spread 연산자는 배열의 원소나 객체의 property를 나누는 데 사용된다. Spread 연산자 간단하게 말하면 배열이나 객체를 펼쳐 놓는 것으로 이 coding-leaf.tistory.com spread operator는 모든 element와 property를 가져와서 새로운 배열이나 객체에 전달하는 것이라면, Destr..
Spread와 Rest 연산자 실제로 점 3개(...)로 이뤄진 연산자로 Spread 연산자는 배열의 원소나 객체의 property를 나누는 데 사용된다. Spread 연산자 간단하게 말하면 배열이나 객체를 펼쳐 놓는 것으로 이해할 수 있다. const newArray = [...oldArray, 1, 2] const newObject = {...oldObject, newProp:5 } 위의 예제를 보면, oldArray 배열에 있는 모든 원소들을 새로운 배열 newArray에 추가하고 1, 2를 더 추가하는 경우이다. 이 경우에 oldArray 앞에는 점 3개(...)가 있으며, 모든 원소를 꺼내서 대괄호로 생성한 새로운 배열에 추가한다는 의미이다. 이와 마찬가지로 객체도 ...oldObject로 모든..
What is module? 개발하는 어플리케이션의 크기가 커지면 파일을 여러 개로 분류해야하는 시점이 찾아온다. 이때 여러 개의 파일로 분리된 .js 파일을 모듈(module)이라고 부르는데. 대게 class 하나 혹은 특정한 목적으로 묶인 function들로 구성된 library들로 구성된다. JavaScript가 만들어지지 얼마되지 않았을 때에는 그 script의 크기도 작고 단순한 기능들이 주를 이루었기에 module 관련된 문법이 없이도 크게 성장할 수 있었다. 그러나 그 크기가 커지고 복잡해지면서 특별한 library들을 묶어서 보관하여 언제든지 꺼내쓸 수 있는 module이 필요해졌고 ES6(2015) 이후로 표준 등재되어 사용되게 된다. Html로 파일을 읽어올 때 module 방식으로 작..
우리는 JavaScript에서 함수를 선언할 때, 아래와 같은 방법을 사용하여 함수를 선언하곤 한다. function callMe(name) { console.log(name); } const callMe = function(name) { console.log(name); } 이와 다른 Arrow Function이라고 불리우는 방법으로 함수를 선언할 수도 있다. Arrow Function은 function keyword를 생략했기 때문에 일반적인 함수 선언보다 짧게 선언할 수 있으며, JavaScript에서 this로 생겼던 많은 문제들을 해결해준다는 장점도 가지고 있다. this를 함수에서 사용할 때에 항상 원하는 객체를 참조하지 않았던 것을 생각해보면, 이 Arrow Function에서는 this가 ..
