12.24 the moment 12.24 the moment

https://www.w3schools.com/cssref/sel_marker.asp https://developer.mozilla.org/en-US/docs/Web/CSS/::marker https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_marker W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com 위에 가서 눈으로 확인해보는게 더 빠름 :: marker li 스타일을 바꿔주는 선택자 ::marker { color: red; font-size:..

Goal section 1에서 장기 목표 & 구체적이지 않은 목표를 설정해서 약간 무의미했던 것 같다. 1) 프로젝트 구간 전까지 / 리액트 인강 안에 있는 미니 프로젝트 다 해보기 2) 그날 이해 못한 개념 -> 이해 못해도 되니까 1번 이상은 이해 재시도하기 (외면 금지) Keep 1) 수업에 집중 (최대한 하나라도 더 알아야 한다는 간절함?) 2) 인강 활용 (사람 1의 강의를 못 알아먹으면 사람2,3,4 ... 의 강의도 들어보면 어느 순간 아 하는 것 같다.) 3) 스터디 (스터디 안했다면..? 좀 어렵다 싶으면 레퍼런스 보고 대강 이해한 기분만 내고 외면했을 듯) Problem & Try 무엇보다 공부 자체에 대한 문제가 큰 것 같다. 공부를 안해봐서! 공부를 할줄 모르는거다 ; 1) 못하면 ..

SOP (Same-Origin Policy) : 동일 출처 정책 = 같은 출처의 리소스만 공유가 가능 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 위해 사용 반드시 프로토콜, 호스트, 포트 모두 같아야 동일한 출처(Origin) Failure 1. 프로토콜이 다른 경우 https://www.minions.com vs http://www.minions.com ( https / http ) 2. 호스트가 다른 경우 https://urclass.codestates.com vs https://codestates.com ⇒ 두 URI는 호스트가 다르기 때문에 동일 출처가 아닙니다. ( urclass.codestates.com / codestates.com ) 3. 포트가 다른 ..

Side Effect : 부수 효과 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다. React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 말한다. let foo = 'hello'; //전역 변수 foo function bar() { foo = 'world'; } // 수정하는 함수 bar(); // 함수 호출. // bar라는 함수는 foo를 'hello'에서 'world'로 수정했음 => Side Effect를 발생시켰다. Pure Function : 순수 함수 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수. 예측 가능. 1. 네트워크 요청과 같은 ..

function Search({ onSearch }) { const [textDestination, setTextDestination] = useState(''); const handleChange = (e) => { setTextDestination(e.target.value.toUpperCase()); }; const handleKeyPress = (e) => { if (e.type === 'keypress' && e.code === 'Enter') { handleSearchClick(); } }; 위의 Search 함수부터 살펴봅시다. const [textDestination, setTextDestination] = useState(''); 1. textDestination이라는 state를 set..

Array.prototype.indexOf() 찾고자 하는 배열.indexOf(찾고자하는엘리먼트) // 찾아낸 첫번째 엘리먼트의 인덱스 값 리턴 Array.prototype.lastIndexOf() 찾고자 하는 배열.LastIndexOf(찾고자하는엘리먼트) // 찾아낸 마지막 엘리먼트의 인덱스 값 리턴

str.replace() let str = '토마토마토' str.replace('마','맛') // 두번째 마는 바뀌지 않는다. 그냥 replace()만 사용하면 가장 먼저 찾은 문자열만 바꿀 수 있다. str.replaceAll() let str = '토마토마토' str.replaceAll('마','맛') // '토맛토맛토' 원래 없었던 것 같은데, 새로 생겼나보다. 사용법은 똑같다. str.replace + 정규식 표현 //g let str = '토마토마토' str.replace(/마/g,'맛') // '토맛토맛토' g : 전체 문자열을 대상으로 검색 (global) i : 대소문자 구분안함 (ignoreCase) let str = 'tomato and TOMATOsoup' str.replace(/t..

sliceArray.prototype.slice() array에 쓴다. arr.slice(n,m) 여기서 n,m은 idx값. m arr.length : 끝까지 arr.slice(m) m arr.length일때는 빈 배열 리턴. arr.slice(-m) : (마지막 idx - m)값의 idx로부터 끝까지 리턴 arr.slice(n,-m) : n부터 마지막 idx로부터 m개 빼고 리턴 arr.slice(-n, m) : (마지막 idx - m)값의 idx부터 m번째 idx까지 리턴 arr.slice(-n,-m) : (마지막 idx - m)값의 idx부터 / n부터 마지막 idx로부터 m개 빼고 리턴 ※..