Sungtt

https://aws.amazon.com/ko/premiumsupport/knowledge-center/s3-allow-certain-file-types/ 특정 파일 형식으로 Amazon S3 버킷 업로드 제한 Amazon Simple Storage Service(Amazon S3) 버킷에 특정 파일 유형만 저장하려고 합니다. 버킷에서 이러한 파일 유형만 수락하도록 업로드를 제한하려면 어떻게 해야 합니까? aws.amazon.com 기존 버킷 정책 모든것을 허용한다.. { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObjec..

s3는 같은 리전끼리는 전송에 요금이 부과되지않는다고한다. https://hamait.tistory.com/675 s3 버킷 생성하기 s3 버킷 정책 편집하기 s3 cors 정책 편집하기 IAM 액세스키, 보안키 발급 yarn add react-s3 설치하기 https://www.npmjs.com/package/react-s3 공식 사이트 참고하여 업로드 코드 작성 후 업로드 시도 ReferenceError: Buffer is not defined 오류 ReferenceError: Buffer is not defined 해결방법 https://stackoverflow.com/questions/69686231/react-s3-error-referenceerror-buffer-is-not-defined ya..

The object literal notation {} is preferrable 객체 리터럴 표기법 {}을 사용하는 것이 좋습니다. 개요 const user2 = New Object(); 리액트에서 위 코드로 객체를 생성할 때 만났다. 객체를 생성할 때 리터럴 표기법을 권장해준다. 그 이유는 무엇일까? 오브젝트는 전역 객체 속성이기 때문에 덮어 쓰일 위험이 있기 때문이다. 아래 코드로 예를 들어보자 //자바스크립트 Object = 50; const x = new Object(); // Object is not a constructor //리액트 Object = 50; const x = new Object(); // Read-only global 'Object' should not be modified ..

개요 useReducer에 이어서 뒤늦게 작동원리를 이해한 기능이다. 잊어먹기전에 어느정도 기록해두자 useContext를 쓰는 이유 prop driling를 해결해준다. prop driling은 부모 컴포넌트로부터 자식 컴포넌트에게 prop을 넘겨주는것을 말하는데, 거쳐가야하는 컴포넌트가 많아질수록 코드 작성도 번거로워진다. 이때 useContext로 prop을 관리해주면 부모안에 있는 어떤 컴포넌트든 그 값에 접근할 수 있다. Context 생성 //App.js import User from './User'; import React, { createContext, useState } from 'react'; export const UserContext = createContext(null); func..

결론부터 말하자면 해결 당시 상황 클라이언트(443포트)는 ajax요청 주소를 "https://aaa.com/api"로 설정하고, node express는 3002포트로 ssl을 인증받은 서버를 열어, get("/api") 주소에 mysql에서 호출한 데이터를 response 해준다. nginx에서 proxy pass를 통해 클라이언트에서 받은 "https://aaa.com/api" 요청을 "https://aaa.com:3001/api"로 전달해준다. 상황1.(현재 채택된 방법) 굳이 node에 ssl인증을 받아야하나싶어 ssl을 인증을 빼고 그냥 서버를 열었다. 클라이언트(443포트)는 ajax요청 주소를 "https://aaa.com/api"로 설정하고, node express는 3002포트로 htt..

개요 리액트의 여러가지 훅을 경험해보고있지만, 작동을 시키면서도 아직 몇가지 이해가 안가던 훅들이 있었다. 그중에 하나가 useReducer인데 그에 대해 개념을 잡아두자. 자기전에 핸드폰으로 글을 보는데, 갑자기 머릿속에 코드가 진행되는게 슥슥 그려져서 잊지않길 바라며 작성한다. 리덕스에서도 쓰이는 개념이기때문에 리덕스에 입문하기전에 미리 알아두면 좋을것같다! Reducer란? - 리듀서는 이전 상태와 동작을 받아 새 상태를 리턴한다. - 반드시 순수 함수여야 한다. 예를 들면 데이터베이스 호출이나, HTTP 호출 등 외부의 데이터 구조를 변형하는 호출은 허용되지 않는다. - 리듀서는 항상 현재 상태를 '읽기 전용'으로 다룬다. 기존 상태를 변경하지는 않지만 새 상태를 리턴할 수 있다. 리듀서를 이루는..

개요 작업 당시 환경 - AMI amazon linux2 - nginx를 통해 80 포트의 웹서버를 가동 중 - 가비아 도메인을 사용 - 웹서버를 구축하는 단계에서 보안을 위해 필수적으로 거쳐야 하는 기본적인 요소라 생각한다. 이번에 AWS EC2를 통해 열은 서버에 도메인을 연결했는데 브라우저로 들어가 보면 불안한 사이트라고 놀리더라. 그래서 도메인에게 SSL 인증서를 발급받아주려고 한다. 먼저 사전에 알아두면 좋은 지식을 훑고 가 보자 HTTP 하이퍼 텍스트 전송 프로토콜(Hypertext Transfer Protocol) - 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않음 HTTPS 하이퍼 텍스트 전송 프로토콜 보안(Hypertext Transfer Protocol Secure) - SSL을..

AWS EC2 고정 ip (Elastic ip) 설정해주기 개요 고정 ip를 쓰는 데에는 다양한 이유가 있지만 지금 당장 나는 PuTTY를 통해 접속할 때마다 퍼블릭 DNS를 써주기 귀찮아서가 제일 크다. 그 외에도 구입한 도메인을 연결하기위해서다. 앞으로 사용해야 할 mysql과도 연관이 있을까 싶지만, 인스턴스를 켜 두면 localhost로 db에 접근하는데 문제가 없을 거라고 생각이 든다. 각설하고 고정 ip를 세팅해보자 비용 생각지 못한 비용이 지불될까 불안하다면 AWS에서 안내해주는 포스트를 확인해보자. https://aws.amazon.com/ko/premiumsupport/knowledge-center/elastic-ip-charges/ 탄력적 IP 요금에 대한 이해 Amazon Elasti..

과정 AWS EC2에서 인스턴스를 생성하고, PuTTY를 통해 리눅스와 연결합니다. 그 후 nvm, node, yarn, npm , nginx 등 필요한 모듈을 설치 인스턴스 내부에 create-react-app을 생성하고 nginx로 구동합니다. 1. AWS 계정생성 1-1 Amazon Machine Image (AMI) 선택 첫 번째에 보이는 프리티어용 AMI (두 번째와의 차이는 Kernel Version)을 선택했다. 1-2 인스턴스 유형 선택 AMI의 스펙을 설정하는 단계다. 프리티어로 사용이 가능한 스펙을 선택하였다. 보안 그룹 설정을 위해 다음:인스턴스 세부 정보 구성을 클릭한다. 1-3 인스턴스 세부 정보 구성 인스턴스의 개수와 네트워크 등의 옵션을 설정하는 단계다. 따로 변경하는 것 없이..

이제 개인프로젝트를 배포하기전에 좀 더 깔끔한 코드를 위해 마지막 점검을 하고있다. 이번 게시글에선 개발하는동안 문제없었지만 리액트에서 엄마의 마음으로 해주는 잔소리를 하나씩 하나씩 체크하면서 해결하는것을 기록할 것이다. 현재 코드에선 5개의 피드백을 주고있다. WARNING in src\component\about.js Line 9:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text src\component\header.js Line 38:35: Expected '===' and instead saw '==' eqeqeq Lin..