영부터 구까지 영부터 구까지

함수 선언문 vs 화살표 함수함수 선언문 (Function Declaration)화살표 함수 (Arrow Function)주요 차이점리액트에서의 사용 예시자바스크립트, React에서 함수 선언문과 화살표 함수는 함수를 정의하는 두 가지 주요 방식이다. 둘은 기본적인 문법 차이부터, this 바인딩 방식, 호이스팅 처리까지 여러 면에서 차이를 보인다. 특히, React와 같은 모던 웹 개발에서 두 방식은 각기 다른 상황에서 유용하게 사용된다. 이번 포스팅에서는 함수 선언문과 화살표 함수의 특징을 비교하고,각각의 장단점과 실용적인 실용적인 사용 사례를 살펴보고자 한다. 또한, React에서 두 방식의 차이가 어떻게 컴포넌트 개발에 영향을 미치는지에 대해서도 다루어,개발자들이 보다 효율적으로 함수를 선택하고 ..

리액트 컴포넌트클래스형 컴포넌트와 함수형 컴포넌트이제 함수형 컴포넌트만 쓰세요- 리액트 컴포넌트 리액트 컴포넌트를 작성할 때 클래스형과 함수형의 두 가지 방식으로 작성할 수 있다. 아직까지 두 방식 모두 지원하고 있지만,공식적으로 리액트에서는 더 이상 클래스 컴포넌트 방식을 사용하지 말기를 권장한다. 따라서 되도록 클래스형 컴포넌트를 배우지 않아도 되지만,레거시(Legacy) 유지 보수 차원에서 간단하게 살펴보고자 한다.- 클래스형 컴포넌트와 함수형 컴포넌트 리액트 프로젝트를 초기 생성하면 함수형 컴포넌트 방식으로 코드가 작성되어 있다. 해당 코드를 리액트 방식으로 변경하면 아래와 같이 변경할 수 있다. 나는 TypeScript를 사용하여 앞으로도 .tsx 파일을 작성할 것이고,아래의 예시 코드에 있는 ..

바벨 (Babel)웹팩(Webpack)ViteSWC리액트와 바벨, 웹팩, Vite요약- 바벨(Babel)  ==>  언어의 장벽을 허무는 번역기 프런트엔드에서 자주 사용하는 바벨(Babel)은 과거 바벨탑 이야기에서 이름을 가져왔다. 바벨탑에서 사람들은 언어가 달라 협업에 실패했지만, 바벨은 서로 다른 자바스크립트 언어 규약을 웹 브라우저가 이해할 수 있는 코드로 변환합니다.  - ES6의 등장과 브라우저 문제 2009년 ES5 이후, 2015년 ES6(ECMAScript 2015)가 등장했다. ES6는 let, const, arrow function 같은 새로운 문법을 도입했지만, 당시 브라우저는 이 최신 문법을 제대로 지원하지 못했다. 특히 Internet Explorer(IE) 같은 브라우저는 ES..

npm, npx, yarnnpm (Node Package Manager)npx (Node Package Execute)yarn비교패키지 버전 읽는 법- NPM, NPX, YARN 본격적으로 React를 공부하려고 할 때, 터미널에 가장 먼저 치는 명령어 형식이 있다. 바로 npm(yarn) 또는 npx가 포함된 명령어이다. 이게 뭔지 알고 써야하지 않을까? 해서 포스팅하게 되었다. npm, npx, yarn은 무엇일까?- NPM (Node Package Manager)  npm은 Node Package Manager의 약자로 Node.js의 기본 패키지 관리자이다. npm은 Node.js와 함께 설치되며, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용됩니다. ..

리액트(React)를 왜 사용할까?가장 인기있는 프레임워크강력한 커뮤니티와 광범위한 생태계강력한 커뮤니티광범위한 생태계하나를 배우면 모바일 앱까지돔(DOM) vs 가상 돔(Virtual DOM)돔(DOM)이란?가상 돔(Virtual DOM)이란?강력한 컴포넌트 기능- 리액트(React)를 왜 사용할까? 리액트는 왜 사용할까? 왜 인기가 많을까?- 가장 인기 있는 프레임워크 React는 주간 다운로드가 항상 2천만을 넘어갈 정도로 매우 인기가 많다. 특히, 국내 기업 인지도면에서 React가 가장 많은 인지도를 가지고 있다. (다음은 Vue.js)- 강력한 커뮤니티와 광범위한 생태계 1. 강력한 커뮤니티React는 국내외로 인기가 많은 프레임워크이기 때문에 매우 큰 커뮤니티를 보유하고 있다. 이에 따라 풍..

JSX 문법이란? 리액트 엘리먼트(React Element)란? 리액트 컴포넌트(React Component)란? - JSX 문법이란? JSX 문법은 자바스크립트(JS)로 HTML과 같은 문법을 사용할 수 있는 편리한 문법이다. JSX 문법에는 여러가지 규칙들이 존재한다. ① 속성명은 카멜 케이스로 작성한다. - 카멜 케이스(camel case)란? var camelCase; 중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우, 낙타 모양과 비슷하다 하여 지어진 이름이다. ② 자바스크립트 예약어와 같은 속성명은 사용 불가하다. 안녕하세요 // 불가 안녕하세요 // 가능 ③ 반드시 하나의 요소로 감싸기 // 1. 부모 태그로 감싸기 function App() { return ( 안녕하세요 ) } /..

Node.js의 설치 방법은 아래의 글에 자세히 적혀 있습니다. https://mpd253.tistory.com/42 [Node.js] Node.js 설치하기 (Window 10) Node.js를 설치해 보도록 하겠습니다. - Node.js란? Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼입니다. 작성 언어로는 JavaScript를 활용하며, 논블로킹 I/O와 단일 mpd253.tistory.com 다음은, 우리의 작업 공간인 Visual Studio Code를 설치해야 합니다. Visual Studio Code를 설치하는 방법은 아래의 url에 접속하여 본인의 로컬 환경과 맞게 설치하면 됩니다. https://code.visualstudio.com/download ..