xu의 개발일지

오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가까운 서버에서 데이터를 제공하여 웹사이트, 애플리케이션, 또는 미디어 파일을 빠르고 안전하게 전송하도록 돕습니다. CloudFront는 전 세계 엣지 로케이션(Edge Location)을 활용해 속도와 안정성을 보장합니다. CloudFront의 주요 기능1. 빠른 콘텐츠 제공: 전 세계에 위치한 엣지 로케이션을 통해 사용자가 가까운 서버에서  콘텐츠를 전달 받음.2. 보안 강화: HTTPS를 지원하고, AWS Shield와 통합하여 DDoS 공격을 방어함.3...

안녕하세요.벌써 React 미니 프로젝트가 마무리 되었습니다.5단계 미션은 배포하는 것 뿐이라서 4단계와 같이 작성할 생각입니다! 4단계 미션은 바로 Supabase를 이용한 회원가입, 로그인, 소셜로그인 및 북마크 기능 구현 입니다!(정말... 정말 어려웠습니다. ㅜㅜ)이번에 제가 구현한 기능은1. 회원가입 구현하기2. 로그인/로그아웃 구현하기3. 소셜 로그인 (카카오) 구현하기4. 북마크 기능 구현하기5. netlify를 통해 배포하기입니다!가장 어려웠던 건... 제가 supabase 자체를 처음 써봐서 그냥 모든게 다 어려웠어요. ㅠㅠ 허엉그래도 한 번 해봅시다......https://supabase.com/ Supabase | The Open Source Firebase AlternativeBui..

3번째 미션도 무사히 마무리 하였습니다!원래는 어제 블로그를 작성했어야 했는데.... 주말이라는 이유로 하루 미뤘습니다 ㅎㅎ3단계 미션은 Nav-bar 검색 기능 구현 및 반응형 디자인 입니다!! 저는 처음에 사이트를 구현하면서부터 반응형 디자인을 신경쓰며 CSS를 만졌기 때문에,이번 미션에서는 검색 기능 구현이 주된 미션이었던 것 같습니당제가 이번에 구현한 기능은1. Nav-bar 검색 기능 구현하기 (API 사용) 2. 다크모드/라이트모드 구현3. 메인 페이지에 들어갈 현재 상영 중 영화 컴포넌트 만들기4. CSS 수정입니다 _^_ 1. Nav-bar 검색 기능 구현하기 (API 사용)Nav-bar에서 검색 기능을 구현하려면, 따로 API가 있더라구요!엔드포인트는  /search/movie 이고, q..

2번째 미션도 무사히 마쳤습니다!(비록 현재 시간은 23시 46분이지만...) 2단계 미션은 바로... TMdb API를 이용한 영화 웹 애플리케이션 확장 입니다!! 이제 더미데이터가 아닌, 실제 API를 활용해서 데이터를 받아올 거예요.오늘 구현한 기능은~1. TMdb API Key를 발급받고 .env에 저장하여 환경변수로 이용 2. API 호출해서 더미데이터를 응답 데이터로 변경 3. 클릭한 MovieCard에 맞는 MovieDetail로 이동하도록 라우팅 4. NavBar 만들기 5. 회원가입, 로그 페이지 레이아웃 만들기 6. 반응형 Navbar 구현하기 (모바일 모드에서 햄버거 노출시키기)7. 더보기 버튼으로 데이터 더 받아오기입니다!! 하나씩 해봅시다. 그 전에, TMDB API가 뭔지 알아볼..

현재 부트캠프에서 영화 추천 사이트를 만드는 프로젝트를 진행 중입니다.총 5개의 미션으로 진행되어, 미션 1개씩 완료할 때마다 블로그를 작성하여 정리하려구 합니다!(제발 당일에 쓰자...!!)우선 첫번째 미션 결과물입니다.1.5배를 돌렸더니 좀 정신없네요...우선 1단계 미션은 메인 페이지 및 영화 상세 페이지 레이아웃 구성 입니다!! 따라서 구현한 기능은1. 더미데이터를 사용한 메인 페이지 (App.jsx) 레이아웃 구성2. 더미데이터를 사용한 상세 페이지 (MovieDetail.jsx) 레이아웃 구성 3. React-Router-Dom을 사용하여 라우팅 구성 4. Swiper를 사용하여 슬라이드 구현5. (+) Header 만들기6. (+) 반응형 웹으로 만들기입니다!! 우선 메인 페이지인 App.j..

JavaScript로 Todo List를 만들었으니, 이번엔 React로 만들어 봤습니다.완성본입니다.- 기본적인 TodoList 기능 (추가, 삭제, 수정, 전체삭제)- 랜덤 명언 표시- 스톱워치 기능이렇게 기능을 구현하였습니다.음악 재생은 모양만 내봤습니다... ㅠㅠ(제가 좋아하는 노래들이에요)// main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import App from './App.jsx'import './index.css'import Box from './Box.jsx'import Music from './Music.jsx'createRoot(document.getElementById('..

부트캠프에서 React를 배우면서, 간단한 동물 소개 페이지를 만드는 법을 배웠습니다.구현한 기능은1. 메인 페이지에서 동물 목록 화면에 표시하기2. 동물 상세 정보 페이지 만들기3. 동물 이름으로 검색할 수 있는 기능 만들기4. 검색 결과 페이지 만들기이렇게입니다.import { useState } from "react";import "./App.css";import { Route, Routes, useNavigate } from "react-router-dom";import Detail from "./page/Detail";import Search from "./page/Search";import Main from "./page/Main";function App() { const [inputValu..