인프런 커뮤니티 질문&답변

시그님 안녕하세요.

시그님의 질문을 보니까, 그냥 따라 치는 게 아니라 왜 이렇게 설계했는지를 고민하면서 공부하고 있는 것 같아요. 아주 좋은 질문입니다.

:: 1번 질문 답변 :::::::::::

<script>로 불러온 JavaScript 파일들은 "하나의 공용 공간(window)"에서 실행되기 때문에 서로의 함수와 변수를 사용할 수 있습니다.

<script src="planner_fetch.js"></script>

<script src="planner.js"></script>

위 코드는 브라우저에서 다음과 같이 처리됩니다.

1. planner_fetch.js를 읽고 실행

2. 그 다음 planner.js를 읽고 실행

3. 이 두 파일은 각각 다른 파일이지만, 브라우저에서는 하나의 JavaScript 실행 공간에서 실행

결과적으로 파일이 나뉘어 있어도 "같은 공간"에서 실행되기 때문에 서로의 전역 변수, 함수 등을 공유할 수 있습니다.

하나 더 중요한 사실이 있는데요, 로딩 순서가 중요합니다.

<script src="planner_fetch.js"></script>

<script src="planner.js"></script>

위와 같은 순서라면, planner_fetch.js가 먼저 실행되고 planner.js에서 planner_fetch.js 안의 함수를 사용할 수 있습니다.

하지만, 로딩 순서를 변경하면

<script src="planner.js"></script>

<script src="planner_fetch.js"></script>

다음과 같은 에러가 발생할 수 있습니다.

fetchPlans(); // 에러 (아직 정의되지 않음)

즉, 먼저 로드된 파일의 함수만 사용할 수 있습니다.

지금까지의 답변을 요약하면

"JS 파일은 각각 독립 실행되는 게 아니라, <script>로 불러온 순간부터 모두 하나의 공용 공간(window)에 합쳐져서 실행된다." 라고 할 수 있습니다.

조금 더 추가하면 "파일을 나누는 이유"는 역할을 분리하고 가독성과 효율적인 유지보수를 위함입니다.

역할 분리: planner.js → 화면/이벤트, planner_fetch.js → 서버 통신

가독성: 한 파일에 다 넣으면 코드가 너무 길어짐

유지보수: 수정 범위가 명확하게 됨

:: 2번 질문 답변 :::::::::::

'/planner/plan/3' 이 아니라 '/planner/plan?no=3' 형식을 사용했을까요?

이유는 "설계 방식의 차이" 때문입니다.

'/planner/plan?no=3' 방식(쿼리 파라미터)은 "plan을 조회하는데, 번호가 3인 것을 조회하자!"이고

'/planner/plan/3' 방식(경로 변수)은 3 이 리소스 자체를 의미하며 "번호가 3인 plan을 조회하자!" 입니다.

쿼리 파라미터 방식은 검색, 조회 조건 전달에 많이 사용되고 초보자가 이해하기 쉬우며 서버에서 처리하기도 간단합니다.

반면 경로 변수 방식은 REST API에서 더 "정석적인 표현"이고 일반적으로 백엔드 API 설계가 잘 되어 있을 때 사용합니다.

강의에서 경로 변수 방식이 아닌 쿼리 파라미터 방식을 사용한 이유는 "Fetch로 서버에 요청하는 흐름을 이해하는 것"에 목적을 두어서 입니다.

만약 욕심이 난다면 경로 변수 방식으로 시도해보는 것도 좋은 학습 방법입니다.

추가적으로 좀 더 설명을 드릴께요.
많은 요청이 DB과 관련이 있기 때문에 DB관점에서 살펴보면 더욱 좋습니다.

DB에서는 "조건"으로 데이터를 조회합니다. 예를 들어

------------------

SELECT *

FROM plan

WHERE no = 3;

------------------

위와 같은 쿼리에서 "plan"은 테이블을 "no = 3"은 조회 조건(where절)을 나타냅니다. 즉, DB는 항상 "테이블 + 조건" 구조로 데이터를 조회합니다.

이것을 쿼리 파라미터 방식에 대응 시키면 다음과 같습니다.

-----------------------------------

/planner/plan?no=3

/planner/plan → plan 테이블

?no=3 → WHERE no = 3

-----------------------------------

직관적이기도 하고 URL 구조가 DB 조회 구조와 1:1로 매칭되어 "plan 테이블에서 no가 3인 데이터를 조회해라!"라는 의미를 쉽게 알 수 있습니다.

다음으로 경로 변수 방식(/planner/plan/3)에 대응 시키면 DB 관점이 아니라 "리소스 관점"이 되어 이미 식별된 하나의 데이터(Primary Key) 처럼 취급됩니다.

URL만 보고는 이게 조회 조건인지, 리소스 식별자인지 바로 와닿지 않을 수 있습니다.

어느 방식이 "더욱 좋다"라고 이분법적으로 결정하기는 다소 무리가 있지만 실무에서는 /planner/plan/3 이 REST 관점에서 더 깔끔해서 자주 사용되지만,

DB 설계와 데이터 조회 사고를 먼저 익히는 단계에서는 쿼리 파라미터 방식이 이해와 확장에 유리하다고 볼 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. 시그님.

여러 JavaScript 파일 간의 함수나 변수 사용에 대해 궁금해하시는 것 같습니다. JavaScript 파일 간의 상호작용을 이해하기 위해 알아야 할 몇 가지 핵심 포인트들이 있습니다.

1. JavaScript 파일 간 함수 및 변수 사용

JavaScript 파일들은 브라우저 환경에서 로드될 때 전역 스코프를 공유합니다. 즉, HTML 문서에서 여러 JavaScript 파일을 <script> 태그로 추가할 때, 각 파일은 동일한 전역 스코프 내에 로드되므로 상호 참조가 가능합니다. 이 점을 이용하여 서로 다른 파일에 정의된 함수와 변수를 사용할 수 있습니다.

• 전역 객체(window)에 등록: 여러 파일에서 사용하고자 하는 함수나 변수를 window 객체에 등록하여 전역에서 접근할 수 있도록 할 수 있습니다.

• 모듈 시스템 사용: 현대적인 JavaScript 환경에서는 ES6 모듈(import/export)을 사용하여 명시적인 파일 간 참조가 가능합니다. 이 경우 type="module" 속성을 <script> 태그에 추가해야 합니다.

2. URL Query String의 사용 이유

/planner/plan?no=3 형태의 URL은 쿼리 스트링을 사용하는 방식입니다. RESTful 디자인 관점에서, 쿼리 스트링은 종종 리소스를 필터링하는 데 사용되며, 여러 매개변수를 전달할 수 있는 장점이 있습니다.

• RESTful 설계: 특정 리소스의 세부 정보에 접근할 때 RESTful 방식의 하나로 쿼리 스트링을 사용할 수 있습니다.
  

관련하여 베스트 프랙티스와 사용 예제를 더 연구해보고 싶으시다면, 기존 질의응답에서 유사한 내용을 찾아보실 것을 권장드립니다.

• JavaScript 파일 간 함수 및 변수 상호작용 방식
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.