React With Typescript Slack Clone Project Section3 - DM

DW J·2023년 1월 8일
0

project-slack

목록 보기
5/8

WebPack 프록시 서버 설정

devServer에서는 proxy서버 설정을 사용하여 api호출할때 localhost를 지워준다
빌드 > 배포 후 실제 서버에서 localhost를 사용하지 않음.
proxy서버 설정은 devServer에 적용되어 있기때문에 실제 빌드 후 배포 파일에는 포함되지 않음

네이밍 관련

변수명/파일명은 길어지더라도 명확하게 작성하는것이 좋다
변수: 명사 형태
함수: 동사 형태
윈도우에서는 대소문자를 구별하지 않지만, 맥/리눅스에서는 대소문자를 구분함

const user = "" // 명사
const getUser = () => {} // 동사

NavLink는 Link와 동일한 역할을 하지만 activeClassName를 줄 수 있다
주소표시줄과 마우스를 올렸을때 좌측하단에 표시되는 주소가 일치하면 해당 NavLink컴포넌트에 activeClassName가 적용된다

Link = <Link to="/../../"></Link>
NavLink = <NavLink to="/../../" activeClassName="test"></NavLink>

props 사용 관련

props를 지나치게 많이 사용하게되면 자식 컴포넌트 입장에서 부모에 대한 의존성이 높아지게 되므로 적절히 사용하는것이 중요하다

  • 재사용이 되면서 공통되는 데이터 : hooks로 대체 (SWR 등)
  • 재사용이 되면서 서로 다른 데이터 : props로 사용

라이브러리 관련

직접 구현할 수 있는 기능의 경우 구현은 하되 라이브러리를 사용하는것을 권장

  • 라이브러리의 경우 다양한 오류대처가 되어있기때문
profile
잘하는것보다 꾸준히하는게 더 중요하다

0개의 댓글