Storybook
: UI 컴포넌트 개발과 자동으로 문서를 생성할 때 사용한다.
CSS-in-JS
Styled-Components
: 컴포넌트 단위의 스타일링에 사용합니다.
-
vscode-styled-components Extension
: 스타일드 컴포넌트 작성에 편리함 더해줌
: JavaScript 및 TypeScript의 스타일 구성 요소에 대한
Syntax highlighting 표시
: 스타일드 컴포넌트 내부의 문자열에서 상세한 CSS 코드 완성 기능 지원
: 문법적 에러를 잡아준다.설치
VSCode 내에서 키를 누르고 다음 command + p 를 입력한다.
ext install vscode-styled-components
useRef
-----추가-----
: 챕터 예제 영상
play, pause 주소를 react로는 알수없는데 여기서는 확인이
가능하다.
코드 밖에서
const helloWorld = () => {
document.querySelector('video');
1. React 공식문서에서 하지 말라고 했음.
2. 원하는대로 잘 안됨
3. React는 DOM에 직접 접근하는 것을 가정하지 않고, 내부 작 업을 하기 때문에
그러나 DOM에 접근해야 하는 경우가 있다.
DOM으로만 작성된 라이브러리를 쓰는 경우 -> 애니메이션
React Element가 아니라 HTML 형식으로 작성된 친구들 video => useRef
초기값을 0, document.querySelector('video')
-> 결과값이 담겨있을 것
videoRef -> 선언 -> undefined
할당을 했다 -> 뭔가를 할당
초기값을 null -> 처음에는 우선 빈 값으로 가정하겠다. 없는 값 으로 할당하겟다는 의미로 본다.
나중에 다시 할당할 것이다.
undefined는 개발자가 임의로 이 값을 할당하는 것이 비권장
: 이 값은 JS 엔진에 의해 할당된다는 의미.
null은 이 변수는 있는데, 개발자가 임의로 빈 값으로 하겠다.
: 값이 아에 없는걸 방지하기 위해 null을 할당한다.
즉, 개발자가 의도한 값
**백그라운드를 써야하는 이유를 생각해보기 !!
UI패턴의 명칭
(Modal, Click to Edit, Radio Button,Slider,Carousel,Collapse, Drawer)
**빌드 컴포넌트
스토리북,스타일 컴포넌트
리액트 : 선언 중심 컴포넌트 UI(create-react-app) 사용.
프리티어 : 자동화된 코드 포맷팅에 사용한다.
ㅡㅡㅡ추가ㅡㅡㅡ
shopify
https://polaris.shopify.com/ (react 코드)
https://socarframe.socar.kr/
(쏘카는 리액트는 아니고 안드로이드 앱 등)
[부트스트랩(버튼정도),
material(https://material-ui.com/components/box/)]
->이용하는거는 권장하지 않는다.(css 열심히 하긔)
: 디자이너 시스템/용어 익숙해지는데 좋다.
컴포넌트그런것들
data picker
color picker 등등
//코드확인
material ui github
shopify ui github
스프린트 목표
Modal, Toggle, Tab, Autocomplete, ClickToEdit, Tag Ul 컴포넌트 만들기.
-modal
: Modal 버튼 클릭하면 Modal 창이 켜지고 꺼질 수 있게 구현한다.
** 테스트는 통과됐는데 스프린트에서 구현되는거랑 다르게 구현이 되서
무언가 잘못한거같다.한번에 통과하기가 너무 어려운거같다.
스프린트 리뷰보면서 어떤부분이 잘못되었는지 알아봐야할거같다.
z-index : 모달창이 덧을때 가려야하기때문에 가장 높은 창으로
설정을 한다. 999;
이벤트 버블링, 캡쳐링 대해서 공부해보기
<ModalView onClick={(e) => e.stopPropagation()}>
// 정상
——— css를 구현하지않아서였다.. test항목 꼼꼼하게 읽자.
-----추가-----
tab 목록 중 보라색으로 되는 친구가 현재 상태 (스프린트확인)
-toggle
: on/off switch 개념으로 스위치를 켰다, 껐다하는 기능
: add() - 지정한 클래스 값을 추가
remove() - 지정한 클래스 값을 제거
메서드를 한번에 쓸 수 있는 합쳐진 개념
: 보통 click 이벤트에 classList를 이용하여 toggle css로 준 클래스를 on/off 처리.
변수명.addEventListener(‘click’, function(){
변수명.classList.toggle(‘클래스’);
});
** toggle이 무엇인지는 이해를 했는데 코드 작성하는게 익숙치 않다.
transition: all.2s ease;
: 0.2초동안 부드럽게 스위치가 전환될수있다는걸 의미한다.
: css에 추가함으로써 좀 더 보기에 좋다.
: 토글 애니메이션 구현할 수 있다. 적용해보기.
-tab
**tab 테스트를 통과하니까 tag enter 테스트가 통과되었다(?)
코드 작성하는 것도 어렵지만 test를 꼼꼼하게 보고
이해가 안되는 부분을 해결해야하는데 아직도 익숙치가 않은거같다
깔끔하게 잘이해하고싶다…….. 일단 tab 테스트와 tag enter 부분 테스트는
통과하였다.
** 왜 통과가 안되는지 모르겠어서 스프린트 리뷰를 통해서 배워야 할거같다. (해결)
-----추가
아,
<li className="submenu">{menuArr[0].name}</li>
<li className="submenu">{menuArr[1].name}</li>
<li className="submenu">{menuArr[2].name}</li>이 부분을 지워줘야했다
완성!
-tag
다 부족하지만 css가 부족하다는걸 많이 느꼈다.
그리고 개념은 이해한거같았는데 코드를 바로 작성하는데 어려움을 느껴서
따로 더 공부가 필요할 듯하다.
splicy -> 복사해서!!
삼항연산자는 가독성이 떨어지는 경우에는 x
jsx에서는 if문 사용 안되니까
const handleEnter = (event)~ 이런식으로 사용. 빼서.
setTage([...tags, evet.target.value])
// 이 메소드는 태그 추가 외에도 아래 3가지 기능
1. 이미 입력되어 있는 태그인지 검사하여 이미 있는 태그라면 추가하지 말기
event.target.value
2. 아무것도 입력하지 않은 채 엔터 키 입력시 메소드 시행하지 말기
event.target.value
3. 태그가 추가되면 input 창 비우기
event.target.value = ''
------------추가---
코드 개발 잘 하는법 : 코드 작성 - 눈으로 확인 - 동료들과 코드 리뷰
but 프론트앤드,css,ul 어려움. (테스트하는거거의불가능하고 그 테스트 자체도 완전하지않고 리소스도 많이 든다. 굉장히 어렵다 그래서 이거를 코드로 짜는것보다 스토리북으로해서 하는게 더 간편하다.)
controlled component ( tweet textbox 다시보기)
