Chansol's Tech Blog

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 Netlify 배포 Netlify는 React앱과 같이 GitHub에 있는 웹프로젝트를 배포할 때 더욱 쉽게 배포할 수 있도록 도와주는 Hosting 사이트다 때문에 Git/Github에 대한 기본적인 사전지식은 있다는 가정하에 배포를 진행해볼 것이다 우선 리디렉션 세팅을 위한 파일(netlify.toml)을 package.json 파일과 동일한 위치에 생성해준다 # netlify.toml [[..

AWS S3 + CloudFront + Route53 배포 Route53를 사용하는 상황들은 다양할 수 있기에 특정 상황을 상정하고 배포를 진행할 것이다 가정 상황은 백엔드 개발팀이 메인 AWS 계정으로 Route53에서 커스텀 도메인을 등록한 상황이다 프론트 개발팀에는 AWS S3와 CloudFront를 관리하는 서브 AWS 계정이 있다 즉, 프론트/백엔드 개발팀은 AWS 계정을 2개로 분리하여 각각의 포지션에 맞게 배포하고 있다 때문에 프론트 개발팀 입장에서는 백엔드 개발팀이 등록한 Route53에서 하위 도메인을 받아와야 한다 우선 Route53로 접속한다 https://us-east-1.console.aws.amazon.com/route53/v2/home us-east-1.console.aws.a..

AWS S3 + CloudFront 배포 이전 (8)-1에 이어서 배포를 진행한다 버킷의 Properties 탭 맨 아래 파트 Static website hosting를 편집해 Disabled 상태로 되돌려놓는다 Permissions 탭에서는 Block public access 파트의 Edit 버튼을 클릭해 Block all public access를 클릭하여 변경사항을 저장한다. 이로써 퍼블릭 엑세스 차단이 다시 활성화되었다 CloudFront 페이지로 이동한다 https://us-east-1.console.aws.amazon.com/cloudfront/v3/home us-east-1.console.aws.amazon.com 우측의 Create distribution을 클릭한다 Origin domain..

AWS S3 배포 IAM 페이지로 이동 https://us-east-1.console.aws.amazon.com/iamv2/home us-east-1.console.aws.amazon.com 좌측 메뉴에서 Users을 클릭한다 우측 상단의 Create user 버튼을 클릭한다 유저 이름을 작성해준다 Attach policies directly를 클릭하여 AmazonS3FullAccess와 CloudFrontFullAccess를 체크해준다 그렇게 체크하고 오른쪽으로 계속 가다보면 Create User 버튼이 있다 해당 버튼을 클릭하면 User가 만들어진다 생성된 User에 들어가보면 우측 상단에 Create access key가 있는데 이것을 클릭한다 사용 용도를 적절한 선택지로 골라주고 넘어가다보면 Cr..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 관리자 페이지: 상품/후기 목록 (ProductListPage.js) 전 상품 정보 GET - useEffect를 통해 최초 렌더링 시에만 작동 - useState를 통해 products 상태를 GET한 전 상품정보로 set - useState를 통해 전 상품정보를 GET할 경우 loading 상태 false로 변경 ... // REST API 2-1: get all items useEffect..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 로그인 페이지 (LoginPage.js) 로그인 POST - URL에 /admin 입력시 자동으로 /login의 LoginPage로 이동 - ID와 PW가 승인될 경우 response.status 값 200과 함께 AdminPage로 이동 - 제어 컴포넌트로 로그인 객체 생성 및 POST ... // ID, PW const [inputs, setInputs] = useState({ id: "",..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 주문인증 페이지 (AuthenticationPage.js) useRef를 통해 Input focus - 전화번호 중 지역번호는 2~3자리, 둘째 칸은 4자리, 마지막 칸은 4자리 형식으로 작성하면 다음 Input으로 focus - 비밀번호는 4자리 형식으로 작성하면 제출버튼으로 focus - 지역번호, 전화번호 둘째 칸, 전화번호 마지막 칸, 비밀번호, 제출버튼에 ref 속성 추가 ... // ..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 구매 Modal (Modal.js) 주문 POST 1. 제어 컴포넌트로 주문 input 객체 생성 ... // 수량, 주문자명, 지역번호, 전화번호, 우편 번호, 주소, 상세 주소, 비밀번호 const [inputs, setInputs] = useState({ quantity: 1, name: "", preNum: "010", phoneNumber: "", zipCode: "", address:..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 홈페이지 (LandingPage.js) 전 상품 정보 GET - useEffect를 통해 최초 렌더링 시에만 작동 - useState를 통해 itemList 상태를 GET한 전 상품정보로 set - useState를 통해 전 상품정보를 GET할 경우 loading 상태 false로 변경 ... // REST API 2-1: get all items useEffect(() => { async fu..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 본 사이트는 외부 서버에서 불러온 데이터를 활용할 것이기에 REST API에 대한 이해가 필수다 Client가 request를 보내면 Server가 JSON 형태로 response를 보내주는 것이다 HTTP Method에는 GET, POST, PUT 등 다양한 방식들이 있다 React는 Client 측에서 request를 보내는 역할을 한다 로컬에서 React를 개발할 때 서버 측의 API가 개..