[TIL] 22.02.0.....3?

아니 왜 벌써 시간이 이래

 

오늘의 공부

 

가볍게 니꼬쌤 영상 보고 테스트 해봄.

https://github.com/jjubbu/Try-React/blob/main/src/pages/HtmlTest.js

GitHub - jjubbu/Try-React: 이것저것 테스트 해보는 원격저장소!

디바이스 크기에 따라 다른 이미지 혹은 동일한 이미지를 사이즈별로 띄우는건 제외함.

일단 이미지..구하기 귀찮음+시간너무 늦음+졸려서..

 

기존에 늘어나고 줄어드는 막대기 만들때는 div안에 span 넣고 span의 사이즈를 변경해줬었는데..

progress 너무 편하다. 찾아보니 css 스타일링도 아주 어렵진 않은 듯. 준비중인 개인 프로젝트에 써볼 것.

 <progress value={progress} min="0" max="100" />

저기에서 저 value 부분은 state를 가져와서 넣고 더하기 버튼 누르면 올라가고 빼기 버튼 누르면 내려가게 만들었음.

min은 0이 기본인데 커스텀 가능함. 좋당.

 

그리고 details랑 datalist 는 짱 신기함

details는 대충 이케 쓰는데

<details>
  <summary>펼쳐보자!</summary>
  <span>닫아라...</span>
</details>

결과물

이건..혁신이다. 난 왜 이걸 몰랐는가..

이거 진심 언제 생긴거지?? 나 제..제..제작년인가 실무학원 다닐땐 제이쿼리써서 클릭하면..얘네가..나오고... 클릭하면..얘네가..사라지고..어쩌구..저쩌구.. 만들었었는디 이건 자바스크립트를 안써도..된다고? 

ㅋㅋ

혁신이다. 

 

 

datalist는 이케 써봄

<label for="dataInput">자동완성기능을 html만으로?!</label>
<input type="text" list="testList" id="dataInput" />
<datalist id="testList">
  <option value="가나다" />
  <option value="감자" />
  <option value="바나나" />
  <option value="토뭬에에에토" />
  <option value="서~윗포테토" />
  <option value="감자칩" />
  <option value="오버워치" />
</datalist>

결과물

활용법은..흠...

검색한거 그..그거..throttle? 말고 딴거 있는데 일정시간동안 입력 들어온거 들어올때마다 누적하고 일정시간동안 업데이트 없으면 실행하는..그..그것... 그거 써서 서버로 값 보내고 비슷한 단어 연관검색어 리스트로 가져와서 map 돌려서 option태그 주르르륵 띄우는..방식 생각해봤는데 이게 비효율적인지 아닌진 모르겠지만?

전에 만든 자동완성 기능은 ul안에 li 넣고 li 클릭하면 input의 값으로 클릭한 값 들어가게 했었는디 이건 자동으로 해주니까 편한듯.

내 생각엔 자바스크립트를 덜 쓰니까 자동완성쓸때 이거 쓰면 좋겠다 싶음.

오늘의 작업

 

회사일..

모바일 페이지 두개 만들고

데이터 포멧 다시 짜맞추는디

내 코드 너무 지저분해서 그냥 json에 아예 맞춰야겠다 싶어서 갈아엎다가 퇴근했었음.

이ㄸ따 자다일어나서출근하면마저해야지.. . .. 

 

그럼 20000