React16 SPA React -> 단일책임원칙 :하나의 컴포넌트는 하나의 역할만한다. 1.재사용 될만한 것은 컴포넌트로 빼자. 2.하나의 컴포넌트는 하나의 역할만하자. SPA 에서는 URL이라는게 존재하지 않는다. (페이지가 하나이기 때문에 ) 오로지 index.html 만 존재한다. 그렇다면, localhost:3090/login 뒤에 붙은 /login 은 무엇일까? 서버는 localhost:3090/ 만 인식한다. 현재 웹팩 데브서버의 devServer.historyApiFallback 으로 인해, 가짜주소들 즉, /login /signup 같은 없는 주소를 있는 주소 인 것처럼 사용 하게 가능한 것이다. 원래라면, localhost:3090/login localhost:3090/signup 을 붙히는건 아무 의미가 .. 2022. 2. 8. CORS 에러내용 : CORS정책에 의해서 3060 -> 3065 차단됌 브라우저 포트번호 3060 백엔드 서버 포트번호 3065 브라우저가 다른 도메인(3060 -> 3080) 으로 요청을 보내면 브라우저가 차단된다 프론트서버-> 백엔드서버 로 요청할땐 생기지 않는다. 브라우저가 3060 에서 3080으로 요청을 보낼 수 있게 허용을 해줘야한다. 해결법 1. 브라우저 -> 프론트서버로 요청 도메인이 같으면 CORS 정책위반 아님 해결법 2. 프록시 방식 -> 요청을 허용/거부하는 역할 브라우저 -> 프론트 서버 -> 백엔드 서버 허용은 서버에서. 2021. 8. 19. react port 번호 변경하는법 2021. 8. 10. Custom hook 무언가 중복되는 훅s 들의 세트들이 보인다면 커스텀 훅으로 만들자! hook은 컴포넌트 안에서만 작성이 가능하다 custom 훅은 예외다 id 기준으로 보겠다. 1. 처음 useInput('') 호출 한다. return 값 받음 [value,handler] 2. onChange 될때마다 handler( ) 함수 호출 3.handler호출 될때마다 id의 상태변경 --->해당 컴포넌트(Signup) 리렌더. --> useInput 다시호출 바뀐 value [value, handler] 리턴 4.useInput 의 return 값 받음 [value,handler] const [value , 콜백함수] = useInput(''); 콜백함수에서는 value 를 업데이트 해야한다!! 2021. 8. 8. React Router SPA 어떤 주소에서 어떤 URL 을 보여줄지 클라이언트에서 결정한다. SPA 를 사용하면 서버는 서버의 자원을 아끼고 클라이언트는 더 좋은 사용자 경험 가능. 동적인 값이 필요할 경우 특정 API를 서버쪽에 요청해서 필요한 데이터만 제이슨 형태로 받아와서 보여줌. 리액트라우터 컴포넌트 기반으로 라우팅한다. 경로 이동을 한다 해서 태그를 사용하면 안된다. 애플리케이션이 새로 로딩이 되기 때문이다. 고로 Link 컴포넌트를 사용하자 띄워져 있는 앱에서 경로만 바꿔준다. 유저로부터 받아온 URL 파라미터 값을 읽어올 경우 컴포넌트의 props 를 통해 match 를 사용하자 Route와 연결된 컴포넌트는 props로 location,match,history 사용 가능 파라미터 여러개 넣어주고 싶을 경우 쿼리.. 2021. 8. 2. react-redux 1.액션타입. (대문자 작성) 2.액션 생성 함수 (export) 3.리듀서에서 관리할 초기 state. 4.리듀서 (export default) /modules/index.js combineReducers 를 이용해 rootReducer 을 만들자. rootReducer 에는 counter,todos를 포함한 모든 reducer가 있다. 1.스토어(리듀서) 생성. 2.Provider ? 자식 컴포넌트에 Redux 스토어(store)를 제공하는 컴포넌트 컴포넌트에서 스토어에 접근해 상태 변경을 요청(dispatch)하거나, 구독(subscription)된 상태가 업데이트 되면 다시 렌더링 된다. useSelector( selector 함수 ) redux 스토어의 현재 상태 조회 훅. Redux 스토어의 .. 2021. 7. 13. Redux-상태관리 action 상태를 어떻게 바꿀지에 대한 행동 . type 값은 필수. payload : '교체할 상태 값'. 액션 타입을 별도 관리하는 파일을 만들어 상수(constant)로 관리하는 것이 유지 보수 하기 좋다 reducer state,action을 매개변수로 받고 새로운 state를 반환 후 -> store로 전달. Redux 의 3가지 규칙 1.하나의 애플리케이션엔 하나의 스토어만 있어야한다. 2.상태는 불변성을 유지해야한다. (좋은 성능을 지켜내기 위함) 객체를 참조해서 수정하지말자 member.isLoggedIn = true; (x) read 만하자 (ㅇ) 이전의 state와 현재의 state가 달라야 추적가능. 참조관계가 유지된다면 history 가 안남는다. 3.리듀서는 초기 state와 a.. 2021. 7. 12. 이전 1 2 3 다음
