Azubik

CSS는 스타일링을 할 때 자동완성이 되서 편한데 React에서 Styled-components을 사용하면 자동완성이 안되서 아쉽다 이럴 땐 vscode extension중 vscode-styled-components를 설치하면 된다

최상위 부모 '컴포넌트명'Layout으로 생성 최상위 부모 자식(바로 하위 요소) '컴포넌트명'Row or '컴포넌트명'Col Row나 Col이라는 실질적인 태그는 div,section태그등이 될 수 있다. Row는 가로, Col은 세로 둘 다 실제 태그는 div여도 flex-direction으로 설정 최상위 부모가 대분류 느낌이라면 이건 소분류 느낌 나머지 요소 네이밍 예시 div태그: '컴포넌트명'Box section태그: 컴포넌트명'Section ul태그: 컴포넌트명'List li태그: 컴포넌트명'Item p태그: 컴포넌트명'Paragraph span태그: 컴포넌트명'Span or '컴포넌트명&#39..

gatsby 블로그 외부 링크 클릭시 새창으로 열기 위해 _blank 태그를 추가하니 경고가 나타났다. 이게 무슨 문제인가 찾아보니 Tabnabbing 피싱 공격에 노출될 수 있기 때문이라 한다. Tabnabbing 피싱 공격이란 target_blank인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱 공격인데 A 페이지에서 B 링크를 새 창으로 접속하면 탭에 있는 A 페이지가 나도 모르는 새에 C 페이지로 바뀌어 있는 것이다. 해결 방법으로는 target=”_blank” 와 rel=”noopener noreferrer”을 같이 적용한다. rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지에서 자바스..