{"id":23250706,"url":"https://github.com/socker210/scatterlab-assignment","last_synced_at":"2025-04-06T02:15:08.016Z","repository":{"id":41779151,"uuid":"196535095","full_name":"socker210/scatterlab-assignment","owner":"socker210","description":"Scatterlab assignment","archived":false,"fork":false,"pushed_at":"2023-01-04T04:31:27.000Z","size":4959,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T08:18:15.120Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"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/socker210.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-07-12T07:55:26.000Z","updated_at":"2019-07-15T01:20:56.000Z","dependencies_parsed_at":"2023-02-01T20:31:55.655Z","dependency_job_id":null,"html_url":"https://github.com/socker210/scatterlab-assignment","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socker210%2Fscatterlab-assignment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socker210%2Fscatterlab-assignment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socker210%2Fscatterlab-assignment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socker210%2Fscatterlab-assignment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/socker210","download_url":"https://codeload.github.com/socker210/scatterlab-assignment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423522,"owners_count":20936626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-12-19T09:14:39.687Z","updated_at":"2025-04-06T02:15:07.996Z","avatar_url":"https://github.com/socker210.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scatterlab-assignment\n\n## Scatterlab Aniamls 짧은 설명\n**Scatterlab Animals**의 총 페이지는 3개이며 welcome 페이지, cat 페이지, dog 페이지로 구성되어 있습니다. \n\n- [Welcome 페이지](http://localhost:3000)\n  - 간단하게 강아지와 고양이의 안내를 보여주기 위한 페이지입니다\n- [Cat 페이지](http://localhost:3000/cat)\n  - 고양이 리스트를 볼 수 있는 페이지입니다\n- [Dog 페이지](http://localhost:3000/dog)\n  - 강아지 리스트를 볼 수 있는 페이지입니다\n\n**Header**는 Sticky한 스타일로 개발을 하여 하단으로 scrolling시 상단에 붙어있습니다. 또한 Header 우측에 cat \u0026 dog 페이지로 이동을 할 수 있는 카테고리 버튼을 두었고 만약 리스트 페이지로 이동을 할 경우 이동한 페이지의 버튼의 색이 변경되도록 개발을 하였습니다.\n\n**각 동물의 리스트**를 보여주는 방식은 하단으로 scrolling시 데이터를 자동으로 불러오는 infinite scrolling 방식으로 구현을 하였습니다. (infinite scrolling기능은 외부 라이브러리를 사용하였습니다)\n\n**Responsive design**은 PC \u0026 Mobile (768px)으로 나누어 디자인 하였습니다.\n\n\n## 필요 설치 패키지\n### Global\n[PM2](https://github.com/Unitech/pm2)\n```\nsudo npm install -g pm2\n```\n\n\n## 실행\n\n```\nyarn install\n```\n```\nyarn run (dev | prod)\n```\n```\nhttp://localhost:3000\n```\n\n\n## 명령어\n- yarn run dev\n  - 개발을 진행하기 위한 개발용 서버 실행\n- yarn run kill\n  - PM2에서 실행되고 있는 client, api서버 instance 제거\n- yarn run fix\n  - Linting\n- yarn run test\n  - Jest 실행\n- yarn run test:watch\n  - Jest watch 모드\n- yarn run prod\n  - production용 빌드 및 production 서버 실행\n\n\n## 프로젝트 구조\n- api/\n  - API호출을 하기 위해 API를 정의해 놓은 폴더\n- components/\n  - React component 폴더\n- data/\n  - JSON data 폴더\n- layout/\n  - 공통 Layout 폴더 (/cats \u0026 /dogs에서 공통으로 사용됨)\n- pages/\n  - Nextjs의 page 폴더\n- server/\n  - client \u0026 api 서버 폴더\n- static/\n  - static 폴더\n- styles/\n  - SCSS 폴더\n\n\n## 개발\n### Client\nReact + Nextjs를 사용하여 개발하였습니다\n\n### Server\nexpress.js를 사용하여 Nextjs를 사용하는데 필요한 client용 서버와 데이터를 request 하기 위해 간단한 api용 서버를 개발하였습니다.\n\n### Style\nSCSS를 사용하여 개발하였습니다. Gulp 등을 사용해 Link태그를 이용하여 불러오는 방식이 아닌 Nextjs에서 제공하는 plugin인 next-sass를 사용하였습니다. vendor prefix같은 경우는 postcss의 plugin인 autoprefixer를 사용하였습니다. class명칭 정의는 BEM을 따랐습니다. (설정은 package.json에 있습니다)\n\n### Lint\nEslint + standard를 사용하였습니다.\n\n### Management\nPM2를 사용하여 Client와 API 서버의 instance를 관리하였습니다. package.json의 scripts에서 각각의 서버를 실행하기 위해 **dev,** **kill,** **prod**명령어를 작성하였습니다. (PM2  설정파일 - ecosystem.config.js)\n\n### Test\nJest \u0026 Enzyme으로 단위테스트를 진행하였습니다. 보여주는 기능이 대부분이라 많은 테스트를 거치진 않았고 StickyHeader 컴포넌트만 테스트 스크립트를 작성하였습니다.\n\n\n## API\n- /cats\n  - 고양이 데이터 호출\n  - params\n    - current: 현재 index\n    - per: 데이터 갯수\n- /dogs\n  - 강아지 데이터 호출\n  - params\n    - current: 현재 index\n    - per: 데이터 갯수\n\n\n## Port번호\n- client: 3000\n- server: 3001\n\n\n## 모바일에서 접속하기\n현재 API서버가 localhost로 설정되어 있어 모바일기기에서 접속하려면 api/index.js의 **BASE_URL**부분을 서버 실행 IP로 변경을 해주어야 합니다.\n\n\n## 외부 라이브러리\n- [lodash](https://github.com/lodash/lodash)\n  - Array \u0026 Object를 다루기 위해 사용\n- [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller)\n  - Infinite scrolling 기능을 위해 사용\n- [font-awesome](https://fontawesome.com/)\n  - Icon을 사용하기 위해 사용","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocker210%2Fscatterlab-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsocker210%2Fscatterlab-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocker210%2Fscatterlab-assignment/lists"}