개발 학습74 S2: React setState([...전개연산자])로 리렌더링 useState 함수로 값을 주었지만 렌더링이 되지않고 컴포넌트로 전달한 state props가 변화가 없다? ...이렇게 점 세게를 찍는 문법을 spread operator라고 부른다. [...array] 이렇게 사용하면 array를 해체한 후 배열에 넣는다. 결국엔 array원소가 들어가있는 새 배열이 리턴되는 것이다. 핵심은 새로운 주소값을 할당해 주는 것이다. 전개연산자를 사용하지 않고 carItems로 state를 변경할때 cartItems와 동일한 주소를 참조하기 때문에 렌더링이 되지않으며 useEffect로 테스트 해보아도 반응이없다. 새로운 주소를 참조하기 위해 전개연산자로 값을 넣어주면 렌더링이 다시 된다. 2021. 10. 15. S2: React styled-components # const로 css를 적용할 컴포넌트 이름을 선언한다 # styled.태그명으로 태그를 지정한다 # `~` 백틱으로 내부에 css를 적용한다. Styled Component 는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수도 있습니다. 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다. 컴포넌트에 props 로 스타일 속성이 전달된다면 해당 컴포넌트는 props 로 전달된 속성을 우선 적용하며, 전달되는 속성이 없다면 기본으로 설정된 속성을 적용합니다. 이는 Styled Component 가 개발자에 의해 설정된 속성과 기본 속성을 구분할 .. 2021. 10. 14. S2: Request query.? 와 params.id? Request(req)의 query *localhost.com/flight ?depature_times 는 request.query.depature_times로 들어온다 Request(req)의 params Router에서 지정한 고유 id를 확인한다. *이때 flight/af6fa55c-da65-47dd-af23-578fdba40bed의 af6fa55c-da65-47dd-af23-578fdba40bed는 request.params.id로 들어온다. console.log 대신 res로 보내어 확인하는법 2021. 10. 13. S2: Express 사용하여 분기점 라우팅 * Express의 라우터를 활용하면 아래와 같이 직관적인 코드를 작성할 수 있습니다. * $ npm install express --save 설치 1. 설치된 express를 불러온뒤 http가 아닌 app에 적용시킨다. 2. PORT와 ip는 동일하게 위치한다. 3. 처음 메소드로 들어올것은 OPTIONS이다 app.options(소문자)를 통해 '/upper'가 url로 들어올시 작동하는 구문을 작성한다. 참조 : https://expressjs.com/ko/starter/hello-world.html 2021. 10. 12. S2: Nodemon과 inspect디버깅 Nodemon 설치후 node 또는 nodemon + --inspect를 통해 console.log의 확인을 손쉽게 할수 있다. --inspect-brk 를 추가하면 실행되자마자 바로 디버깅에 들어갈 수 있다. 2021. 10. 12. S2: CORS와 클라이언트-서버간 요청/응답 1. CORS 처리 Cors 변수 선언을 통해 허락된 조건들만 메소드요청을 보낼수 있도록 하였다. * Origin은 요청하는 도메인 또는 주소이다. " * "으로 처리할시 모든 가능한 주소를 포함한다. Cors에 의해 처음 OPTIONS이라는 메소드가 들어와 조건에 맞는지 확인하게 된다. 아닐시 BAD한 요청을 보내도록 설정한다. 2. 요청한 메소드 처리 OPTIONS메소드를 통과한 다음 처리하기위한 메소드가 들어오게 된다. 3. 응답 확인 실제로 요청을 하게 되면 preflight로 cors가 먼저 처리되기 위해 메소드로 OPTIONS를 거치게되고 정상 조건일시 fetch에 의해 요청한 Method가 처리된다. *preflight는 요청할때마다 계속 처리 되지 않는다. 최초 처리후 캐시에 보관하여 있다.. 2021. 10. 12. 이전 1 ··· 7 8 9 10 11 12 13 다음
