{"id":19249778,"url":"https://github.com/yunyoungsik/portfolio-react","last_synced_at":"2026-04-11T17:40:12.038Z","repository":{"id":213262782,"uuid":"733432813","full_name":"yunyoungsik/portfolio-react","owner":"yunyoungsik","description":"Yunyoungsik Portfolio Site","archived":false,"fork":false,"pushed_at":"2024-11-06T03:03:17.000Z","size":11912,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-05T05:43:04.178Z","etag":null,"topics":["ajax","axios","express","framer-motion","gsap","momentjs","mongodb","mongoose","path","proxy-middleware","react","split-type"],"latest_commit_sha":null,"homepage":"https://yunyoungsik-portfolio.fly.dev","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/yunyoungsik.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-19T10:13:36.000Z","updated_at":"2024-11-06T03:03:20.000Z","dependencies_parsed_at":"2024-01-23T03:06:19.870Z","dependency_job_id":null,"html_url":"https://github.com/yunyoungsik/portfolio-react","commit_stats":null,"previous_names":["yunyoungsik/portfolio-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunyoungsik%2Fportfolio-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunyoungsik%2Fportfolio-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunyoungsik%2Fportfolio-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunyoungsik%2Fportfolio-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunyoungsik","download_url":"https://codeload.github.com/yunyoungsik/portfolio-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240341375,"owners_count":19786262,"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":["ajax","axios","express","framer-motion","gsap","momentjs","mongodb","mongoose","path","proxy-middleware","react","split-type"],"created_at":"2024-11-09T18:15:24.408Z","updated_at":"2026-04-11T17:40:07.016Z","avatar_url":"https://github.com/yunyoungsik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# portfolio_react\n\u003cimg width=\"100%\" src=\"https://github.com/yunyoungsik/portfolio-react/blob/main/App/client/src/assets/img/thumbnail.jpg?raw=true\" /\u003e\nReact를 이용하여 만든 포트폴리오는 웹사이트입니다.\u003cbr /\u003e\n직접 제작한 웹사이트의 간단한 설명과 링크, 깃허브 링크를 제공하고 있습니다.\u003cbr/\u003e\n      \n## client\nnpx create-react-app .   \nnpm install react-router-dom   \nnpm install gsap   \nnpm i @studio-freight/lenis  \nnpm install react-syntax-highlighter   \nnpm install axios   \nnpm install http-proxy-middleware --save   \nnpm install moment   \nnpm install split-type   \nnpm i framer-motion   \n\n## server\nnpm init -y   \nnpm install express --save   \nnpm install nodemon --save   \nnpm install path --save   \nnpm install mongoose --save   \n\n##\n- 메인\n메인 페이지에서는 useEffect를 이용하여 smooth, splint, homeMouse 등 함수들을 호출합니다.\u003cbr /\u003e\nLenis를 이용하여 부드러운 스크롤, GSAP를 이용하여 마우스 이펙트, 슬라이드, 화면전환 효과를 구현하였습니다.\u003cbr/\u003e\nLink 컴포넌트를 통해 페이지 내에는 다양한 컨텐츠들이 Link 컴포넌트를 통해 연결되어 있습니다.\u003cbr /\u003e\n상단에 위치한 메뉴 아이콘 클릭 시, Nav 컴포넌트를 토글하여 메뉴를 활성화하거나 비활성화합니다.\u003cbr /\u003e\nNav는 Framer-motion을 사용하여 제작되었습니다.\u003cbr /\u003e\n   \n- 서브\n서브페이지에서는 코드 하이라이팅을 위해 SyntaxHighlighter를 사용하였으며, 이 라이브러리는 코드를 강조하여 보기 좋게 표시해줍니다.\u003cbr /\u003e\n그리고 GSAP를 활용하여 subIntro, subSlider 등의 함수들을 통해 애니메이션을 초기화하고 실행하고 있습니다.\u003cbr /\u003e\n부드러운 스크롤을 위해 Lenis를 사용하는 smooth 함수도 구현되어 있고, CommentArea는 페이지에 댓글 기능을 추가하기 위한 컴포넌트입니다.\u003cbr /\u003e\n   \n- 어바웃\nAbout 페이지는 개발자에 대한 정보를 제공하며 Lenis 및 GSAP와 같은 라이브러리를 활용하여 부드러운 스크롤, 인트로 및 아웃트로 등 애니메이션를 구현했습니다.\u003cbr /\u003e\n페이지에는 개발자의 간단한 소개, 서비스 및 기술 정보, 소셜 링크 및 이메일 등이 제공되며, Link 컴포넌트를 통해 다른 페이지로 연결되어 있습니다.\u003cbr /\u003e\n      \n## 트러블슈팅01\n[문제]   \nHome, sub 페이지에서 About페이지로 넘어가도 Scroll 효과가 남아있음   \n   \n[해결]   \n해당 기능이 적용된 페이지에 서 ScrollTrigger과 gsap 애니메이션을 해제하고 넘어가도록 처리함   \n```js\nreturn () =\u003e {\n    // ScrollTrigger 해제\n    ScrollTrigger.getAll().forEach(trigger =\u003e {\n        trigger.kill();\n    });\n    // GSAP 애니메이션 중지 또는 제거\n    animation.kill();\n};\n```\n## 트러블슈팅02\n[문제]   \n배포한 페이지에 접속하고 나서 첫 페이지까지는 잘 렌더링이 되었으나, 페이지를 이동 한 후 새로고침 시 page not found 404라는 창이 뜨는 문제가 발생했다.   \n   \n[원인]   \nspa방식인 리액트는 하나의 페이지인 index.html만 렌더링 하게 되며, 리액트가 최초 접속할 때의 url 은 / 이다. 서버는 기본 URL 요청이 들어왔을 때 index.html만 보내는 규칙만 갖고 있기 때문에 화면을 넘기면서 라우팅된 각 url(/a, /b)에 맞는 자원이 존재하지 않아 발생하는 오류이다.   \n그래서 이를 해결하기 위해선 URL에 대한 리디렉션 및 다시 쓰기 규칙을 재구성해야 한다.   \n   \n[해결]   \n1. 프로젝트의 public 폴더 안에 다음과 같이 _redirects라는 이름의 파일을 생성하고, 아래와 같이 코드를 입력해 저장해 주었다.   \n```js\n/* /index.html 200\n```\n2. package.json과 README파일이 있는 프로젝트 루트 디렉토리에 netlify.toml라는 이름의 파일을 생성한다.\n```js\n[[redirects]]\nfrom = \"/*\"\nto = \"/index.html\"\nstatus = 200\n```\n그 후 위와 같이 코드를 작성해 저장 후 push해 주어 404 문제를 해결할 수 있었다.\n\n## 배포\nfly.io을 통하여 배포를 진행하였습니다.\n```\niwr https://fly.io/install.ps1 -useb | iex\nflyctl auth login\nflyctl launch\nflyctl deploy\n```\n```\n.dockerignore셋팅\nserver\\config\\dev.js\nnode_modules\n\nclient\\node_modules\n```\n```\n추가셋팅\nflyctl scale count 1 --app yunyoungsik-portfolio\nfly machine update 6e824525f25138 --vm-memory 256 --app yunyoungsik-portfolio\n```\n\n## 스택\n\u003cdiv disflay=\"flex\" flex-direction:column; align-items:flex-start;\u003e\n  \u003cp\u003e\u003cstrong\u003eEnvironment\u003c/strong\u003e\u003c/p\u003e\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/VisualStudioCode-007ACC?style=flat-square\u0026logo=VisualStudioCode\u0026logoColor=white\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Github-181717?style=flat-square\u0026logo=Github\u0026logoColor=white\"\u003e \n    \u003cimg src=\"https://img.shields.io/badge/Git-F05032?style=flat-square\u0026logo=Git\u0026logoColor=white\"\u003e\n  \u003c/div\u003e\n  \u003cp\u003e\u003cstrong\u003eDevelopment\u003c/strong\u003e\u003c/p\u003e\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/html5-E34F26?style=flat-square\u0026logo=html5\u0026logoColor=white\"\u003e \n    \u003cimg src=\"https://img.shields.io/badge/css-1572B6?style=flat-square\u0026logo=css3\u0026logoColor=white\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React-61DAFB?style=flat-square\u0026logo=React\u0026logoColor=white\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/greensock-88CE02?style=flat-square\u0026logo=greensock\u0026logoColor=white\"\u003e\n  \u003c/div\u003e\n  \u003cp\u003e\u003cstrong\u003eCommunication\u003c/strong\u003e\u003c/p\u003e\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Slack-4A154B?style=flat-square\u0026logo=Slack\u0026logoColor=white\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Notion-000000?style=flat-square\u0026logo=Notion\u0026logoColor=white\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunyoungsik%2Fportfolio-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunyoungsik%2Fportfolio-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunyoungsik%2Fportfolio-react/lists"}