HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생
/
이동근팀
이동근팀
/
☕
커피챗 질문 목록
/
React, CSS 등 개발 관련 질문

React, CSS 등 개발 관련 질문

날짜
2주차
생성자
상태
답변 완료

1. function vs const

멘토님께서는 리액트에서 컴포넌트를 작성할 때 function 키워드를 선호하시는지, 아니면 const 키워드의 표현식을 선호하시는지 궁금합니다! 저는 개인적으로는 함수 컴포넌트는 function 으로 작성하고, 내부의 이벤트 핸들러는 const 로 작성해서 구분하려는 성향이 있었는데 간혹 forwardRef 나 memo 같은 고차 함수를 사용해야 할 때에는 const 를 사용해야 하는 경우도 있어서 그냥 모두 const로 통일하는게 나을지.. 고민이 있습니다. 이 부분은 선호의 차이일까요? 아니면 더 많이 사용되는 방법이 존재하는 것일까요?
 
Function 과 const 표현식의 차이. 동적이냐 정적이냐의 차이. Arrow function을 주로 쓴다. Const 표현식은 클로져를 만들기에 유리하다.

2. 프로젝트 디렉토리 구조

소스코드 디렉토리 구조를 정리할 때 /pages/*, /components/*, /hooks/* 와 같이 유사한 파일의 종류별로 정리할지.. 아니면 함께 사용되는 기능별로 정리할지 고민이 되었습니다! 멘토님께서 제안해주실 수 있는 방법이나, 혹은 관련해서 찾아보면 좋은 키워드, 자료 등을 추천해 주실 수 있나요? ex) 예를 들어서pages 디렉토리에 존재하는 특정 상세 페이지에서만 사용되는 컴포넌트인데, 이런 경우에는 /components/* 디렉토리로 뺴는 것 보다 그냥 /pages/상세페이지 경로에 함께 정리하는 게 더 괜찮을까요?
 
큰 서비스는 기능중심으로, 간단한 서비스는 feature중심으로 한다. 상황과 어떤 것을 추구하느냐에 따라 다르다. https://ahnheejong.name/articles/package-structure-with-the-principal-of-locality-in-mind/ 참조

3. Tailwind 관련 질문

Tailwind CSS + SCSS or Tailwind CSS + CSS-in-JS 처럼, tailwind와 기타 CSS 작성 방법을 함께 사용하는 경우도 존재하나요? 간혹 복잡한 미디어 쿼리나 애니메이션 효과를 작성하려면 tailwind 만으로는 어려울 수도 있겠다는 생각을 했었습니다..
 
css의 변천사에 대해서도 공부해야 한다. https://so-so.dev/web/css-in-js-whats-the-defference/ 참조.
Vanila extract, stitches 참고. 과거를 잘 알아야 한다. (흐름, 시대에 따라서 기술스택들이 바뀐다)

4. 노트북 질문

가벼운 질문으로 멘토님께서 사용하시는 노트북이 무엇인지 궁금합니다!!
(7년쓴 그램이 버거워해서 하나 구매하려고 고민중입니다.. 😂)