나는 지금 절찬 구직 중이다. 몇 군데에 이력서를 내면서, 이력서만으로는 자기 어필이 부족하다는 생각이 들어 포트폴리오 사이트를 만들었다. 그 과정에서 배운 것들을 정리한다. 포트폴리오 사이트는 여기.
사용한 툴들
처음에는 웹사이트를 cargocollective를 이용해 생성할까 고민하다가, 지금 가진 실력을 가감 없이 내보이는 게 좋을 것 같아 직접 만들기로 했다. React(Create React App), Sass를 사용했고 작은 프로젝트지만 익숙해지려고 TypeScript도 도입했다.
현재 화면에 보여줄 내용은 적으나 이후에 프로젝트와 상세 내용을 추가하게 될 수도 있을 것 같아, 데이터 파일을 따로 두고 그곳에서 렌더할 데이터를 읽어 들여 화면에 보여주는 구조로 만들었다.
그 외 사용한 라이브러리는 다음과 같다.
Create React App 설정
1 )
TypeScript가 미리 세팅된 CRA를 사용하려면 아래 명령으로 프로젝트를 생성한다.
[ Adding TypeScript | Create React App ]
npx create-react-app my-app --template typescript2 )
Internet Explorer 9, 10과 11을 지원하려면 react-app-polyfill 라이브러리를 설치한다.
[ Supported Browsers and Features | Create React App ]
[ react-app-polyfill | npm ]
npm install react-app-polyfill3 )
Sass를 CRA에서 사용하려면(컴파일하려면) node-sass 라이브러리를 설치한다.
[ node-sass | npm ]
[ Adding a Sass Stylesheet | Create React App ]
npm install node-sass --save4 )
React 개발 서버를 디폴트 브라우저가 아닌 다른 브라우저에서 돌려서 화면을 확인하고 싶을 때는 npm start 스크립트인 react-scripts start 앞에 BROWSER=브라우저명 을 추가하면 된다. 브라우저 이름은 운영체제마다 다르므로 알아보고 사용해야 한다.
[ How do I “npm start” with a specific browser? | Stack overflow ]
// firefox 브라우저로 보고 싶을 경우
BROWSER=firefox react-scripts startpublic 폴더와 index.html에 넣을 항목들
이미지 파일 위치
이미지 파일을 직접 서버에 올려 사용할 땐, public 폴더 안에 넣는다. 그리고 어디서든 이미지 파일을 끌어와 읽으려면(<img src="이미지 경로" />) public 폴더에 위치한 index.html 파일에서 이미지 파일에 접근하는 경로를 지정하면 된다.
프로젝트를 빌드하면 생성되는 build 폴더에는 public 폴더와 같은 구조에 CSS와 JS 파일이 등이 추가되는데, index.html에서 그 파일들을 끌어와 읽는다. 그래서 이미지 파일을 읽으려면 index.html에서 해당 이미지에 접근하는 경로를 입력한다.
// 폴더구조(빌드 후)
build
|- img
| |- sample.png
|- static
| |- css
| |- js
|- index.html
public
|- img
| |- sample.png
|- index.html// 컴포넌트 파일
// JSX
<img
src="/img/sample.png"
alt="샘플 이미지"
/>메타 데이터
[ HTML의 메타데이터 | MDN ]
...메타데이터의 가장 단순한 정의는 데이터를 설명하는 데이터입니다. 예를 들어 HTML은 데이터입니다. 그리고 HTML의 <head> 안에는 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터, 즉 메타데이터를 넣을 수 있습니다...
HTML 문서의 <head> 요소 안에는 웹페이지의 저자나 웹페이지에 대한 설명 등 여러 가지 메타데이터를 넣을 수 있다. 이 부분에 원하는 키워드를 포함해서 검색엔진에 더 효과적으로 웹페이지를 노출할 수도 있다.
<meta name="author" content="윤슬기">
<meta name="description" content="윤슬기의 블로그입니다.">그리고 몇몇 사이트들은 자신들의 공간에서 웹페이지를 공유할 때, 웹페이지가 표시하기 원하는 정보를 잘 나타낼 수 있도록 메타데이터를 지정하는 프로토콜을 설계했다. 대표적으로 Facebook이 만든 Open Graph protocol이 있다. 그리고 Twitter도 비슷한 프로토콜을 가지고 있다.
Open Graph는 페이스북뿐 아니라 카카오톡이나 네이버 블로그 등 여러 매체에 공유될 때도 적용되고, 내가 주로 사용하는 SNS가 Twitter이기에 Open Graph와 Twitter 카드 메타데이터를 <head>에 설정해주었다.
프로토콜마다 요구하는 커버 이미지 사이즈나 옵션이 다르므로 살펴보고 그대로 적용하면 된다.
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@sample" />
<meta name="twitter:creator" content="@sampler" />
<meta property="og:url" content="http://www.sample.com" />
<meta property="og:title" content="Sample Web Page" />
<meta property="og:description" content="샘플용으로 만든 웹페이지. SNS에 공유할 때 원하는 정보를 표시하기 위해 메타데이터를 설정했다." />
<meta property="og:image" content="http://www.sample.com/img/cover.png" />그리고 여러가지
Sass 파일 정리
[ Sass Guidelines ]
Sass 파일들은 만들어진 섹션과 컴포넌트별로 하나씩 만들어서 사용했기에 파일 정리도 컴포넌트 파일을 정리한 구조와 동일하게 만들었다.
처음에는 글로벌 스타일 적용을 어느 곳에 해야 하는지 몰라 public 폴더 안에 style.css 파일을 생성해 그곳에 적었다가, 정보를 찾아보고 수정했다. 아래 폴더 구성표 중 _global.scss에 글로벌 스타일을 지정했다.
// Sass 파일을 담는 style 폴더 구성
style
|- components
| |- _skills.scss
| |- _project.scss
|- sections
| |- _header.scss
| |- _contents.scss
| |- _footer.scss
|- _global.scss
|- main.scss// main.scss
// 모든 스타일 파일들을 이곳에 @import하여 모은다
@import './global';
@import './sections/header';
@import './sections/contents';
@import './sections/footer';
@import './components/skills';
@import './components/project';// index.js
// main.scss 파일을 root(index.js)에서 import 한다
import '../src/styles/main.scss';
ReactDOM.render(<App />, document.getElementById('root'));target="_blank"의 보안 취약점
CRA에 미리 설치된 린터가 target="_blank"에 보안상 취약점이 있다고 경고를 띄웠다. 경고에는 target="_blank" 요소를 사용할 경우, rel="noopener noreferrer" 요소를 함께 사용하라는 이야기가 적혀있어 정보를 찾아보았다.
target="_blank"는 브라우저 새 창에서 <a>태그에 연결된 웹페이지를 열라는 의미이다. 새로운 웹페이지를 열 때는 window.open()이라는 메서드가 사용되는데, 새로 열린 페이지에서 window.opener로 값을 조회해보면 새 창이 어느 페이지로부터 열렸는지, 그 페이지의 여러 가지 정보를 담은 객체를 확인할 수 있다.
그리고 이전 페이지의 URL이 담긴 window.opener.location에 다른 주소를 입력하면 - 예를 들어 window.opener.location = "https://www.google.com", 아직 브라우저상에 열려있는 이전 페이지 탭이 해당 주소로 이동하는 모습을 볼 수 있다.
이를 악용해 개인 정보를 탈취하는 공격법을 Tabnabbing이라 한다. 불특정 사용자가 정보를 입력하거나 보낼 수 있는 웹사이트라면 막아야 할 문제다.
그리고 새로 열린 페이지는 이전 페이지가 사용하는 브라우저의 프로세스를 함께 이용하므로 이전 페이지의 동작이 느려지거나 영향을 받게 된다고 한다.
이 때 rel 요소를 "noopener" 값과 함께<a>태그에 추가하면, 이전 페이지(window.opener)를 추적할 수 없게 만들어 성능 저하를 막고 보안을 어느정도 유지시킬 수 있다. 더불어 값 "noreferrer"는 HTTP 헤더에서 이전 사이트의 정보를 지워 새로 열리는 사이트에 그 정보가 넘어가지 않도록 하고, 구글 애널리틱스에도 정보를 전달하지 않는다고 한다.
<a href="sampleUrl" target="_blank" rel="noopener noreferrer">Link</a>