진주의 개발괴발

📌 SOP (Same-Origin Policy : 동일 출처 정책) : 같은 출처의 리소스만 공유 가능 => 잠재적으로 해로울 수 있는 문서를 분리하여 공격 경로를 줄여줌 동일 출처 정책의 출처란? : 프로토콜, 호스트, 포트로 구성 📌 CORS (Cross-Origin Resource Sharing : 교차 출처 리소스 공유) : 추가 헤더를 사용하여 다른 출처 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에게 알리는 체제 CORS의 동작 방식 1. 프리플라이트 요청 (Preflight Request) : 실제 요청을 보내기 전, OPTIONS 메소드로 사전 요청을 보내 해당 리소스에 접근 권한이 있는지 확인하는 것 실제 요청을 보내기 전, 미리 권한 확인을 할 수 있기 때문에 리소스 면에서 효율..

이번 주는 꽤 평탄하게 흘러갔다. 그만큼 나태해졌던 한 주였다. 마음이 느슨해지면서 어느 정도 내가 감당할 수 있다는 기분이 들었다. 자만했던 것 같다. 수업이 끝나면 그냥 그대로 퍼져있었다. 주말에도 공부를 안 하고 남자 친구랑 놀았다. 생각해보니 내가 이럴 때가 아닌데... 싶다. 다시 마음을 다잡고 더 노력해야지. 👍 저번 주 KPT Keep 필라테스 꾸준히 다니기 ⭕ : 일주일에 두 번씩 꾸준히 다니는 중! 10시 샤워, 11시 30분 잠자리에 들기 ❌ : 요즘 너무 늦게 자고 있다... 다시 기강 잡기! 코딩 테스트 꾸준히 풀기 ⭕ : 프로그래머스 1단계에 접어들었다. 점점 어려워져서 푸는 문제 개수를 줄였다. 조급해하지 않기 ⭕ : 손으로 외우고 블로깅하기 ⭕ Problem 다른 사람이랑 비교..

목록 내에서 필터링이 필요할 때 사용할 수 있는 두가지 방법이 있다. 1. 컴포넌트 내에서 필터링 : 서버에서 가져온 데이터를 컴포넌트 내에서 직접 필터링 하는 방식 장점 : HTTP요청의 빈도가 줄어듦 단점 : 브라우저의 메모리에 모든 데이터를 갖게 되므로 클라이언트(브라우저)의 부담이 늘어남 2. 컴포넌트 밖에서 필터링 : 서버에서 데이터를 가져올 때 query parameter를 사용해 필터링 한 상태로 가져오는 방식 장점 : 클라이언트가 따로 필터링 구현하지 않아도 됨. 단점 : 서버가 필터링을 처리하므로 서버의 부담이 늘어남. useEffect로 fetch 구현 (컴포넌트 밖에서 필터링) useEftect(() => { fetch('url?q={filter}') .then(response => ..

📌 Side Eftect (부수 효과) : 함수 내의 구현이 함수 외부에 영향을 미치는 것 let foo = 10; function sum(a) { foo = foo + a; } 함수 sum은 함수 외의 변수 foo를 변경시키므로 부수효과가 있는 함수이다. React에서의 Side Eftect API (setTimeout) 사용 이벤트 사용하여 DOM 직접 조작 데이터 가져오기 (fetch API, localstorage) 📌 순수 함수 : 오직 함수의 입력만이 함수의 결과에 영향을 미치는 함수, 부수효과를 가지지 않은 함수, 예측이 가능한 함수 함수 외부를 변경시키지 않음 어떠한 전달 인자가 주어질 경우 항상 같은 값을 반환함 인자로 전달된 값을 수정하지 않음 🙋‍♀️ Math.random()은 순수 ..

react에서 데이터 흐름은 위에서 아래로 흐른다. 하지만 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달하고 싶은 상황이 생길 수 있다. 이럴 때는 State를 끌어올리면 된다. 📌 부모 컴포넌트의 setState 함수 Props로 전달 부모 컴포넌트 const Parent = () => { const [state, setState] = useState(초기 값); return ( setState를 자식 컴포넌트에 props로 전달 상태 : {state} ) } 자식 컴포넌트 const Child = ({ prop }) => { const [click, setClick] = useState(false); const handleClick = () => { click? prop(바꿀 상태) :undefine..

📌 REST API (Representational State Transfer : 대표 상태 전송) - 로이 필딩 : 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식(아키텍처) ✔ REST 성숙도 모델 (RRM) - 레오나르도 리처드슨 🔴 0단계 - HTTP 프로토콜 사용 : REST API의 기본 단계, 0단계만 되어있는 API를 REST API라고 할 수 없음 요청 내용 🙋‍♀️요청 👨‍⚕️응답 예약 가능한 시간 확인 POST / appointment HTTP/1.1 [헤더 생략] { "date" : "2022-12-25", "doctor" : "허준" } HTTP/1.1 200 OK [헤더 생략] { "slots" : [ { "doc..

이번 주 목요일부터 급격하게 힘이 빠졌다. 공부하기 싫다기 보다는 뭔가 하기가 힘든...? 피곤한 느낌이었다. 자신감을 조금 잃은 것 같다. 그나마 내가 잘한다고 생각했던 알고리즘 문제도 안 풀리지... 다른 분들은 세련되게 삼항연산자랑 고차함수 메서드를 자유자재로 사용하시는데 난 뭐지... 생각이 들어버렸다. 비교하면 안되는데 자꾸 비교하게 된다. 기죽지 말고 자극 받아서 더 열심히 해야지 칭찬할 점은 이번 주에 스터디도 안 빠지고 필라테스 두 번이나 나갔다는 점이다...! 그래서인지 더 힘들긴 했지만... 앞으로는 운동해서 체력도 늘리고 코딩도 더 잘하게 될거니까 문제 없어! 파이티이잉!!!! 이번 주 주말에는 공부하지 않고 놀았다. 오랜만에 나간 밖은 크리스마스로 들떠있었다. 맛있고 귀여웠던 카페 ..

📌 HTTP Messages : 클라이언트와 서버 사이에서 데이터가 교환되는 방식. 구성 파일, API, 기타 인터페이스가 자동으로 완성함. ✔ 유형 요청(Requests) 응답(Responses) 1. start line : 실행되어야 할 요청, 요청 수행에 대한 성공 또는 실패 기록. 항상 한 줄로 끝남. 응답에서는 status line이라고 부름. 2. HTTP headers : 요청에 대한 설명, 본문에 대한 설명. 3. empty line : 요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(헤더와 본문 구분) 4. body : 요청과 관련된 데이터, 응답과 관련된 데이터 또는 문서. 요청과 응답의 유형에 따라 선택적으로 사용. ❗ payload 🔗: 사용에 있어서 전송되는 데이터. HT..

📌 AJAX Asynchronous JavaScript And XMLHttpRequest의 약어 Javascript, DOM, Fetch, XMLHttpRequest, HTML 등의 기술을 사용하는 웹 개발 기법(개념) SPA를 만드는 기술 ✔ AJAX의 가장 큰 특징 : 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있음 👍 AJAX 장점 서버에서 HTML 완성하여 보내주지 않아도 웹페이지 만들 수 있음 이전 : 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링이 가능 AJAX : 서버에서 필요한 데이터만 비동기적으로 가져와 브라우저에서 화면의 일부분을 업데이트하여 렌더링 할 수 있다. 표준화된 방법 이전 : 브라우저마다 다른 방식으로 AJAX 사용 XHR 표준화 ..

📌 크롬 브라우저 에러 Error Message Description "Aw, Snap!" Chrome 브라우저에서 페이지 로드하는 데 문제 발생 ERR_NAME_NOT_RESOLVED 호스트 이름(웹 주소)이 존재하지 않음 ERR_INTERNET_DISCONNECTED 사용 중인 기기가 인터넷에 연결되지 않음 ERR_CONNECTION_TIMED_OUT ERR_TIMED_OUT 페이지에 연결하는 데 시간이 너무 오래 걸림. 인터넷 연결이 너무 느리거나, 웹페이지에 접속한 사용자가 많아서 발생 ERR_CONNECTION_RESET 웹페이지 연결을 방해하는 요소가 어딘가에 발생 ERR_NETWORK_CHANGED 웹페이지를 로드하는 중에 기기의 네트워크 연결이 해제 혹은 새로운 네트워크에 연결 ERR_CO..