프론트엔드 정복하기

배열 함수 Array . slice ( begin [, end] ) -begin : 0부터 시작하는 index를 의미함 -end : 추출을 종료할 인덱스 / 생략 가능

할당 연산자 : 표준 연산의 축약형 이름 단축 연산자 의미 덧셈 할당자 x += y x = x + y 뺄셈 할당자 x -= y x = x - y 참고 사이트 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators

HTML /** 탭 Nav Bar **/ Pictures Music /** 탭 Contents **/ Pictures Music CSS #tab-content p { display: none; } #tab-content p.is-active { display: block; } Javascript const TABS = [...document.querySelectorAll('#tabs li')]; const CONTENT = [...document.querySelectorAll('#tab-content p')]; const ACTIVE_CLASS = 'is-active'; function initTabs() { TABS.forEach((tab) => { tab.addEventListener('click',..

HTML /** 탭 Nav Bar **/ Pictures Music /** 탭 Contents **/ Pictures Music CSS #tab-content p { display: none; } #tab-content p.is-active { display: block; } Jquery $(document).ready(function() { // 탭을 클릭하면 $('#tabs li').on('click', function() { var tab = $(this).data('tab'); $('#tabs li').removeClass('is-active'); $(this).addClass('is-active'); $('#tab-content p').removeClass('is-active'); $('p[da..

medium.com/@thexap/how-to-setup-bulma-css-framework-with-react-under-5-minutes-a3d8c2c33a87 How To Setup Bulma CSS Framework With React Under 5 Minutes For my next React project I decided to use a CSS framework. Before that I was using Styled-components to style my components. medium.com ** app.scss 파일에서 각각의 sass 파일을 불러오기 전에 @import '~bulma/sass/utilities/_all.sass'; 위를 먼저 불러와줘야, 각 sass 파일의 변수들을..

CRA(Create React App)를 통해 리액트 패키지를 설치하면 React Testing Library도 같이 설치되어서 테스팅 라이브러리를 설치하지 않아도 테스트 주도 개발을 할 수 있다. 하지만 테스팅 라이브러리를 지원하지 않는 버전으로 CRA를 실행했거나, CRA를 통해 리액트 패키지를 설치하지 않은 경우에는 React Testing Library를 직접 설치하고 셋팅해야 한다. React Testing Library를 사용해야 하는 몇 가지 이유가 있다. 모든 테스트를 DOM 위주로 진행하며, 필요한 기능들만 지원해줘서 매우 가볍고, 개발자들이 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있도록 도와준다는 점이다. 자, React Testing Library를 설치하고 셋팅해보자..