[Step1] cactus - Component 기본 구조와 JSX - #3
Conversation
| className={styles.gnb__button} | ||
| aria-label="음식점 추가" | ||
| > | ||
| <img src="../templates/add-button.png" alt="음식점 추가" /> |
There was a problem hiding this comment.
[제안]
저는 이미지를 불러올 때 모듈 임포트 방식으로 구현했습니다. 모듈 임포트 방식의 경우, 정적 경로 방식과 다르게 빌드 타임에 에러를 검출할 수 있고, 번들러가 자동 최적화 및 캐싱이 가능한 것으로 알고 있습니다. 이 점에서 정적 경로 방식보다 장점이 명확하다는 생각이 들어요. 스터디 때, 이미지를 불러오는 2가지 방식인 모듈 임포트 방식과 정적 경로 방식에 대해서 같이 정리해보면 좋을 것 같아요!
There was a problem hiding this comment.
좋은 제안 감사합니다! Step2 리팩토링에서 src/assets/로 이미지를 이동하고 모듈 임포트 방식으로 전환했습니다. 빌드 타임 에러 검출과 번들러 최적화 측면에서 장점이 명확하다는 점 동의합니다. 스터디 때 같이 정리해봐요!
meteorqz6
left a comment
meteorqz6
left a comment
There was a problem hiding this comment.
[제안]
현재는 파일의 수가 많지 않아서 src 내부에 모든 파일을 작성한 것이 큰 문제가 되지는 않을 것 같은데 ,이후 파일이 더 늘어날 것을 대비해 디렉터리 구조를 조금씩 나누어 보면 좋을 것 같습니다!
| <section className={styles["restaurant-list-container"]}> | ||
| <ul className={styles["restaurant-list"]}> | ||
| <li className={styles.restaurant}> | ||
| <div className={styles.restaurant__category}> |
There was a problem hiding this comment.
[질문]
저는 일부 클래스는 점 표기법으로, 일부는 대괄호 표기법으로 혼용되는 것이 코드의 일관성이 떨어진다고 생각했습니다. 그래서 이 부분을 리팩토링했는데 예령님은 어떻게 생각하시는지 궁금합니다.
There was a problem hiding this comment.
저도 같은 생각이었는데, 유성님 코드에서 BEM 네이밍을 처음 접하고 저도 적용해봤습니다. -- modifier는 JS 감소 연산자 파싱 문제로 대괄호 표기법을 쓸 수밖에 없어서 혼용 자체는 피할 수 없지만, 말씀하신 것처럼 기준이 있으면 일관성을 유지할 수 있다는 점에서 실무적으로도 좋은 접근인 것 같습니다!
맞는 말씀이라 Step2에서 |
Updated markdown formatting for htmlFor explanation.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
2 participants
개인 목표 달성 여부
리뷰어에게
App.css, 컴포넌트 스타일은*.module.css로 분리했는데, 이 기준이 적절한지 궁금합니다.