![]()
map 함수 1. map( ) 함수 - 배열(Array)의 각 요소에 대해 주어진 함수를 호출하여, 새로운 배열을 생성하는 함수 2. map( ) 함수 구문 - function : 배열의 각 요소에 대해 실행될 함수 (3개의 매개변수를 가짐) - currentValue : 현재 처리 중인 요소의 값 - index : 현재 요소의 인덱스 - array : map( ) 함수가 호출된 배열 자체 - thisArg : function 내부에서 사용할 this의 값 (선택사항) array.map(function(currentValue, index, array) { // 변환 또는 가공 작업을 수행하는 코드 }, thisArg); 3. 예시 const numbers = [1,2,3,4,5]; const twiceN..
![]()
props 1. props - React 라이브러리를 사용하는 컴포넌트 기반의 웹 애플리케이션에서 사용되는 용어 - React 컴포넌트는 함수 or 클래스 형태로 정의될 수 있으며, 이들은 속성을 받아들일 수 있음 - 이러한 속성들은 컴포넌트 내부에서 사용되어, 컴포넌트의 동작 or 표시 내용을 결정하는데 활용 2. 사용방법 - ProductListItem.js import React, { useState } from "react"; function ProductListItem(props) { // props를 사용하여, 데이터 전달 const imgNo = props.imgNo; const productName = props.name; const productPriceFormatted = props.p..
![]()
JSX 1. JSX (JavaScript XML) - React와 같은 JavaScript 라이브러리를 위해 만들어진 확장 문법 - JavaScript 코드 안에서 XML과 비슷한 형태의 마크업을 작성할 수 있음 2. JSX의 특징 - JavaScript의 확장 문법이기 때문에, JavaScript 코드와 매우 유사 - XML과 비슷한 구조를 가지고 있어, 태그들을 사용하여 컴포넌트를 정의 및 중첩 가능 - JSX 조각을 별도의 변수로 분리 가능 3. 예시 - NumberCounter.js import React, { useState } from "react"; const NumberCounter = () => { const [no, setNo] = useState(0); // 별도의 변수로 분리 con..
![]()
setTimeout 함수 1. setTimeout 함수 - 비동기적인 실행을 할 때, 사용되는 타이머 함수 - 특정 코드 블록을 지정된 시간 후에 실행할 수 있음 2. setTimeout 함수의 구문 - callback : 지연 후 실행될 함수 - delay : 실행을 지연시킬 시간을 밀리초 단위로 정수값으로 지정 - arg1, arg2, ... : 콜백 함수에 전달할 인수들 setTimeout(callback, delay, arg1, arg2, ...); 3. 예시 function hello() { console.log("실행3"); } // 실행3은 바로 실행되지 않고, 3초 뒤에 실행됨 setTimeout(hello, 3000); console.log("실행1"); console.log("실행2")
![]()
useMemo 1. useMemo - 복잡한 연산 or 계산이 필요한 값을 Memoization하여, 성능을 최적화하는 데 사용 ※ Memoization : 이전에 계산한 값을 저장하여, 동일한 입력이 주어질 때, 다시 계산하는 대신, 저장된 값을 반환 - 특정 값이변경될 때만, 해당 값을 다시 계산하고, 그렇지 않은 경우, 이전에 계산된 값을 재사용할 수 있음 2. 사용방법 const a = useMemo(() => { // 계산하고자 하는 값 or 연산 }, [b]); - [b] : 의존성 목록으로, 이 목록에 포함된 값들이 변경될 때에만 useMemo의 콜백 함수를 실행 ※ 의존성 목록이 변경되지 않으면, 이전에 계산된 값을 재사용함 ※ 의존성 목록 생략 시, useMemo의 콜백 함수는 한 번만 ..
![]()
Figma 편집 기능 1. Figma 편집 기능 - Figma에서는 다양한 편집 기능이 존재 2. 코멘트 Tool - 코멘트를 남기는 기능 3. Hand Tool - 화면을 드래그해서 이동하는 기능 ※ 다른 Tool을 사용 중인 경우, Space 키를 누르고 있으면, Hand Tool이 유지 4. Text - 텍스트를 입력함 (오른쪽 속성 창에서 상세 설정 가능) 5. Pen Tool - 점을 찍어서, 선과 면을 만드는 기능 (모든 점을 이으면, 면이 생김) 6. Pencil - 선을 그리는 기능 7. Frame - 도형 or 텍스트 같은 모든 요소를 묶고 새로운 기준점을 만드는 기능 - 프레임 안에서 새로운 프레임 생성 가능 - 보통 프레임 안에서, 디자인 작업이 이뤄짐 8. Group - 다른 요소를..
![]()
프로토타이핑(Prototyping) 1. 프로토타이핑 - 디지털 제품의 아이디어 or 디자인 컨셉을 시뮬레이션하고 검증하기 위해 사용되는 과정 ※ 프로토 타입은 실제 UX를 시뮬레이션 하기 위해 구축된 모델 or 시스템 2. 장점 - 아이디어 검증 - 초기 아이디어의 유효성과 실행 가능성을 평가받고 피드백 받음 - 사용자 피드백 수집 - 사용자의 요구사항과 선호도를 이해하고 피드백을 수집함 - 협업과 의사소통 - 디자이너, 개발자, 이해관계자들 간의 의사소통과 협업을 원활하게 함 - 비용 절감 - 제품 개발 초기에 문제점을 발견하고 수정함으로써 추후에 발생할 수 있는 비용과 시간을 절감함 3. 프로토타입 도구 - Figma, Sketch, Adobe XD, InVision, Axure RP 등이 사용됨
![]()
와이어 프레임(Wire Frame) 1. 와이어 프레임 - 디지털 제품의 구조와 레이아웃을 시각적으로 표현하는 것 - 디자인 단계에서 초기 아이디어를 시각화하고 공유하기 위해 사용 - 간단한 선과 기본적인 도형으로 구성 (실제 콘텐츠 or 디자인 요소들의 디테일은 제외) 2. 와이어 프레임의 장점 - 아이디어 시각화 - 디자이너와 개발자 간에 아이디어를 명확하게 공유하고, 이해하기 쉽게 만듦 - 레이아웃 설계 - 콘텐츠와 구성 요소들의 배치를 결정해, UX를 개선할 수 있음 - 사용자 흐름 분석 - 사용자의 상호작용과 페이지 이동 경로를 이해하고 테스트하기 위해 사용 - 개선과 반복 - 비교적 빠르게 수정이 가능해, 디자인 개선과 반복을 촉진함
![]()
Figma 1. Figma - 웹 기반의 협업 디자인 플랫폼 - UI(User Interface) 디자인, UX(User Experience) 디자인, 프로토타입 제작을 위한 다양한 기능을 제공 - 웹 브라우저에서 작동하며, Windows, macOS 및 Linux 운영 체제를 지원 - 팀 멤버들과 실시간으로 디자인 파일을 공유하고 코멘트를 작성할 수 있는 기능을 제공
![]()
Reducer 1. Reducer - 상태 관리를 위해 사용 - 복잡한 상태를 가진 컴포넌트에서 상태 업데이트 로직을 분리하여 관리할 수 있음 - 즉, 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수임 2. 사용방법 - ReducerEx.js import React, { useReducer } from "react"; function reducer(state, action) { switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DECREMENT": return { value: state.value - 1 }; default: return state; } } const ReducerE..
![]()
Context 1. Context - React 애플리케이션에서 컴포넌트 간에 데이터를 전달하는 메커니즘 - 중간 컴포넌트를 건너뛰고, 컴포넌트 트리 내에서 데이터를 직접 전달할 수 있음 - 즉, Context는 state를 쉽게 공유할 수 있게 함 2. 사용방법 - ContextEx.js import React, { createContext, useContext } from "react"; // Context를 사용하여, background의 색을 지정 const ThemeContext = createContext("pink"); const ContextEx = () => { const theme = useContext(ThemeContext); const style = { width: "100px",..
![]()
useEffect 1. useEffect - React 라이브러리에서 제공하는 훅(Hook) 중 하나 - 함수형 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용 ※ 여기서 부작용이란? 컴포넌트 외부와의 상호작용을 의미 - useEffect를 사용 시, 컴포넌트가 렌더링되고 난 후, 특정 작업을 수행할 수 있음 - 컴포넌트의 생명주기와 관련된 작업을 처리 ※ 컴포넌트 생명주기 : 컴포넌트가 생성되고 소멸될 때까지의 과정 - useEffect 함수는 두 개의 매개변수를 받음 - 첫 번째 매개변수는 작업을 담은 콜백 함수 (컴포넌트가 렌더링될 때마다 실행됨) - 두 번째 매개변수는 의존성 배열(dependency array)로, 배열에 지정된 값이 변경될 때만 콜백 함수를 실행 2. 사용방법 ..
![]()
useState 1. useState - React 라이브러리에서 제공하는 훅(Hook) 중 하나 ※ 훅(Hook) : 함수형 컴포넌트에서 상태(State) 관리와 기능들을 사용하기 위한 기능을 제공하는 함수 - 함수형 컴포넌트에서도 상태(State)를 관리할 수 있음 - 배열 형태의 반환값을 가지며, 배열의 첫 번째 요소는 현재의 상태 값, 두 번째 요소는 상태 값을 변경할 수 있는 함수 2. 사용법 - Counter.js import React, { useState } from "react"; const Counter = () => { // 변수 선언 const [value, setValue] = useState(0); return ( 현재 카운터 값은 [{value}]입니다. {/* 버튼 클릭 시,..
![]()
외부 컴포넌트 파일을 이용한 출력 1. 외부 컴포넌트 파일을 이용한 출력 - React는 외부 컴포넌트 파일을 이용하여 출력할 수 있음 - 효율성이 높고, 수정이 용이함 2. 사용방법 - 외부 파일을 하나 생성 (ex : HelloWorld.js) - 외부 파일에 다음과 같이 입력 - HelloWorld.js에 다음과 같이 입력 import React from "react"; const HelloWorld = () => { return ( Hello World!! ); }; export default HelloWorld; - App.js에 다음과 같이 입력 import React from "react"; // import로 외부 컴포넌트를 불러옴 import HelloWorld from "./HelloW..
![]()
React 1. React - 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리 - 컴포넌트 기반 아키텍처를 사용하여 웹 및 모바일 애플리케이션의 UI를 구축하는 데 사용 - JSX라는 문법을 제공하여, JavaScript와 HTML을 조합하여, 컴포넌트를 작성할 수 있도록 함 ※ JSX : JavaScript XML의 약자로, React와 함께 사용되는 JavaScript 확장 문법 - 다양한 확장성과 유용한 라이브러리 및 도구를 제공 2. React 설치 - npx를 사용하기 위해 node.js를 설치함 - 원하는 폴더에 cmd로 접속한 후, npx create-react-app . 이라고 입력 - 그 후, VScode에 들어간 뒤, 터미널에 npm run start 라고 입력 - 그러면..
