Amy의 일상기록

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Youtube clone 실습 개발언어 : React 활용 개발 환경 : HTML, PostCss 사용 API : Youtube Data API v3 특징 : 반응형 : CSS Grid를 이용해 창의 크기에 따른 열수 변화 자동적용 성능향상: memo를 이용한 리렌더링 방지, useCallback을 이용한 prop재전달 방지 기능 : 초기화면 : 추천리스트를 보여줌 검색 : 검색 키워드를 입력하고 엔터 혹은 돋보기 클릭시 해당 키워드의 검색결과 리스트를 보여줌 로고 클릭 : 로고를 클릭하면 초기 추천리스트 화면으로 돌아가고 검색창초기화 비디오 선택 : 비디오를 선택하면 비디오 재생레이아웃과 정보를 좌측에 출력하고 우측에 리스트를 출 화면을 줄이면 우측에 있던 리스트가 재생레이아웃 아래로 이동 GIt 주소..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

깃허브 주소 https://github.com/amy4229/habit-tracker/ GitHub - amy4229/habit-tracker Contribute to amy4229/habit-tracker development by creating an account on GitHub. github.com 배포된 페이지 https://amy4229.github.io/habit-tracker/ Habit tracker amy4229.github.io # 습관 관리 어플 ### 이 어플은 관리하고 싶은 습관을 등록 후 실행할 때마다 횟수를 체크해주는 어플입니다. 현재 버전에는 예시로 3개의 예시 습관이 등록되어 있으며, 삭제할 수 있고 혹은 추가할 수 있습니다. 상당 해더에는 모든 관리 습관의 횟수의 합계..

https://create-react-app.dev/docs/deployment#github-pages Deployment | Create React App npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /st create-react-app.dev 아래 내용은 위 create reate app의 내용을 번..

https://reactjs.org/docs/refs-and-the-dom.html Refs and the DOM – React A JavaScript library for building user interfaces reactjs.org Ref는 돔의 노드나 혹은 렌더 메소드안에서 생성된 리액트 요소에 접근하는 방법을 제공한다. 전형적인 리액트의 데이터 흐름에서는 오직 props만이 부모와 자식요소간 상호작용하는 방법이다. 이 방식에서는 자식요소를 수정은, 새로운 props와 함께 재렌더링하는 방식으로 이뤄진다. 하지만, 어떤 경우는 어쩔 수 없이 전형적인 데이터흐름과 다르게 자식을 수정해야한다. 재렌더링할 자식요소는 리액트 요소의 한 인스턴수가 될 수도 있고 또는 DOM요소가 될수도 있다. 이 두 경..