확장성 높은 tabButton을 만들어보자. 조건 1. firstButton과 secondButton을 누르면 각각에 알맞은 데이터가 보여져야한다. 2. thirdbutton, fourth button 등이 추가 될 가능성을 고려해서 만들어야한다. 구현 방법 1. 변경되는 탭 모드를 저장할 state를 만들어준다. 2. 각 탭 버튼에 고유한 값을 할당하고, 해당 값을 이벤트 핸들러에 전달한다. 3. 이벤트 핸들러에서 전달받은 값에 따라 현재 활성화된 탭을 업데이트한다. 4. 활성화된 탭에 따라 적절한 데이터를 렌더링한다. 1. 부모컴포넌트에 탭 모드를 저장할 state와 탭 모드 변경시 실행되는 함수를 만들어준다. 부모컴포넌트.tsx //탭모드를 저장한 state/ 초기값은 firstBtn으로 설정 co..

가상환경세팅 후, 가상환경 상태에서 진행! 1. git remote update로 깃헙에 있는 브랜치를 최신으로 바꿔준다. 2. git clone 주소 3. ESLint, Prettier를 검색해서 각각 설치 4. /ROOT 경로에 아래 내용의 .vscode/settings.json 생성 { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.tabSize": 2, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, "javascript.format.enable": false, "eslint.alwaysShowStatus": true, ..

앞서 말했듯이 3세대 웹이 등장하면서 우리의 웹사이트는 더욱더 복잡해지기 시작했다. 그러다보니 어떻게하면 더 빠르게 일처리를 할 수 있을까? 고민을하다 생각난것이 , 프레임워크고 프론트엔드의 대표적인 프레임워크 3대장에는 앵귤러 (Angular) => 개발에 필요한 거의 모든 기능을 포함하고 있는 프레임워크이기 때문에 완전히 최적화된 번들 앱을 만들 수 있습니다. 하지만 그만큼 알고, 배워야할게 많아 다루기 힘든 프레임워크 리액트 (React) => 엄청난 유연성을 가지고있는 프레임워크, web과 native 앱 개발에 모두 사용가능, 큰 생태계. 그로인한 많은 라이브러리, 큰 규모에서 빛을 발함 뷰 (Vue)가 있다. => 앱개발이 쉽고 빠르다. 빠른 랜더링과 작은 용량(약 리액트 1/2), templ..