# tab

syon013

프로젝트 일자별로 블로그를 작성하려 하였지만, 페이지 구현하는 것에 신경쓰다보니 일자별로 작성하는게 엄청 힘들다는 일이라는 것을 다시 한번 깨닫고 있다.. 그래서 프로젝트를 진행하면서 배운 기술에 대해 블로그를 통해 나도 다시 한번 상기한다고 생각하면서 정리를 해보려고 한다. 지금 내가 정리하는 것은 홈페이지를 보면 흔히 볼 수 있는 TAB 버튼에 대한 기술이다. 내가 사용할 때는 상당히 단순해보이지만 실제로 구현하려니 이게 뭐지... 하다가 결국 친구를 통해 배웠고, 이 배움을 같이 공유하고자 블로그를 작성한다는 것을 다시 한번 강조한다. 1. Tabs.js 상수데이터 생성하기 일단 제일 먼저 해야하는 것은 TABS.js 상수데이터 파일 생성이었다. TAB은 몇 개의 이동 관련 탭이 생길지 모르고, 변하지 않는 값이기 때문에 먼저 파일을 생성해놓고 끌어쓰는 것이었다. 나는 3개의 TAB을 이용할 것이기 때문에 3개의 상수데이터를 생성했다. ![](htt

iank1m

Dart 차근차근 자 세상 바쁜 2학년 2학기가 시작됐고, 이번 학기 TAB에서는 앱 개발의 기초를 스터디하기로 했다. Dart부터 시작해서 Flutter, 그리고 앱 런칭까지 해보는 것을 최종 목표로 한 학기의 팀 스터디를 시작하려 한다. 강의는 노마드 코더의 "Dart 시작하기" 를 통해 시작하기로 했고 총 4개의 세션으로 나누어 정리하려 한다. 한 학기간 함께할 우리 듬직한 팀장 희건이, 지민이, 미서 파이팅 !! 0. INTRODUCTION 이번에도 어김없이 니꼬쌤과 함께 저세상 텐션으로 시작하는 OT. 간단히 요약하자면, Flutter를 학습하기 이전에 왜 Dart를 학습해야하는지에 대한 Dart 선수학습의 중요성에 대해 강조한다. 진정한 객체지향 언어인 Dart! Lessss

jyo_ong

1. 시작 material3 공식 사이트에서 보면 사용할 수 있는 TabRow가 위와 같이 2개로 나온다. 내가 사용하고 싶었던 것은 1번! 하지만 아무리 해도 찾을 수 없었다.. 알고 보니 해당 버전은 material3 Beta 버전에서만 지원하고 그마저도 API 34부터 지원하고 있다. 이럴거면 왜 공식 사이트에 넣어뒀는지 모르겠다. 아무튼 1번 처럼 글씨 영역에 맞추어서 indicator를 표시하고 전환 시 애니메이션 효과가 있는 CustomIndicator를 만드는 방법을 알아보자

chae0510

Window OS를 사용할 땐 터미널에서 몇 글자 입력 후 탭하면 자동으로 글자가 완성됐는데, 맥으로 넘어오니 따로 설정해두지 않으면 그 기능이 작동하지 않아 해결하기 위해 시도했다!🥰 터미널 zsh → bash로 바꾸기 >이유는 모르겠지만 zsh로 하니까 자동완성이 잘 안되거나 대소문자 영향을 받아서 bash 로 바꿔줬더니 문제 없이 잘 된다! 이유는 나중에 찾아봐야겠다. bash를 기본값으로 변경 chsh -s /bin/bash 명령어를 터미널에 입력한 후 터미널을 다시 시작해주면 변경된다. (zsh로 되돌리고 싶은 경우 동일하게 chsh -s /bin/zsh 로 입력해주면 된다.) 본격적으로 세팅하기 터미널을 키면 맨 처음 나오는 화면에서 vi .inputrc 입력 후 엔터를 누른다. ![](https://velog.velcdn.com/images/chae0510/post/4a907d59-db49-4cbc-

hjbaek5796

DefaultTabController DefaultTabController is a convenience widget in Flutter that provides a default TabController for its descendants. Instead of manually creating and managing a TabController, you can use the DefaultTabController to handle it automatically, making it easier to work with the TabBar and TabBarView widgets.   TabBar TabBar widget is used in conjunction with the TabController to create a horizontal tab system, allowing users to swipe between

dpldpl

페이지 사이드에 tab을 만들어서 클릭 시 클릭 된 tab의 색깔을 변하게 하고, tab에 해당되는 컴포넌트를 조건부 렌더링 하는 코드를 작성했다. 1.useState훅 2.map함수 3.클릭 시 동작할 handler 함수 4.동적 class 이 네 가지로 간단하게 구현할 수 있다. 우선 tab 메뉴에 들어갈 객체배열 데이터를 만들어주자. 그 다음 useState훅을 이용해서 activeTab이라는 상태와 activeTab을 업데이트하는 setActiveTab 함수를 선언한다. useState는 React의 훅으로, 함수형 컴포넌트 내부에서 상태를 관리할 수 있게 도와준다. 초기 상태로는 첫 번째 탭이 활성화되어 있는게 자연스러우므로, 초기값으로 첫 번째 탭의 id를 사용하자. (index 번호는 0번째부터 세어나가기 때문에 tabData의 0번째 객체를 넣어줘야 첫번째 탭의 id가 활성화된다.) <

iank1m

Section 3. Jacascript 응용 지난 시간까지 js의 기본적인 문법들과 자주 쓰는 내장 함수들 몇 가지까지 공부했다. 아는 내용이 대다수이긴 했지만 내장함수들은 처음 보는 게 많았고 파이썬에서 자주 쓰던 메소드들이랑 비슷해서 반갑기도 했고 되려 헷갈리기도 했다. sort()같은건 js에서 문자열을 기준으로 정렬하는거라 숫자를 오름차순 or 내림차순으로 정렬하려면 내가 따로 계산식을 작성해줘야 한다는 번거로움이 있었다... 아무튼 공부한 내용들을 바탕으로 이제부턴 js응용 섹션 ! 아자아자 ! ! ! Truthy, Falsy의 개념을 이해해야하는데 예를들어 선언되기만 하고 값이 초기화되지 않은 변수는 js가 false라고 판단한다. 근데 비어있는데 선언되기만 한 배열은 또 true라고 판

iank1m

section 1. 강의 OT 새내기 때 어영부영 배웠던 리액트 ... 나름대로 제대로 해보고자 비싼 책도 구매했었지만 라면 받침대로만 쓰기 아쉬워서 이번 기회에 다시 기초부터 공부하려고 TAB 유데미 재학생 스터디에 참여했다. 강의가 어렵게 느껴질지 무난하게 느껴질지는 모르겠지만 열심히 해보도록 하겠다 !!! 강의 완주하면 이렇게 될거라고 자신만만하신 Winterlood 강사님 ... 믿고 시작 ! Javascript -> Node.js -> React.js 이 순서로 공부해야 함 ! section 2. Javascript 기초 HTML , CSS의 기본 개념은 따로 정리하지 않고 넘어가겠음. 난 이미 개고수니깐 ^^ ![](https://velog.velcdn.com/imag

tygerhwang

Tab View 만들기(4) - Custom 2탄 Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(3) - Custom 1탄 1편에 이어서 로직 부분에 해당되는 GetController의 코드를 만들어 보자. 작성된 코드는 최대한 복잡하지 않게 작성을 하였지만, 이해가 어려우시다면 Git 클론해서 직접 실행해보면서 값을 변경해 보면 이해가 될 것이다. 자 한번 작성해보자. Flutter 작성에 앞서 상태관리를 하여야하는 부분이 1탄에서 작성한 UI부분에 필요한 Cus

tygerhwang

Tab View 만들기(3) - Custom 1탄 Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(4) - Custom 2탄 Tab View 시리즈의 마지막은 직접 TabBarView 부분을 만들어 보려고 한다. 이전 글에서 PageView로 Tab View를 구현할 때는 상단 TabBar 부분을 직접 만들었지만 인디케이터의 포지셔닝 까지 PageView의 움직임과 싱크를 맞추지는 않았었는데, 이번에는 여기 부분도 싱크가 맞춰질 수 있도록 개발을 해보겠다. 우선 Tab Vie

tygerhwang

Tab View 만들기(2) - PageView Tab View 만들기(1) - Tabbar Tab View 만들기(3) - Custom 1탄 Tab View 만들기(4) - Custom 2탄 이전 글에 이어서 이번에는 Tab View를 PageView를 활용하여 만드는 방법에 대해서 소개하도록 하겠다. 여기서는 PageView로 만들기 때문에 TabBar도 직접 커스텀해서 만들어 볼 예정이다. 사실 TabBarView 위젯을 보면 PageView로 개발이 되어있기도 하고 TabBarView, PageView 작동 방식이 거의 비슷하다고 볼

tygerhwang

Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(3) - Custom 1탄 Tab View 만들기(4) - Custom 2탄 이번 글 부터 Tab View를 만드는 방법에 대해서 작성하도록 하겠다. Tab View는 앱을 만들다 보면 거의 무조건 사용을 해야하는 위젯 중에 하나라고 볼 수 있는데, Tab View가 조금의 다른 UI 구조로 개발을 하려고 하면 잘 안되서 결국 직접 만들어 쓰는 경우도 있었다. Tab View를 가장 쉽고 간단하게 사용하는 방법은 바로 Fl

koyk0408

탭으로 상호작용 할 수 있는 웹을 만들자. 마우스로 손을 옮기기 귀찮아서 탭을 쓴 경험이 다들 있을것이다. 무선마우스를 쓴다면 배터리가 닳아서 하는 수 없이 키보드로만 컴퓨터를 써야 할 때도 분명 있었다. 다른것도 시급하지만... 그래서 이부분을 먼저 리팩토링해보기로 했다. 마음먹은 거에 비해 그리 대단히 손이 가는 건 아니었다. 'tabindex'를 쓰면 된다. tabindex: 요소가 포커스될 수 있음을 나타낸다. tab 키를 연속적으로 눌렀을 때 어느 순서로 이동할지 설정해준다. -1 : tab으로 접근할 수는 없지만 마우스 클릭으로는 포커스 가능. 위젯 접근성 확보를 위해 사용한다고 한다. 양의 정수 : 순서를 값으로 지정한다. 최대 32767까지 지정 가능하다. 0 : tab으로 포커스 받을 수 없는 요소. 주로 tex

cmaw

Stack - Tab 이동시 주의 현재 MyReview.js, Detail.js 는 Stacks 에 위치하고 있고, MyPage.js 는 Tabs 에 위치해 있다. 같은 Stacks 끼리의 이동에는 Stacks 를 쓰지 않고 이동할 스크린과 파람을 넘겨주고 Tabs에서 이동시엔 Stacks 를 꼭 입력해 준다. > ## Screen Stack 을 찾을 수 없습니다! navigate 사용시 뜬 경고문이다.. Stacks 라고 쓰니 바로 해결되었다.. Stack 을 Stacks 함수로 만든것이 문제! 휴먼 에러 주의!

powerwmj

forEach 문을 활용한 탭메뉴 예시 idx를 통해 클래스 삭제 / key 값을 통해 클래스 추가

lee_yesol421

프로젝트 개발 기수별 만족도 화면 구현 완료 어제 만들어놓은 쿼리에 몇 가지 컬럼을 추가해서 최종 쿼리를 먼저 만들었다. 화면은 처음 만든 sub jsp를 복사해서 만들었다. controller에 새로운 함수 추가 : 기수별 만족도 통계 목록 및 과정정보 조회 요청 탭 구현 관련 왼쪽에 목록이 있고 오른쪽엔 탭 1, 2가 있는 화면을 구현하려고 하는데, 탭1, 탭2 각각 기능은 구현했으나 탭 변환이 안됨 다른 화면에 적용된 탭 기능을 제대로 안 보고 갖다 쓰려다가 코드가 꼬였다. 방법 2가지 : 탭 클릭 시 왼쪽 목록 포함한 모든 화면 리로드 (처음 참고한 화면) / jsp 안에 서브 jsp를 통으로 넣어버리고 id값을 준 후, 탭 클릭 시 js단에서 해당 영역만 보이고 나머지는 display:none;하기 (homey와 비슷한 방식) 모든 화면을 리로드하는 것이 마음에 안들어서 일단 두번째 방법을 시도해보고, 오늘까지 못하면 내

caecus

Tab 컴포넌트 재사용하기 부모 컴포넌트에서 .map() 을 사용하지 않고 자식 컴포넌트에서 사용할 경우 컴포넌트 props로 배열 보내기 Tab 컴포넌트를 재사용하기 위해 TabARR.tsx 파일에 탭 메뉴들을 배열로 만들어줌 부모 컴포넌트에서 자식 컴포넌트로 배열들을 props로 내려보냄 자식 컴포넌트에서 props로 받고 interface 설정 .map() 메소드를 사용해 Tab 메뉴들을 만들어줌 Tab 클릭할 때마다 다른 컴포넌트가 나오게 함 어려웠던 점 처음엔 name이 아니라 idx로 작성했었는데 idx의 경우 어떤 식으로 자동 생성되는 지 모르겠어서 한 눈에 알아볼 수 있는 name으로 변경하였다. props의 type을 정하는 방법이 생각보다 잘 되지 않아서 어려웠다. `'id' PropType is defined but prop is never used

euji42

Tab Menu에서 컴포넌트 사용할 때 발생한 에러 > 에러 문구 : Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. JSX를 반환하는 함수()=>JSX.Element 그대로 적용했기 때문이다. 즉, **import 해온 컴포넌트를 ``

kokoball0

개요 구현할 Tab 메뉴는 아래의 사진과 같이 상단에는 타이틀 하단에는 Tab 콘텐츠가 있는 구조로 각각의 Tab 타이틀을 클릭할 경우 그에 맞는 콘텐츠가 보이는 방식이다. 활성화 된 Tab 타이틀에는 'active' class를 추가하여 스타일을 추가 비 활성화 된 Tab 콘텐츠는 안 보이게 처리 코드 작성 및 설명