파일 확장자
파일의 형식이나 종류를 구분하기 위해 파일명과 마침표(.)를 찍고 그 뒤에 특정한 알파벳을 붙혀 구분할 수 있도록 하는 것.
쉽게말하여 파일의 성격을 구분해주는 꼬리표라고 보면 된다.
.txt, .jpg, .png같은 일상생활에서 접할 수 있는 파일 확장자 외에 JavaScript를 기반으로 하는 프로젝트 내에서 마주치게 되는 파일 확장자를 대해 정리한다.
*.js
.js 파일은 일반적인 자바스크립트 코드 라인을 포함하는 텍스트 문서를 뜻한다.
웹 서버에서는 .js 해당 파일에 있는 자바스크립트 코드를 통해 웹 페이지에 프로그래밍 된 기능의 구현을 필요로 하는 작업을 수행한다.
일반적엔 텍스트 프로그램을 통해 .js 파일의 내용을 확인할 수 있다.
*.jsx
.jsx는 수정 ExtendScript언어, 자바스크립트 언어의 확장으로 작성된 스크립트이다.
현재 많이 사용되는 프레임워크 React.js에서 사용되는 문법이다.
JS문법과 JSX문법의 차이는 대략적으로 다음과 같다.
JS
class Hello extends React.Component {
render() {
return React.createElement("div", null, "Hello ", this.props.name);
}
}
ReactDOM.render(
React.createElement(Hello, {name: "World"}),
document.getElementById('container')
);
JSX
class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
JSX를 사용하는 것이 필수는 아니지만, 일관된 방법으로 확장자를 쓰는 것만 잘 지키시면 된다고 한다.
가령 .jsx확장자를 사용한다고 하면 리액트 관련 JSX 코드는 .jsx로만 만들고, 나머지 일반 자바스크립트 코드는 .js로 만드는 형식이다.
JSX를 사용하면 다음과같은 장점들이 있다고 한다.
- JSX는 컴파일링 되면서 최적화 되므로 속도측에서 유리하다.
- Type-safe하며 컴파일링 과정에서 에러를 감지할 수 있다.
- HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성할 수 있다.
이전에는 개발자들이 JSX를 사용할 수 있는 환경이면 .jsx확장자를 사용하였지만, 현재는 .js확장자를 사용하는 추세로 전환되고 있다고 한다.
JS vs JSX를 검색하면 나오는 Stack Overflow관련 두번째 답글.
JSX는 순전히 react를 위해 고안된 확장자로써, transpiler나 bundler만을 위한 파일들은 JSX와 호환되지 않을 가능성이 있어 JS가 선호되는 듯 하다.
*.json
.json(JSON)은 Javascript Object Notation의 약자로, 자바스크립트 객체 표기법의 속성/값 쌍으로 구성된 데이터 객체를 전송하는 판독 가능 텍스트 사용 공개 표준 포맷이다. JSON 파일 형식은 다양한 네트워크 연결 구조화 된 데이터를 전송하는 데에 사용된다.
JSON은 본래 자바스크립트에서 파생되었지만, 현재는 언어 독립적인 형태로써 다양한 프로그래밍 언어에서 쉽게 찾아볼 수 있다.
.eslint의 확장자 차이에 따른 파일 내용 비교를 통해 어떤 점이 다른지 느껴보자.
.eslint.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['google', 'plugin:prettier/recommended'],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {},
}module.exports는 우리가 흔히 사용하는 exports문과 완벽하게 동일하다.
다만 위와같이 오브젝트 자체를 내보낼 때는 module.exports를 사용할 수 밖에 없다.
.eslint.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"airbnb-base",
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:cypress/recommended"
],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12
},
"rules": {
"react/no-unknown-property": "off",
"no-unused-vars": "warn",
"no-var": "error",
"max-depth": ["error", 2],
"no-console": "warn"
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"plugins": ["import", "react-hooks", "prettier"]
}
*.yaml & *.yml
구성 파일 작성에 자주 사용되는 데이터 직렬화 언어.
사람이 읽을 수 있고 이해가 쉬워 인기가 높다.
YAML에는 Perl, C, XML, HTML, 기타 프로그래밍 언어에서 유래한 기능이 있다.
또한 JSON의 상위집합으로써 YAML 내에서 JSON 파일을 사용할 수 있다.
하지만 자바스크립트는 기본적으로 YAML오브젝트를 지원하지 않기 때문에 자주 마주칠 일이 없다.
eslint따위의 확장자로써 허용하는 정도.
YAML형식을 JSON으로 변환하거나 그 반대의 작업이 필요할 때는 모듈을 다운받아 사용해야 한다.
https://www.npmjs.com/package/yamljs
YAML to JSON
function yamlToJson(yaml_str) {
var yaml_obj = YAML.parse(yaml_str);
var json_str = JSON.stringify(yaml_obj);
return json_str;
}JSON to YAML
function jsonToYaml(json_str) {
var json_obj = JSON.parse(json_str);
var yaml_str = YAML.stringify(json_obj);
return yaml_str;
}*.md
Markdown 형식의 언어.
작성자에게 text와 HTML사이의 변환을 제공하는 툴이다.
기본적으로 프로젝트를 생성할 때 작성될 수 있는 README.md파일을 통해 누구보다 먼저 접근하게 된다.
현재는 다양한 웹 사이트에서 사용되는 확장자이다.
관련한 문법은 다음 깃허브에서 확인할 수 있다.
마크다운 언어 작성법
ETC
참조
