728x90 반응형 📌 Front End147 [JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce() 리스트 컴프리헨션(List Comprehension)배열이나 리스트를 간결하게 생성하는 문법을 의미합니다.리스트 컴프리헨션은 리스트를 짧고 직관적인 방식으로 생성하거나 변형할 수 있는 문법입니다.메서드설명map()배열의 각 요소를 변형하여 새로운 배열 생성(원본배열 유지)filter()조건에 맞는 요소만을 포함하는 새로운 배열 생성(원본배열 유지)find()배열에서 조건을 만족하는 첫 번째 요소의 값을 반환조건에 맞는 요소가 없다면 undefined를 반환(원본배열 유지)from()유사 배열 객체나 반복 가능한 객체를 배열로 변환(원본배열 유지)fill()배열의 모든 요소를 특정 값으로 채우기시작과 끝 인덱스를 지정하여 배열의 일부만 채운다.(원본배열 변경)reduce()배열의 요소를 누적하여 단일 값을.. 2024. 8. 22. [JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터 스프레드 연산자 (. . .)세개의 점(. . .)으로 이루어진 연산자는기존 배열객체의 값을 그대로 복사해와서 사용할 수 있는 연산자라고 할 수 있다.객체는 이런 spread 연산자를 많이쓰고 배열은 원본을 건드리지 않고 사본을 만들어주는 내장함수 (map, filter, reduce, concat) 을 통해 다양한 처리를 할수 있다. 배열 복제 · 병합 · 변경 · 추가객체 복제 · 병합 · 변경 · 추가 함수 매개인자rest 파라미터 - 함수rest 파라미터 - 객체 · 배열let array = [1,2,3,4,5];/* ... ➡️ 스프레드 문법(점 3개) 배열 안에 있는 항목들(요소들)을 전부 꺼내준다. 즉 [...array]은 array에 있는 항목을 전부 꺼내 .. 2024. 8. 21. [React] 리액트 내장 컴포넌트(Fragment, Profiler, StrictMode, Suspense, lazy) 내장 컴포넌트리액트는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공합니다.내장 컴포넌트설명..., 또는 ... 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.여러 JSX 노드를 하나의 그룹으로 묶고 싶을 때 사용하는 컴포넌트리액트 컴포넌트가 얼마나 빠르게 렌더링되는지를 측정하고, 성능을 분석할 수 있게 도와주는 컴포넌트개발 중에 잠재적인 문제를더 빨리 찾아내고 해결할 수 있도록 돕는 컴포넌트React.lazy()자식 컴포넌트를 로딩하는 동안 fallback을 표시할 수 있습니다.자식 컴포넌트를 비동기적으로 로딩할 때, 로딩이 완료되기 전까지 보여줄 화면을 지정 내장 컴포넌트 사용방법 (import)리액트에서 기본 태그나 내장 컴포넌트들을 사용하기 위해서는 import를 통해 해당.. 2024. 8. 21. [React] 리액트 사용자 정의 함수형 컴포넌트(Functional Component) - 클래스와 객체 인스턴스를 사용해 데이터 관리 🏷️ 요약이 애플리케이션은 리액트를 사용하여 책 정보를 화면에 표시하는 기능을 구현하고 있습니다.각 컴포넌트는 리액트의 함수형 컴포넌트로 정의되어 있으며,책 객체는 클래스를 사용해 생성되었습니다. 'App' 컴포넌트는 책 목록을 관리하고 'Library' 컴포넌트에 전달합니다.'Library' 컴포넌트는 책 목록을 반복하여 'BookShow' 컴포넌트를 통해 표시합니다.'BookShow' 컴포넌트는 개별 책의 정보를 화면에 렌더링합니다.🧱 사용자 정의 - 함수형 컴포넌트App, Library, BookShow는 모두 리액트의 함수형 컴포넌트입니다.이 컴포넌트들은 UI를 구성하는 역할을 합니다. ✴️ 클래스와 new 키워드 사용Book 클래스는 책의 데이터 정보를 정의하고, new 키워드를 사용해 책 .. 2024. 8. 18. [React] React Vite TypeScript 개발환경 세팅하기 (Vite 설정 파일 - root: "./" 변경) 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/214 [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기"📁components" 폴더 (main.tsx)"📜index.html" 파일"📜vite.config.ts" 파일"📜tsconfig.json" 파.. 2024. 8. 17. [React] 리액트 컴포넌트(Component)와 Props 속성 컴포넌트(Component)컴포넌트(component)란 프로그래밍에서 재활용 가능한 독립적인 모듈을 의미합니다. 리액트나 뷰(Vue.js)와 같은 프론트엔트에서 컴포넌트는 앱의 화면을 구성하는 가장 기본적인 단위입니다. 컴포넌트는 독립적이고 덜 의존적이기 때문에 한번 호출해서 사용하는 걸로 끝나는 것이 아니라 여러번에 걸쳐 재사용될 수 있습니다.리액트 컴포넌트는 아래 코드와 같이 JSX 코드로 작성한 리액트 요소(element)를 반환하는 함수식으로 작성됩니다. 컴포넌트를 정의할때 함수명은 보통 맨 앞자마다 대문자로 표기하는 파스칼케이스(PascalCase)로 작성합니다.리액트 함수형 컴포넌트는 반드시 리액트 Element를 return해야 합니다.const BoxComponent = () => { .. 2024. 8. 17. [React] 리액트 JSX(TSX) 문법 ❓리액트(React)리액트는 프론트엔드 개발을 위한 Javascript의 오픈소스 라이브러리이다. HTML, Javascript만으로도 충분히 웹을 만들 수 있는데 왜 리액트를 사용하는걸까?JavaScript에서는 DOM 을 변형시키기 위하여브라우저의 DOM Selector API를 사용해서 특정 DOM 을 선택한 뒤,특정 이벤트가 발생하면 변화를 주도록 설정해야했다. 이를 이용하여 프로젝트를 진행했을 때 규모가 커질 수록 Dom Selector를 많이 쓰게 되고,그러한 코드가 쌓여갈 수록 매우 지저분하다는 생각이 들었다.사실 하나씩 불러오는 것도 매우 귀찮았다. 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 한다면관리하기도 힘들고, 규모가 커질 수록 성능 저하의 원인이 될 수도 있는 문제가.. 2024. 8. 17. [React] React Vite TypeScript 개발환경 세팅하기 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/214 [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기"📁components" 폴더 (index.html, main.tsx)"📜vite.config.ts" 파일"📜tsconfig.json" 파일"📜pa.. 2024. 8. 14. [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기 비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록 확장되었습니다. 📌 Vite의 장점장점설명빠른 시작 속도기존 번들러에 비해 개발 서버 시작 속도가 매우 빠릅니다.개발 생산성HMR(핫 모듈 교체)를 통해 변경된 파일을 다시 로드하여 애플리케이션을 즉시 업데이트합니다.모던 개발 경험최신 JavaScript 기능과 ES 모듈을 기본적으로 지원합니다.작은 번들 크기Rollup을 통해 최적화된 생산 빌드를 생성하여 작은 번들 크기를 유지합니다. 📌 Vite 지원하는 템플릿JavaScriptTypeScriptvanillavanilla-tsvue.. 2024. 8. 14. 이전 1 2 3 4 5 6 7 8 ··· 17 다음 728x90 반응형
