목록CodeStates/learning contents (74)
Jieunny의 블로그
S2) Unit 10. [Web Server] CORS
📣 SOP ✔️ Same-Origin Policy ✔️ '같은 출처의 리소스만 공유가 가능하다' 라는 정책 ➕ 출처 더보기 ✔️ 프로토콜 + 호스트 + 포트의 조합으로 되어있다. ➰ 이 중 하나라도 다르면 동일한 출처로 보지 않는다. ➰ 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다. -> 해킹 등의 위협에서 좀 더 안전 ➰ 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지 할 수 있다. ➰ 하지만 네이버 지도 api를 이용한다거나, gtihub의 정보를 받아와서 사용하고 싶을 경우 다른 출처의 리소스를 사용해야 한다. 📣 CORS ✔️ Cross-origin Resource Sharing ✔️ '교차 출처 리소..
S2) Unit 9. [React] Effect Hook
📣 Side Effect(부수 효과) ✔️ 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 말한다. ✔️ 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 Side Effect가 발생했다고 말한다. 📣 Pure Function(순수 함수) ✔️ 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수 ✔️ 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우 순수 함수라고 부를 수 없다. ✔️ 입력으로 전달된 값을 수정하지 않아야 한다. function upper(str) { return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 ..
📣 React 데이터 흐름 ✔️ 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자(arguments) 혹은 속성(arributes)처럼 전달받을 수 있다. ➰ 데이터를 전달하는 주체는 부모 컴포넌트 -> 데이터 흐름이 하향식이다. ➰ React는 단방향 데이터 흐름이고, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알지 못한다. ➰ 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 것이 역방향 데이터 흐름처럼 보일 수 있다. ➰ 이를 위해서 Stste 끌어올리기(Lifting state up) 을 이용한다. 📣 State 끌어올리기(Lifting state up) ➰ 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 ..
S2) Unit 8. [HTTP/네트워크] Postman
📣 Postman ✔️ 매번 코드를 작성하는 것 대신에, HTTP 요청을 테스트할 수 있는 HTTP API 테스트 도구(GUI) 📣 Postman 으로 GET 요청하기 1. 새로운 탭 오픈 ➰ 요청/응답을 여러 개 확인할 수 있다. 2. HTTP 메서드 선택 ➰ GET, POST, DELETE 등의 메서드 중 하나를 선택한다. 3. URL 입력 창 ➰ URL과 Endpoint를 입력한다. 4. HTTP 요청 버튼 ➰ 요청을 보낸다. 5. HTTP 요청 시 설정할 수 있는 각종 옵션 ➰ 추가적인 파라미터나, 요청 본문(body)를 추가할 수 있다. 6. HTTP 응답 화면 📣 Postman 으로 POST 요청하기 ✔️ GET 요청과 다르게 본문(body)를 요청하는 경우가 많다. (5번에 Body 탭 클릭..
S2) Unit 8. [HTTP/네트워크] REST API
📣 REST(Representational State Transfer) API ✔️ 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 -> 알아보기 쉽고 잘 작성된 메뉴판 ➰ 클라이언트와 서버 사이에도 데이터와 리소스를 요청하고, 응답을 전달하기 위한 '메뉴판'이 필요하다. ➰ 로이 필딩이란 박사 학위 논문에서 최초로 소개되었으며, 웹 설계의 우수성에 비해 제대로 사용되지 못하는 것이 안타까워 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다. 📣 REST API 디자인하는 방법 ✔️ 리차드슨의 REST 성숙도 모델 ➰ 실제로 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인 -> HTTP API 라..
📣 SPA를 만드는 기술: AJAX ✔️ AJAX 란? ➰ Asynchronous JavaScript And XMLHttpRequest ➰ JS 라이브러리 중 하나로 JS를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고받는 기술이다. ➰ JS, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법 ➰ 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와서 화면에 그릴 수 있다. ➰ ex) 검색창은 글자를 입력할 때마다 추천검색어를 보여주게 된다. ✔️ AJAX의 핵심 기술 ➰ JS와 DOM, 그리고 Fetch ➰ Fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다. ➰ 브라우저는 Fetch가 ..