220913
javascript starsWith
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
var str = 'To be, or not to be, that is the question.';
console.log(str.startsWith('To be')); // true
console.log(str.startsWith('not to be')); // false
console.log(str.startsWith('not to be', 10)); // truereact useRef type
function Settings() {
const nicknameInputRef = useRef() as React.MutableRefObject<HTMLInputElement>;react router dom v6 nested routes
https://www.robinwieruch.de/react-router-nested-routes/
// App.tsx
<Route path="/user/:id" element={<UserInfo />}>
<Route path="settings" element={<Settings />} />
</Route>
// UserInfo.tsx
import { Outlet } from 'react-router-dom'
function User() {
...
return (
<section className="w-full flex flex-col md:flex-row px-10 pb-10 max-w-5xl">
...
<Outlet />
</section>
);
}localStorageEffect
어떻게 더 개선할 수 있을까,, 리코일 공부,,
const localStorageEffect =
<T>(key: string) =>
({ setSelf, onSet }: any) => {
const savedValue = localStorage.getItem(key);
if (savedValue != null) {
const parsedValue = JSON.parse(savedValue);
const expiredTime = new Date(
parsedValue.accessTokenExpiredDate
).getTime();
new Date().getTime() < expiredTime
? setSelf(JSON.parse(savedValue))
: localStorage.removeItem('current_user');
}
...220905-07
types 라이브러리
npm i -D @types/package-namerefreshToken
토큰이 만료가 되었을 때 계속 유지가 되는데
만료가 됐는데도 리프레시토큰이 만료가 안 됐으면
만료된 토큰을 보내도 로그인상태를 계속 유지시킬 수 있음
acces-token은 보통 만료시간이 짧음
구체적으론 모르지만 만료 시간을 짧게 가져야 한다고 함.
만료 시간을 짧게 가지려고? 리프레시토큰을 가지는 것
또 로그인할 필요가 없어서
=> 로컬스토리지
접근성
icon들에 라벨을 달아주지 않으면 시각장애인분들에게 불편하고
수정하기,
테스트하기 힘듦
aria를 안 붙이면 = 눈보이는사람만대우하겠다는의미임
리스트의 제목이구나
<i aria-label={message} aria-busy="true">
busy라는 건 로딩중이라는 거로 시각장애인분들이알수잇음
dangerouslySetInnerHTML={{ __html: marked(value) }}
react에선 html을 안에 넣을 때 문자열로 escape를 해주는데 -이건 문자열로 들어간단 의미.
우린 html으로 렌더링했을 때 리액트 컴포넌트로 랜더딩되기를 바라는데
그러면 이상한 script. 공격에노출될수있음
리액트가 위험하다고 물어봄
컴포넌트를언제분리하고언제안분리하냐
components/icons/XIcon.txs
아이콘은 여러곳에서 쓰니까 분리1
svg는 포맷하면 보통 용량이 커짐. 안 쓰는 아이콘까지 다들어가버림
내가쓴느파일만넣어서import해서쓰는게좋은습관
아이콘을 16개를 쓰는데 icons에서 어떤 아이콘을 쓸필요가없어짐. 그럼
icons안에잇는아이콘들이 다 번들에들어감
번들 사이즈!
pr (리뷰)
어떻게 이해했고 앞으로 pr을 어떻게해줬음좋겟다남기기
이 pr이 좋은 이유 3가지랑, 앞으로 어떻게해주면좋겟다1가지
안조은거 - 이렇게좀해주세요;
세가지스텐스
comment - 이런 것 같은데 아직 머지하기 좀 그래요
approve - 승인 좋네요. 저이거일케하고머지하면조을것가타여
request changes - 이렇게하면어떻게바꿔주세요!!
니거이가바꾸고나한테대답하기전까진머지안해줄거야
머지를한다는건 = 고객한테배포를하겟단의미임
main에 머지안하면 괜찮을수잇는데
main에 머지하는 건 고객배포고 클릭하는 순간 장애가 생기면 개발한 개발자가
머지 승인한 개발자가 공동 책임을 져야 함
잘못되면고객한테손해배상해줘야함..!
누가커밋햇고누가머지승인을해줬고그런것들이다법적책임을무는데들어갈수있음
신중하고 중대한 결정
git branch postitions-page 생성
git switch postitions-page 이동
PR주도개발
개발이 끝나고 pr을 날리면 개발을 어떻게 진행하는지안보임
=> PR을 먼저 날리고 개발하는 것
어떤 PR을 날릴지 미리 설명을 작성해놓고
commit하고 push만 하면 pr에 계속 반영이 됨
$slug
import { json, type LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import CenterCardLayout from "~/components/CenterCardLayout";
// 초안을 잡아두었습니다.
// 1. 받을 데이터의 타입
type LoaderData = {
position: string
}
export const loader: LoaderFunction = async ({
params,
}) => {
// 2. 타입에 맞게 데이터를 넘겨줌
return json({ position: 'test' })
};
export default function PositionDetail() {
// 3. 데이터를 받음
const { position } =
useLoaderData() as LoaderData;
return (
<CenterCardLayout>
{/* 4. 사용 */}
<h1>{position}</h1>
</CenterCardLayout>
);
}