본문 바로가기

모카 스터디

따라하며 배우는 리액트 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는 그린다는 뜻 그리고 작성한 태그의 .. 더보기
만들고 비교하며 만드는 리액트 [인프런] https://jeonghwan-kim.github.io/series/2021/04/05/lecture-react-ready.html#%EC%88%9C%EC%88%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-1 [리액트 1부] 만들면서 학습하는 리액트: 준비편 … jeonghwan-kim.github.io 인프런의 김정환님의 만들고 비교하며 만드는 리액트 강의 자료를 이미 블로그로 잘 정리해 두어서 저 링크를 보고 참조하자.! 더보기
커밋 컨벤션 # 예시 feat: 로그인 기능 추가 Feat: 새로운 기능 추가 Fix: 버그 수정 또는 typo Refactor: 리팩토링 Design: CSS 등 사용자 UI 디자인 변경 Comment: 필요한 주석 추가 및 변경 Style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 Test: 테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우) Chore: 위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등) Init: 프로젝트 초기 생성 Rename: 파일 혹은 폴더명 수정하거나 옮기는 경우 Remove: 파일을 삭제하는 작업만 수행하는 경우 더보기
한입 크기로 잘라 먹는 리액트 -일기장 프로젝트 pages- [인프런] 페이지 라우팅 0 - React SPA & CSR ==> 어떠한 요청에 따라 어떠한 파일을 보내줄지 정하는것. 웹서버들이 처리를 한다. 하지만 리액트는 멀티페이지 어플리케이션이 아닌 싱글페이지 어플리케이션(SPA)이다. 리액트로 제작된 웹사이틀르 요청하게 되면 어떤 요청이던 index.html 을 보내주고 React APP을 통쨰로 던져준다. 다른 페이지로 이동하고 싶어 클릭을 했을 시 서버에게 다른 페이지를 달라는게 아니라 react app이 페이지를 업데이트 시킨다. 그래서 서버와의 통신을 안해서 페이지 전환 시간이 엄청 빨라지게 된다. 데이터가 필요한 경우에는 서버에서 데이터만 빠르게 가져온다. 이렇게 클라이언트 측에서 알아서 렌더링하는것을 CSR (Client SIde Rendering)이라고 한.. 더보기

티스토리툴바