[TIL] 220909-11

먼지·2022년 9월 11일

TIL

목록 보기

28/57

0909

aria-

label => 아이콘이라던지텍스트에 자체에는 글자가 없음. 마우스를 올리기 전에 아이콘 자체를 가리키는 것이 필요
얘는 삭제하는 버튼이야를 알려주는 게 label!
우리는 마우스를 올렸을 때 툴팁이 보이는데 그 마우스를 올리기 전에 미리 라벨을 달아서 아는 것.
ex) 얘는 미리 보기구나! 그리고 test 할 때도 편함

labelledby => ol, ul의 목록 위에 만약 h2가 있으면 우리는 대강 제목이구나 알 수 있는데,
시각장애인분들은 ul의 제목을 추론하는 게 귀찮기도 하고
(하위 역량으로 가고 싶으면) 점프하는 기능이 필요함. 리스트나 항목마다 제목이랑 이름 라벨이랑 연결해주는것이 필요함

<h2 id="children-title"></h2>
ul aria-labelledby="children-title"

제목마다 무슨 element의 제목이면 꼭 달아주기.

부수적 효과 = 테스트가 편해진다!

리펙토링 기준?

사용자가보고작동하는게똑같은데내부구조만개선한것!

git

git commit convention

팀에서정하는거임
add
feat
feature 기능을추가

pr

코드를변경해달라
브렌치를병합해달라

Issues

프로젝트 이슈 관리 게시판
커뮤니티 게시판 용도
내가해야할일들명세정리문제들보고

pr - 의사소통의시간

admin.new.tsx

.이 폴더 대신
admin > new.tsx
admin.new.tsx
$slug.tsx$ slug.edit.tsx
/react-native/edit

$slug 폴더 안에
index.tsx
edit.tsx 두개를만들어야하는걸
=> $slug.edit.tsx

~ 절대 경로
app/

필요한역량이멀까 _탐토

사소한 거에서 사용자의 경험이 달라짐
테스트를 안 짜더라도 작게 하나하나 확인하면서 만드는 습관!
디테일하게 하나하나 확인하면서 "점진적"으로 가는 것.

일단은 배지 페이지를만든다면

제목 -> 목록 -> 체크박스 -> 아이콘 -> 아이콘빙글빙글돌아가게 
=
하나하나잘되는지확인하고 -> 바꿀게잇음바꾸고 -> 컴포넌트를분리하고

무한 스크롤과 페이징은
테스트하기가 매우 힘듦
이 플젝의 의도와 달리 모든 역량을 한 페이지에 다 볼수잇게된다면 압박이 올 것임..!
다보는 거랑 "...104개" 잇다는 것을 보여주는것은 좀 다름

할수잇으면 무한스크롤, 페이징 ㄴㄴㄴ
백엔드와 성능과 테스트에도 고통임.
성능의 최첨단
무한스크롤 성능이 끔찍함

날로먹기기법
데이터 114개주는것은 서버에게일도아님
제목, 슬러그 다 받아와서 대충 검색할수있게

fuse search
fuzzy search
글자수가다른거나 여러 경우에도 검색을
flexsearch 가볍고 좋은 라이브러린데 한국어지원이안됨

한국어는 어려움 검색하기
프론트 프런트
둘은 전혀 다른 글자인데 사실 조합으로 다지면
ㄹ ㅓ ㄴ / ㄹ ㅗ ㄴ
모음 하나만 차이나는데
한국어는 모음을 자음으로 합쳐서 쓰니까
그게 검색하기 힘듦.
저런 걸 잘해줄려면 elastic? search 이런걸쓰기,,

오버 엔지니어링
너무과도하게 그렇게까지 복잡하게할피료없는데
개발하기도 사용하기도 복잡한 상태

heroicon

0911

requirements form 요구사항

// https://github.com/users/twinstae/projects/2/views/1
import type { ZodFormattedError } from 'zod';
import {
  type ActionFunction,
  type LoaderFunction,
  json,
} from '@remix-run/node';
import {
  Form,
} from '@remix-run/react';
import CenterCardLayout from '~/components/CenterCardLayout';
import { type SkillT } from '~/models/skills/schema';
import { context } from '~/models/context';
import { flatSlug } from '~/models/skills/transformUtil';
import { requirementSchema } from '~/models/requirements/schema';

type LoaderData = {
  allSkillSlugs: string[];
};

export const loader: LoaderFunction = async () => {
  const allSkills = await context.skillsRepo.getAllList();

  return json<LoaderData>({
    allSkillSlugs: allSkills.map(flatSlug),
  });
};

type ActionData = ZodFormattedError<SkillT> | undefined;

export const action: ActionFunction = async ({ request }) => {
  const result = await request
    .formData()
    .then((formData) => ({
      skillSlug: formData.get('skillSlug'),
      // ???
    }))
    .then(requirementSchema.omit({ id: true }).safeParse);
  await new Promise((resolve) => setTimeout(resolve, 3000));

  if (!result.success) {
    return json<ActionData>(result.error.format());
  }

  await context.positionsRepo.addRequirement(result.data);
};

export default function NewSkill() {
  // 자동 완성을 위한 allSkillSlugs 를 loader로 불러오기
  
  /* https://remix.run/docs/en/v1/tutorials/blog#actions */

  return (
    <CenterCardLayout>
      <Form method="post" className="flex flex-col">
        {/* 라벨 */}
        <input
          // ???
          name="skillSlug" // slug가 아니라 skillSlug로!
          // ???
        />
        {/* 에러 메세지 */}
        
        {/* 내용 */}
        
        {/* 직군 */}
        {/* https://daisyui.com/components/radio/ */}

        {/* submit button */}
      </Form>
    </CenterCardLayout>
  );
}