FrontEngineer JungBam

E2E 테스트는 왜 하는가? :: 유닛 테스트가 각각의 기능에 대한 단위 테스트라고 한다면 E2E테스트는 실제 브라우저 환경에서 어떻게 동작하는 지를 사용자의 관점에서 테스트하는 것이다. 사용자 관점에서 어떤 인터렉션에 대한 브라우저 환경에서의 실제 동작을 테스트한다고 생각하면 된다. 1. cypress와 testing library에서 제공하는 cypress를 같이 설치 * 클래스 이름이나 요소를 통해서 찾는 것보다 testing library에서 제공하는 getBy, findBy와 같은 것을 이용해서 찾는 것이 테스트가 작은 변화로 인해서 깨지는 것을 방지할 수 있기 때문. npm install --save-dev cypress @testing-library/cypress Cypress Testing..

제네릭을 왜써요? 라는 질문에 "재사용성을 높이려고 쓰던가 자동완성 쓰려고" 라고 답변을 하고 그 사람에게 설명을 해주다보니, 한번 더 정리를 해서 보여주고 싶은 마음이 생겼다. 제네릭은 왜 쓸까? * 함수형 컴포넌트를 많이 사용하고 함수 또한 화살표 함수로 만드는 것을 주로 하기때문에 사용하는 기준에서 설명을 해보겠다. 1. 첫번째 케이스인데 함수를 만들 때에 어떤 하나의 객체 interface에 관련된 타입을 주어줘야 할때이다. 아래 코드를 보면 간단하게 obj라는 타입에 대해서 어떤 값을 넣었을 때 어떤 타입이 return 되는지를 타입스크립트가 추정할 수 있도록 동작한다. interface obj { name: string; age: number; } const returnByInputType =..

주식이나 투자와 같은 서비스에서 딱 제일 먼저 생각나는 부분은 그래프! 그래서 대기업에서의 프론트들은 이 데이터들을 어떤식으로 그래프를 그리는지 궁금했다. canvas로 그리는 것은 해봤지만 각각의 값을 모두 canvas에 그려주는 것은 비효율적일 것이라 생각하던 중에 문득, 대기업은 어떤식으로 구현하는지가 궁금했다.  ㅇㅇ 사이트에 들어가서 확인해보니 svg의 path data를 토대로 그래프를 그려주는 것을 확인할 수 있었고, 한번 만들어보자. 라는 생각이 들었다. 이 데이터의 값을 백엔드에서 받는다고 가정하고 svg로 그래프를 만드는 것을 해봤다. 간단하게 데이터를 넣어서 그려주는것은 간단했다. L, M 값을 통해서 그려주면 되는 것이었기 때문에. (L : Line To, 현재 위치에서 지정한 위..

문제 상황 : CKEditor를 통해 에디터 기능을 구현하는 중에 기존에 동적 경로로 이동중이던 페이지를 정적 경로로 변경하고 나서 발생한 에러 next.js 자체에서 해당 에러에 대한 해결방법으로 던져준 페이지는 아래 링크와 같다. next.js에서 제시한 방법을 실행하던 중 찾은 답에 대한 정리글이다. Prerender Error Using App Router Features available in /app nextjs.org 원인 분석 : - Link 를 통한 prefetching 진행 중에 서버에서 브라우저 전용 컴포넌트가 렌더링되면서 발생 해결 방법 : - Link 속성 중 prefetch 속성을 false로 부여 - dynamic을 동한 동적 임포트로 서버 사이드에서 렌더링되지 않도록 설정 c..

프론트엔드에서의 테스트 코드 작성이다보니 렌더링 요소들에 대한 테스트를 주로 작성했다. 글이 작성 되었을때 작성이 되면 경로가 이동되거나 아니면 작성 버튼이 사라진다던가 같이.. 그러던 중 invalidateQuery와 동일하게 추가가되면 새로운 서버 데이터를 받아오는 모킹작업을 해볼까? 라는 생각이 들었다.(뭔가 깔끔한 테스트 코드가 될 것 같은..!?) react-query가 뭔지 모르고 invalidateQuery가 뭔지 모른다면 여기까지만 보시길.. 구글링을 해도 단순히 axios를 모킹해서 axios 호출에 대한 테스트를 진행하는 것뿐. 내가 원하는 성공하면 다시 get요청을 보내서 다시 렌더링해. 라는 로직이 구현될리 없었다. 그래서 서버가 돌아가는 원리가 결국에는 스택을 쌓는 것이기 때문에 ..

next.js로 개발하는 것이 편해지기 시작하니까 최적화가 필요없는 작은 규모의 프로젝트가 아니고서는 next.js를 사용하지 않을 이유가 없다. 왜 그렇게 생각하는지에 대해서 하나씩 정리를 해볼텐데, 기본적으로 next.js로 시작하기에서 다뤘던 데이터 패칭이나 SEO최적화 같은 부분들이 아닌 실제로 next.js 프레임워크 내에 내재된 기능들을 살펴보면서 어떤 점에서 react와 차이가 있는지 알아보자. 1. Link의 prefetch 먼저 이 Link라는 친구가 어떤 점이 좋은지 정리를 해보자. 기본적으로 next.js에서 프리패칭이라는 기능이 있다. 백그라운드에서 이루어지는 것으로 해당 페이지를 프리패칭하는 것이다. 이러한 프리패칭 기능이 이 Link의 속성 중에 있다. 바로 prefetch라는 ..

기본적인 three.js는 애플코딩 강의를 통해 이해를 해보자. 간단하게 화면을 어떻게 3D로 보여주는지 설명해보면 3D 장면에 대한 이해가 필요하다. 3D 장면은 크게 3가지로 구성이 된다. 1. 3D 모델 2. 조명 3. 카메라 눈치가 빠른 사람이라면 딱 알았겠지만 3D모델은 우리가 보여줄 3D를 말하는 것이고 조명은 말 그대로 조명을 이야기 하고 카메라는 내가 보는 위치를 이야기 한다. 이런 세가지를 어떻게 구현을 하느냐.. html5에 도입된 canvas라는 친구가 있다.(회사 프로젝트를 진행하면서 그래프를 그릴때에 사용한 적이 있고 예전 게임을 만들때에도 사용한 적이 있어서 왠지 친근하게 느껴지는 이 친구...) 이 canvas에 그려주는 것이다. 어떻게 그리는지는 아래 강좌를 통해서 간단하게 ..

포트폴리오 사이트를 의도치않게 3일만에 후딱 만들었다. next.js, notionAPI를 활용하여 개발을 했는데, 다시한번 next.js의 편리한 점을 느낄 수 있었다. 1. next.js는 기본적으로 서버와 프론트를 한번 : 이것은 누구나 알고있지, 근데 이게 왜 장점인지를 느끼게 되었다. notionAPI는 기본적으로 프론트단에서(즉, 브라우저에서) 바로 요청을 하면 에러를 발생하는데 이를 해결하려면 서버를 구축하던가 그게 아니면 폴리필을 해결해야한다. 근데 next.js는 서버를 구축하기 매우 간편하다. 2. next.js를 통해 골라먹는 렌더링 방식 : 페이지별 메타데이터를 입혀주고 처리하기 매우 간편하고 좋다. 이 두가지를 가장 크게 느낄 수 있었다. react로 개발했을 때에는 express..