개발 일지 개발 일지

todo-app 헤더에는 제목과 내용을 입력할 수 있는 input이 있고 추가하기 를 클릭하면 리스트를 추가하는 버튼이 있다. 코드 html 제목 : { if (e.key === "Enter") { todoAddHaedler(); } }} onChange={titleInputHaedler} type="text" /> 내용 : { if (e.key === "Enter") { todoAddHaedler(); } }} onChange={contentInputHaedler} type="text" /> 추가하기 css .input_wrap{ flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; } .input_wrap ..

react프로젝트를 시작하였다. 가볍게 시작하는 프로젝트인 만큼 useState만으로 todo앱을 만들어 보았다. 기능 구현 일정 추가하기 - 제목과 내용을 입력하고 추가하기 버튼을 추가하면 일정이 추가된다. 완료기능 일정을 완료하였다면 '완료'버튼을 클릭하여 일정을 완료한다. working리스트와 done리스트로 나누기 일정을 추가하면 우선적으로 working리스트에 추가되고 완료버튼을 누르면 done리스트에 해당리스트가 추가된다. 삭제기능 '삭제'버튼을 클릭하여 일정을 삭제한다. 자세히 보기 리스트의 내용을 클릭하면 모달창으로 일정을 자세히 볼 수 있다. 수정기능 모달창에서 수정버튼을 누르면 일정을 수정할 수 있다.

사이트 https://youngjiny.vercel.app/ SpartaFlix SpartaFlix 영화 Top 20 SpartaFlix 드라마 Top 20 인기 배우 리액트 3기 화이팅! B조 7팀 화이팅! Copyright ©2023 b07. youngjiny.vercel.app 깃헙 주소 https://github.com/tjdsksro90/youngjiny.git

줄거리와 인물 상세정보 자세히 보기 줄거리와 인물의 상세정보는 너무길어서 html이 파괴된다 그레서 1줄로 줄이고 클릭하면 자세히 보기를 할 수 있게 하였다. css /*인물의 상세정보 줄이기*/ .info_wrap > .info_box > ul > li:nth-child(4) > p:nth-child(3) { position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } /*active가 붙었을때*/ .info_wrap > .info_box > ul > li:nth-child(4) > p:nth-child(3).active { h..

출연작품 탭매뉴 배우의 출연작품은 영화와 방송출연으로 나뉜다. 이 부분을 탭매뉴로 만들었다. 먼저 탭매뉴의 제목을 클릭하면 해당매뉴가 불이 들어온다.' 클릭하면 focus되는 부분은 css로 해결하였다. .appearance_title_box > div.active { font-weight: bold; border-bottom: 2px solid #000; } .appearance_title_box > div에 active라는 클레스가 붙으면 적용되는 css이다. addEventListenrer의 클릭이벤트로 클릭하면 class가 붙혀지게 만들었다. // 출연작품 탭매뉴 버튼 appearance_title[0].addEventListener("click", () => { appearance_title[0..

먼저 세션 스토르지에서 인물의 id를 받아온다. let actorId = sessionStorage.getItem("actorId"); tmdb서버에 필요한 정보를 요청한다. 이 페이지 에서 필요한 정보는 인물정보, 인물의 출연영화 정보, 인물의 출연 방송정보 이다 // tmdb서버에 인물 data요청 const fetchActorData = async (actorId) => { const results = await fetch( `https://api.themoviedb.org/3/person/${actorId}?language=en-US`, options ) .then((response) => response.json()) .catch((err) => console.error(err)); return..

만약 영화가 아닌 드라마를 클릭한다.면 보여지는 상세정보가 달라진다. 먼저 fatch로 요청하는 url에 영화를 클릭한다면 영화url을 드라마를 요청하면 tv url을 요청한다 const session = sessionStorage.getItem("data"); const data = JSON.parse(session); console.log(data); 세션스토리지에 id를 넘겨줄때 영화인지 tv인지 확인하는 문자열을 같이 저장한다. data값을 오프젝트로 저장하여 id와 media를 받는다. // tmdb서버에 data요청 const fetchMovieData = async (id, media) => { const result = await fetch( `https://api.themoviedb.or..

function start(e) { prevPosX = e.clientX; console.log(prevPosX); } 버튼 클릭을 통해 1칸씩 슬라이드가 되는 이벤트를 만들었다면 이번에는 드레그를 통헤 1칸씩 이동하는 이벤트를 만들어 보겠다. 1. 함수선언 이벤트 리스너를 위한 함수를 선언하고 그 함수를 실행한다. 리스트 영역인 ul과 리스트의 요소인 li를 매개변수로 받는다. let actorListUl = document.querySelector(".actor_wrap > .actor_list > ul"); let actorListLi = actorListUl.children; const draggable = (ul, li) => { }; draggable(actorListUl, actorListL..