myinfo7091 님의 블로그

오늘의 학습내용 :  React Router Dom  ◆ Router Dom 리액트 라우터 돔을 통해 여러 페이지를 가진 웹을 만들어 볼 수 있다. 일반적으로 웹페이지를 이용할 때 여러 페이지를 오가며 이동할 수 있는 것처럼, react-router-dom은 페이지 이동 기능을 처리할 수 있게 해 준다. 라우팅(Routing)이란?웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 맞는 페이지를 보여주는 것을 의미한다. 다양한 주소에 대해 요청이 들어오고, 네트워크에서 각각에 맞는 경로를 선택해서 해당 컨텐츠로 이동시켜 주는 작업이다. React Router 라이브러리를 통해 리액트에서 컴포넌트 기반의 라우팅 시스템을 구축할 수 있다.   '평소처럼 a 태그를 사용해도 되는 게 아닐까?' 라고 생각할 ..

useState, 제출 - 삭제 기능 구현 ◆ useState App.jsx에 국가별로 메달 집계를 표시하는 리스트를 추가한다. useState를 활용해서 데이터를 저장하고 출력하는 React hook에 익숙해질 필요가 있었다.function App() { const [country, setCountry] = useState(''); const [gold, setGold] = useState(0); const [silver, setSilver] = useState(0); const [bronze, setBronze] = useState(0); const [medalList, setMedalList] = useState([]); const handleSubmit = (event) => { ..

react 프로젝트 셋업, 폼 ui 구현  이번 개인 프로젝트로는 올림픽 메달 집계를 관리해 보는 Olympic Medal Tracker를 제작한다. 강의에서 배운 리액트 컴포넌트와 이벤트 관리, state 관리를 통해 필요한 기능을 구현할 수 있다. 과제를 수행하면서 리액트 컴포넌트 useState 관리에 익숙해질 것으로 기대된다. 이번 개인과제에서도 1~3일차에 해당하는 로드맵이 있는데, 제작하다 보니 순서를 거의 지키지 않게 되었다... 이번에도 필수 구현사항들을 먼저 만들어보고, TMDB 영화 검색 사이트처럼 나중에 추가 목표들을 하나씩 도전해볼 계획이다. 터미널을 열고 Vite로 리액트 프로젝트를 셋업한다. 이제 브라우저에서 React 앱을 열어볼 수 있다.yarn create vite my-m..

오늘의 학습내용 :  영화 상세 페이지 구현하기, 모달, 이벤트 버블링4일차 목표클릭된 영화의 ID를 활용해서 TMDB API로부터 영화 정보 요청하기영화 상세 정보를 모달 창으로 표시하기 모달에서 메인 페이지로 돌아가는 닫기 버튼 구현하기 ◆ HTML, CSS 사용하여 모달창 만들기각각의 영화 카드를 클릭했을 때 영화의 상세 정보가 화면에 표시되도록 모달을 이용해 구현한다. 영화 이미지, 제목, 줄거리 요약과 개봉일을 modal-content 에 넣어서 HTML과 CSS로 간단하게 모달창을 만들었다. 모달창 닫기 버튼도 미리 만들었는데, 구글링을 통해 &times 로 가위표 모양을 보기 좋게 표현할 수 있다는 조언을 얻었다.  × .moda..

오늘의 학습내용 :  영화 검색 기능 구현하기 3일차 목표HTML, CSS 사용하여 검색창 만들기실시간으로 검색창에 입력한 영화 검색기능 만들기 ◆ HTML, CSS 사용하여 검색창 만들기 사용자가 입력한 검색어로 영화 목록을 필터링하는 검색 기능을 구현한다. 우선 검색을 위한 Search bar를 html로 header 영역에 만들었다. CSS는 매번 원하는 이펙트를 구현할 수 있는 방법을 일일이 구글링하는데, 내 디자인 감각이 그다지 좋은 편이 아님을 다시금 깨닫는다.   header { display: flex; align-items: center; position: relative; background-co..

오늘의 학습내용 :  async / await, forEach 2일차 목표HTML, CSS 사용하여 영화 카드 UI 만들기API에서 받아온 데이터를 카드 형태로 화면에 출력하기 ◆ 영화 카드 UI 만들기 1일차에 TMDB 오픈 API를 사용하여 데이터를 가져왔고, 이를 바탕으로 인기 영화 정보를 나열해 보여주는 카드를 만들어 페이지에 출력한다. 주의할 점은 브라우저의 크기가 변해도 자연스럽게 보일 수 있도록 스타일링을 적용하는 것이다. 카드를 생성하는 자바스크립트 코드를 작성하기 전에 HTML과 CSS를 사용하여 영화 카드를 먼저 한 장 만들어보았다. 디자인을 어떻게 할 지 감을 잡기 어려워서, 우선 예시 웹페이지의 CSS를 참고했다. 카드에는 당연히 영화 포스터 이미지가 보여야 하고, 영화 제목과 평점..

캠프 기초 주차 개인 과제로 영화 검색 사이트 제작이 제시되었다. 세계적인 영화 DB인 TMDB의 오픈 API를 사용하여 영화 검색 사이트를 만들어 볼 것이다.개발 환경 / 기술Visual Studio Code / HTML, CSS, JS외부 APITMDB API주요 기능영화 검색, 영화 정보 조회 오늘의 학습내용 :  실시간 데이터를 사용하는 법 1일차 목표TMDB API에서 인기 영화 데이터 가져오기가져온 데이터를 콘솔에 출력하여 확인하기  ◆ TMDB 알아보기 데이터를 가져올 사이트가 어떤 곳인지부터 알아보았다. TMDB는 영화와 각종 TV프로그램을 수집하여 데이터베이스화하고 영상물에 대한 각종 정보를 제공한다. 포스터 이미지와 함께 인기 영화, 상영 중인 영화, 개봉 예정작, 각종 애니메이션 정보..