협업을 하면서 노드버전을 똑같이 맞추어야 하는 상황이 반드시 생긴다. 물론 도커를 입혀서 사용하면 더 좋지만, 개발 단계에서는 이 방법이 더 간편하기 떄문에 안그래도 촉박한 일정에 이러한 설정까지 시간을 더 먹으면 곤란하기 때문에 이 방법을 추천한다. 우선 .nvm

업무 중 커스텀하여 만들어진 컴포넌트를 다른 컨테이너나 컴포넌트에서 사용시 적용되지 않는 문제가 있었고 이유와 해결방법에 대해 알아보자.

타입스크립트에서 절대경로 설정 시 src/hooks 와 같이 경로가 one path인 경우 아래 방식으로 설정 시 불러오지 못하는 오류가 발생한다.우선 이 방법을 해결하기 위해서는 깔끔한 방법은 아니지만 아래 방식을 사용하여 해결이 가능하다.우선 위 방법은 디렉토리 구

vite의 env variables와 typescript를 통한 env 타입정의 그리고 HTML 에서 환경변수 접근법, 모드 변경법에 대한 정리이다.

vite plugin과 base Path에 대한 간단요약.플러그인을 사용하려면 devDepencies 에 플러그인을 추가하고, vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 한다.ex) @vitejs/plugin-legacy다른

vite의 특징에 대해서 알아보자.Native ES import는 bare module imports를 지원하지 않는다.위 코드는 브라우저에서 오류가 발생한다. vite는 제공되는 모든 소스파일에서 이러한 bare imports를 감지하고 다음을 수행한다.프리번들링을

vite의 프리번들링에 대해 알아보자.

책 기초부터 완성까지, 프런트엔드 정리 일부분.모든 신체적 한계, 환경적 한계를 고려해 개발하는 것W3C 에서 설립한 WAI(Web Accessibility Initiative)에서 가이드 라인을 제공한다.컨텐츠에 관한 내용, 확장 프로그램 주의사항 등..그 중, WC

브라우저 렌더링을 막는 것을 렌더링 블록이라고 한다. 이건 성능에 영향을 끼치며, 렌더링 블록에 대해 알아보자.

리액트가 18버전으로 업데이트 되면서 새로운 기능인 Transition 이라는 개념이 생겼다.평소 리액트로 작업하다보면 이 컴포넌트는 유저의 반응에 대해 즉각적으로 반응을 해야하거나, 오히려 필요하지 않을때의 고민을 무조건 하게 된다.여기서 Transition 은 즉각

아래와 같은 클래스가 있다고 가정하자.생성자(constructor) 에서 year 에 접근하고 싶다면, 아래와 같은 방식으로 접근할 수 있다.className.year => Department.yearthis.constructor.year

함수형으로 주로 작성하다 보니, 클래스에 대한 이해가 가물가물 하여 다시 새겨보자.필드(프로퍼티) 혹은 메소드 앞에 private, public, protected를 추가할 수 있다.private은 해당 클래스 내에서만 접근 가능하고 public은 어디서나protect

include - 포함할 파일 이름 또는 패턴의 배열, tsconfig 파일이 포함된 디렉토리를 기준으로 확인\* : 0개 이상의 문자와 일치? : 임의 한 문자와 일치\*\*/ : 모든 수준의 중첩된 디렉토리와 일치exclude - include 에서 제외할 파일이름

직접 타이핑하던 습관들을 고치며 에디터를 쓰는 덕을 좀 보고자 스니펫을 추가 해 보고자 한다. 여러 메서드나 문법들을 자주 쓰고 있지만, 대표적으로 바로 생

데이터를 기반으로 동적 테스트의 모든 측면을 구성하는것우선 로그인 양식을 예로 테스트를 할때이런 형태로 유저네임과 패스워드를 입력한다..fixture() 를 사용해서도 사용한다.아래는 API, DB 등 데이터를 사용하는 테스트 코드이다.여기서 사용된 .database(

Cypress 에서 유용한 메소드 4가지를 알아보자.subject의 속성에 대해 접근할 때 사용한다.its docssubject에서 JS함수를 호출 할 수 있다.아래 예시는 JS 데이터 유형에 JS 함수를 호출한 예시이다.invoke docsHTTP 요청을 만든다.re

Cypress 에서 Chromium기반(크롬, 엣지, 일렉트론) 및 Firefox를 지원한다.UI를 통해 실행 브라우저를 선택할 수 있고, CLI로도 가능하다.picutre1브라우저벼로 테스트를 하려면 옵션을 넣는다.cross browser testing(https&#

네트워크 요청 및 응답을 조작하고 테스트 해보자..intercept() 를 기본적인 사용법은 아래와 같다./users 경로에 대한 모든 POST요청을 가로챈다.요청에 대한 대기같은 추가작업을 위해 대체로 별칭을 부여한다.응답데이터를 mock 하기 위해 재정의 해야할 때

CLI를 통해서 헤드리스 모드에서 오류 발생 시 스크린샷과 비디오를 자동으로 기록한다.실패지점 스크린샷과 실패테스트 비디오로 제공하여 매우 유용하다.cy.screensh

alias와 sharing context, wait