React-Master 를 향해 : Neonflix 제작기

react-begin 에서는 api를 사용해 간단한 정보를 불러와 보여주는 페이지를 제작했다면,이번 react-master class 에서는 리액트 뿐만 아니라 타입스크립트 등등을 사용해 NETFLIX 클론코딩을 할 예정.이름을 아예 똑같이하고 싶진 않아서 Neonfl

그럼 가보자고~styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.styled-coponents 는 styled-componen

애니메이션을 만들어보자애니메이션을 줘보자예제 1)스타일 컴포넌트 안에서 애니메이션을 주려면 keyframes 가 필요하다.스타일 컴포넌트에서는 keyframes helper를 사용시 앱 전체에서 사용할 수 있는 고유한 인스턴스를 생성해준다.이제 Box 밖에서 애니메이션

타입스크립트~ 갈겨볼까~ ✅ TypeSciprt > TypeScript는 MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어로, JavaScript에 타입을 부여한 자바스크립트가 확장된 언어이다. 내가 생각한 장점은? TypeScript를 이용하면 컴파일

재밌는데 어려웡..state 의 type 을 지정할 수 있다.일반적으로는 초기값을 지정하면 타입스크립트가 자동으로 타입을 유추하기 때문에 굳이 지정해주지 않아도 되지만,상태가 undefined또는 null이 될 수도 있거나 객체 또는 배열일 때는 지정해주는 것이 좋다.

목표!암호화폐 추적 기능 만들기 :)강의는 react-router-dom 5.3 버전을 사용했지만나는 최신 router-dom 을 배우는 것이 더 낫다고 생각되어 6.4 버전으로 진행.coinpaprika API 를 사용해서 만든다.코인 트래커 app 을 만들기 전 준

홈페이지 만들기!코인 랭킹 1위부터 100위까지 나오는 메인페이지를 만들어보자.전부 감싸줄 컨테이너 컴포넌트, 헤더 컴포넌트, 타이틀 컴포넌트를 만든 뒤본격적으로 API 를 불러와 코인을 보여주기 전 임시 데이터를 불러왔다.그리고 Link 를 사용해 리스트에서 bit

이제 Coin.tsx 페이지에 본격적으로 데이터를 가져올 시간.코인의 정보를 알려주는 url, 해당 코인의 가격이 상세하게 나와있는 url 두 가지를 사용해서 구현하는 것이 목표!https://api.coinpaprika.com/v1/coins/btc-bitc

React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리,리액트에서 비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리이다."global state"를 건드리지 않고

React Query의 모든 내부 작동을 시각화하는 데 도움이 되며 문제가 발생하면 디버깅 시간을 절약할 수 있다.( = 캐시에 있는 query 를 직접 볼 수 있다.)process.env.NODE_ENV === 'development'인 경우에만 번들에 포함되므로 프

차트 가보자고~Chart 를 만들기 위해 'Coin.tsx' 에 있는 coinId 값을, 'Chart.tsx' 파일로 props 통해 보내주기.그리고 typescript 에게 알려줄 interface 를 만들어줌이제 우리는 coinId 를 가지고 있으니, API 에 r

대망의 코드 챌린지 ! 목표 1. 코인 디테일 페이지에서 홈 화면으로 가는 버튼 만들기 2. price 탭 구현하기 먼저, 홈 화면으로 가는 버튼(뒤로가기) 만들어주기. 그냥 집모양 이모지 🏠 는 안이뻐서.. 🏛️ 이걸로했다 ㅎㅎ 그리고 코인

Recoil? state management. Fackbook 에서 출시한 전역상태 관리 라이브러리단순 react.js 로 state management를 구현할 때 불편한 점?나의 경우 App에서 컴포넌트로 내려가는 계층구조로 인해서 state와 state manip

I Made it ! 동영상 업로드가 안되길래 gif 로 바꿔서 올렸더니 .. 화질이 좀 깨지지만 !! ❤️🔥❤️🔥❤️🔥❤️🔥 헤헤 만들었따 ❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥 조금 더 이쁘게 만들고 싶지만, 다음 강의로 넘어가야하니 이정도만 ! 얼른 넷플

잊기 전에 복습 들어간다\~~useRecoilValue(state)Recoil state 값을 반환 ( atom 의 value 값을 읽어온다 라고 생각하자 )읽기 전용 상태와 쓰기 가능 상태에서 모두 동작하므로 컴포넌트가 상태를 읽을 수만 있게 하고 싶을 때에 추천하는

useRecoilValue(state)Recoil state 값을 반환 ( atom 의 value 값을 읽어온다 라고 생각하자 )읽기 전용 상태와 쓰기 가능 상태에서 모두 동작하므로 컴포넌트가 상태를 읽을 수만 있게 하고 싶을 때에 추천하는 hookuseSetRecoi

Recoil Selector > Selector는 Recoil에서 함수나 파생된 상태를 나타낸다. 주어진 종속성 값 집합에 대해 항상 동일한 값을 반환하는 부작용이 없는 "순수함수"만 사용이 가능하다. 우선, selector 를 사용하지 않는 상태의 예시를 봐보자.

https://www.typescriptlang.org/ko/docs/handbook/enums.html열거형은 TypeScript가 제공하는 기능 중 하나입니다. 열거형으로 이름이 있는 상수들의 집합을 정의할 수 있습니다. 열거형을 사용하면 의도를 문서화 하

To Do List 끝!리액트를 배우면 초반에 다들 투두리스트를 만든다고해서 내심(?) 기대했던 파트다.디자인 이쁘게 해야지~싶었지만 이거 만들면서 이론을 머리에 거의 때려박는 수준으로 했더니디자인은......그냥 니코보다 조금 더 이쁘게 만들자 수준....으로..ㅎㅎ

Recoil Recoil 의 기본적인 복습내용은 여기 오늘은 GET Selector, SET Selector 에 대해 파볼 시간 GET Selector 간단 예시로, 각각 'minutes', 'hours' 의 값을 갖는 input 두개를 만들고 'minutes' 에

React-beautiful-dnd 🚩 https://github.com/LeeHyungGeun/react-beautiful-dnd-kr Raeact 에서 손쉽게 drag and drop 기능을 만들기 위한 라이브러리 설치 todo, doing, done 리스트를

목표 아이템을 drag and drop 했을 때 리스트들이 재정렬 될 수 있도록onDragEnd 함수 설정해주기 그러기 위해 todo state 를 위한 atom 을 만들어줬다. onDragEnd DragDropContext 컴포넌트는 onDragEnd라는 pro

이제 하나의 보드가 아닌 여러개의 보드를 만들어보고, 보드와 보드 사이에 카드들이 드래그 앤 드롭될 수 있도록 만들기. 그러기 위해 state 를 object로 만들어준 다음, a,b,c.. 값들을 to_do, doing, done 3개로 쪼개주었다. 총 3개의 보드

카드를 드래그 앤 드롭할때, 내가 board 에 도착하는지 떠나는지에 따라서 area(카드 밑 배경색 부분) 의 색상을 변경해주기 위해 'snapshot' argument 를 사용!isDraggingOver: boolean현재 선택한 Draggable이 특정 Dropp

이제 진짜 todo 를 추가할 form 을 만들시간! 전에 배웠던 react-hook-form 을 사용해서 ❤️ react-hook-form 🚩 https://react-hook-form.com/ done! 이제 임시 값이 들어가있던 atom 을 부셔..바꿔보자.

Code challenge 목표 스타일 꾸미기 작성한 모든 toDo 를 localStroage 에 저장 및 로드하기 작성한 toDo 삭제하기 새로운 보드 생성하기 보드 삭제하기 보드끼리도 순서 바꾸면 대박! 스타일꾸미기는 중간중간 코드짜면서 손봐줄 예정이라~ 패스~

Trello 클론 코딩이 끝났다!! 예이

React용 production-ready 모션 라이브러리🚩 https://www.framer.com/motion설치 사용framer motion 을 사용하려면 HTML 태그 앞에 motion. 을 붙여야 한다.<motion.div></motion

DragConstraints허용된 드래그 가능 영역에 제약 조건을 적용한다.dragConstraints 에는 드래그 가능한 컴포넌트의 가장자리 거리를 정의한다. (드래그 가능한 영역에 가장자리에서 얼마만큼까지 허용할 것인지 지정)사용 방법dragSnapToOrigint

공식문서는 여기컴포넌트가 React 트리에서 제거될 때 애니메이션 효과를 줄 수 있다.React에는 다음과 같은 수명 주기 메서드가 없기 때문에 종료 애니메이션을 활성화한다.규칙AnimatePresence 내부에 조건문이 있어야 사용이 가능하다사용 방법exit이 컴포넌

true인 경우 이 컴포넌트는 레이아웃이 변경될 때 새 위치에 자동으로 애니메이션을 적용한다.사용 방법예시 1)기본 상태(클릭 전)클릭 후 clicked 가 false 라면 좌측 상단에, true 라면(클릭했다면) 중앙에 오게 바꿨다.그러나 별도로 애니메이션을 준것이

Header 에 위치할 Navigation 을 만들어보자! Navigation Bar 네비게이션 바에는 "넷플릭스 로고, Home, Series, Search, 검색아이콘" 을 넣을 예정! 넷플릭스 로고는 framer motion 을 넣을거라 svg 파일로 추가하고

api - themoviedb API 우선 apis 폴더를 만들어서, 그 안에 movie + serires = MoviSerApi.ts 파일을 하나 만들고, 검색 기능 전용인 SearchApi.ts 를 만들었다 movie 와 tv(series) api 의 inter

드디어 진짜 힘들었던 Search 페이지 제작...화면을 어떻게 짜야할까 엄청 고민했다.검색 후 결과를 띄울 때에 기존에 만들었던 영화, tv 슬라이더 컴포넌트를 재사용할지,아니면 새로 만들어서 다시 띄울지 엄청 고민했다..결론은. 넷플릭스 클론코딩이니 기왕 할꺼 진짜

이번엔 좀 특이하게 인터뷰 방식으로 제작기를 적어볼 예정이다 :) 🌍 Neonflix website 바로가기🌍 Neonflix web-app 바로가기A. 네 안녕하세요! 이번 넷플릭스 클론 코딩을 모두 마친 Leesu 입니다(짝짝짝)A. 유튜브 프로젝트 완료 후 리