{"id":21969904,"url":"https://github.com/yamoo9/feml__learningkit","last_synced_at":"2026-04-13T20:01:39.721Z","repository":{"id":44041422,"uuid":"222854726","full_name":"yamoo9/FEML__learningKit","owner":"yamoo9","description":"Front-End Masters League 러닝 킷(LearningKit)","archived":false,"fork":false,"pushed_at":"2022-12-10T09:33:43.000Z","size":1298,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T22:37:00.139Z","etag":null,"topics":["babel","es6-javascript","live-server","parcel","post-css","stylus"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yamoo9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-20T05:02:07.000Z","updated_at":"2020-06-08T03:50:01.000Z","dependencies_parsed_at":"2023-01-26T05:16:33.974Z","dependency_job_id":null,"html_url":"https://github.com/yamoo9/FEML__learningKit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/yamoo9/FEML__learningKit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFEML__learningKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFEML__learningKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFEML__learningKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFEML__learningKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamoo9","download_url":"https://codeload.github.com/yamoo9/FEML__learningKit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFEML__learningKit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31768649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","es6-javascript","live-server","parcel","post-css","stylus"],"created_at":"2024-11-29T14:27:22.514Z","updated_at":"2026-04-13T20:01:39.695Z","avatar_url":"https://github.com/yamoo9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FEML 러닝 킷(Learning Kit)\n\n\u003cabbr title=\"Front-End Masters League\"\u003eFEML\u003c/abbr\u003e 모듈B 과정에서 다루는 데모 실습을 위한 러닝 킷입니다.\n\n\u003cbr\u003e\n\n## 다운로드 및 설치\n\n러닝 킷은 [Node.js](https://nodejs.org/) 기반 환경에서 작동하므로 Node.js가 사용자 환경에 [설치](https://nodejs.org/en/download/)되어 있어야 합니다. 러닝 킷 디렉토리에서 아래 명령을 실행해 필요한 모듈을 설치합니다.\n\n```sh\n$ npm install\n```\n\n\u003cbr\u003e\n\n## 실행 명령\n\n개발을 시작하는 기본 명령입니다. \n\n```sh\n$ npm start\n```\n\n추가 명령은 다음과 같습니다.\n\n```sh\n# .cache, dist, src/css 디렉토리 제거\n$ npm run clean\n\n# Parcel 모듈 번들러 + Live Server를 사용하여 개발 서버 구동\n$ npm run dev\n\n# 배포를 위한 빌드\n$ npm run build\n```\n\n\u003e 명령 설정을 변경하려면 [package.json](./package.json) 파일을 열어 `scripts` 항목을 수정하세요.\n\n\u003cbr\u003e\n\n## 러닝 킷 디렉토리 구조\n\n`src` 디렉토리 안에서 개발 과정을 학습합니다.\n\n```sh\nsrc/ # 개발 디렉토리\n├── index.html\n├── assets/ # 에셋 디렉토리\n│   └── favicon.png\n├── js/ # ES6(JS) 디렉토리\n│   ├── entry.js\n│   └── feml__headerbar--animation.js\n├── lib/ # 라이브러리 디렉토리\n│   └── IE/ # IE 호환\n│       ├── classList.min.js\n│       ├── flexibility.min.js\n│       ├── ie8.min.js\n│       └── index.js\n└── stylus/ # Stylus 디렉토리\n    ├── config.styl\n    ├── entry.styl\n    ├── feml__headerbar.styl\n    ├── modules/ # 모듈 디렉토리\n    │   ├── a11y.styl\n    │   ├── base.styl\n    │   ├── common.styl\n    │   ├── layout.styl\n    │   ├── normalize.styl\n    │   ├── transition-animation.styl\n    │   └── typography.styl\n    └── utils/ # 유틸리티 디렉토리 (함수 등)\n        ├── remify.styl\n        ├── fontSize.styl\n        └── index.styl\n```\n\n\u003cbr\u003e\n\n## 러닝 킷 구성\n\n러닝 킷에서 사용하는 도구는 다음과 같습니다.\n\n도구 | 설명 | 비고\n-- | -- | --\n[Parcel](https://parceljs.org/) | 모듈 번들러 | [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Gulp](https://gulpjs.com/) 등으로 대체 가능\n[Live Server](http://tapiov.net/live-server/) | 개발 서버 | [BrowserSync](https://www.browsersync.io/)로 대체 가능\n[Stylus](http://stylus-lang.com/) | CSS 프리프로세서 | CSS, [Scss, Sass](https://sass-lang.com/) 문법 모두 사용 가능\n[PostCSS](https://postcss.org/) | CSS 변환 도구 | 구형 브라우저 호환성 자동 처리, [LostGrid](http://lostgrid.org/docs.html) 활용 가능\n[Babel](https://babeljs.io/) | JavaScript 컴파일러 | ECMAScript 2015+ 문법 호환 처리 (ES5로 변환)\n\n### 설정 참고\n\n도구 설정은 각 링크를 클릭해 참고하세요.\n\n#### Parcel 기본 설정\n\n- [Parcel 시작하기](https://ko.parceljs.org/getting_started.html)\n- [Parcel + Stylus 구성](https://ko.parceljs.org/stylus.html)\n- [Parcel + PostCSS 구성](https://ko.parceljs.org/transforms.html#postcss)\n- [Parcel + Babel 구성](https://ko.parceljs.org/transforms.html#babel)\n- [`@babel/preset-env` 설정](https://babeljs.io/docs/en/babel-preset-env#docsNav)\n- [Browserlist 설정](https://github.com/browserslist/browserslist#full-list)\n\n#### 개발 서버 및 미들웨어 설정\n\n- [Parcel Bundler API (미들웨어 설정)](https://ko.parceljs.org/api.html)\n- [Live Server 설정](http://tapiov.net/live-server/#usage-from-node)\n\n\u003cbr\u003e\n\n## 버전 히스토리\n\n- [v1.0.1](https://github.com/yamoo9/FEML__learningKit/archive/v1.0.1.zip) - live-server + pacel로 개발/빌드 환경 구성\n- v1.0.0 - parcel로 개발/빌드 환경 구성","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamoo9%2Ffeml__learningkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamoo9%2Ffeml__learningkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamoo9%2Ffeml__learningkit/lists"}