본문 바로가기

웹 프로그래밍/🔮포트폴리오 사이트11

[React] 포트폴리오 웹 사이트 제작 일지-11. 프로젝트 이미지 슬라이더 수정(캐러셀 슬라이드), 프로젝트 완성 [React] 포트폴리오 웹 사이트 제작 일지-10. 프로젝트 슬라이더 만들기 및 반응형 웹으로 디자인 프로젝트 슬라이더 만들기 우선, project 컴포넌트 내부에 html로 작성해 두었던 프로젝트 내용들을 객체 배열 형태로 정리해서 projectItems라는 이름으로 따로 저장했다. export const projectItems = [ { title florescene.tistory.com 이전 포스팅에서 제작한 프로젝트 슬라이더를 실제 휴대폰에서 확인해 보니 사용감이 좋지 않았다. 화면의 제약 때문에 잘리는 내용을 보여주기 위해 스크롤을 달았는데, 스크롤 과정에서 프로젝트를 모두 보여주지 못하고 다음 컴포넌트로 넘어가는 일이 잦아서 결국 프로젝트 슬라이더는 제거해 버렸다. 대신 프로젝트에 들어갈 이.. 2024. 1. 9.
[React] 포트폴리오 웹 사이트 제작 일지-10. 프로젝트 슬라이더 만들기 및 반응형 웹으로 디자인 수정 프로젝트 슬라이더 만들기 우선, project 컴포넌트 내부에 html로 작성해 두었던 프로젝트 내용들을 객체 배열 형태로 정리해서 projectItems라는 이름으로 따로 저장했다. export const projectItems = [ { title: "🌓Dream note", category: "개인 프로젝트", imageUrl: ``, githubLink: "", deployLink: "", description: "", features: "", retrospective: "", techStack: "", }, { title: "⏰Stop Watch", category: "개인 프로젝트", imageUrl: ``, githubLink: "", deployLink: "", description: "".. 2024. 1. 6.
[React] 포트폴리오 웹 사이트 제작 일지-9. 스크롤 애니메이션 효과 추가 현재 포트폴리오에도 필요한 내용은 전부 들어가 있지만, 어딘지 밋밋해 보여서 스크롤을 내리면 컴포넌트 내용이 나타나는 애니메이션을 추가하기로 했다. 전체 컴포넌트를 관리하고 있는 App.js 파일에서 작업을 진행했다. ✨ 화면에 보이는 컴포넌트들의 state 정의 App.js const [visibleSections, setVisibleSections] = useState([]); 스크롤을 하면 App 내부에 import 된 컴포넌트가 하나씩 화면에 나타나야 한다. visibleSections는 '화면에 보이는 컴포넌트'들의 id를 저장하는 배열이다. 컴포넌트가 보여야 할 때 visibleSections에 컴포넌트 id를 넣어주어 화면에 컴포넌트를 띄워주도록 했다. ✨ useEffect Hook을 이용한.. 2024. 1. 2.
[React] 포트폴리오 웹 사이트 제작 일지-8. 스타일링 수정, 포트폴리오 깃허브 배포 우테코 과제와 싸피 코딩테스트까지 모두 마친 뒤 다시 자기소개 페이지를 제작하고 있다. 한 달 조금 지난 기간 동안이지만, 기존에 작성된 코드를 보니 굉장히 낯설다... 기존 계획은 포트폴리오 시작 페이지에서 내 정보를 보여주는 About 페이지만 스크롤 이동하고 나머지는 탭으로 이동시키려고 했는데, 기존 사이트도 가독성이 나쁘지 않아서 기존 페이지 CSS 스타일링을 조금 더 수정하는 걸로 계획을 변경했다. 🎑 포트폴리오 CSS 수정 기존 페이지에서 상단 헤더를 통해 해당하는 페이지로 이동했을 때, 상단이 잘리는 문제가 있었다. 해결) 이 부분은 아주 간단하게, 페이지의 내용을 감싸는 div의 상하단 패딩을 조금 더 늘렸더니 해결되었다. 수정할 사항이 몇 가지 남아 있기는 하지만 css나 내용을 조금만 .. 2023. 11. 25.
[React] 포트폴리오 웹 사이트 제작 일지-7. 전체 스타일링 수정, 디자인 변경 스타일링 진행하다 보니 겹치는 스타일이 많아서 겹치는 부분은 한꺼번에 관리하여 전체적인 통일성을 유지하기로 했다. 내가 사용하고 있는 기본 css 스타일링은 import한 스타일 시트 이외에 프로젝트 내 구현된 다른 css 파일도 참조한다. (따라서 동일한 클래스 네임을 가지고 있다면, CSS 클래스가 중첩어 예상과 다른 동작을 하기도 한다. 이러한 문제점을 해결하기 위해 css module, sass 라이브러리 , emotion 라이브러리, styled-components 라이브러리 등을 사용한다.) 따라서 나는 가장 최상위 컴포넌트인 App.css 내부에 공통 스타일링을 작성해 코드 중복을 줄이고 전체 스타일링에 통일성을 주었다. App.css /* 전역 스타일링 */ h1 { margin: 0; f.. 2023. 10. 15.
[React] 포트폴리오 웹 사이트 제작 일지-6. 최상단 이동버튼, Tech Skill 기술스택 추가, Portfollio 내용 추가 최상단 이동버튼 구현 이미 포트폴리오 상단 메뉴바의 'Portfolio'를 누르면 최상단으로 이동이 가능하지만, 오른쪽 하단부에 최상단으로 이동이 가능한 버튼 하나를 추가하기로 했다. 아이콘은 아래 사이트를 이용했다. https://icons8.kr/ 무료 아이콘, 클립아트, 사진 및 음악 icons8.kr 더블 업 icon by Icons8 사이트 내부에 위 링크를 추가해서 출처를 밝히면 무료로 아이콘을 사용할 수 있다. 버튼은 간단하게 구현하고 이전에 만들어 두었던 moveToHomeHandler 함수를 연결해 주었다. App.js ... function App() { ... return ( ... ); } export default App; TopButton.js import "./TopButton.. 2023. 10. 14.
[React] 포트폴리오 웹 사이트 제작 일지-5. 상단 메뉴바 구현 (useref 를 이용한 컴포넌트 간 스크롤 이동) 기존 계획은 사이드 메뉴를 구현하는 것이었는데, 이미 구현해 놓은 화면 위에 사이드 메뉴를 얹으니 이질감이 들어서;; 상단 메뉴바를 구현하기로 했다. MenuBar.js import "./MenuBar.css"; const MenuBar = () => { return ( Portfolio Archiving Tech Skills Project Edu & Cert Contact ); }; export default MenuBar; 을 이용해 id="Home"인 div나 name="Home"인 a 태그로 이동이 가능하도록 하였다. 스타일링은 아래와 같이 진행했다. .menu-bar { position: fixed; top: 0; right: 0; left: 0; background-color: beige; z.. 2023. 10. 13.
[React] 포트폴리오 웹 사이트 제작 일지-4. EmailjS를 이용해 서버 없이 이메일 전송 구현하기 Contact 페이지의 이메일 전송 폼을 모두 구현한 뒤 서버 구현 없이 이메일을 전송할 수 있는 방법 찾아보던 중, emailjs를 이용한 방법과 구글 스프레드 시트를 이용한 방법이 있다는 것을 알게 되었다. 두 방법을 모두 살펴보니 emailjs가 구현하기 쉬워 보여서(공식문서가 잘 되어 있다) emailjs를 이용하기로 했다. emailjs Send email directly from your code | EmailJS No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com 위 사이트에 접.. 2023. 10. 13.
[React] 포트폴리오 웹 사이트 제작 일지-3. Archiving, Skills, Project, Contact 컴포넌트 생성 및 기본 CSS 작성 + 리액트 버튼에 내부 링크 걸기 🎁 Archiving 컴포넌트 생성 Archiving.js import Card from "../components/Card"; import "./Archiving.css"; const Archiving = () => { return ( Archiving GitHub github.com/Yoonyesol 작업한 소스를 업로드해 둔 저장소입니다. Blog florescene.tistory.com 공부 기록, 프로젝트 진행 과정을 기록해둔 블로그입니다. ); }; export default Archiving; 🔗 버튼에 내부 링크 걸기 (버튼 클릭 시 내부 문서의 특정 위치로 이동) Home.js (window.location.href = "#Archiving")} > ↓ Archiving.js Archiv.. 2023. 10. 13.
[React] 포트폴리오 웹 사이트 제작 일지-2. 리액트 프로젝트 시작, Home 컴포넌트 구현-2초마다 title 글자 변경+Fade in 효과 🔅 리액트 설치 npx create-react-app my-app 💻 구현할 화면 왼쪽의 메뉴바와 중앙의 카드는 모든 페이지에서 사용될 예정이기 때문에 공용 컴포넌트로 만들어 둔다. 🛴 공용 컴포넌트 생성 Card.js import "./Card.css"; const Card = (props) => { return {props.children}; }; export default Card; SideMenu.js import "./SideMenu.css"; const SideMenu = () => { return ( Github. Blog. ); }; export default SideMenu; 🧶 Google Fonts index.html에 링크 포함 ... 사용하고자 하는 곳에서 font-family 지.. 2023. 10. 12.
[React] 포트폴리오 웹 사이트 제작 일지-1. 기획 및 디자인 구상 🎡 구상 리액트를 사용한 SPA 포트폴리오 단일 페이지로 구성할 예정 필요한 페이지: 자기소개, 스킬, 프로젝트, 블로그 최신글, 학력과 자격증 정보, 이메일 문의 🎨 화면 구상 디자인 도구 - 캔바(Canva) https://www.canva.com 색상 팔레트 참고 https://www.instagram.com/designseeds/ 2023. 10. 10.
반응형

티스토리툴바