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

함수 선언문 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는 국내외로 인기가 많은 프레임워크이기 때문에 매우 큰 커뮤니티를 보유하고 있다. 이에 따라 풍..

CSSCSS ModulesSCSS (+ Sass)Tailwind CSSStyled-components요약웹 개발에서 스타일링은 단순히 보기 좋은 화면을 만드는 것을 넘어, 사용자의 경험을 향상시키고브랜드의 가치를 표현하는 중요한 요소이다. 다양한 스타일링 방법 중에서 CSS, CSS Modules, SCSS, Tailwind CSS, Styled-components는각각의 장단점과 활용 방식으로 주목받고 있다. 이번 포스팅에서는 이들 스타일링 도구와 방법을 비교하며, 상황에 맞는 선택을 할 수 있도록 탐구해 보려 한다.- CSS CSS는 Cascading Style Sheets의 줄임말이며,전통적인 스타일링 언어로, HTML 요소의 스타일을 정의한다. 정적 스타일링 방식으로, 아래와 같은 방식을 따른다...

- 제네릭이란? 제네릭은 타입을 미리 지정하지 않고 사용하는 시점에 타입을 정의해서 쓸 수 있는 문법을 말한다.// 제네릭 함수function identity(value: T): T { return value;}console.log(identity(42)); // 42console.log(identity("hello")); // hello 위의 코드에서는 를 통해서 제네릭을 지정했다. 그로 인해 number 타입, string 타입이 성공적으로 출력되는 것을 확인할 수 있다.  아래의 코드는 유니온 타입을 제네릭으로 바꾼 예시이다.const firstElement = (elements: number[] | string[]) => elements[0];firstElement([1, 2, ..

- 인터페이스란? 인터페이스는 객체 타입을 지정할 때 사용하는 문법이다. 인터페이스는 다음과 같은 문법을 가진다.interface 타입명 { 속성:타입, ...}  다음은 인터페이스가 병합되는 코드이다.// interface1.tsinterface Person { name: string; age: number;}// interface2.tsinterface Person { email: string; phone?: string;}// main.tsconst john: Person = { name: "John Doe", age: 30, email: "john.doe@example.com", phone: "123-456-7890"};console.log(john);  인터페이스는 상..