목록분류 전체보기 (287)
프론트엔드 정복하기
참고 사이트 minjung-jeon.github.io/eslint-prettier-intellij/ [ECMAScript] Eslint & Prettier(저장시 자동 reformat) Setting(IntelliJ) | MINJUNG Eslint & Prettier(저장시 자동 reformat) minjung-jeon.github.io 통상적으로 많이 사용하는 { "semi": true, "singleQuote": true, "tabWidth": 2, "printWidth": 80 }
다음은 컴포넌트를 어떻게 분리해야하는지 알려주는 고전적인 문서다. Presentational and Container Components / 번역본 위 문서에 따르면 컴포넌트는 성격별로 2가지로 나눠볼 수 있다. 프레젠테이션 컴포넌트 컨테이너 컴포넌트 어떻게 보여지는가와 관련 어떻게 동작하는가와 관련 프레젠테이션 컴포넌트, 컨테이너 컴포넌트 모두 자식이 될 수 있다. DOM 마크업이나 스타일 시트를 포함한다. DOM 마크업이나 스타일 시트가 없다. 액션, store 등에 의존적이지 않다. 액션을 호출한다. 데이터 가져오기, 변경 등에 관여하지 않는다. 상태가 자주 변경된다. props를 통해 배타적으로 콜백함수나 데이터를 받는다. 예를 들어 버튼을 만든다고 하자. 버튼의 역할을 아래와 같이 present..
React 공식 홈페이지 - React로 생각하기 1단계 : UI를 [컴포넌트 계층 구조]로 나누기 목업 컴포넌트 분리 먼저, 과 같이 하나의 박스가 있다고 하면, 과 같이 각 영역을 컴포넌트로 분리하는 작업을 해야 한다. 컴포넌트를 분리하는 기술 중 하나는 단일 책임 원칙이다. 하나의 컴포넌트는 '한 가지 일'을 하도록 한다. 위 그림의 예시를 보면, 각 컴포넌트가 의 한 조각을 나타낸다. (1) 노란색 : 전체 포괄 (2) 파란색 : 검색 창 (3) 연두색 : input 값에 따른 데이터 전체 (4) 하늘색 : 각 카테고리의 제목 (5) 빨간색 : 각 카테고리별 제품 이를 계층 구조 로 나타내면 아래와 같다. 예시 전체 검색창 검색 input 값에 따른 데이터 전체 각 카테고리의 제목 각 카테고리별 ..
React hooks로 탭 기능을 어떻게 구현할까. 아래 그림처럼 상단에 탭타이틀이 있고, 하단에 탭 콘텐츠가 있으며, 각 탭 타이틀을 클릭할 경우 해당 컨텐츠가 보이도록 할 것이다. 1 ) 탭타이틀을 클릭하면 해당 타이틀에 'is-active'라는 class를 부여해서 포커싱된 탭에 맞는 스타일을 부여할 것이고, 2 ) 각 탭을 클릭하면 해당하는 콘텐츠만 화면에 보여지도록 할 것이다. 먼저 (1) 탭 Title, (2) 탭 Content를 담은 배열을 선언한다. const tabContArr=[ { tabTitle:( 탭1 ), tabCont:( 탭1 내용 ) }, { tabTitle:( 탭2 ), tabCont:( 탭2 내용 ) } ]; return되는 템플릿에 map 함수를 사용해서 각 obj의 탭..
[ data( ) 함수로 데이터 저장 ] $(selector).data(key, value) /** html **/ content // javascript $('span').data('name', '성별') [ data( ) 함수로 데이터 읽기 ] $(selector).data(key) $(selector).data( ) ----> key를 생략할 경우, 해당 엘리먼트에 저장된 모든 data들이 JSON 형식으로 리턴 [ data( ) 함수로 데이터 삭제 ] $(selector).removeData(key) [ data-* 형식으로 데이터 저장 ] HTML5에서 HTML 엘리먼트에 data-* 형식을 이용해서 데이터를 저장할 수 있게 됐다. jQuery의 data()를 이용해 저장한 것과 동일한 효과를 ..