분류 전체보기93 node.js? node.js 가 뭘까 ? 노드는 서버가아니다. 자바스크립트 실행환경. --> JS 만 이해 할 수 있음. 자바스크립트 실행기이다. 런타임이 뭘까 ? js코드를 웹브라우저 밖에 터미널에서 실행 할 수 있게 도와주는 애 npm ? (패키지 매니저)라이브러리를 간편하게 설치,삭제,업뎃 가능 node js 설치하면 자동으로 npm 패키지매니저가 따라온다 그럼 js 로 서버를 어떻게 돌리냐? node는 http 라는 모듈을 제공한다. http ? 인터넷에서 데이터를 주고받을 수 있는 프로토콜 프로토콜? 규칙 노드가 위의 코드를 실행한다. -> http서버 실행 package.json 을 만들자 node app.js 2021. 8. 20. 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. 프론트엔드 개발자의 협업 ( 더미데이터 dummy data ) 백엔드개발자가 API 를 만들동안 더미데이터를 만들고 있어야한다. - 실제 데이터가 명목상 존재하는 것처럼 다루는 유순한 정보를 의미 (시간적 손실을 방지하고자) https://ko.wikipedia.org/wiki/%EB%8D%94%EB%AF%B8_%EB%8D%B0%EC%9D%B4%ED%84%B0 더미 데이터 - 위키백과, 우리 모두의 백과사전 정보과학에서 더미 데이터(dummy data)는 유용한 데이터가 포함되지 않지만 공간을 예비해두어 실제 데이터가 명목상 존재하는 것처럼 다루는 유순한 정보를 의미한다. 더미 데이터는 테스트 및 ko.wikipedia.org 서버가 없는데 로그인을 어떻게 할까. 더미데이터를 만들면된다. const [isLoggedIn,setIsLoggedIn] =useState(.. 2021. 8. 4. 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. 이전 1 2 3 4 5 6 ··· 14 다음
