개발 일지

👉 관심사의 분리 (Seperation of Concerns) : 특정한 관심사에 따라 기능을 구분하여, 각 기능들마다 개개의 관심사를 해결하기 위한 코드를 작성하는 패턴이다. 함수를 최대한 간결한 형태로 구현하여, 프로세스의 복잡도를 낮추고, 재사용성을 높이며, 유지보수를 원할하게 합니다. 리덕스도 이 "관심사의 분리"를 통해 폴더 구조를 나누어 볼 수 있는데, 크게 나뉠 수 있는 파트가 "리듀서(reducer)"와 "액션(action)" 이다. 예를 들어, 데이터를 기준으로 유저와 관련된 기능들은 user.js 에 다 넣어두고 사용, 마찬가지로 게시글과 관련된 기능들은 boards.js에서 관리한다. 리듀서 같은 경우는, 순수함수로 정의가 되어 있기 때문에 분리하기 굉장히 편리하다. const ini..

🤔 리덕스란 몰까..? 그리고 왜 사용하는 걸까? https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org 프로젝트의 depth 가 깊어지면서 컴포넌트간에 state를 주고 받고, 넘나드는 것이 점점 복잡해진다.. 이를 해결 하기 위해 최상위 컴포넌트에서 전역변수로 한꺼번에 선언해서 여러 곳에서 사용하기 위해 사용한다. 리덕스를 사용하게 되면, state로 일일히 선언하지 않아도 된다! 👉 리덕스의 장점 - action을 실행할 때 dispatch 의 히스토리를 확인할 수 있다.(에러 핸들링에 용이) - git reset 처럼 이전 action으로 되돌릴 ..

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..

1. React 기본용어 React : UI를 만들기 위한 자바스크립트 라이브러리 CRA : Creative-React-App 의 줄임말, react 개발환경을 더 편리하게 사용하기 위해서 사용하는 tool chain node.js : 탈웹! 브라우저 외에서도 자바스크립트를 실행하게 해주는 실행 환경 npm : node package manager. node로 실행되는 여러가지 패키지들을 관리함 node-modules : package들 관리하는 파일 .gitignore : github에 올리지 않을 파일들의 모음. 기본적으로 node modules는 ignore에 들어가있다. package.json : dependencies를 통해서 필요한 모듈을 설치해준다. index.js : import React..

Props 컴포넌트에 내장되어 있는 객체이다. 그 중에서 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달해주는 객체이다. 넘겨주고 싶은 정보는 부모 영역에 존재한다. 자식 요소에게 넘겨주고 싶을 때 : 작명 = {변수명} 📌부모 컴포넌트 import React, {Component} from "react"; import Child form "./Child/Child"; class Parent extends Component { render(){ const name ="Kim"; test = () => { console.log('테스트입니다') } return ( Parent ); } } export default Parent; 📌자식 컴포넌트 import React, {Component} f..