The Origin : React
1.[Chapter 1] 리액트란?
react / vue.js / ang-- 1-2 리엑트는 프레임워크가 아닌 라이브러리 1-3 리액트 컴포넌트 컴포넌트 >리엑트로 만들어진 최소한 앱의 단위 ->여러게의 컴포넌트로 이뤄져 있기에 하나의 컴포넌트를 여러곳에서 사용이 가능하며 여러명이 각자 컴포넌트를
2.[Chapter 2] 도커로 리액트 실행하기
어떤 프로그램을 다운 받는 과정을 간단하게 하기 위해서!가지고 있는 서버,패키지 버전,운영체제 등등에 따라 설치하는 과정중 에러 발생,, 설치과정도 복잡하다..radis를 설치하기 위해 wget이 필요..하지만 ! 도커로 하면 따로 wget설치 필요x \-> 그렇기에
3.[chapter 3] 간단한 To-Do 앱 만들며 리액트 익히기 - 1
package.json파일에 설치가 필요한것들이 있는데이것은그리고 src파일에 app.js파일을 수정하면서 사이트를 개발해나간다. package.json에 명령어가 있다 여기 index.html파일안에 div id=root친구를 src의 index.js에서 가져와서 사
4.[chapter 3] 간단한 To-Do 앱 만들며 리액트 익히기 - 2
원래 있던 부분 지우기 app.js, app.css, index.css를 지운당 바탕 색 바꾸기 index.css에 배경색 넣는다 컨테이너 만들기 클래스방식과 함수방식이 있는데클래스 방식으로 먼저작성을 해보자 뭐 이런식으로 해서 이제 index.html에 박스를 만들고
5.[chapter 3] 간단한 To-Do 앱 만들며 리액트 익히기 - 3
JSX Key 속성 이해하기 만약 키 속성이 없으면 유니크한 키를 줘야한다고 에러가 뜬다 Key속성 이란 ? >리액트에서 요소의 리스트 나열시 Key 필수 ! 키는 React 변경 추가 또는 제거된 항목 식별시 도움된다. 요소에 안정직인 아이디를 부여하려면 배열 내부의
6.[Chapter 4] To-Do 앱 최적화 하기 -1
class 없이 state를 사용할 수 있는 새로운 기능 그렇담 함수형이 클래스형보다 뭘 더 못쓰는거지?를 못해준다..그래서 함수가 더 간편해도 클래스를 써왔느데...Hooks가 업데이트 되고 이제 사용가능하다!!훅스로 훨 코드가 깔끔해졌다 useEffect안에서 모든
7.[Chapter 4] To-Do 앱 최적화 하기 - 2
이르케 분리하는게 좋다src폴더안에 컴포넌츠 폴더를 만들어주고 거기에 list.js로 list부터 분리해보자오호,,,분리하여따배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js표현식 \-> 클린 코드를 위해서 ! UI부분 가져오기필요한 함수
8.[Chapter 4] To-Do 앱 최적화 하기 - 3
부트스트랩같은 익스텐션이다..! 그 후 를 통해서 설치해준다. 를 하면 tailwind.cofig파일이 자동으로 생긴다.그 후 경로를 넣어준다그리고 app.css에 @를 해주고..제대로 적용됐는지 확인해보면 된다. 헬로월드가 정상적으로 뜬다 굿굿 스타일링 해주기 우선
9.[Chapter 4] To-Do 앱 최적화 하기 - 4
원시 탑입은 불변성을 가지고 있고 참조타입은 가지고 있지않다.원시타입 : Boolean, String ... (불변성O)참조타입 : Object, Array (주소값을 저장한다)결론 : 원시는 실제 변경 X, 참조는 실제 변경 O참조 타입에서 객체난 배열의 값이 변할
10.[Chapter 5]Netflix 앱 만들기 시작
만들게 될 Netfilx 애플리케이션 소개 넷플릭스 사이트를 만들어보쟝 Create-React-App으로 리액트 으로 리액트를 설치해주자 The Movie DB API Key 생성하기 > 영화정보를 가져오는 API이다 
row component를 app.js에서 5개만 우선 가져와보자.이런식으로 Row를 5개 작성해준다.isLargeLow같은 경우 제일 앞에 나오는 큰 카드를 의미하는 것이다.이런식으로 가져온다.UI를 이렇게 생성해준다.이 자식 하나때문에 가로정렬이 안됐다..언더바하나
12.[chapter 6] 모달 및 이미지 불러오기 - 2
웹 앱에서 동적 라우팅을 구현할 수 있다.라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 합니다.리액트는 SPA!! 설치가 완료된 후 가장 먼
13.[chpater7] TDD를 활용한 쇼핑몰 앱 만들기
실제 코드를 작성하기 전에 테스트 코드를 먼저 작성합니다.테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성합니다.TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다.실제 개발하면서 많은 시간이 소요되는 부분은 디
14.[Chapter 8] 주문 페이지 및 Mock Service Worker 사용
만들게 될 쇼핑몰 앱 소개 >#### 주문페이지 확인, 완료 페이지
모달창 모달 창 외부를 클릭했을때 모달 창이 닫히게 만들어주자 이는 useRef를 활용하면된다. useRef >특정 DOM을 선택할 때 사용하는 React Hooks 원래..JS에서는.. >- getElementById, querySelector 같은 DOM Sel
16.[Mission3] TDD 어플리케이션 만들기(+/- btn,Disable기능)
Test를 작성해주자.counterNum이란 아이디를 가진 요소가 0이라는 텍스트를 포함하는지 확인하는 테스트이다. 텍스트에 +,-가 들어가있는지 체크하는 테스트이다.Firing Events : 유저가 발생시키는 액션에 대한 테스트를 해야하는 경우 사용버튼엘리먼트를
17.[Mission3] Github Action을 이용한 AWS S3앱 자동 배포
굉장히... 여러가지 배포하는 방법이 있다.그 중 마지막 S3사용하고, 우리가 소스코드를 푸쉬하면 깃허브에서 테스트하고 S3로 자동배포 되는 방식을 할 것이다.우선, 레포하나를 만들자.node.js configure를 선택해주자.그러면 나오는 workflow를 보자