frontend 2

target="_blank" 다른 탭으로 링크 이동하기

몰랐던 프론트 세계..! 업무 중에 새로운 탭을 열어서 링크 이동시켜달라는 사양이 있어서, '아! 이건 아주 간단히 되겠구나~~'하고 PR을 날렸지만.. Approve받기 실패한.. 가슴 아프지만, 내일의 나를 위해 기록해두자! 우선, 새로운 탭을 열고 '링크' 이동을 하기 위한 속성으로는 `_blank` 가 있다. 이거 자체로 '새 탭으로 이동' 은 가능하다! 문제는 Security(보안) 그리고 SEO(Search Engine Optimizer)! 결론부터 말하자면, `_blank` 속성은 반드시 아래의 속성과 같이 써야한다. 3가지 속성을 모두 쓰는 것이 좋다! 보안 관련된 속성부터 보자면, `noopener`, `noreferrer`! window.opener `noopener`를 사용하지 않으면..

개발 2021.11.12

프론트엔드 vs. 백엔드 테스트

사이드 프로젝트로 Next.js 를 TypeScript로 쓰면서 TDD방식으로 진행하려고 이것저것 찾아보면서 공부하고 있던 중에 '백엔드에서 테스트를 대하는 방식과 프론트에서 테스트를 보는 관점이 좀 다르다' 라고 느껴서 공부를 시작하게 되었고, 정리한 내용을 공유하겠습니다. 참고로 프론트엔드쪽의 테스트는 아직 미경험이기 때문에 부족한 점이 많습니다! 지금은 이론적으로 공부한 것들을 정리하지만 나중에 실제로 경험해 본 후기를 공유할 수 있도록 할게요! 우선 테스트 비용적인 측면에서 유명한 Mike Cohn씨의 테스트 피라미드를 봐볼까요? 요소들을 살펴보면 아래와 같습니다. UI test : 브라우저에 표시되고 있는 어플리케이션의 구조 및 컨텐츠를 테스트 Service test : UI를 제외한 전체적인 ..

개발 2021.05.22