mobssie

명확한 인터페이스 설계: 컴포넌트의 props는 명확하고 이해하기 쉬워야 합니다. 구조 분해 할당을 사용하면 명확한 인터페이스 설계를 통해 컴포넌트의 사용법을 쉽게 파악할 수 있습니다. 코드의 가독성이 향상되며, 오류의 가능성을 줄일 수 있습니다.// 좋은 예 const Button = ({ label, onClick }) => ( {label} ); // 나쁜 예 const Button = (props) => ( {props.text} ); 예를 들어 { label, onClick }을 사용하는 경우, 이 props가 Button 컴포넌트에서 어떻게 사용되는지 바로 알 수 있습니다. label은 버튼에 표시될 텍스트를 나타내고, onClick은 버튼 클릭 시 실행할 함수를 나타냅니다. 반면, props..

CloudFront와 EC2의 비용 차이 사용 사례, 구성, 소비되는 트래픽 양이나 리소스에 따라 다르다 Amazon CloudFront 장점: CloudFront는 CDN(Content Delivery Network) 서비스로서, 전 세계에 분산된 엣지 로케이션을 통해 사용자에게 빠르게 콘텐츠를 제공합니다. 사용자가 여러 지역에 걸쳐 있을 경우, 응답 속도가 빠른 장점 콘텐츠 전송 네트워크(CDN)로, 정적 파일을 전 세계 다양한 지역에 위치한 엣지 로케이션에서 빠르게 제공합니다. CloudFront는 주로 데이터 전송량과 HTTP 요청 수에 기반하여 요금이 청구되며, 이는 대량의 데이터를 처리할 때 특히 비용 효율적일 수 있습니다. 예를 들어, CloudFront는 S3 버킷과의 데이터 전송료를 부과..

JSON 데이터 복사 코드 // 예제 JSON 데이터 const jsonData = { item_id: 6520, model_no: "DD1391-100", category_name: "신발", release_date_info: { release_date: "2021-04-02 10:30:00", release_date_type_text: "출시일" }, product_info: { name_kor: "나이키 덩크 로우 레트로 화이트 블랙", colors: "블랙", details: { material: "leather", sizes: [7, 8, 9, 10] } } }; let fields = []; function extractFields(obj, depth = 1) { for (const key i..

1. NPM 사이트에 회원가입하기 먼저, NPM의 공식 웹사이트에 접속해 회원가입을 합니다. NPM 계정이 있어야만 패키지를 배포할 수 있습니다. 2. GitHub에서 리포지토리 생성하기 코드를 관리할 GitHub 리포지토리를 생성합니다. 리포지토리 이름은 배포할 NPM 패키지의 이름과 일치시키는 것이 좋습니다. 3. 리포지토리를 로컬에 클론하기 생성한 리포지토리를 로컬 컴퓨터에 클론합니다. 터미널에서 다음 명령어를 입력하세요:]] git clone 4. package.json 파일 생성하기 클론한 리포지토리 폴더로 이동한 뒤, 아래 명령어를 실행하여 package.json 파일을 생성합니다. 이 파일은 패키지의 메타데이터를 담고 있으며, 프로젝트의 심장과도 같은 역할을 합니다. $ npm init -y..

Nodemon이란? Nodemon은 Node.js 애플리케이션의 개발을 조금 더 발랄하게 만들어주는 유틸리티입니다. 코드에 변경이 생기면, 자동으로 애플리케이션을 재시작해줍니다. 설치 방법 npm install -g nodemon 프로젝트의 개발 의존성으로만 추가하고 싶다면(프로젝트 개발 시에만 사용하고 실제 운영 환경(production)에서는 사용X): npm install --save-dev nodemon 예시 사용법 nodemon app.js app.js는 메인 애플리케이션 파일입니다. 이제 Nodemon이 코드 변경을 감지하고, 애플리케이션을 자동으로 재시작해줍니다.

npm https://www.npmjs.com/package/cors cors Node.js CORS middleware. Latest version: 2.8.5, last published: 5 years ago. Start using cors in your project by running `npm i cors`. There are 14357 other projects in the npm registry using cors. www.npmjs.com cors 패키지를 설치해서 해결가능 npm i cors 미들웨어를 추가 const cors = require('cors') app.use(cors()) 옵션 설정하기 특정 도메인만 허용하거나, 특정 HTTP 메서드만 허용하는 등의 세밀한 제어가 필요할 때..

node express https://www.npmjs.com/package/express npm init npm i express node app.js 더보기 body parsing하기 app.use(express.json()) app.use(express.urlencoded({ extended: true })) let id = 2; const todoList = [{ id: 1, test: '할일', done: false }]; app.get('/api/todo', (req, res) => { res.json(todoList) }) app.post('/api/todo', (req, res) => { const { test, done } = req.body; todoList.push({ id: id++..

루트 사용자 AWS 루트 사용자는 회원가입 시 만든 계정으로서 모든 AWS 권한을 갖고 있는 사용자 이 계정은 탈취당할 시 복구가 매우 어려울 뿐만 아니라, 최근에는 해커들이 비트코인 채굴에 AWS 계정을 착취하여 사용하기 때문에 상상을 초월하는 과금폭탄을 맞을 수 있다 IAM 사용자 (Identity and Access Management) AWS 관리를 제외한 서비스 관리용 계정 IAM은 지역별(region) 서비스가 아닌 글로벌 서비스 IAM 사용자는 IAM을 통해 생성한 사용자로 루트 사용자로부터 권한을 부여받은 서비스만 관리가 가능 먼저 지역설정합니다. 이유는 지역을 설정해야 인스턴스에 접근했을때 응답이 빠르기때문이죠. 서비스에서 EC2검색합니다. 인스턴스 > 인스턴스로 들어갑니다. 아직 인스턴..

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app useEffect(()=> { const checkedItems = checkboxRefs.reduce((res, ref..

* 서비스워커는 백그라운드에서 실행하는 스크립트 * 클라이언트에 설치되는 프록시 => Request를 가로채 Proxy Server와 비슷하게 동작 브라우저 백그라운드에서 네트워크를 가로채는 Thread 웹 캐싱은 CacheStorage를 사용. Sqlite 같은 클라이언트 데이터베이스인데, Key:value 로 구성된 데이터베이스 ServiceWorker 적용 전 알아두어야할 점은 서비스워커는 보안상의 이유로 HTTPS에서만 실행 사용방법 public폴더(index.html이 있는)에 생성 메인 script파일에 다음과 같이 service-worker를 불러오는 구문을 추가 // navigator (브라우저)에 serviceWorker 기능이 있는지 확인 if ("serviceWorker" in nav..