React (9) 썸네일형 리스트형 리액트 UI업데이트, DOM, Virtual DOM Q. 리액트가 UI를 업데이트 하는 법 A. 컴포넌트 상태, props가 변경에 따라 이루어진다. state의 변경상태를 모아서 배치 업데이트 Q. DOM이 동작하는 원리와 DOM의 단점 A. 트리 형태로 구조를 만든다. 그 트리는 노드로 구성되어있고 노드는 HTML 요소이다. JS로 DOM에 접근하고, 웹 페이지의 요소를 선택하고 변경한다. 다만, 단점은 성능문제이다. reflow : 렌더링 엔진에서 요소배치 replaint : UI 기반의 구성 요소 Q. Virtual DOM 동작원리, 장점 A. 메모리에 존재하는 가벼운 복사본, 실제 DOM과 동기화 되는 방식 아웃소싱 프로젝트 KPT 회고 프로그램명: 자취방에서 살아남기 유튜브 api를 이용하고, 검색어 필터링을 통해 자취생들에게 유용한 영상만을 추천해주는 사이트이다. 카테고리 분류를 통해 각자 원하는 분류의 영상을 찾아볼 수 있으며, 상세페이지에서는 영상에 대한 의견 또한 남길 수 있다. 필수 요구 사항 Youtube API API Reference | YouTube Data API | Google Developers YouTube Data API (v3) - Quota Calculator | Google Developers 상태관리 라이브러리는 RTK를 사용하고, React-query 또는 Redux Thunk 사용은 택1 진행 firebase 또는 json-server 택1 진행 추가작업 로그인, 회원가입(Authentication .. 유튜브 영상 재생 기능 넣기 [React] react-youtube로 유튜브 플레이어 삽입 (velog.io) [React] react-youtube로 유튜브 플레이어 삽입 react-youtube는 유튜브에서 제공하고 있는 IFrame Player API를 편하게 쓸 수 있도록 컴포넌트 형태로 만든 것입니다. velog.io YouTube API 를 사용하여 동영상 가져오기 : 네이버 블로그 (naver.com) YouTube API 를 사용하여 동영상 가져오기 인스타그램이 잘 활성화된 쇼핑몰의 경우. 위처럼, 인스타에 올린 사진을 쇼핑몰에 가져와 뿌리는 것을 종... blog.naver.com 웹페이지에 유투브(Youtube) 영상 추가하는 방법, iframe (webisfree.com) 웹페이지에 유투브(Youtube) 영상 .. 아웃소싱 프로젝트 - 도전의 주 1. 이번주는 내가 평소에 욕심났지만 부족해서 도전하지 못했던 것들을 도전하는 주 2. 팀장과 발표를 맡았다. 3. 부족하지 않아서 맡은 것은 아니고 , 내 욕심으로 부족하지만 도전하게 되었다. 4. 책임감이 생겼다. 5. 무한 스크롤과 youtube api로 카테고리별 더보기 페이지를 맡았다. 6. 추가 기능 욕심나는건 테마 선택하기, 네비게이션바 (스크롤 하면 헤더가 짧아지면서 내려도 네비게이션바가 계속 있었으면 좋겠음) , 탑버튼 7. 현재 완료한 부분 무한 스크롤, 최신순/오래된 순 정렬 ( 인기순도 하고 싶었지만 내가 따온 유튜브 api에 조회수는 없어서 못했다 ! ) 8. 유튜브 api 할당량을 계속 초과하는 문제가 발생했었다 아껴써야지(?) react로 counter app 만들기 : 유튜브 링크 https://youtu.be/srhw2XHVn1o 제 영상입니다 개인 프로젝트-리액트로 todolist만들기-삭제 기능 1. input에 제목과 내용을 넣고 추가하기를 누르면 working에 추가되기 2. working에 있는 todo 완료 누르면 done으로 이동 3. done에 있는 todo 취소 누르면 working으로 이동 4. 삭제기능 const handleRemoveTodo = () => { alert('정말 삭제하시겠습니까?') removeTodo(todo.id); }; remainingTodos라는 새로운 배열 생성 : filter메서드 활용해서 todo.id!==selectedId인 요소들을 거름 const handleRemoveTodo = (selectedId) => { const remainingTodos = todos.filter((todo) => todo.id !== selectedId); setT.. 개인 프로젝트- 리액트로 todolist만들기-완료되지 않은 할 일 다시 진행중으로 보내기 1. input에 제목과 내용을 넣고 추가하기를 누르면 working에 추가되기 2. working에 있는 todo 완료 누르면 done으로 이동 3. done에 있는 todo 취소 누르면 working으로 이동 4. 삭제기능 내부적으로 cancelTodo 함수를 호출하는 handleCancelTodo 함수 호출 const handleCancelTodo=()=>{ cancelTodo(todo.id); } handleCancelTodo 함수의 매개변수로 selectedId를 전달한다. todo.map을 통해 todos 배열을 순회하며 각 요소를 변환하여 새로운 배열을 만든다. if 조건문을 사용하여 todo.id가 selectedId와 일치하는지 확인하고 일치하며 해당 할 일의 isDone 속성을 fals.. 개인 프로젝트-react로 todolist만들기-완료된 할 일 done으로 보내기 1. input에 제목과 내용을 넣고 추가하기를 누르면 working에 추가되기 2. working에 있는 todo 완료 누르면 done으로 이동 3. done에 있는 todo 취소 누르면 working으로 이동 4. 삭제기능 2. Revise.js 할 일을 완료 상태로 표시하는 로직을 처리하는 함수 handleMarkAsDone 호출 todo.id를 인자로 전달받아 markTodoAsDone 함수 호출 const handleMarkAsDone = () => { markTodoAsDone(todo.id); }; handleMarkTodoAsDone 함수를 호출하면서 selectedId(고유 식별자)를 매개변수로 전달한다. todo.map을 통해 todos 배열을 순회한다. 현재 순회 중인 할 일의 id가.. 이전 1 2 다음