0youn 0youn

평소에 px 단위와 vw, vh를 많이 사용했는데 반응형에 관심을 두고 나서는 em, rem도 중요하다는 생각이 들어 나중에 찾아보지 말고 적어두고 봐야겠다는 생각에 정리를 해보려 한다. 1. px px은 모니터마다 고정 값으로 정해진다. css에서는 absolute length라고 분류된다. 고정값이기 때문에 어디에 어떻게 쓰든 같은 크기를 가지면 화면에 같게 표시된다. 2. em em은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다. 1em은 100%를 뜻하며 만약 엘리먼트에 font-size가 20px이라면 3em은 60px을 가리킨다. 보통 em은 사용되는 위치마다 값이 천차만별로 달라지기에 특별한 경우 외에는 사용되지 않는다. 3. rem 문서의 최상단 html의 글자 크기를 참조한다. 다른..

이벤트 버블링과 캡처에 대해 정리를 해보려 한다. 1. 이벤트 버블링 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 것을 말한다. 즉 자식 요소를 클릭하는 이벤트를 넣었는데 부모에 있는 이벤트들도 실행되는 경우를 뜻한다. 이러한 현상이 발생하는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 이벤트가 발생하면 그 이벤트를 회상위에 있는 화면 요소까지 전파시키는 특성을 가진다. 2. 이벤트 캡처 버블링과 반대로 부모에서 자식으로 이벤트가 전달되는 방식이다. 이벤트 캡처의 경우 addEventListener의 3번째 전달인자에 capture : true 옵션을 넣어 설정할 수 있다. 3. 방지 방법 e.stopPropagation API를 이용하여 이벤트의 전파를 ..

오늘은 라이프 사이클에 대해 정리해볼까 한다. 이 라이프 사이클은 component가 호출되어 랜더링되고 컴포넌트가 제거되는 것까지를 뜻하는데 라이프 사이클은 검색만해도 많이 나오기 때문에 나는 자주 사용하는 react-rifecycle의 hook 버전으로 정리를 해보려 한다. 1. componentDidMount componentdidmount의 경우 최초 랜더링이 완료되고 실행되는 api로 말 그대로 한 번만 실행되고 끝난다. componentdidmount는 class 컴포넌트에서만 사용 가능하고 함수형 컴포넌트에서는 useEffect를 이용하여 사용할 수 있는데 아래와 같이 사용할 수 있다. function lifecycle() { useEffect({ //작성할 코드 },[]) } compone..

cs 지식에 대해 공부할 때 노트에 저장했었는데 이렇게 하면 공부하는 티가 안나서 새로운 지식 공부하면 나중에 기억하기 편하게 메모 형식으로 정리좀 해보자라는 목적으로 다시 블로그를 시작하려고 한다. - XSS란? - 서버와의 정보 교환 시 해커가 중간에 스크립트를 넣어 사이트를 공격하는 방식 - 게시판에 글쓰기나 메일, 닉네임 같이 작성 가능한 위치에 코드를 삽입한다. - 크게 2가지의 공격 방법이 있다. Stored XSS(저장형) Reflected XSS(반사형) ▶ 가장 일반적인 XSS공격 유형이다. ▶ 정상적 평문x -> 스크립트 코드를 입력한다. ▶ 사용자가 게시물을 열람시, 공격자가 입력해놓은 악성 스크립트가 실행되어 사용자의 쿠키 정보가 유출되거나, 악성 스크립트가 기획한 공격에 당하게 된..

이전에 express 공부를 하면서 미들웨어에 대해 정리를 했었는데 리덕스에서도 미들웨어가 있다고 해서 정리해 보려 한다. 1. 미들웨어란? express에서 미들웨어는 서버가 요청을 받으면 해당 요청에 대한 응답 이전에 원하는 추가 작업을 미들 웨어를 통해 진행할 수 있었는데 리덕스에서 미들웨어는 이와 마찬가지로 리듀서가 호출되기 전에 미들웨어를 실행함으로써 추가 동작을 미리 할 수 있도록 해준다. 2. 사용 방법 - 미들 웨어를 사용하기 위해서는 미들 웨어를 만들고 해당 미들웨어를 스토어에 적용해야 한다. 스토어에 미들웨어를 추가하기 위해서는 applyMiddleware 함수를 사용하여 가능하다. import React from 'react'; import ReactDOM from 'react-dom..

리엑트에서 hook을 공부하다가 useContext라는 훅이 있어서 찾아보니 context라는 기능(?)이 있어 공부해봤다. 리엑트에서 state 끌어올리기를 진행하다 보면 사용하지 않는 props들이 전달되어야 하는 일들이 종종 벌어진다. 이를 해결하기 위해 사용하는 것이 context 이며 오늘은 context와 훅인 useContext에 대해 정리해보려 한다. 1. context란? context는 단계마다 일일이 props를 넘겨주지 않아도 하위 컴포넌트라면 컴포넌트 트리 전체에 데이터를 제공할 수 있도록 해준다. 즉 선언한 위치에서 해당 값을 context로 지정하면 전역적이라고 볼 수 있는 데이터를 공유하게 된다. 예를 들어 웹 페이지에서 흑색 모드와 백색 모드로 화면의 배경 색을 정해주는 기..

시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. 예를 들어, 태그는 non-semantic 태그라고 할 수 있고, , 등의 태그는 semantic 태그라고 볼 수 있다. 일반적으로 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다. 반면, , 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다. 태그 안에는 표가 들어갈 것이고, 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추 할수 있다. 끝.

html 어트리뷰트란 태그 안에 속성을 지정하는 것을 말한다. 위와 같이 사용하면 class라는 속성에 hi라는 값을 넣는 어트리뷰트를 사용했다(?)라고 할 수 있다. 즉 태그 안에 블라블라 = 뭐뭐뭐 라고 하는 것들을 어트리뷰트라고 한다. 끝.