여러분이 향후 각자 개인의 AWS 그룹 계정을 활용하는 경우에는, 아래 가이드에 따라서 S3로 정접 웹을 호스팅하고 관리할 수 있습니다. 이번 실습에서는 S3 버킷을 이용하여 정적 웹 사이트를 호스팅하는 방법에 대해서 알아보겠습니다. 먼저 정적 웹 사이트를 호스팅하는 과정은 4 단계로 요약됩니다. 첫 번째로 구현이 완성된 정적 웹 페이지를 빌드합니다. 빌드 과정이 끝나면 S3 대시보드에 접속하여 버킷을 생성하고, 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성합니다. 그다음으로 빌드된 정적 웹 페이지를 버킷에 업로드합니다. 업로드가 완료되면 퍼블릭 액세스 차단 설정을 해제하고, 다른 사용자의 접근 권한을 부여하는 버킷 정책을 생성합니다. 먼저 '빌드(build)'에 대해 잠시 알아보는 시간을 가지겠습니..

백엔드까지 전체 배포가 끝났는데 .. 내 아이디로 버킷을 다시 만들기로 했다! 배포 테스트때 실패했었는데... 🫠 지금 EC2에서는 다 되어있고 그냥 S3 버킷만 다시 하는 상황! 아무튼 어렵지 않으니 S3 배포 도전!! 1. env 파일 환경변수 설정하기 빌드하기에 앞서 환경 변수를 담은 .env 파일을 확인합니다. .env 파일의 파일명이 제대로 적혀있는지, 환경 변수에 담긴 서버의 주소는 문제가 없는지 확인합니다. 참고로 요청을 보내는 서버의 주소를 환경 변수에 담을 때는 필히 'http://' 나 'https://'를 포함해야 합니다. 2. npm run build 환경 변수 관련 설정이 완료되면, 터미널에 'npm run build' 명령어를 입력하여 빌드 과정을 진행합니다. 얼마간에 시간이 지..

먼저 우리팀은 브랜치를 fe 하나로 쓰기로 했다. 그런데 커밋-풀-푸시 할때마다 충돌이...🤯 한명이 올리고 세명이 받으면 세명 다 수동으로 오류를 처리해야만 했다. 그것도 몇번씩이나... 근데 알고보니 같은 파일 app.js 등을 서로 동시에 수정해서 그런거였고, 공통파일을 수정할때면 미리 말하고 수정하자! 라는 규칙을 세웠다. 한명이 수정한 후에 푸시해서 올리면? 내가 해야하는 절차는? 1. 먼저 표시한 노란 점선 박스 안에 메세지를 적어서 커밋을 한다. ex) 프로필 수정, css 생성 커밋! 만 해야한다. 커밋 및 동기화 (X) 2. 터미널에 git pull 입력한다. (같은 파일을 수정하면 보통 여기서 오류남...) 3. pull 완료되면 git push 한다. 4. 푸시 완료후 깃허브 - 해당..

멘토링 시간... 인증은 어떻게 하시나요? JWT 토큰..? ... 또 나만 잘 모르네...;; 🫨 지금부터 알면됨ㅋ 😂 유어클래스랑 구글링 유어클래스로 기본적으로 토큰에 대해 알아봤다. ✔️ JWT 토큰 JWT 는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON입니다. 전자 서명은 JSON 의 변조를 체크 할 수 있게되어 있습니다. JWT( JSON Web Token)은 정보를 안전하게 전송하기 위한 컴팩트하고 자체 포함 형식의 표준입니다. JWT는 특히 웹에서 정보를 주고받을 때 사용되며, 서버와 클라이언트 간의 정보를 안전하게 인코딩하여 전송할 수 있게 해줍니다. JWT의 구조는 세 부분으로 나뉩니다: Header(헤더): 토큰..

가장먼저 회원탈퇴 팝업(모달)을 만들 예정이다. 피그마로 만들었던 팝업창의 대략적인 모습! ✔️ 모달 라이브러리 설치 react-modal 라이브러리를 이용해서 모달을 만들것이다! 먼저 npm install react-modal을 설치한다. npm install react-modal 그다음 해당 페이지에서 Import import Modal from 'react-modal'; ✔️ 모달 코드 작성 그리고 대략적인 모달 창의 코드를 작성했다. //LeaveModal.jsx import React, { useState } from 'react'; import Modal from 'react-modal'; function LeaveModal() { const [modalIsOpen, setModalIsOpen..

깃허브를 통한 초기 설정시에 헷갈렸던 부분, 어려웠던 부분, 주의 할 부분들을 모아서 작성한 글입니다. # .gitignore 만들기 일단 팀원들이 만들어준 폴더구조를 pull을 통해서 받았다! 그리고 열어서 npm install을 했는데.... 커밋 변경사항이 10000개를 넘어가는 상황...🫠 .gitignore파일을 생성해주고 그안에 아래코드 그대로 .gitignore파일 안에 복사해서 넣고 저장한다. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production /build..

2024.01.03(수) 1주 차 회고가 있었다! ....🫠 그리고 많은 일을 했다! 기능 관련 회의 피그마 작성 역할 분배 화면정의서 작성 깃허브 브랜치 나누기 깃허브 칸반 작성 내가 맡은 파트는 [마이페이지] & [회원정보수정] 내가 잘할 수 있을까? 그래도 해야지 😄ㅋㅋㅋ 무사히 코드를 잘 짜고 깃허브 충돌도 없이 목표했던 1순위를 무탈하게 잘 구현하고 추가 기능들도 잘 구현했으면 좋겠다 ㄷㄷ

2023년 12월 말 팀이 정해지고 어렵게 깃허브 포크, 머지 실험(?)을 완료하고 코드를 개미만큼 짰는데... 갑자기 팀이 해체되고 변경되었다! 🫠 그래서 새로운 팀에 합류하게 되었다. 멋진 주제로 진행되고있었는데... api 관련 문제로 프로젝트의 주제를 바꾸게 되었다. 그래서 연말/연초에 휴일이지만 시간을 내서 짧은 회의를 했다. # 초기설정 디스코드 Github Figma Notion Google Sheets 팀장, 부팀장, 팀 규칙, 프로젝트 규칙 정하기 프로젝트 주제, 아이디어 미믹, 회의를 통해서 큰 틀 정하기 이후 사용자 요구사항 정의서, 화면정의서 만들기 새로운 팀원들과 프로젝트를 잘 해내고싶다! 내 새해 소원!😃🙏

며칠동안 손을 못대서.. 어디까지 만든지 잊어버렸다. 🤔 그래서 그냥.. Day6으로하기로... 😄 기본적인건 구현했기 때문에 Advanced 까지 구현해볼것이다. 그리고 내가 추가적으로 넣어보고 싶었던 기능들도 넣어볼 예정! # 페이지 보기 css 선 다 지운 모습! 뭐야 왜이렇게 밋밋해 카테고리 탭 이동 슬라이더 구현 # 추가할 기능 API 요청 시, 쿼리 파라미터를 사용하여 좋아요 또는 만족도 순에 따른 상품 데이터를 보여주도록 정렬 옵션을 슬라이더 상단에 추가할 수 있습니다. 사용자의 시각적 편의성을 고려하여, 모든 상품 슬라이더가 일관된 너비와 여백을 갖도록 레이아웃을 조정할 수 있습니다. 데이터 로딩 중에는 사용자에게 로딩 상태를 알리는 UI 요소(e.g., 스켈레톤, 로딩 인디케이터)를 표시..

# AWS를 활용한 배포 전략 개발한 서비스를 사용자가 이용할 수 있도록 하는 것을 배포라고 합니다. 작성한 Client 코드를 사용자들에게 어떻게 제공할지 생각해 봅시다. AWS에서 제공하는 서비스인 S3라는 서비스를 통해 사용자들에게 Client를 제공할 수 있습니다. 로컬 환경에서는 자체 개발 서버 (예, create-react-app)를 이용해서 클라이언트 앱을 실행시키는 것이 보통입니다. 그럼, 클라이언트를 위해서 EC2 인스턴스를 사용해야 할까요? 그렇지 않습니다. 클라이언트 앱을 정적 파일로 빌드하여 제공합니다. 따라서 S3를 이용해서 클라이언트를 배포합니다. 이때 필요한 것이 빌드입니다. 빌드란 쉽게 말해서 불필요한 데이터를 없애고, 여러 갈래로 퍼져있는 데이터들을 통합/ 압축하여 배포하기..

#1. AWS 서비스 회원가입 1. 준비물 이메일 주소: AWS 계정 생성 시 필요한 유효한 이메일 주소가 필요합니다. 인증 과정과 로그인시 아이디로 사용됩니다. 해외 결제가 가능한 신용 카드 혹은 체크 카드: AWS 회원 가입 시 카드 정보가 필요하며, 작은 금액이 결제되지만, 인증 후에 해당 금액은 바로 환불됩니다. 휴대전화: 회원 가입시 AWS는 전화나 문자 메시지를 통한 인증이 요구됩니다. 영문주소: 영문으로 된 주소를 기입해야 합니다. 도로명 주소를 영문으로 변경하여 기입해야 합니다. 2. 주의사항 비밀번호 설정: 강력한 비밀번호(대문자, 소문자, 숫자, 특수문자 포함)를 사용하고, 별도로 안전한 곳에 저장하세요. 프리 티어 사용: AWS는 신규 가입자에게 12개월 동안의 프리 티어 서비스를 제..

JSON Server 개념학습 API를 통해 받아오는 데이터를 기준으로 화면을 구성 해야 합니다. 그런데, API 개발 일정이 늦어지면 어떻게 해야 할까요? API 개발이 지연될 때, 이러한 상황에서 JSON Server와 같은 도구를 사용하는 것이 매우 유익합니다. JSON Server를 사용하면 최소한의 설정으로 가짜 REST API를 만들 수 있고, 실제 API에서 기대하는 데이터 구조를 나타내는 JSON 파일을 정의할 수 있습니다. 이를 통해 프론트엔드 개발자들은 백엔드 API가 준비될 때까지 UI 구축 및 테스트를 계속할 수 있습니다. JSON Server 는 리액트 프로젝트 안에서 다음과 같이 설치할 수 있습니다. 1 npm install json-server --save 이후, JSON Se..