24. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 인트로 영역 | 포트폴리오 | 취업

채널에 가입하여 혜택을 누려보세요.
https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw/join

안녕하세요! 웹스토리보이입니다.
이 강의는 Vite, React, Vue, 그리고 Next.js를 사용하여 멋진 포트폴리오 사이트를 만드는 방법을 소개합니다.
다양한 프레임워크를 활용하여 프론트엔드 개발자로서의 역량을 향상시키고, 실전 프로젝트를 통해 멋진 포트폴리오 사이트를 구축하는데 있습니다. 각 프레임워크의 기초부터 응용까지 학습하여 다양한 도구를 마스터하고, 실제 웹 개발에서의 경험을 쌓으며 실력을 발전시키는 것이 이 강의의 주요 목적입니다.

재생목록: https://www.youtube.com/playlist?list=PL4UVBBIc6giLabEb4ygOmKDWCnsSKq2uP
미리보기: https://port2023-vite.netlify.app/
소스보기 : Vite : https://github.com/webstoryboy/port2023-vite
소스보기 : React : https://github.com/webstoryboy/port2023-react
소스보기 : Vue : https://github.com/webstoryboy/port2023-vue
소스보기 : Next : https://github.com/webstoryboy/port2023-next

** 주요 스킬
* GSAP를 이용하여 가로모드를 구현합니다.
* Lenis를 이용하여 스무스 효과를 구현합니다.
* 반응형까지 완료하고 웹 표준 및 웹 접근성을 고려합니다.
* 자바스크립트 프레임워크 Vite를 이용하여 사이트 제작합니다.
* Reac.js를 이용하여 사이트를 제작하고 배포까지 완성합니다.
* Vue.js를 이용하여 사이트를 제작하고 배포까지 완성합니다.
* Next.js를 통해 사이트를 제작하고 배포까지 완성합니다.
* CSS를 SCSS로 변환하여 작업합니다.
* 배포는 netlify를 통해 작업합니다.
* github을 이용하여 파일관리를 합니다.

** 모든 강의는 자습서를 제공합니다.
1. 포트폴리오 사이트 만들기 : Vite-Site : 셋팅하기 https://webstoryboy.co.kr/1924
2. 포트폴리오 사이트 만들기 : Vite-Site : 레이아웃 설정 https://webstoryboy.co.kr/1925
3. 포트폴리오 사이트 만들기 : Vite-Site : 헤더 영역 https://webstoryboy.co.kr/1926
4. 포트폴리오 사이트 만들기 : Vite-Site : 인트로 영역 https://webstoryboy.co.kr/1927
5. 포트폴리오 사이트 만들기 : Vite-Site : 스킬 영역 https://webstoryboy.co.kr/1928
6. 포트폴리오 사이트 만들기 : Vite-Site : 사이트 영역 https://webstoryboy.co.kr/1929
7. 포트폴리오 사이트 만들기 : Vite-Site : 포트폴리오 영역 https://webstoryboy.co.kr/1930
8. 포트폴리오 사이트 만들기 : Vite-Site : 연락처 영역 https://webstoryboy.co.kr/1931
9. 포트폴리오 사이트 만들기 : Vite-Site : 푸터 영역 https://webstoryboy.co.kr/1932
10. 포트폴리오 사이트 만들기 : Vite-Site : 마무리 https://webstoryboy.co.kr/1933
11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기 https://webstoryboy.co.kr/1934
12. 포트폴리오 사이트 만들기 : React-Site : 컨퍼넌트 설정 https://webstoryboy.co.kr/1935
13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역 https://webstoryboy.co.kr/1936
14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역 https://webstoryboy.co.kr/1937
15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역 https://webstoryboy.co.kr/1938
16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역 https://webstoryboy.co.kr/1939
17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역 https://webstoryboy.co.kr/1940
18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역 https://webstoryboy.co.kr/1941
19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역 https://webstoryboy.co.kr/1942
20. 포트폴리오 사이트 만들기 : React-Site : 마무리 https://webstoryboy.co.kr/1943
21. 포트폴리오 사이트 만들기 : Vue-Site : 셋팅하기 https://webstoryboy.co.kr/1944
22. 포트폴리오 사이트 만들기 : Vue-Site : 레이아웃 설정 https://webstoryboy.co.kr/1945
23. 포트폴리오 사이트 만들기 : Vue-Site : 헤더 영역 https://webstoryboy.co.kr/1946
24. 포트폴리오 사이트 만들기 : Vue-Site : 인트로 영역 https://webstoryboy.co.kr/1947
25. 포트폴리오 사이트 만들기 : Vue-Site : 스킬 영역 https://webstoryboy.co.kr/1948
26. 포트폴리오 사이트 만들기 : Vue-Site : 사이트 영역 https://webstoryboy.co.kr/1949
27. 포트폴리오 사이트 만들기 : Vue-Site : 포트폴리오 영역 https://webstoryboy.co.kr/1950
28. 포트폴리오 사이트 만들기 : Vue-Site : 연락처 영역 https://webstoryboy.co.kr/1951
29. 포트폴리오 사이트 만들기 : Vue-Site : 푸터 영역 https://webstoryboy.co.kr/1952
30. 포트폴리오 사이트 만들기 : Vue-Site : 마무리 https://webstoryboy.co.kr/1953
31. 포트폴리오 사이트 만들기 : Next-Site : 셋팅하기 https://webstoryboy.co.kr/1954
32. 포트폴리오 사이트 만들기 : Next-Site : 컨퍼넌트 설정 https://webstoryboy.co.kr/1955
33. 포트폴리오 사이트 만들기 : Next-Site : 헤더 영역 https://webstoryboy.co.kr/1956
34. 포트폴리오 사이트 만들기 : Next-Site : 인트로 영역 https://webstoryboy.co.kr/1957
35. 포트폴리오 사이트 만들기 : Next-Site : 스킬 영역 https://webstoryboy.co.kr/1958
36. 포트폴리오 사이트 만들기 : Next-Site : 사이트 영역 https://webstoryboy.co.kr/1959
37. 포트폴리오 사이트 만들기 : Next-Site : 포트폴리오 영역 https://webstoryboy.co.kr/1960
38. 포트폴리오 사이트 만들기 : Next-Site : 연락처 영역 https://webstoryboy.co.kr/1961
39. 포트폴리오 사이트 만들기 : Next-Site : 푸터 영역 https://webstoryboy.co.kr/1962
40. 포트폴리오 사이트 만들기 : Next-Site : 마무리 https://webstoryboy.co.kr/1963

궁금한 점이나 이상한 점들은 댓글 부탁드립니다.
댓글은 수시로 확인하고 있으니 최대한 빨리 답변 드리겠습니다.

영상은 채널 가입시 모두 볼 수 있습니다.
채널을 가입하거나 다른 경로를 통해 유료로 볼 수 있는 점 참고 바랍니다.
https://inf.run/FKCa