티스토리

Harvey's TechNote

검색하기

블로그 홈

Harvey's TechNote

unbreakableheart.tistory.com/m

개발 관련 학습 내용을 포스팅 합니다.

구독자: 1

방명록 방문하기

주요 글 목록

Kubernetes 개념 정리 개인적으로 파이프라인을 구축하는 학습을 하며 쿠버네티스에 대한 전반적인 개념 정리가 필요할 듯하여 해당 글을 작성했습니다.Kubernetes (K8s)는 컨테이너 관리 시스템으로, 여러 개의 컨테이너를 효율적으로 운영하고 관리하기 위한 플랫폼입니다. Kubernetes의 주요 목적은 클러스터에 정의된 “상태”를 지속적으로 유지하는 것입니다. 즉, 컨테이너가 중단되거나 상태가 변경될 경우, Kubernetes가 자동으로 이를 감지하고 원래의 정의된 상태로 복원합니다.Kubernetes의 주요 개념클러스터 (Cluster)정의: 여러 노드(Node)의 집합입니다.역할: 클러스터는 컨테이너화된 애플리케이션을 실행하기 위해 필요한 자원을 제공합니다.Control Plane정의: Kubernetes의 작업을 처리.. 공감수 1 댓글수 0 2024. 10. 30.
모듈형 블록체인 / 나이트크로우 글로벌과 CROW 토크노믹스 - 2주차 모듈형 블록체인블록체인 트릴레마확장성 : 블록체인이 얼마나 많은 트랜잭션을, 얼마나 빠르게 처리할 수 있는가?탈중앙성: 특정 집단이 통제하는 것이 아닌 서로 다른 개별 참여자들이 합의를 통해 네트워크를 운영 및 관리할 수 있는가?보안성:네트워크에 대한 공격으로부터 블록체인에 기록된 정보 및 자산을 안전하게 지킬 수 있는가? "탈중앙성을 높이려 하면 확장성이 저하되고, 확장성을 높이려 하면 탈중앙성과 보안이 위협받는다."기존 블록체인의 문제인 트릴레마에 대하여 모듈형 블록이 기존 체인과는 다른, 새롭고 흥미로운 방식을 제안한다.기존의 모놀리틱 블록체인모놀리틱 블록체인 구조란 기존 블록체인의 합의, 연산, 세틀먼트, 데이터 가용성(DA)을 같은 장소, 하나의 Layer1에서 전부 처리하는 것을 의미한다. -.. 공감수 0 댓글수 1 2024. 5. 15.
Web3 Community / 우린 왜 디센트 지갑이 있는데도 위핀 지갑을 새로 만들었을까? - 1주차 https://www.youtube.com/@blpas 블파스 - 블록체인 파헤치는 스터디[블파스 - 블록체인 파헤치는 스터디]는 블록체인에 관심은 많은데 혼자 공부하려니 어디서부터 시작해야 할지를 모르겠는 분들이 모여 함께하기 위한 스터디 모임입니다. 스터디에 참가하시면www.youtube.com Web3 Community - 박민 님WEB1/WEB2/WEB3 커뮤니티의 차이 - WEB 1.0중앙화된 기업, 집단을 사용자들이 단순 사용하는 콘텐츠이다. 사용자가 콘텐츠들을 읽는 형태. ex) 블로그나 CNN , 각종 언론사들 - WEB 2.0 중앙화된 기업이 플랫폼들을 제공하면 참여자들이 자신들의 글이나 사진, 동영상 등을 통해 컨텐츠를 퍼블리싱하고 이를 다른 참여자들이 함께 상호작용하며 참여한다. e.. 공감수 0 댓글수 0 2024. 5. 7.
setTokenURI방식으로 Minting // SPDX-License-Identifier: MIT// Compatible with OpenZeppelin Contracts ^5.0.0pragma solidity ^0.8.20;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Pausable.sol";import.. 공감수 0 댓글수 0 2024. 5. 7.
Remix로 컨트랙트 배포 및 실행/Sepolia Remix로 NFT 컨트랙트 배포 및 Minting 하기 NFT를 폴리곤 네트워크상에서 사용자에게 민팅해주는 프로젝트를 진행하게 됐는데 실제 네트워크에 배포 및 실행하기 전 테스트넷(Sepolia)에서 테스팅을 한번 해보려 합니다.저는 제 MetaMask지갑으로 연결하여 Sepolia테스트넷에 접근하는 방식을 선택했습니다. 먼저 배포하고자 하는 코드가 담겨있는 Solidity파일을 추가합니다. 그다음 제가 올려놓은 Solidity파일 컴파일합니다. 제가 올려놓은 코드는 배포 시 Owner 주소가 필요합니다. MetaMask계정으로 컨펌하여 가스비를 지불하고 컨트랙트를 배포합니다. 배포 성공 후 위와 같이 로그가 뜨고 Deployed Contrancts에서 배포한 컨트랙트를 실행할 수 있습니다.그다음 sa.. 공감수 0 댓글수 0 2024. 4. 30.
BuildError-Couldn't find any versions for "@solana/fast-stable-stringify" that matches "workspace:*" Error Vercel에서 Front를 배포하던 중 다음과 같이 Error 코드가 났다. Couldn't find any versions for "@solana/fast-stable-stringify" that matches "workspace:*" Error가 발생하는 시점을 확인해보니 Vercel에서 앱을 Build할시에 발생하는 Error였다. 먼저 로컬 환경에서 Build시에는 Error가 나지 않았고 Vercel 공식 문서를 찾아보았는데 처음에는 Vercel에서 지원하는 Yarn의 Version문제인 듯하여서 로컬환경의 Yarn을 Downgrade를 시키고 작업을 해야 하나 하던 찰나 Vercel공식문서에서 해결법을 찾았다. https://vercel.com/guides/deploying-yar.. 공감수 0 댓글수 0 2024. 4. 18.
MariaDB Error (HomeBrew,MariaDB 재설치) - Failure while executing; `/bin/launchctl bootstrap gui/501 /Users/j/Library/LaunchAgents/homebrew.mxcl.mariadb.plist` exited with 5. ERROR Failure while executing; `/bin/launchctl bootstrap gui/501 /Users/j/Library/LaunchAgents/homebrew.mxcl.mariadb.plist` exited with 5. MariaDB를 설치하고 실행 하는데 위와 같은 오류가 났다. 이전에 시도 했던 방법들은 아래와 같다. MariaDB Restart 하기 -> Restart 하면 잠깐 MariaDB가 started상태로 들어가고 이후에 바로 stopped상태로 자동 변경 되었다. 기존에 깔려 있던 MySQL과의 충돌이 문제라 생각하여 관련 MySQL관련 폴더 삭제 후 MariaDB 재설치하기 https://bsscl.tistory.com/128 위 방법들을 시도해도 같은 에러.. 공감수 0 댓글수 0 2024. 4. 16.
MariaDB를 왜? 새로 입사하게 된 회사에서 다른 DB들과 함께 MariaDB를 사용한다. MariaDB를 처음 사용 해보고 접해보는 입장에서 MySQL과 크게 다르지 않아보이는 MariaDB를 왜 사용하는지, 무슨 장점이 있는지, 앞으로 어떻게 써나가야 하는지에 대해 공부하고 싶어 블로그에 글을 남긴다. MariaDB란 무엇인가? MariaDB는 오픈 소스 관계형 데이터베이스(RDBMS)로 MySQL에서 분기된(Fork) 프로젝트이다. 인기 RDBMS였던 MySQL의 여러 포크 버전들 중 하나인 것. MariaDB를 사용하는 이유 호환성 MariaDB는 MySQL과 완벽 호환 및 기존 MySQL을 사용하던 프로젝트들을 쉽게 이전 가능하다. 성능 상황에 따라 MySQL보다 더 빠른 성능을 제공한다. 일부 쿼리 및 작업에 .. 공감수 0 댓글수 0 2024. 4. 13.
AWS S3로 클라이언트(정적 웹사이트) 배포하기 AWS S3로 클라이언트(정적 웹사이트) 배포하기 1) 버킷을 만들어 준다. 2) 모든 퍼블릭 엑세스 차단 체크를 풀어준다 3) 버킷을 만들고 정적 웹사이트 호스팅 편집에서 활성화를 해준다. 4) 버킷 엔드포인트가 이렇게 생성되면 이 주소를 통해 웹 프론트에 접근할 수 있게 된다. 그리고 Client 내부 Build폴더 안의 모든 파일을 드래그해서 업로드한다. 5) 마지막으로 S3 버킷 정책 설정이다. 권한 → 버킷 정책 편집 → 버킷 ARN 복사 → 정책 생성기 클릭 정책 생성하기. Select Type of Policy - S3 Bucket Policy Principle - * Actions - GetObject Amazon Resource Name (ARN) - 복사한 ARN값+/* →/*를 꼭 뒤.. 공감수 0 댓글수 0 2024. 3. 18.
AWS EC2 (Server 배포) *AWS 인스턴스에 Server 띄우기 인스턴스 시작 이름 및 운영체제 선택(ubuntu) AWS컴퓨터에 접근 권한으로 사용하는 키 페어 생성 터미널을 이용해 접근 할 때는 .pem형식의 키 파일 형식 선택 (openSSH), Storage 설정 인스턴스 생성 완료 보안 탭에서 보안 그룹 클릭 인바운드 규칙 설정(원하는 허용 포트 설정) 기본 적으로 git은 깔려있기에 git clone을 통해 파일 받아오기 Ubuntu OS 업데이트 Npm 설치 MongoDB를 Ubuntu 22.04.LTS에 설치하는 법 , MongoDB 시작 및 서비스 활성화 및 원격 접속 허용하는 법 https://www.fosstechnix.com/how-to-install-mongodb-on-ubuntu-22-04-lts/ Ho.. 공감수 0 댓글수 0 2024. 3. 18.
TypeScript 유틸리티 타입 keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' const uk:UserKey= "name"; Partial interface User { id: number; name: string; age: number; gender: "m" | "f"; } // interface User { // id?: number; // name?: string; // age?: number; // gender?: "m" | "f"; // } //partial을 아래와 같이 사용하면 위 주석의 코드를 사용한 것과 같다.. 공감수 0 댓글수 0 2024. 3. 18.
TypeScript를 사용하는 이유 JavaScript에서는 다음과 같이 코드를 짰을 때 결과값에 대한 문제를 직접 찾아야한다. function add(num1, num2) { console.log(num1 + num2); } add();// -> NaN add(1);// -> NaN add(1,2);// -> 3 add(3,4,5);// -> 7 add('hello', 'world');// -> "helloworld" JavaScript(동적 언어)의 경우 런타임에 타입이 결정되고 오류가 발견이 된다 -> 개발자의 실수로 인한 오류를 사용자가 볼수 있게된다. Java, TypeScript(정적 언어)는 컴파일 타임에 타입이 결정되고 오류가 발견이 되기 때문에 코드 작성 시간은 비교적 길어질수 있지만 초기 생각을 많이 해서 코드를 짠다면 .. 공감수 0 댓글수 0 2024. 3. 18.
TypeScript 제네릭 제네릭을 사용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 가능하다. 선언시에 타입 파라미터만 적어주고 생성하는시점에 사용하는 타입을 결정하는 것. 아래와 같이 여러 타입을 받을 때 쓰인다. function getSize(arr: T[]): number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); //3 const arr2 = ["a", "b", "c"]; getSize(arr2); const arr3 = [false, true, true]; getSize(arr3); 인터페이스 interface Mobile{ name: string; price: number; option: any; } const m1: Mobile = { /.. 공감수 0 댓글수 0 2024. 3. 13.
TypeScript 추상 class 추상 클래스는 반드시 상속 받아서만 사용할수있다. 추상 클래스 내부 추상 메서드는 반드시 구현해줘야한다. abstract class Car{ color: string; constructor(color: string){ this.color = color; } start() { console.log("start"); } abstract doSomething():void; } class Bmw extends Car{ constructor(color: string){ super(color); } doSomething(){ alert(3); } } const z4 = new Bmw("black"); 공감수 0 댓글수 0 2024. 3. 13.
TypeScript 리터럴, 유니온/교차 타입 리터럴 타입 const userName1 = "Bob"; let userName2: string | number = "Tom"; userName2 = 3; type Job = "police" | "developer" | "teacher"; interface User { name : string; job : Job; } const user:User = { name: "Bob", job: "developer" } interface HighSchoolStudent { name: string; grade: 1 | 2 | 3; // => 유니온 타입 } 유니온 타입 interface Car { name: "car"; color: string; start(): void; } interface Mobile { nam.. 공감수 0 댓글수 0 2024. 3. 12.
TypeScript 함수 //아래와같이 매개변수의 타입, 함수의 반환 타입을 입력한다. function add(num1: number, num2: number): void{ console.log(num1+num2); } function hello(name?: string){ //아래 name에 값이 없으면 "world"를 반환한다고 되어 있지만 name?과 같이 typescript에선 명시적으로 값이 없어도 된다고 알려줘야함. return `Hello , ${name || "world"}`; } function hello2(name = "world"){ //위와 같음. return `Hello , ${name}`; } const result = hello(); function hello(name: string, age?:numb.. 공감수 0 댓글수 0 2024. 3. 12.
TypeScript 인터페이스 type Score = 'A' | 'B' | 'C' | 'F'; interface User{ name: string; age: number; gender? : string; readonly birthYear : number; // [grade:number] : string; ->number를 키로 받고 string을 value로 받는 property를 여러개 받을 수 있음. [grade:number] : Score; //Score라는 타입을 만들어 받을 수 있는 값을 지정. } let user : User = { name:'xx', age:30, birthYear:2000, 1 : 'A', 2 : 'B' } user.age = 10; user.gender = "male" // user.birthYear .. 공감수 0 댓글수 0 2024. 3. 12.
TypeScript 기본 타입 정리 let age:number=30; let age2=30; let isAdult:boolean = true; let a:number[]= [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['sun','mon','tue']; let week:Array = ['wed','thu','fri']; //튜플 (Tuple) let b:[string, number]; b = ['z',1]; b[0].toLowerCase(); //이렇게도 사용 가능. //void, never function sayHello(){ console.log('hello'); } function showError():never{ // 자료형을 붙이지 않아도 된다. throw new Error();.. 공감수 0 댓글수 0 2024. 3. 11.
[Review] Community management tools based on ERC6551 [Savvy] http://savvy-front.s3-website.ap-northeast-2.amazonaws.com/ [GitHuB Repository] https://github.com/codestates-beb/beb-09-final-Savvy GitHub - codestates-beb/beb-09-final-Savvy Contribute to codestates-beb/beb-09-final-Savvy development by creating an account on GitHub. github.com Savvy 코드스테이츠 부트캠프에서의 마지막 프로젝트를 끝마쳤다. 마지막 프로젝트는 자유주제였으며 4주간 진행되었다. 이전의 프로젝트를 함께 진행했던 팀장님이 마지막 프로젝트 기간에 접어들기 전 .. 공감수 1 댓글수 1 2023. 11. 24.
[Review] 인센티브 커뮤니티 [GitHub Repository] https://github.com/codestates-beb/beb-09-second-blockpink [1주차-인센티브 커뮤니티] https://unbreakableheart.tistory.com/64 Incentive Community 코드스테이츠 두 번째 프로젝트의 주제는 인센티브 기반 커뮤니티 만들기였다. 사용자의 행동에 따라 토큰을 인센티브로 지급하는 커뮤니티 앱을 만들어야 했다. 열흘간의 시간이 주어져있던 두 번째 프로젝트도 여유가 없었다. 지난 프로젝트와 달리 팀원으로 참여하게 되면서 BackEnd 쪽 학습에는 더욱 집중할 수 있었던 시간이었던 것 같다. 이번 프로젝트에선 기능적인 측면을 이것저것 하기보단 나름 문서화와 코드리뷰에 신경을 많이 썼던 것 같다.. 공감수 0 댓글수 0 2023. 7. 14.
[1주차] 인센티브 커뮤니티 목표 이번 프로젝트는 자체적인 토큰을 가지고 참여자를 유도하는 인센티브 기반 커뮤니티를 만드는 것이다. 즉 사용자가 어떠한 행동을 했을 때 토큰을 인센티브로 지급하는 커뮤니티 앱을 만든다. 자세한 프로젝트에 대한 설명이나 팀원들의 소개 등은 마지막 주차인 회고에서 작성할 예정이다. 이번 프로젝트에서 BackEnd 파트를 맡았기에 Backend에서 해야 하는 것들을 간단히 정리해 보았다. 1) NodeJS 서버 생성 2) DB 연결 3) 스마트 컨트랙트 연결 4) 필요한 API 작성 5) Demon 사용하여 트랜잭션 트래킹 작업 내용 사실 이번 프로젝트가 BackEnd로써 처음부터 끝까지 제대로 해보는 첫 프로젝트였다. 그렇기에 초기 환경 세팅부터 개발, 문서 작성 등 이러한 것들을 제대로 해보는 것이 .. 공감수 0 댓글수 0 2023. 7. 10.
[Review] 오픈씨 클론 코딩 [GithHub Repository] https://github.com/codestates-beb/beb-09-ArtChain OpenSea Clone Coding 참여 중인 코드스테이츠 부트캠프에서 첫 번째 프로젝트로 OpenSea를 클론코딩을 하게 되었다. 1주일의 시간이 주어진 만큼 크지 않은 프로젝트이긴 했으나 작은 프로젝트를 진행하기에도 프로젝트 경험이 많지 않은 나와 팀원들에겐 부족한 시간이었다. 나는 첫 번째 프로젝트를 팀장이 되어 진행하게 되었다. 짧은 기간 동안 어떤 식으로 계획을 짜야 효율적으로 개발을 진행할 수 있을까에 대한 고민을 정말 많이 했다. 어떻게 작업의 분배를 해야 할지, 어떤 식으로 팀원들과 소통해야 할지, github 버전 관리는 또 어떻게 해야 할지, 많이 부족한 내가.. 공감수 0 댓글수 0 2023. 6. 30.
프레임워크 Express에 대하여 Express란? Express는 Node.js를 위한 빠르고 유연한 웹 애플리케이션 프레임워크입니다. 즉 Express를 통해 Node.js를 사용하여 웹 애플리케이션을 더욱 쉽게 작성할 수 있습니다. Express는 Node.js의 기능을 확장하며,HTTP의 요청과 응답을 쉽게 처리하고, 미들웨어와 라우팅을 사용하여 웹 애플리케이션을 더욱 유연하게 만들 수 있습니다 설치 및 사용방법 먼저 아래의 코드를 터미널을 통해 해당 디렉토리 내부에서 실행시켜 Express를 설치해줍니다. npm install express --save 그리고 프레임워크를 쓰고자 하는 파일( ex) app.js ) 내부에 코드를 다음과 같이 작성합니다. // app.js const express = require('express.. 공감수 0 댓글수 0 2023. 5. 9.
REST API란? RESET API란? REST API는 Representational State Transfer API의 약자로 Roy Fileding이란 사람의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로 처음 소개 되었습니다. REST API는 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고 HTTP 프로토콜을 통해서 요청과 응답을 정의하는 방식을 의미합니다. 예를 들어 설명하자면 식당의 메뉴판을 생각해 보세요. 식당의 메뉴판이 알아보기 쉽고 잘 작성되어 있을수록 메뉴판의 역할을 잘 수행할 수 있습니다. 이러한 메뉴판이 REST API가 되는 것이고 이를 더욱 좋게 디자인하는 것이 중요합니다. 원칙 REST API를 설계할 때는 아래와 같은 원칙을 따라야합니다. URI는 자원.. 공감수 0 댓글수 0 2023. 5. 8.
HTTP / HTTP Message란? HTTP(Message)란 Hypertext Transfer Protocol의 약자로, 웹 브라우저와 웹 서버가 통신하기 위한 프로토콜입니다. HTTP는 클라이언트(웹 브라우저)와 서버 간의 요청과 응답 메시지를 주고받습니다. 이번엔 HTTP의 Message에 대해 차례대로 자세히 알아보겠습니다. HTTP Message란? HTTP Message는 크게 Start line, 헤더(Header)와 본문(Body)으로 구성됩니다. 헤더는 HTTP 메시지에 대한 정보를 포함하고 있으며, 본문은 메시지에 대한 실제 데이터를 포함합니다.Start line에는 요청이나 응답의 상태를 나타내고 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부릅니다. HTTP Request Message의 형식.. 공감수 0 댓글수 0 2023. 5. 8.
웹 앱(Node.js) 도커라이징 다음은 Node.js 공식 문서에서 node 및 express를 이용해 단순한 앱을 컨테이너화 하는 튜토리얼입니다. 아직 앞에 학습한 내용들을 미처 정리하지 못했지만 오늘처럼 직접 해보면서 학습하는 경우엔 앱을 또 만들어야 하는 상황이 생기지 않도록 바로바로 블로그에 정리하려 합니다. 아래는 Node.js 공식 문서의 도커라이징 링크입니다. https://nodejs.org/ko/docs/guides/nodejs-docker-webapp Node.js 웹 앱의 도커라이징 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 앱 만들기 먼저 Application, 의존성을 알려주.. 공감수 0 댓글수 0 2023. 4. 17.
Node.js 모듈 사용법 Node.js Module Node.js 에서 모듈은 변수, 함수, 및 클래스 관련 기능을 가진 코드조각으로써 조립할 수 있는 부분이라 할 수 있습니다. Node.js 에서 모듈은 해당 프로그래밍 언어에서 공식적으로 제공하는 빌트인 모듈, 그 이외의 외부모듈인 3rd-party 모듈로 나뉩니다. Node.js 내장 모듈 Node.js 내장 모듈은 코드 require 구문을 사용하여 파일을 불러옵니다. 파일 시스템을 모듈을 require를 통해 불러온 후 fs메서드를 사용합니다. const fs = require('fs') fs.readFile( , 'utf8',(err,data) => { if(err){ throw err; } console.log(data); }); 3rd-party 모듈 3rd-pa.. 공감수 0 댓글수 0 2023. 3. 22.
Promise & async/await Callback의 지옥에 한 번쯤은 다들 빠져보셨을 겁니다. Callback 지옥에 한번 빠지면 코드 가독성도 너무 떨어지고 코드를 짜는 사람도 머리가 아파지는데 비동기 코드를 작성할 때 더욱 효율적인 방법인 Promise & async/await에 대해 공부하여 이러한 지옥에서 빠져나와봅시다. Promise Promise 와 async/await은 결론부터 말하자면 둘 다 개발자가 더 읽기 쉽고, 더 쉽게 유지 관리 가능한 방식으로 비동기 코드를 작성하고 처리할 수 있게 해주는 기능입니다. promise는 비동기 작업의 완료(성공 or실패)와 그 결괏값을 나타내는 객체입니다. 이것이 기존 콜백보다 어째서 더 효율적인 걸까요? promise가 생성될 때 promise는 pending상태가 되고 결과가 값.. 공감수 0 댓글수 0 2023. 3. 22.
What is JSON? json은 개발 관련 공부를 하다 보면 자주 마주하게 될 수밖에 없습니다. 저만 해도 수십 번은 json 파일을 봐왔으나.. json이 대충 데이터를 전달할 때 사용되는 방식이라고만 알고 있고 남에게 정확하게 설명하라면 어떻게 서론을 시작해야 할지도 감히 안 잡혔습니다. 그래서 이번에 확실히 개념과 Javascript에서의 간단한 사용법을 짚고 넘어가고자 합니다. JSON JSON(JavaScript Object Notification)은 사람이 읽고 쓰기 쉽고 기계 또한 구문을 분석하고 생성하기 쉬운 경량 데이터 형식입니다. 서버, 웹, 프로그램 간 데이터를 전송하고 데이터를 저장 및 교환하는 데 자주 쓰입니다. 키는 문자열이며 값은 문자열,숫자,Boolean, 배열 및 객체를 포함합니다. 아래의 JS.. 공감수 0 댓글수 0 2023. 3. 22.
Props/ State (React) Props? 먼저 "Props"는 properties를 줄여 만든 말입니다. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용되며 props는 읽기 전용이라는 특성을 가집니다. 쉽게 설명하면 props는 하위 컴포넌트에서 수정할 수 없고 데이터나 기능을 수정할 수 없다는 얘기인데 즉 데이터나 기능성 그 자체를 제공하는 데 사용되는 것입니다. 그 예로는 쇼핑몰 사이트 상품의 가격이라던가 상품의 대한 정보에 관한 글처럼 바뀌어선 안 되는 것들이 있습니다. Props 활용 // // 위아래 방법 둘다 가능 . function Child(props){ return( {props.text} ); }; props.children을 이용해서 value에 접근하는 방식. function Parent() { r.. 공감수 0 댓글수 0 2023. 3. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.