모카 스터디/React 썸네일형 리스트형 따라하며 배우는 리액트 A-Z -리액트 Version 18 - [John Ahn] 섹션 9 리액트 Version 18 Automatic batching Suspense on the server Transtition 더보기 따라하며 배우는 리액트 A-Z -Next.js와 TypeScipt - [John Ahn] 섹션 8 Next.js와 TypeScipt Next.js란 Next.js 기본 파일 구조 Pre-rendering Data Fetching TypeScript란? Next.js와 TypeScript 만들 앱 소개 메인 페이지 UI 만들기(마크 다운 파일 생성) 마크다운 파일을 데이터로 추출하기 TypeScript Type Typescript 추가 제공 타입 Type annotaion, Type ingerence Type assertion get Static Props를 이용한 포스트 리스트 나열 포스트 자세히 보기 페이지로 이동(file system 기반의 라우팅) 포스트 데이를 가져와서 보여 주기 (remark) 블로그앱 스타일링 Nextjs 13 더보기 따라하며 배우는 리액트 A-Z - React TDD - [John Ahn] 섹션 6 React TDD 기본 테스트 주도 개발(TDD)란 무엇인가? React Testing Library란? Jest란? Jest 파일 구조 및 사용법 React Testing Library 주요 API 쿼리 함수에 대해 Create react app으로 리액트 설치 및 Prettier 설정하기 ESLint 설치 및 설정하 섹션 7 React TDD 를 이용한 간단한 앱 생성 및 배포 TDD를 이용해서 만들 앱 소개 앱만들기 시작 플러스, 마이너스 버튼 생성 플러스 마이너스 버튼 시능 넣기(fire event) on/off 버튼 만들기(to HaveStyle) on/off 버튼 클릭 시 버튼 disabled github Action을 이용한 AWS S3로 앱 자동 배포하기 앱 배포를 위한 AWS S.. 더보기 따라하며 배우는 리액트 A-Z - Netfilx 앱 완성하기 - [John Ahn] 섹션 5 영화 나열을 위한 Row 컴포넌트 생성하기 슬라이드 기능 추가하기 styled Component를 이용해서 Footer 생성하기 영화 자세히 보기 클릭 시 모달 생성하기 Moive 모달 UI 생성하기 React Router Dom React Router Dome APIs Netfilx 앱에 React Router DOm적용하기 useLocation을 이용한 검색 페이지 구현하기 검색 페이지 UI 구현하지 useDebounce Custom Hooks 만들기 useParams를 이용한 영화 상세 페이지 구현하기 모달 창 외부 클릭 시 모달 닫게 만드는 custom Hooks 생성 swiper 모듈을 이용한 터치 슬라이드 구현하기 github를 이용해서 배포하기 더보기 따라하며 배우는 리액트 A-Z - Netflix 앱 - [John Ahn] 섹션 4 Netfilx 앱 만들기 시작 만들게 될 Netfix 애플리케이션 소개 The Movie DB API Key 생성하기 The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기 넷플릭스 애플리케이션 전체 구조 생성하기 네비게이션 바 컴포넌트 생성하기 이미지 배너 생성하기 styled Component에 대해서 styled Component를 이용한 비디오 배너 생성하기 더보기 따라하며 배우는 리액트 A-Z - To-do 앱 최적화하기 - [John Ahn] 섹션 3 To-DO 앱 최적화 하기 React Hooks이란 무엇인가? 오른쪽과 같이 커스텀 훅을 개발자가 만들어 왼쪽과 같은 복잡한 로직을가진 코드를 오른쪽 처럼 간결하게 만들 수 있다. TO -DO 앱 클래스 컴포넌트에서 함수형 컴포넌트로 바꾸기 state와 props 할 일 목록 부분을 위한 컴포넌트 생성하기(컴포넌트 분리하기) 구조 분해 할당(Destructuring) Form 부분을 위한 컴포넌트 생성하기 리액트 모듈 설치 시 나는 종속성(dependency) 에러 해결방법 리액트18 버전에서 라이브러리들을 설치할 때 종속성에 관한 에러가 날 때가 많이 있습니다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree.. 더보기 따라하며 배우는 리액트 A-Z - To-do 앱 - [John Ahn] 섹션 1 리액트란 리액트는 프레임워크가 아닌 라이브러리 리액트 컴포넌트 브라우저가 그려지는 원리와 가상돔 리액트 설치를 위해서 필요한 것들 (Node.js & Visual Studio Code) 섹션 2 간단한 To-Do 앱 만들며 리액트 익히기 Create React App으로 실행된 리액트의 기본 구조 살펴보기 SPA란? To-do 앱 소개 및 JSX 알아보기 babel이 jsx를 일반 자바스크립트로 변형 시켜준다. 이것 이외에도 많은 문법 규칙이 있지만 다른건 실습을 하며 배운다 TO-Do 앱 만들기 시작 클래스 형으로 만든 컴포넌트 예시 할 일 목록 UI 만들기(JSX, CSS 작성) 리스트 스타일링에서 할일을 체크를 하면 줄이 그러져야 하므로 동적인 변화를 위해 함수로 작성. MAP 메소드를 사.. 더보기 만들면서 배우는 리액트 [인프런] 섹션 0 인트로 영어로 단어를 입력하면 그 단어를 가진 짤방이 나오게 된다 하트를 누르면 그 사진이 저장이 된다 live server , format on save https://github.com/milooy/cat-jjal-maker/blob/main/answers/2-setup.html에 있는 소스 코드를 받아서 살을 붙이며 진행 answers라는 폴더를 보며 디버깅을 도움받기 index.html에 살붙여서 프로젝트 진행 섹션 1 리액트가 왜 좋은가요 ? 웹사이트 움직이게 만들기 리액트 쓰기전 상당히 불편햇다. 그래서 리액트로 더 간결하게 처리할수 있는걸 배워보자 (ReactDOM.render에서 에러가 난다면 ? 강의노트 필수 참고) 리액트 맛보기 Render는 그린다는 뜻 그리고 작성한 태그의 .. 더보기 이전 1 2 3 4 5 다음
