Ch.Covelope

SOP(same origin policy)-동일 출처 정책 CORS(cross origin resource sharing)-교차 출처 리소스 공유 여기서 origin 은 protocol , host, port SOP 어떤 출처(protocol , host, port = origin)에서 불러온 문서, 스크립트, 리소스가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저 보안 방식. 예를 들어 SOP가 없다면 클라이언트가 우연히 악성 사이트에 접속해서 해커가 만든 스크립트가 실행되어 클라이언트의 개인 정보나 다른 민감한 정보가 있는 사이트에 요청을 보낸 뒤 그 응답 값을 다시 해커 서버로 보내 개인 정보를 탈취할 수 있게 된다. 하지만 SOP 정책으로 인해 해커의 스크립트 출처와 요청을 받..

쿠키 사이트에 방문, 이용할 때 브라우저에 저장되는 내용 (내 컴퓨터에 저장) 예) 우리가 어느 특정 사이트에 로그인을 하면 쿠키에 특정 사이트에 로그인한 기록을 가지고 다음에 자동으로 로그인을 할 수 있다. 브라우저를 닫았다가 다시 열어도 기록은 남아있다. (쿠키가 많이 쌓이면 오래된 기록은 삭제됨) 쿠키는 임의로 삭제 수정이 가능하고 로그인 정보 등 민감함 정보들이 있는데 쿠키는 클라이언트에 하드에 저장되므로 해당 컴퓨터를 다른 사람이 사용하거나 해킹당해서 접속하면 쉽게 노출될 수 있어 보안성이 낮다. 세션 쿠키와 비슷한 기능을 한다고 생각할 수 있다. 하지만 세션은 클라이언트가 아닌 서버 쪽에 저장된다. 그리고 쿠키의 생명주기와 다르다 쿠키는 브라우저를 닫아도 바로 삭제되지 않지만(유효기간 설정에 ..

리액트 훅 (React hook) 간단 정리 리액트에서는 리렌더링 되는 조건들이 있는데 1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다. 2. state (상태) 가 변경되면 리렌더링 된다. 3. props 가 변경되면 리렌더링 된다. useState useState()가 호출되면 배열을 반환한다, [상태 값, 상태를 업데이트하는 함수] 렌더링과 관련된 상태를 관리하는 훅 state 가 갱신되면 리렌더링 된다 useState의 인자로 state의 초기값을 받을 수 있다. useEffect useEffect(function, deps) 부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅 컴포넌트가 렌더링 될 때마..

Sass(SCSS) 는 CSS 전처리기 (CSS Preprocessor) 이다. ※ 웹에서는 CSS 만 작동하므로 전처리기로 작성 후 CSS로 컴파일해야 한다. 기존의 CSS에서 사용할 수 없었던 많은 기능들이 추가되어 사용에 있어 편의성과 가독성이 더 좋은 거 같다. SCSS는 CSS와 완전히 호환되도록 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 호환 전처리기이다. 라이브러리 설치 (npm global 설치) $ npm install -g node-sass (yarn 설치) yarn add node-sass 확장자는 scss이다. 중첩(Nesting) Sass(SCSS)에서는 중첩기능(Nesting)을 사용할 수 있다. 중첩을 사용하여 상위 선택자의 반복을 줄이고 가독성을 더 좋..

Object.create() ES5 문법 중 하나인 프로토타입 상속 기능으로 간단하게 사용 가능하다. let parents = { name: "Oh", age: 50}; let child = Object.create(parents); console.log(child) let grandChild = Object.create(child); console.log(grandChild) 상속할 부모(parents)에 속성 데이터를 할당하고 첫 번째 자식(child)에게 Object.create(parents); 을 할당하여 부모의 속성을 상속한다. 그리고 콘솔을 출력하면 {} 이렇게만 출력되는데 그건 child에 가 따로 속성 값을 부여하지 않아서 이다. 하지만 더보기 버튼을 누르면 [[Prototype]] : ..

멋사 프론트엔드 과정을 종료하고 리액트를 따로 공부해야 될 거 같아 애플코딩님의 강의를 듣던 중 강의에서 라우터 관련해서 강의대로 했음에도 안 되는 부분들이 몇 가지 있어 찾아보던 중에 react-router 가 업데이트하면 문법이 조금 바뀐 걸 알게 되었다. 아직 리액트 자체가 입문 수준이라 몇 가지만 정리하기로 했다. Switch 로 감싸진 들중에 가장 먼저 매칭 된 하나만 보여준다. Routes 는 Switch의 대체로 나왔는데 Switch 와 다르게 가장 일치하는 항목을 기반으로 선택된다. component , render 에 화살표 함수를 사용하지 않는다. element 속성에 JSX 컴포넌트를 전달할 수 있다. Router 에 component , children 대신 element를 사용 R..