개발 일지

Using Fetch fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 네트워크를 통해 json 파일을 호출해서 콘솔에 data를 찍어보는 과정이다. fetch( )함수는 url, 즉 API 주소를 첫번째 인자로 옵션 객체를 두번재 인자로 받고, Promise 타입의 객체를 반환한다. 두번째 then에서는 data를 응답 받은 후의 로직을 작성한다. API 호출 성공시 응답(response) 객체를 resolve, 실패했을 경우에는 예외(error) 객체를 reject한다. options 객체에는 HTTP방식(method), HTTP..

필수구현 사항 구매 수량 버튼을 눌렀을 때 수량에 따른 가격 변동 탭 메뉴 클릭 시 스타일 변경 및 스크롤 위치 이동 새로고침시 scrollTop 구현 Mock Data 활용해서 리뷰창 구현하기 → 추후 API 통신 state를 활용하여 구매 수량에 따른 가격 변동 버튼 만들기 constructor(props) { super(props); this.state = { quantity: 1, }; } countUpQunatity = () => { const { quantity } = this.state; this.setState({ quantity: quantity + 1, }); }; countDownQuantity = () => { const { quantity } = this.state; this.se..

*Default Export *: 하나의 파일에서 단 하나의 변수 또는 클래스 등으로만 export 한다. const MyComponents = ( ) => { ... } export default MyComponents import 할 때는 아무 이름으로나 import 할 수 있다. 참고* : var, let,const`를 바로 default 할 수 없다. Named Export : 한 파일 내에서 여러 변수 또는 클래스 등으로 export 할 수 있다. Named export 방식 사용시 중괄호로 감싸야 한다. 여러 값을 내보낼 때 유용하다. export 시 import한 이름과 동일한 이름을 사용해야 한다. 따라서 식별자 충돌을 피하기 위해서 export시 이름을 바꿔줄 수도 있다. (단, as를 ..

전체 UI화면에 공통사항으로 적용될 Navigation 컴포넌트 작성하기 필수구현사항 대메뉴에 마우스 Enter시 메뉴 slide-down, 메뉴에서 마우스 Leave 시 메뉴 slide-up 반복되는 내용은 컴포넌트로 분리, Array.map( ) 활용 state와 props 적절하게 활용할 것 ** Refactoring Review** 1. import 순서 가독성을 위해 import 순서를 변경해주는 것이 좋다. React → Library(Package) → Component → 변수 / 이미지 → css 파일(scss 파일) 변경 전 import React, { Component } from 'react'; import { Link } from 'react-router-do..