프론트엔드

자바스크립트에서 변수를 선언할 때 사용되는 키워드로는 let, var, const가 있다. 이번 글에서는 각 키워드의 특징을 살펴보고, 어떤 상황에서 어떤 키워드를 선택해야 하는지에 대한 글이다. 1. let 'let'은 블록 범위(scope)를 가지는 변수를 선언하는 키워드다. 블록 범위란 중괄호({})로 둘러싸인 부분을 말한다. 이는 해당 변수가 선언된 블록 내에서만 유효하다는 의미다. { let x = 10; console.log(x); // 10 } console.log(x); // ReferenceError: x is not defined 'let'으로 선언된 변수는 재할당이 가능하다. let count = 0; count = 1; console.log(count); // 1 2. var 'va..

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있습니다. 컴포넌트의 기능은 단순한 템플릿 이상입니다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있습니다. 함수형 컴포넌트와 클래스형 컴포넌트 import './App.css'; function App() { const name = 'react'; return {name} } export default App; import { Component } from 'react'; class App ..

JSX란? JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법입니다. function App() { return ( Hello react ); } 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 다음과 같이 변환됩니다. function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있습니다. 두 가지 코드를 비교해 보았을때 JSX를 사용하는 편이 가독성이 높고 HTML 코드를 작성하는 것과 비슷해 쉽다고 느..

왜 리액트인가? 프로그램이 사용자로부터 작업을 받으면, 컨트롤러는 모델 데이터를 확인하거나 수정하고, 변경된 내용을 뷰에 반영합니다. 만약 HTML 코드 값을 업데이트해야 한다면, 해당 요소를 찾아 내부를 수정해야겠지요. 업데이트하는 항목에 따라 어떤 부분을 찾아 변경할지 규칙을 정하는 작업은 간단하지만, 애플리케이션의 규모가 커지면 복잡해지고, 제대로 관리하지 않으면 성능도 떨어질 수 있습니다. 이러한 문제에 대한 대안으로 페이스북은 리액트(React)를 개발했습니다. 데이터가 변경될 때마다 변화를 고려하는 것이 아니라, 단순히 기존 뷰를 삭제하고 처음부터 다시 렌더링하는 방식입니다. 이렇게 하면 애플리케이션 구조가 단순해지며, 필요한 코드 양도 크게 감소합니다. 더 이상 어떻게 변화를 다룰지 걱정할 ..