일부 lint 에러는 스타일 문제가 아닙니다. server UI, client UI, service code, shared utility가 잘못된 위치에 섞였을 때 발생합니다. 아래 예시를 기본 형태로 생각하세요. server page는 단순하게 유지하고, 브라우저 상호작용은 client component로 옮기고, 외부 도구는 내부 모듈 뒤로 감싸서 사용합니다.
서버 파일에서 client hook을 쓴 경우
server page나 서버 성격의 component에서 useState, useEffect, useMemo, useRef 같은 React client hook을 import할 때 발생합니다.
서버 파일에 use client를 추가한 경우
작은 일부에 브라우저 상호작용이 필요하다고 해서 page 전체를 client component로 바꾸지 마세요.
서버 UI에서 함수 prop을 넘긴 경우
server component는 이벤트 동작이 아니라 데이터를 넘겨야 합니다. onClick 같은 callback은 client component 안으로 옮기세요.
외부 패키지를 직접 import한 경우
convention 파일은 임의의 외부 패키지에 직접 의존하지 않는 것이 좋습니다. 먼저 내부 util이나 library 파일로 감싸서 사용하세요.
JavaScript private method를 쓴 경우
service class에서는 JavaScript #private method 대신 underscore 이름을 가진 TypeScript private method를 사용하세요. Service를 제외한 다른 class에서는 #private method를 사용할 수 있습니다.
일부 framework 패턴에는 예외가 있지만, 일반적인 앱 코드를 작성할 때는 먼저 After 형태를 기본값으로 생각하세요. 의도적인 console 출력은 console.log 대신 console.info, console.warn, console.error를 사용하세요.
