낙경

만약 token을 사용해 인증하지 않는다면 push는 거절됨 보안상의 이유로 Workflow를 건드는 것에 매우 엄격하기 때문 (refusing to allow an OAuth App to create or update workflow `.github/workflows/******.yml` without `workflow` scope) git push https://:@github.com//.git 1. Settings > Developer Setting > Token 발급으로 이동 2. Token을 발급할 때 Workflow를 허용함 3. 발급받은 토큰으로 맨 위의 명령어를 보내면 push가 정상적으로 됨

IntersectionObserver? 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공하는 인터페이스 주요 개념 target 주시할 대상 특정 조건(화면에 나타남 or 특정 요소와 만남)을 만족할 경우 행동을 수행하도록 할 수 있음 root 주시할 대상이 행동을 수행하기 위해 만나야하는 대상 null인 경우 화면 전체, 어떠한 실제 HTMLElement일 경우 해당 요소 callback 실제로 수행하고자 하는 행동 observer 이 모든 상황을 관찰하고 있는 관찰자 특정 조건이 만족되었는지를 observer가 감지함 Ref React에서 컴포넌트가 아닌 실제 DOM 요소에 접근할 수 있는 객체 useRe..

우리는 가끔.. interactive 하지 않은 요소들을 interactive 하게 써야할 때가 있다 보통 그럴 때 button을 쓰라는 오류가 나온다 왜 버튼을 써야할까? 자체적으로 접근성과 키보드 인터렉션을 지원함 button에게 있는 문제 button은 하위 요소에 button을 또 둘 수 없다 Card를 처음에 div로 만들었는데, onClick을 쓸 수가 없었다 non-interactive 한 요소를 interactive하게 쓰는 것은 금지되어있기 때문 div를 쓸 수도 있지만 접근성을 굳이 해칠 필요는 없다 생각하여 button으로 대체했다 처음엔 문제가 없었다 하위 요소에 button을 사용하는 곳이 없었기 때문 하지만 하위 컴포넌트가 보수되며 문제가 발생했다 하위 컴포넌트에 버튼이 들어가기..

export default function DefaultTable({ //... paginationConfig = { type: 'none', pageSize: 5, leftClick: () => {}, rightClick: () => {}, }, //... }: DefaultTableProps) { return ( //... //... ); } 타입 추론 TS는 변수나 매개변수의 초기값을 바탕으로 해당 변수나 매개변수의 타입을 추론함 예) 변수에 문자열 할당 시, 변수를 문자열 타입으로 암시적 추론 함수의 기본 매개변수 값 함수 매개변수에도 기본값을 전달할 수 있음 해당 매개변수에 아무런 값이 전달되지 않았을 때 사용 객체 내 개별 프로퍼티로의 영향 객체의 프로퍼티에 기본값을 제공하는 경우 전체 객체에..

아마 아래 warning이 같이 떴을 것이다. styled-components: it looks like an unknown prop "********" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.) 그리고 이 오류가 떴으리라. ..

우선 나는 TypeScript를 모른다. 현재 JS를 공부중인데, TS도 써보면 좋을 것 같아서 기존 코틀린같은 강타입 언어를 다뤘던 경험을 통해 대충 적용해보고 있다. 문제 그러던 와중 다음과 같은 문제가 발생했다. FormData()를 사용하여 POST해야할 일이 있는데, formData에서 value로 받는 값이 String과 Blob 계열 데이터들 뿐이었다. JS에서는 이러한 타입 검사가 없었던지라 편하게 데이터를 넣었는데, 쉽지 않았다. 상황 나는 FoodReview라는 type을 생성해서 사용중이었고, 여기에는 다양한 파일 타입들이 있었다. 이미지는 필수가 아니었기에 null을 가능하게 하였다. type FoodReview = { [key: string]: string|number|File|n..

참조형 state 배열이나 객체 등 참조형 변수를 state로 다루는 것 spread 등을 통해 새롭게 참조형변수를 만들어야 함 주의 참조형은 변수의 값으로 주소값을 가짐 주소값이 안변하므로 동작하지 않음 gameHistory.push(nextNum); setGameHistory(gameHistory); 주소값이 변하므로 동작함 setGameHistory([...gameHistory, nextNum]); 예시 비정상 작동 useEffect에서 setSortedItems에 items을 정렬한 배열의 주소를 전달하고 있다. sort는 새로운 배열을 반환하지 않는다 따라서 sortedItems은 백날 저렇게 sort 해봐야 재렌더링이 일어나지 않는다. 근데 왜 버튼을 누르면 무언가 동작은 하고있는가? 이건 또..

💡 처음부터 전체 데이터가 다 넘어오는 구조라면, 매번 저 처리를 하는 것은 오히려 성능 저하를 발생시킬 것 같다. 어짜피 처음에 데이터가 다 넘어오는데 처음에 계산해서 값을 가지고 있고, 요구할 때는 새로 계산하는 것이 아니라 계산해놓은 데이터를 보여주는 것이 더 좋지 않을까? 유지보수성은 떨어지겠지만. 성능 최적화는 메모리 사용량과 계산 시간 사이의 균형을 맞추는 작업이다. 데이터가 처음부터 모두 사용 가능하고, 사용자의 정렬 요구가 자주 발생하지 않는다면, 애플리케이션의 초기 로드 시에 모든 가능한 정렬 순서를 미리 계산해두고, 사용자의 입력에 따라 해당 배열을 선택적으로 렌더링하는 방식이 성능적으로 유리할 수 있다고 한다. 그런 경우 아래와 같은 장점을 가진다. 반응 속도 향상: 사용자가 정렬 버..