React

✔ 리액트 설치와 개발환경 셋팅 ✔ 리액트 기초용어 의미 ✔ 리액트를 사용하는 이유◾ eslint-disable◾ npx : 라이브러리 설치를 도와주는명령어 (node js 필요)◾ create-raect-app : 리액트 셋팅 다된 boilerplate

✔ 블로그 navbar 예제를 통해 style속성 적용✔ ES6 destructuring 문법 적용해보기✔ useState 실습예제 적용해보기

✔ 글 제목 옆에 좋아요 버튼만들기✔ 버튼 눌렀을때 자바스크립트 실행시키기✔ state 데이터 변경하는 방법

✔ state 다루는 방법✔ immutable data✔ component를 통해 html 관리◾ 제목바꾸기 함수에서 state를 변경하기위해 글제목0 = '여자코트 추천'라고 작성하는것은 올바르지 않다.◾ state는 = 등호기호로 직접 조작할 수 없다◾ 만들어놓은

✔ map함수를 이용해 반복된 HTML코드 간단히 만들기✔ 일반 for 반복문을 쓰고싶다면?✔ props 기능과 원리◾ map함수는 원본 자료형을 변형시키지 않아서 새로운 변수에 담아서 사용한다◾ 위처럼 작성하면 newArray에는 10, 20, 30이 담겨져

✔ props 사용하는 이유와 방법✔ 모달창 props 기능추가해보기✔ state 데이터 변경하는 방법◾ 부모 컴포넌트 -> App◾ 자식 컴포넌트 -> Modal◾ 이때, Mdoal이라는 자식컴포넌트가 부모인 App이 가진 state를 사용하고싶다면 props

✔ 제목버튼을 눌렀을때 각각 다른 모달창 제목나타내기✔ 버튼말고 <h3>에 직접 사용해보기◾ 버튼 3개 만든다.◾ 각각 버튼을 누르면 글제목이 수정되어야하므로 Modal라는 컴포넌트안에 제목부분을 props로설정◾ 누른제목이 변수가 0이면 0번째 제목이 나타

✔ input데이터를 저장할 state 만들기✔ input에 달 수 있는 onChange ✔ input입력시 저장하여 추가 리스트만들기◾ onChange : input에 입력할때마다 특정 함수를 동작시킴◾ input에 입력할때마다 state에 저장한다◾ o

✔ yarn & React Boostrap 라이브러리 설치 및 적용✔ Navbar, Jumbotron, item card layout ◾ yarn은 npm이나 npx를 대체해서 보다 빠른 라이브러리 설치속도와 안정성이 있다.◾ 이제 npm run start 대

✔ import / export ✔ data Html binding ◾ src 폴더에 App.js와 나란히 data.js를 만듬◾ data.js에서 중요한 변수를 export 하고싶을땐 export default라는 문법을 사용◾ 우측에는 밖에서 사용하고싶은

✔ 컴포넌트화 하기✔ 컴포넌트마다 다른데이터 전송해주기 (데이터바인딩)✔ 컴포넌트를 반복문으로 쉽게 작성하기 (데이터바인딩)✔ 이미지 데이터바인딩하기◾ 먼저 data.js에 있는 data를 가져와서 사용해야하기 때문에, Data를 useState 초

✔ React Router 설치 & 셋팅✔ BrowserRouter vs HashRouter✔ 라우팅하기 (페이지 나누기)✔ 메인페이지/상세페이지 Route에 내용 채우기◾ yarn react-router-dom 설치◾ index.js에서 HashRouter

✔ Router - Link , Switch , histroy ✔ Link 태그로 페이지 이동버튼 만들기✔ histroy로 지정된 곳 이동하기✔ Switch 역할과 필요성◾ Navbar 컴포넌트 안에 Nav.Link 라는 컴포넌트에 여러가지 버튼들이 있

✔ <Detail> 컴포넌트에 데이터바인딩하기✔ URL 파라미터로 상세페이지 3개 제작하기✔ useParams ✔ Url Parameter◾ 상위컴포넌트가 중요 데이터를 가지고 있어야 관리하기 편함◾ state 만들땐 state를 필요로하는 컴포

✔ styled-components✔ props styling✔ node-sass✔ nesting 문법✔ @import 문법 & extend 문법✔ @mixin/@include◾ yarn add styled-components 설치◾ 해당 컴포

✔ useEffect Hook ✔ Lifecycle & Hook✔ 페이지 방문 2초 후 UI가 사라지게하기✔ 컴포넌트가 사라질 때 코드를 실행하기◾ 컴포넌트는 생성이 될 수도 있고 삭제가 될 수 있고 관련된 state가 변경되면 재렌더링(업데이트)가 일

✅ fetch✅ json✅ stringify ✅ localStorage.setItem ✅Authorization회원가입 버튼을 누르면 페치함수에서 서버에게 요청하게된다. 요청할때, 서버에서 등록된 key값들을 작성하여 보낸다. 주요 정보들이니 POST로 보냈다. JSO