Jieunny의 블로그

📣 SOP ✔️ Same-Origin Policy ✔️ '같은 출처의 리소스만 공유가 가능하다' 라는 정책 ➕ 출처 더보기 ✔️ 프로토콜 + 호스트 + 포트의 조합으로 되어있다. ➰ 이 중 하나라도 다르면 동일한 출처로 보지 않는다. ➰ 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다. -> 해킹 등의 위협에서 좀 더 안전 ➰ 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지 할 수 있다. ➰ 하지만 네이버 지도 api를 이용한다거나, gtihub의 정보를 받아와서 사용하고 싶을 경우 다른 출처의 리소스를 사용해야 한다. 📣 CORS ✔️ Cross-origin Resource Sharing ✔️ '교차 출처 리소..

➰ 50일차 코테 문제 풀기 + 타입스크립트 공부 캘린더 커리큘럼 끝내면 매일 하는 공부이다. 타입스크립트는 매일 한 챕터씩 공부하고 있고, 코테는 레벨0 정답률 낮은 문제부터 풀고있다. 근데 코테 준비시간을 조금 줄이고, 작은 프로젝트를 하는게 나을지 고민이다. 미니 프로젝트 모아 놓은 페이지가 있어서 봤는데 하나씩 해보면 좋을 것 같다. 아니면 일단 하나에 집중하는게 나을지.. 내일은 주말🥹 이번 주도 열심히 했으니 푹 쉬어야지!!

📣 Ajax를 활용해서 항공편 검색 페이지 구현하기 1️⃣ 항공권 목록 필터링 ✔️ Main 컴포넌트에서 항공편을 조회한다. ➰ Main 컴포넌트 내 `search` 함수는 검색 조건을 담고 있는 상태 객체 `condition`을 업데이트해야 한다. ✔️ Search 컴포넌트를 통해 상태 끌어올리기를 학습한다. ➰ 검색 화면이 Search 컴포넌트로 분리되어야 한다. ➰ Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 한다. ➰ 상태 변경 함수 `search`는 Search 컴포넌트의 `검색` 버튼 클릭 시 실행되어야 한다. 2️⃣ AJAX 요청 ✔️ Side Effect는 useEffect에서 다뤄야 한다. ➰ 검색 조건이 바뀔 때마다, Flight..

➰ 48일차 와ㅏ아아 프로그래머스 level1 다풀었다ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 전에 안풀리던 문제도 오늘 풀어서 진짜 다풀었다.. 0단계 정답률 낮은 문제부터 다시 풀어봐야지 확실히 문제 풀수록 실력이 오르는 거 같아서 너무 뿌듯하다. 비록 시간은 삭제되지만.. 너무 뿌듯한 하루ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

📣 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) ➰ 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 ..