인프런 커뮤니티 질문&답변
작성한 질문수
캔버스 프로젝트에서 파일명에 대해 질문있습니다.
작성
·
66
0
안녕하세요 현재 캔버스 프로젝트 부분을 공부중입니다. 공부를 하면서 파일에 대해 궁금한점이 생겼는데 컴포넌트에는 뒤에 .jsx를 작성했는데 api폴더에서 canvas와 http 파일에는 .js가 붙은 이유가 뭔지 궁금합니다.
답변 1
1
React 프로젝트에서 .jsx와 .js 확장자의 차이는 주로 파일의 목적과 내용에 따라 구분됩니다:
전통적인 웹 개발과의 비유
전통적인 웹 개발에서는:
HTML: 웹페이지의 구조와 콘텐츠를 정의합니다. 버튼, 텍스트, 이미지 등 "무엇을" 보여줄지 결정합니다.
CSS: 웹페이지의 스타일과 레이아웃을 담당합니다. 색상, 크기, 배치 등 HTML 요소가 "어떻게 보일지" 결정합니다.
JavaScript (.js): 웹페이지의 동작과 기능을 담당합니다. 사용자 상호작용, 데이터 처리 등 "어떻게 작동할지" 결정합니다.
React 프로젝트에서는:
.jsx 확장자
주로 JSX 문법을 포함하는 React 컴포넌트 파일에 사용합니다.
HTML과 JavaScript가 결합된 형태로, HTML의 구조적 역할과 JavaScript의 동적 기능이 하나의 파일에 있습니다.
시각적 UI 요소를 렌더링하는 컴포넌트에 적합합니다.
전통적인 웹 개발의 HTML과 JavaScript의 일부 역할이 합쳐진 것과 같습니다.
.js 확장자
일반 JavaScript 로직만 포함하는 파일에 주로 사용합니다.
API 호출, 유틸리티 함수, 상수 정의, 서비스 로직 등에 적합합니다.
JSX를 사용하지 않는 순수 JavaScript 파일입니다.
전통적인 웹 개발의 JavaScript와 유사한 역할을 합니다.
캔버스 프로젝트의 경우
캔버스 프로젝트에서 api 폴더의 canvas.js와 http.js 파일은 다음과 같은 이유로 .js 확장자를 사용했을 것입니다:
이 파일들은 UI 컴포넌트가 아닌 API 통신 로직이나 HTTP 요청을 처리하는 코드를 포함합니다.
JSX를 사용하지 않고 순수 JavaScript 함수나 객체만 포함합니다.
서비스 로직, 데이터 페칭, API 엔드포인트 정의 등의 목적을 가진 파일입니다.
이 프로젝트에서는 "JSX를 포함하는 컴포넌트는 .jsx로, 순수 로직 파일은 .js로" 구분하는 컨벤션을 따르고 있는 것으로 보입니다. 이는 코드의 목적을 파일명만으로도 쉽게 파악할 수 있게 해주는 좋은 실천 방법입니다.