오늘은 상품의 재고가 몇개 남았는지 표시해볼 것이다. 일단 재고 데이터를 state에 저장해보자 let [inventory,inventoryChange] = useState([10,11,12]) 저장한 state는 Detail.js가 아닌 App.js에서 만들어야 한다. 이유는 중요한 데이터들은 상위 컴포넌트에 보관하는것이 중요하다!! 모든 데이터는 위에서 밑으로 흐르기 때문! 다시 Detail.js에서 컴포넌트로 UI를 만들어 보자! function Info() { return 재고; } 이렇게 되면 컴포넌트 구조는 다음과 같다. 이제 아까 만든 재고 state 데이터를 바인딩 해야한다. App → props → Detail Detail → props → Info props 를 두번 사용하여 전송한다...

Ajax? 서버에게 요청을 하는데 새로고침 없이 할 수 있게 도와주는 코드 요청에는 여러 종류가 있다. 첫번째 , GET요청 주소창에 URL 입력하는 요청 특정 페이지의 자료를 읽기! 두번째, POST 요청 정보를 숨겨서 서버에 전달하고 싶을 때 사용 읽기보단 서버로 중요 정보 전달 Ajax를 사용하는 방법은 세가지가 있다. JQuery 설치 후 $.ajax() axios 설치 후 axios.get() 자바스크립트 fetch() 리액트나 뷰가 많이 사용하는 라이브러리는 axios를 많이 사용한다. 설치 yarn add axios npm install axios import axios from 'axios’ 블로그의 더보기 버튼을 구현해보자! axios.get() 이라고 작성하면 GET요청을 새로고침 없이..

이전 시간 오류 잡기 cannot appear as a descendant of 오류 발생! 원인 : a태그 안에 a태그 넣으면 안된다 Home 따라서 이렇게 수정해준다. Home 여기서 as 는 react-bottstrap 문법으로 기본 a태그 대신 사용할 HTML태그 혹은 컴포넌트를 집어넣을 수 있다. Lifecycle & Hook 컴포넌트의 Lifecycle은 인생이다. 😯 컴포넌트가 생성이 되고, 변경이 되면 업데이터가 되고, 삭제가 될 수 있다. 우리는 Lifecycle 중간중간에 hook을 걸 수 있다. hook? 컴포넌트의 인생 중간중간에 뭔가 명령을 줄 수 있다. 🧐 컴포넌트가 생성되기 전에 hook! (그전에 이것좀 해줘!) 을 걸 수 있다. 또는 컴포넌트가 삭제되기 전에 hook! 이전..

component가 많아지면 다양한 파일에 분리가 되어있으면, css 작성 고민이 많아진다. 한곳에 css를 다 모아놓으면, 중복 문제도 발생하게 된다. 이를 해결하기 위해 class선언 없이 컴포넌트에 css를 직접 장착하는 것을 styled-components(=CSS in JS)라고 한다. styled-components 설치 yarn add styled-components npm install styled-components styled-components 사용하기 Detail.js import styled from 'styled-components' let 박스 = styled.div` padding : 20px; `; function Detail(){ return ( ) } 박스라는 컴포넌트를..

routing : 설치 라우팅 ? 페이지를 여러개 만드는것 라우팅은 react-router-dom 라이브러리 이용해야한다 yarn add react-router-dom@5 npm install react-router-dom@5 @5를 붙여야한다! index.js 셋팅 이 파일은 App.js에 있는 컴포넌트를 index.html에 꽂아주세요~ 뭐 이런 작업을 시키는 파일이다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {BrowserRouter} from 'r..

yarn을 이용한 새로운 프로젝트 설치 yarn이란? npm이나 npx를 대체해서 이용할 수 있게 도와주는 라이브러리로 npm보다 속도와 안정성을 자랑한다. npx create-react-app 실행 시 자동으로 yarn이 구동되어 빨라진다. npm install ~ 보다 yarn add ~ 라고 사용하시면 더 빠르게 설치할 수 있으며, npm run start를 yarn start로 대체할 수 있다. React Bootstrap 라이브러리 설치하기 https://react-bootstrap.github.io/ npm install react-bootstrap bootstrap yarn add react-bootstrap bootstrap 둘중에 하나를 골라 설치해주면 된다. 특정 스타일을 사용할 때는 ..

행위 주도 개발 (BDD) = 인수 테스트 주도 개발 (ATDD) 인수 테스트 주도 개발 ? 사용자가 개발자가 만든것을 받아서 사용자 요구사항에 맞는지 확인하는 테스트 이전에 배웠던 요구사항 분석, 유스케이스 다이어그램, 블랙박스(테스트 케이스), 화이트박스(코드 커버리지) , 테스트 주도 개발 은 개발자 관점이다! → 단위 테스트 필요 BDD란? 행위 주도 개발로 사용자 기능 위주이다. 고객과 기획자, 설계자, 구현자, 테스터들이 대화를 하면서 기능을 기술 (기능적인 측면) 목적은 고객의 요구사항을 맞추기 위해서 올바른 소프트웨어 개발 방법 ? 고객의 요구사항을 구체적인 사례(값)를 사용 고객과 개발자간의 지속적인 소통, 요구사항 개선 조정 및 이해 공유 🚨소프트 웨어 철학! 🚨 개방, 공유, 참여 이..

애자일 개발 방법론의 사용으로 테스트 주도 개발이 중요해졌다. 테스트 주도 개발이란?🤔 단위 테스트이다. 단위 테스트 코드를 개발한 다음에 제품 코드를 개발하는 방식 (클래스 단위로 테스트 코드가 가능) 실패할 만큼 테스트 코드 작성하고, 테스트를 통과할 만큼만! 기능별 업무 분담보다는 태스크 별로 업무를 공유하면서 진행하는 것이 좋다. 장점 : 문제 발생 시 즉각적인 원인 파악 해결 가능, 지속적인 통합 가능, 모든 부분에서 부분 테스트, 자동화된 리그레션 테스트(회귀 테스트) *리팩터링 : 동일 기능 + 성능 향상, 가독성 향상 JUnit을 활용한 TDD 실습 - 초간단 계산기 개발 블랙박스 테스트 케이스를 만들었다는 가정하에 요구사항 초기 값 설정하지 않았으면 0으로 설정 초기 값을 생성자를 통해 ..