Front-End/React.js15 webpack이란? react를 가지고 무언가를 개발을 하려면 webpack이 기본옵션이다. react로 개발을 한다는 말은 다양한 컴퍼넌트를 모듈화 시켜서 여기저기서 export-import 하기 때문에 서로간의 의존성을 관리하는 것이 매우 중요하기에 매우 권장되는 옵션이다. webpack이 중간에서 조합해 하나의 파일로 만들어 준다. 이를 구현하기 위해서는 몇몇 설정사항이 있다. [webpack에게 알려줘야 할 설정사항] 어플리케이션의 시작 포인트, 또는 root 역할을 하는 자바스크립트 파일 어떤 방법으로 코드를 변경할것인가 어떤 위치로 변경된 코드를 위치시킬것인가 2022. 5. 1. Axios 연결 Axios 연결 axios 연결 lib 에 index.js에 axios 정의 axios가 필요한 컴포넌트에 import를 시킨다. 방식은 POST, GET이 있다. //POST방식 //예)로그인: axios 가 필요한 부분 -> handleSubmit에서 try { const response= await Axios.post("/artSharing/sign",{ id, //똑같아서 생략 가능 pw:password }) this.handleClose(); handleLogin(true); console.log(response); history.push("/"); }catch(error){ alert(error); console.log(error); }; //try catch 문에서 사용해야함 await Ax.. 2022. 5. 1. React를 위해 사용하는 라이브러리들 React 는 프레임워크가 아니라 뷰에만 신경쓰는 라이브러리다. 그래서 기타 기능을 다른 라이브러리들을 가져와 구현해야 함 ! ESLint 란? 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 도구 (사용방법 -> Editor에 ESLint 프러그인을 설치하기, webpack 번들링시 eslint-loader 를 추가하기) Ajax 란? Asynchronous Javascript and xml 비동기적인 웹 제작을 위해 HTML/CSS (표현정보), DOM,Javsscript (동적인 화면 출력), XML,XMLHttpRequest (웹서버와 *비동기적으로 데이터를 교환하고 조직) 의 조합을 이용하는 웹 개발 기법. 비동기(Asyn): 하나가 끝나기전에 제어권을 다음으로 넘겨서 .. 2022. 5. 1. Redux 개념이해 개념 리덕스는 리액트에서 사용하기위해 만든 상태 관리 라이브러리이다. 상태 관리에 있어서 불필요한 리렌더링 부분을 없애기 위해서 컴포넌트 외부에서 상태관리 로직을 처리한다. 리덕스를 사용하면 스토어에서 모든 상태 관리가 일어나는데, 상태에 어떤 변화를 일으킬 때 액션을 스토어에 전달하고, 그 과정을 디스패치라고 한다. 스토어가 액션을 받으면 리듀서가 액션을 기반으로 상태를 어떻게 변경할지 정하고, 액션을 처리하면 새 상태를 스토어에 저장한다. 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에게 바로 전달하고, 이때 부모 컴포넌트로 props를 전달하는 작업은 하지 않고, 리덕스에 연결하는 함수를 사용해서 컴포넌트를 스토어에 구독시킨다. 용어 스토어: 앱의 상태 값들을 저장하고 있다. 액션.. 2022. 5. 1. Component 실제 사용방법 import: (ES6문법), 모듈을 불러오는 키워드 import MyComponent from ‘./MyComponent’; export: 모듈 내보내기 export default MyComponent; props 부모컴포넌트에서만 설정할 수 있는 데이터 값. 자식에서는 읽기전용. -> props 기본 값 설정: defaultProps static defaultProps = { name: ‘기본 이름’ } -> props 검증: propTypes & 필수 propTypes 설정 import PropTypes from ‘prop-types’; //import 추가 //name props 타입을 string으로 설정 static propTypes = { name: PropTypes.string, //nam.. 2022. 5. 1. Container 란? Container도 react 패키지의 Component를 물려받는 컴포넌트의 일종이다. ->Container는 앱의 상태를 관리하기 때문에 앱의 상태가 자주 바뀔수록 그에 따라 빈번하게 업데이트가 일어난다. -> Redux와 소통하면서 앱의 상태를 제어하는 컴포넌트. (예시) 리덕스를 사용할 때에는 특히 Container와 Component를 구분해주는 게 좋다. Container는 앱의 상태를 관리하기 때문에 앱의 상태가 자주 바뀔수록 그에 따라 빈번하게 업데이트가 일어난다. 그래서 필요없는 부분에 업데이트가 일어나지 않게 하려면 Container과 Component를 구분해주어야 한다. 리액트는 컴포넌트 단위로 업데이트를 하기 때문이다. Container가 업데이트되어도 그 아래 Component와.. 2022. 5. 1. 이전 1 2 3 다음
