반응형

2025/01 20

ReactJS _ useState()

React.useState()는 React Hook 중 하나로, 함수형 컴포넌트에서 상태(State)를 관리할 수 있도록 도와줍니다. 이전에는 클래스형 컴포넌트에서만 상태를 관리할 수 있었지만, useState()가 도입됨으로써 함수형 컴포넌트에서도 쉽게 상태를 사용할 수 있게 되었습니다. useState()는 컴포넌트의 랜더링을 트리거하며, 컴포넌트 내의 데이터 변화를 관리하는 핵심적인 도구입니다.  useState() 함수의 기본 구조state : 현재 상태 값setState : 상태를 업데이트하는 함수initialValue : 상태의 초기값으로 문자열, 숫자, 객체, 배열 등 모든 값이 될 수 있음const [state, setState] = React.useState(initialValue);fu..

JavaScript _ 다차원 배열

JavaScript 배열은 다차원 배열(Multidimensional Array)을 지원합니다. 다차원 배열이란 배열 안에 배열이 요소로 포함된 구조를 의미합니다. 가장 흔히 사용되는 형태는 2차원 배열과 3차원 배열입니다. 이러한 배열은 데이터를 행렬, 표, 그래프 등으로 표현할 때 자주 사용됩니다.  2차원 배열 (2D Array)배열의 요소가 배열인 구조입니다.행(Row)과 열(Column) 형태로 데이터를 저장합니다.주로 테이블, 행렬, 게임 보드, 지도 등을 표현할 때 사용합니다.const matrix = [    [1, 2, 3],    [4, 5, 6],    [7, 8, 9]];console.log(matrix[0][0]);    // 1 (첫번째 행, 첫번째 열)console.log(ma..

JavaScript _ 프로토타입 (Prototype)

JavaScript는 프로토타입 기반(Prototype-based) 언어입니다. 객체 지향 언어이지만, 클래스 기반 언어인 Java, C++ 등과 다르게 프로토타입 체인(Prototype chain)을 통해 상속을 구현합니다. 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체(Prototype object)를 참조하며, 이 프로토타입 객체를 통해 다른 객체로부터 속성과 메서드를 상속받습니다.  프로토타입의 기본 개념JavaScript의 모든 객체는 __proto__라는 숨겨진 링크를 가지고 있으며, 이를 통해 다른 객체의 프로토타입을 참조합니다.객체의 프로토타입은 prototype이라는 특수한 속성을 통해 상속 메서드를 제공합니다.  객체 생성과 프로토타입 연결function Player(name, ..

1인가구 요리 _ 돼지고기 김치찌개

끼니 연속 먹어도 크게 물리지 않는 찌개! 김치를 사먹는 입장에서는김치 소모량이 큰게 장점이자 단점이랄까.묵은김치를 한방에 소모할 수 있지만갓 사온 김치를 많이 써야할 수도 있는... 그치만이도저도 귀찮은 날밑반찬이 마땅찮은 날그리고 비오는날!돼지고기 듬뿍 들어간 김치찌개 하나면밥 한공기 뚝딱 완전 가능 :) 그리고 두부 반 모는 찌개에,남은 반 모는 들기름에 부쳐먹으면환상의 짝꿍이라는거~☆   메인 재료1~2인분 기준 돼지고기 - 찌개용 200g김치 - 250 ~ 300g대파 - 1/3대두부 - 1/2모 다진마늘 1큰술고춧가루 1/2큰술새우젓 1큰술코인육수 2알물 700ml   ▼ 4인분 기준 재료 ▼더보기돼지고기 - 찌개용 400g김치 - 600g대파 - 1대두부 - 1모 다진마늘 1큰술고춧가루 2큰..

ReactJS _ React Hook 이란?

Hook은 React 16.8버전에서 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 기능을 사용할 수 있게 해줍니다. Hook은 React의 핵심 기능 중 하나로, 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 관리하거나, 컴포넌트의 생명주기를 처리할 수 있도록 합니다. 대표적인 Hook으로는 useState(), useEffect(), useContext() 등이 있으며, 이를 통해 코드의 가독성을 높이고 재사용 가능한 로직을 작성할 수 있습니다.  Hook의 특징함수형 컴포넌트 전용 : Hook은 클래스형 컴포넌트에서는 사용할 수 없습니다.상태 및 라이프사이클 관리 : useState()로 상태 관리, useEffect()로 라이프사이클 이벤트를 처리할 수 있습니다.재사용 ..

Procreate _ 레이어 옵션 2

블렌드 모드(혼합모드)는 위에 있는 레이어가 아래 레이어와 상호작용하므로,레이어 순서에 따라 결과가 달라질 수 있다. 1. 곱하기 (Multiply)기능아래 레이어와 곱셈 방식으로 색상을 혼합하여 어둡게 만듭니다.활용법그림자 추가, 어두운 색감을 표현할 때 유용 2. 어둡게 (Darken)기능두 레이어 중 더 어두운 색상을 선택하여 유지합니다.활용법특정 부분의 어두운 디테일을 강조 3. 색상 번 (Color Burn)기능색상을 더 깊고 강렬하게 어둡게 만듭니다.활용법강렬한 대비나 드라마틱한 느낌을 줄 때 4. 선형 번 (Linear Burn)기능색상을 더 어둡고 강렬하게 혼합하지만, 대비가 덜 극단적입니다.활용법자연스러운 어두운 효과를 낼 때 5. 어두운 색상 (Darker Color)기능두 레이어를 비..

Procreate _ 레이어 옵션 1

프로크리에이트를 쓰려고 하는데 용어를 하나도 모르겠다.그렇다고 매번 검색해보면서 찾아보는것도 귀찮고 (...)그래서, 내가 편하게 보려고 간단하게 작성해보는프로크리에이트 기능 요약본~!    01. 이름변경 (Rename)기능레이어의 이름을 변경활용법여러 레이어를 사용하는 복잡한 작업에서 각 레이어의 이름을 기능이나 요소에 따라 지정하면 정리와 탐색이 더 쉬워집니다. 02. 선택 (Select)기능선택한 레이어의 내용(픽셀)을 선택 영역으로 지정활용법선택 영역을 만든 뒤, 특정 부분에만 색칠하거나 효과를 추가할 때 사용합니다. 03. 복사하기 (Copy)기능현재 레이어의 내용을 클립보드에 복사활용법레이어의 이미지를 다른 캔버스나 같은 캔버스의 다른 위치에 붙여넣을 때 사용합니다. 04. 레이어 채우기 (..

ReactJS _ export default

export default는 JavaScript ES6 모듈 시스템의 문법으로, 모듈에서 기본적으로 하나의 값만 내보낼 수 있도록 하는 방식입니다. React에서는 컴포넌트, 함수, 클래스 등을 export default를 통해 외부 모듈로 내보내고 import 키워드를 통해 다른 파일에서 불러와 사용할 수 있습니다. React 프로젝트에서는 주로 기본 컴포넌트를 내보낼 때 export default를 사용하여 직관적이고 간단한 import 문법을 제공합니다.  export default의 기본 사용법export default를 사용하면 모듈을 가져올 때 임의의 이름으로 import 할 수 있습니다.// Button.jsfunction Button() {    return Click here;}expor..

ReactJS _ 폰트 추가 및 설정

React 앱에서 특정 커스텀 폰트를 앱 전반에 걸쳐 기본 폰트(Default Font)로 설정하기 위해서는 @font-face를 사용하여 폰트를 등록하고, body, html, *를 사용하여 모든 요소에 일괄적으로 적용하면 됩니다.  폰트 파일 준비src 폴더 내에 fonts 라는 폴더를 생성fonts 폴더에 추가하고자 하는 폰트 파일을 저장 (.ttf) @font-face 설정index.css 파일에 @font-face 규칙을 추가하여 폰트 등록html, body, * 선택자를 사용하여 모든 요소에 기본 폰트로 적용 가능sans-serif는 폰트가 로드되지 않았을 때 대체될 폰트/* index.css */// 폰트 파일명이 custom.ttf 라고 가정@font-face {    font-family..

ReactJS _ JSX란?

JSX는 JavaScript XML의 약자로, JavaScript를 확장한 문법입니다. JSX는 React에서 주로 사용되며, HTML과 유사한 문법으로 UI 컴포넌트를 정의합니다. JavaScript 코드 내에서 HTML 태그를 직접 작성할 수 있도록 해주어 코드의 가독성과 유지보수성을 높여줍니다. JSX는 브라우저가 이해할 수 있도록 Babel과 같은 컴파일러를 통해 JavaScript 코드로 변환됩니다.  JSX의 특징1. HTML과 유사한 문법JSX는 JavaScript 코드 안에 HTML과 비슷한 태그를 작성할 수 있습니다.const element = Hello, world!;// 컴파일 시 변환되는 결과물const element = React.createElement('h1', null, 'H..

반응형