JS,REACT_개인프로젝트 진행하며 알게 된 점(+복습)

코드

public 폴더 관리

• index.html
  • 타이틀, 로고, 설명 등 관리해주자
    정리했던 페이지
• 이미지 파일 저장 위치
  • src/(기본 저장 장소로 추천됨) : 앱 내부에서 쓰이는 이미지들
    public/images: 앱 외부 에서 쓰이는 이미지들(ex: favicon)
    스택오버플로우 참고

변수, 함수명은 명확하게 짓자

• 함수: 다른이가 봤을 때 어떤 동작을 하는 지 알 수 있도록
• 예약어와 혼동되는 이름을 변수, 함수명으로 짓지 말자
• 상수로 변수명을 설정할 때(스네이크 케이스) 제외 모든 변수명, 함수명은 카멜 케이스 이용

최적화 관련

code splitting

• React.lazy로 동적 import 구현하여 초기 로딩 시간 줄임 (Suspense로 로딩 화면 구현)

https://ko.reactjs.org/docs/code-splitting.html

컴포넌트의 리렌더링, useEffect, useRef 관련

state가 변화했는데 리렌더링이 되지 않음

https://github.com/nala723/The-Dreamer/issues/100

state 변화했지만 axios 비동기 요청 로직 속 참조하는 상태가 다름

• event loop의 비동기 요청 처리와 연관

https://github.com/nala723/The-Dreamer/issues/101

카테고리 애니메이션 구현 중 서브 메뉴가 제대로 닫히지 않음(Feat: gsap)

• 컴포넌트의 리렌더링, useEffect, useRef, Gsap

https://github.com/nala723/The-Dreamer/issues/54

event 관련

스크롤 관련 프로퍼티들

정리 페이지

그림판 채우기 기능 - 클릭 두세번 해야 작동 + 모바일에서의 채우기 구현

• MouseEvent, TouchEvent 관련

https://github.com/nala723/The-Dreamer/issues/84

그림판 - 모바일 터치 이벤트와 PC 클릭 이벤트 시 좌표값 다른 문제

https://github.com/nala723/The-Dreamer/issues/107

CSS & Styled-Component

transform, 혹은 relative로 접근하여 포지션을 변경해도 해당하는 요소의 공간자체는 그대로 남는다.

ThemeProvider의 props를 jsx 내에서 사용 : import { useTheme } from 'styled-components';

https://stackoverflow.com/questions/40796973/how-to-get-the-theme-outside-styled-components

Automatic vendor prefixing

현재 표준 css를 작성하면 styled-component가 자동으로 vendor prefix를 맞춰준다.

ETC

꿈 알아보기 페이지- 화면에 떠다니는 데이터들 애니메이션

• gsap + jsx + styled component

https://github.com/nala723/The-Dreamer/issues/81

new Date 객체를 깊은 복사 하는 방법 + 두 날짜사이의 모든 날짜들 배열로 담기

• Date 생성자 함수

https://github.com/nala723/The-Dreamer/issues/99

Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events Line 101:28: Non-interactive elements should not be assigned mouse or keyboard event listeners

• Eslint
• 비대화형 요소의 클릭 핸들러는 최소 하나의 키보드 리스너가 필요하다.

https://github.com/nala723/The-Dreamer/issues/98