나의기록

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

Jest 와 Enzyme는 프론트엔드 Unit test, Integration test 에 사용되는 프레임워크와 라이브러리입니다. 오늘은 Jest를 이용해서 테스트를 하기 위한 기본 사용법에 대해서 정리해보겠습니다. Jest의 기본 문법부터 알아볼까요! expect().toBe() 등과 같은 assertion 함수들이 많이 존재하지만, 여기에서 다 다루기에는 양도 방대하고, 필요에 따라서 검색을 통해 알아가는게 더 효율적이라 생각이 들어서 공식문서 링크만 공유하겠습니다. 그림으로 동작하는 방식만 간단히 정리해볼까요? Jest의 실행 방법은? 공식문서에는 커맨드라인에서 실행하는 법도 나와있지만, 보통은 아래와 같이 package.json에 등록한 후 사용합니다! { "scripts": { "test": "..

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

오늘은 평소에 사소하게 넘어갈 수 있는 부분인 Java의 접근 제한자에 대해서 얘기해보겠습니다. 제가 이 주제에 대해 블로깅을 하기로 결정한 이유는 '내가 여태까지 사용해온 접근제한자 활용 패턴이 잘못 됐을 수도 있겠다. 더해서 우리 팀의 코드를 봤을 때 정말 접근제한자를 제대로 활용하고 있는지 모르겠다.' 라는 생각이 들었기 때문입니다. 이 글은 Clean Architecture 라는 책의 Simon Brown씨 기고문에 있는 '컴포넌트 기반 패키지' 를 읽고 깨닫고 느낀점을 기반으로 작성했습니다. 우선 접근 제한자는 무엇일까요? 접근 제한자는 OOP 의 특징으로 캡슐화를 지원하기 위한 기능입니다. 예를 들어, 'A 클래스의 메소드를 다른 클래스에서 사용하지 못하게 하고 싶다' 할 때, 자바에서는 pr..

이번에는 CICD 툴 중에서 concourse 를 테스트 해보겠습니다. CICD 기초 개념에 대해서는 flowertaekk.tistory.com/17 에 정리가 있으니 확인해주세요! 공식문서는 concourse-ci.org/docs.html (한국어는 없지만, 화이팅!) Docs - Concourse CI Concourse is a pipeline-based continuous thing-doer. The word "pipeline" is all the rage in CI these days, so being more specific about this term is kind of important; Concourse's pipelines are significantly different from the..

오늘은 CICD 중에 circle-ci 를 테스트해보기 위해, circle-ci 구축을 한 경험을 공유하겠습니다. (여기서 말하는 테스트는 사이드 프로젝트에서 CICD툴을 사용하려고 고민중인데, circle-ci 와 concourse 를 테스트해보고 저희의 상황에 더 알맞은 툴을 사용하기 위함입니다.) ps. flowertaekk-dev.github.io/development/circleci-concourseci/ 에 circleci와 concourse CI 의 간단한 비교가 있습니다. 우선 CICD란? 지속적인 통합(Continuous Integration)과 지속적인 배포(Continuous Deployment) 를 합쳐서 CICD 라 부른다. (CD 는 Continuous Delivery 의 약자로..