'🧩Front-End' 카테고리의 글 목록

Webpack vs Vite: 프론트엔드 빌드 도구 비교

2024.10.29·

🧩Front-End

💎웹팩(Webpack)https://webpack.kr/ webpack웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.webpack.kr 웹팩은 프론트엔드 생태계에서 오랜 시간 동안 가장 널리 사용된 모듈 번들러로, 복잡한 프로젝트에서도 안정적으로 사용할 수 있는 강력한 기능을 제공합니다. 웹팩은 파일을 모듈 단위로 관리하며, 다양한 리소스(자바스크립트, CSS, 이미지 등)를 번들링하여 최적화된 웹 애플리케이션을 만듭니다.웹팩(Webpack) 주요 개념작동 방식 : 웹팩은 모든 파일을 하나의 큰 번들(bundle)로 묶어 브라우저가 필요한 리소스를 쉽게 로드하도록 합니다..

[React] 리액트에서 폼 유효성 검사하기(Formik, Yup, react-hook-form)

2024.09.21·

🧩Front-End

이 게시물에서는 리액트에서 폼 유효성 검사를 구현하는 여러 방법을 소개합니다. JavaScript를 이용한 기본 검증 방식부터, Yup, Formik, 그리고 성능 최적화에 강점이 있는 react-hook-form까지 비교하여 설명하겠습니다.🙂 1️⃣ JavaScript로 직접 구현하는 경우리액트에서 가장 기본적인 방식으로, 유효성 검사를 JavaScript로 직접 구현하는 방법입니다.import { useState } from 'react';function MyForm() { const [name, setName] = useState('');✨ const [age, setAge] = useState('');✨ const [errors, setErrors] = useState({});✨ cons..

[React] 리액트 프로젝트 vs 스프링부트 프로젝트 with 리액트

2024.09.10·

🧩Front-End

React는 사용자 인터페이스(UI)를 구축하는 데 많이 사용되는 프론트엔드 라이브러리입니다. React를 단일 프로젝트로 개발할 수도 있고, 스프링부트(Spring Boot)와 통합하여 사용할 수도 있습니다. 두 가지 방식의 주요 차이점과 각각의 설정 및 사용 방법을 설명하도록 하겠습니다.🙂 📌 React 단일 프로젝트React 단일 프로젝트는 백엔드 없이 프론트엔드만 독립적으로 개발하는 방식입니다. 사용자는 주로 UI 구성에 집중하며, API 호출로 데이터를 주고받습니다.✔️ 특징독립적인 프론트엔드 프로젝트 : 백엔드 없이도 React만으로 사용자 인터페이스를 구축할 수 있습니다.간편한 초기 설정 : create-react-app으로 간단하게 프로젝트를 시작할 수 있으며, 개발 서버 실행 및 ..

[React] Axios 라이브러리에서 process/browser 모듈을 찾지 못하는 문제 해결하기

2024.09.09·

🧩Front-End

💡 해결 방법 : Webpack 설정 수정아래 코드를 Webpack 설정에 추가하여 .mjs 또는 .js 파일을 처리할 때 확장자를 명시하지 않아도 되도록 설정할 수 있습니다. 이 설정은 특히 axios나 다른 모듈에서 발생하는 확장자 문제를 해결하는 데 유용합니다.👍module.exports = { module: { rules: [ { test: /\.m?js$/, // .mjs 또는 .js 파일을 처리 resolve: { fullySpecified: false // 확장자를 명시하지 않아도 되도록 설정 } } ] ..

[React] Webpack 빌드 완료 시간 터미널에 출력하기(npm run watch)

2024.09.08·

🧩Front-End

💡 터미널 출력 화면💡 코드 화면💡 소스 코드const webpack = require('webpack');module.exports = { // ... 기존 설정 plugins: [ // Webpack 빌드가 완료되면 시간을 출력하는 플러그인 function () { // Webpack의 done 후크를 사용하여 빌드가 완료될 때 호출 this.hooks.done.tap('DonePlugin', (stats) => { const now = new Date().toLocaleString(); // 콘솔에 빨간색 구분선 및 메시지 출력 consol..

[React] Props 전달 방법 10가지 예제로 살펴보기

2024.09.06·

🧩Front-End

리액트에서 props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 중요한 메커니즘입니다. 이 문서에서는 기본 props 전달부터 스프레드 연산자, Context API, 그리고 children을 사용한 props 전달까지 다양한 10가지 방법을 다룹니다. 각각의 방식이 코드의 가독성과 유지 보수성을 높이는 데 어떻게 기여하는지 실용적인 예제를 통해 쉽게 이해할 수 있습니다.🙂 1️⃣ 기본 props 전달가장 기본적인 방법으로, 부모 컴포넌트에서 자식 컴포넌트로 직접 props를 전달합니다.// 부모 컴포넌트function Parent() { // 'color'라는 이름의 props를 Child 컴포넌트에 전달합니다.✨ return ;}// 자식 컴포넌트function Child(props) ..

[React] JSX 문법 17가지 빠르게 살펴보기

2024.09.06·

🧩Front-End

https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 💡 JSX란?JSX는 JavaScript의 확장 문법으로, HTML과 JavaScript를 결합 하여 UI를 더 직관적으로 구성할 수 있게 합니다. HTML 코드처럼 보이지만 실제로는 JavaScript 객체로 변환되어 브라우저에서 사용되며, 웹팩(Webpack) 로더를 통해 코드가 수정될 때마다 자동으로 화면이 갱신(리렌더링) 됩니다. 주로 리액트에서 사용되지만, 다른 라이브러리에서도 활용할 수 있습니다. * React는 UI를 만들기 위한 라이브러리이..

[JS] ES6 문법 8가지 예제로 살펴보기

2024.09.06·

🧩Front-End

https://www.w3schools.com/js/js_es6.asphttps://developer.mozilla.org/ko/docs/Web/JavaScript JavaScript | MDNJavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼developer.mozilla.org 💡 개요ES : "ECMAScript"의 약어이며, JavaScript의 표준 스펙을 정의하는 규격을 말한다.6 : 2015년에 발표된 6번째 주요 버전이라는 의미이다.ES6(ECMAScript 2015)은 코드의 가독성..

[목차] 리액트를 다루는 기술(개정판)

2024.08.31·

🧩Front-End

https://product.kyobobook.co.kr/detail/S000001792882 리액트를 다루는 기술 | 김민준 - 교보문고리액트를 다루는 기술 | 본문과 소스 전면 업그레이드! 기본기를 꼼꼼하게! 실전에서 효과적으로 활용하는 방법까지 알차게 배우자! 개정판이 나왔습니다. 리액트 16.8 버전에 Hooks라는 기능이 도product.kyobobook.co.kr28장을 임의로 8개 파트로 나누었습니다🙂 1️⃣ 리액트 기본 및 JSX✔️1장 리액트 시작__1.1 왜 리액트인가?____1.1.1 리액트 이해__1.2 리액트의 특징____1.2.1 Virtual DOM____1.2.2 기타 특징__1.3 작업 환경 설정____1.3.1 Node.js와 npm____1.3.2 yarn____1.3..

[React] 리액트 개요 및 환경설정 가이드

2024.08.31·

🧩Front-End

https://ko.react.dev/ ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizatiko.react.dev 💡리액트(React)란?리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. 리액트는 MVC(Model-View..

[Front-End] React, Angular, Vue.js 간단 비교

2024.08.23·

🧩Front-End

React, Angular, Vue.js는 모두 인기 있는 프론트엔드 라이브러리 또는 프레임워크로, 각기 다른 특징과 장단점을 가지고 있습니다. 🙂1️⃣ React유형 : 라이브러리 * 다양한 추가 기능들을 결합하면 프레임워크처럼 작동할 수 있기 때문에 React를 프레임워크라고 부르기도 합니다.창시자 : Meta (Facebook)주요 특징컴포넌트 기반 : 모든 UI 요소를 독립적인 컴포넌트로 관리하며, 재사용성과 유지보수성이 뛰어납니다.JSX : JavaScript와 HTML을 혼합한 문법(JSX)을 사용해 UI를 정의합니다.Virtual DOM : DOM 변경을 효율적으로 처리해 성능을 최적화합니다.자유도 : 라우팅, 상태 관리, 스타일링 등 추가 기능을 필요에 따라 선택하여 사용할 수..

[JS] 즉시 실행 함수 표현식 (IIFE) vs jQuery ready() 메서드(축약형)

2024.08.22·

🧩Front-End

IIFE와 jQuery ready() 메서드는 비슷한 구조를 갖고 있다.✨ 이 두 방법은 모두 함수 표현식을 활용하여 특정 작업을 수행하며, 코드의 실행 시점을 조절하는 데 도움을 준다.1️⃣ 즉시 실행 함수 표현식 (IIFE)* IIFE : Immediately Invoked Function Expression(function() { // 즉시 실행될 코드})();// 화살표 함수(() => {})();즉시 실행: 이 코드는 정의되자마자 즉시 실행됩니다. 페이지가 로드되기 전 또는 DOM이 준비되기 전에도 실행될 수 있습니다.용도: 주로 전역 스코프 오염을 방지하거나, 초기화 코드 등을 실행하는 데 사용됩니다.DOM 접근: DOM이 준비되지 않았을 때 실행될 수 있으므로, DOM 요소에 접근하는 ..

티스토리툴바