[TIL] 220912

먼지·2022년 9월 12일

TIL

목록 보기

29/57

오늘 skill-badge 같이 만들면서 배운 것들
https://github.com/twinstae/skill-badge/commit/ea2715233b379ff1b5b5d5298b2d55a3a1a9588a

formData에서 input의 name에 해당하는 데이터를 꺼내서 가져오는 것
- const result = await request.formData().then(formData => ({formData.get('input-name'),...)}
- getAll은 name이 여러개일때?
cypress에서 findTextBox랑 findByRole

describe('배지 페이지', () => {
  it('새로운 배지를 만들 수 있다', () => {
  	...
    cy.findTextBox('배지 제목').type('리눅스로 ssh 통신을 해서 ec2에 node 세팅을 할 수 있습니다');
  	cy.findByRole('link', { name: /리눅스로 ssh 통신을 해서 ec2에 node 세팅을 할 수 있습니다/ });
  })
});

app/components/JSONDownloadLink.tsx

import React from 'react';

function JSONDownloadLink(
  props: React.ComponentProps<'a'> & { jsonData: string; fileName: string }
) {
  const dataStr =
    'data:text/json;charset=utf-8,' + encodeURIComponent(props.jsonData);
  return (
    <a {...props} href={dataStr} download={props.fileName}>
      {props.children}
    </a>
  );
}

export default JSONDownloadLink;

컴포넌트의 props로 json 데이터를 만들어줌
문자열을 url로 바꿔서 link를 클릭했을 때 json을 파일로다운받을수잇음
사용자들이 저 링크를 클릭해서 역량배지개인데이털르 다운받아서쓸수잇게 만든 임시 컴포넌트

react v18 useId

https://ko.reactjs.org/docs/hooks-reference.html#useid

import { useId } from "react";
useId는 적당한 id를 react가 하나 만들어줌
무작위 아이디 기법은 ssr에서 깨질 수 있는데
결정적인 방법으로 깨지지 않게 만들어 줌
ssr을 하려면 클라이언트랑 서버랑 아이디가 똑같아야 하는데 다를 수 잇기 때문임
둘이 똑같이 동기화시킬수잇음
아이디는 숫자여도 무조건 문자열임

datalist

datalist - MDN

html 표준에 datalist와 option element를 쓰면 자동완성이 알아서 됨.

datalist는 테스트할 때 콤보박스가됨
옵션의 갯수와 자동완성이 어떻게 바뀌는지

expect(screen.getByRole('option', { hidden: true })).toHaveValue('redux')
화면에 옵션이 redux밖에 없다?!
추천이 redux만 떠있다

re => react, react-qeury, react-native

red => redux

app/routes/badges/index.tsx

<Form  method="get" action="/badges">
	<AutoCompleteTextBox
    	type="search"
        className="input input-bordered"
        name="skillSlug"
        initValue={search ?? ''}
        candidates={allSkillSlugs}
    />
</Form>

검색폼은 어떤 원리?
css를 치고 검색을 하게 되면 위에 주소
?skillSlug=value

get요청을 보내면 파라미터로 날아가
search param ?나skillSlug=css

enter를 눌러야지만 검색이 되도록

admin.reset.ts

테스트 할 때 디비를 초기화해주는 친구

autoComplete="off"

브라우저의 자동완성을 막아줌
우리가 알아서할거야

form role="search" -> input type="search"

      <form role="search" onSubmit={(e) => e.preventDefault()}>
        <label>
          검색하기
          <input
            type="text"
            className="input input-bordered mt-2 w-full"
            value={search}
            placeholder="ex) database, 데이터베이스, react, 오픈 소스"
            onChange={(e) => setSearch(e.target.value)}
          />
        </label>
      </form>

=.>
  
      <label>
        검색하기
        <input
          type="search"
          className="input input-bordered mt-2 w-full"
          value={search}
          placeholder="ex) database, 데이터베이스, react, 오픈 소스"
          onChange={(e) => setSearch(e.target.value)}
        />
      </label>