FrontEnd

프론트엔드에서 백엔드의 API를 활용해야 하는 것처럼, 백엔드 개발에 종속적인 부분이 있다면, 해당 부분이 완성되기 전까지는 프론트엔드에서 개발을 진행할 수 없고, 그 부분이 진행된 후에나 개발이 가능합니다. 심지어 추가적인 수정사항이 발생했는데 백엔드 개발에 의존성이

title: 타입스크립트 enumdate: YYYY-MM-DD HH:MM:SS +09:00categories: 프론트 , typeScripttags: typeScript, enum toc: truetoc_sticky: true여러 값들에 미리 이름을 정

서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것어느 한쪽에 최적화되지 않고, 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 동등한 수준의 정보, 기능 접근에 초점을 맞춘다.기본 기능: 링크, 대화 상자, 메뉴GUI: 응용 프로그램의 모양과 느낌응답: 애플

만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일종류:Session Cookie: 메모리에만 저장, 브라우저 종료시 삭제Persistent Cookie: 파일로 저장, 장기간 유지 가능, 브라우저 종료 상관 XSecure Cookie: HTTPS에서 사용되는

null: 변수를 선언하고 빈 값을 할당한 상태

버튼 위에 버튼이 있어 겹쳐진 부분의 버튼을 눌렀을 때 두 버튼의 이벤트가 둘 다 발생하는 상황이벤트의 기본동작 방지을 해주는 것이다e.preventDefault()는 고유 동작을 중단시키고,e.stopPropagation()은 상위 엘리먼트들로의 이벤트 전파를 중단

Recoil은 페이스북이 React 전용으로 낸 상태 관리 라이브러리Recoil을 통해 전역 상태 관리하면 코드가 간결해진다Recoil의 리렌더링각각의 전역 상태에 대한 atom이 생성되고 해당 상태를 구독하는 구성 요소만 리렌더링 된다.Recoil은 전역 상태 관리를

프로퍼티, props(properties의 줄임말) 라고 한다.상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)프로퍼티에 문자열을 전달할 때는 큰따옴표

쿼리스트링은 URL의 한 부분이며 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다.쿼리스트링은 이름 그대로 문자열 타입이며 key = value로 표현된다. 또한 URL의 일부로 쿼리스트링의 시작점은 "?" 으로 표시된다.예시)https:/

테이블을 그리다 보면 가끔 헤더는 고정하고 바디에만 스크롤을 적용시키고 싶은 상황이 있다.테이블을 두 개 만드는 것이다.하나의 테이블은 thead만 넣고다른 하나의 테이블에는 tbody만 넣어주고 스크롤을 적용시키면 된다!!

React 애플리케이션에서 데이터 가져오기 및 상태 관리에 사용되는 인기 있는 라이브러리API, 데이터베이스 또는 기타 소스에서 가져와야 하는 데이터를 관리React 구성 요소와 원활하게 통합하는 강력하고 유연한 방법을 제공데이터 fetching: 캐싱, 자동 업데이트

prettier Prettier란? 개발자들 간에 다른 코딩스타일을 통일 시켜주는 도구 코드 포멧터로써 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 자동으로 변환해주는 도구이다. 왜 Prettier를 사용하는지? 기존 포멧터와 달리 설정 여지가 거의 없

데이터 로드 또는 콘텐츠 가져오기 프로세스 중에 눈에 띄는 지연이 있을 수 있으며 이로 인해 사용자에게 불편함을 줄 수 있다.이를 완화하기 위해 로딩 스켈레톤이 표시되어 사용자에게 진행 상황과 활동에 대한 감각을 제공하여 백그라운드에서 어떤 일이 일어나고 있다는 인상을

네트워크 에러와 같이 코드와는 무관한 이유로 발생하는 에러 처리JavaScript는 이로부터 코드의 실행 흐름을 원상복구할 수 있는 기능을 제공하며, try...catch...finally 구문을 사용하면 에러가 나더라도 코드의 실행을 지속할 수 있다에러가 안 났을 때

Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리다.출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다.jest를 설치하고te

ESLint는 코딩 스타일 가이드를 따르지 않거나 문제가 있는 코드 또는 안티 패턴을 찾기 위해 사용하는 Javascript linter이다개발자가 자신의 스타일 가이드를 작성할 수도 있다ESLint에는 프로젝트에서 사용하는 규칙을 수정할 수 있다"off" 또는 0:

preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 한다.이때 기본 동작은 이벤트의 종류에 따라 다르다. submit인 경우 form 데이터를 서버에 전송하고, 페이지를 새로 고침 하는 부분이 기본 동작이다.preventDefault를 사용하면

dependencies에는 애플리케이션 동작과 연관된 라이브러리가 있다devDependencies에는 애플리케이션 동작과 직접적인 연관은 없지만, 이름 그대로 개발할 때 필요한 라이브러리가 있다배포할 때 어떤 라이브러리를 포함할지 정해서 빌드 시간도 줄이고, 배포할 때

단위 테스트나 통합 테스트는 개발자의 관점에서 제품 일부분만을 선별하여 테스트한다종단 간 테스트는 이와 달리 실제 사용자의 관점에서 테스트를 진행하며,그런 의미에서 기능(Functional) 테스트 혹은 UI 테스트라고 불리기도 한다Cypress는 브라우저 기반의 GU

Cypress란 자바스크립트 E2E 테스트 프레임워크로 웹이 정상적으로 동작하는지 자동으로 테스트합니다. 또한 TDD(테스트 주도 개발)을 위한 도구이기도 합니다.TDD = Test Driven Development 말그대로 테스트 주도 개발입니다.어떤 기능에 대한 테