내가 어떻게 나의 투자 그룹을 만드는지: 사고 과정부터 배치까지.
너는 https://prafulla.tech를 통해 나의 투자조합을 볼 수 있다.
이 글에서 저는 사고 과정부터 배치까지의 과정을 공유하고 싶습니다.
나는 다음 절에서 전체 과정을 상세하게 소개할 것이다
기획 설계
이 단계에서 나는 브라우저 기반의 디자인과 원형 도구를 사용했다Figma.Adobe XD, Sketch 등 다른 도구도 사용할 수 있습니다.
제 포트폴리오의 Figma 프로그램 위원회입니다.
내가 기획과 디자인 단계를 한 페이지에 두는 것은 실행 생각을 더욱 쉽게 하기 때문이다.
계획 단계는 다음 두 단계로 구성됩니다.
목표
투자조합에서 기대하는 기본적인 수요를 적으면 더욱 강한 목표를 달성하는 데 도움이 된다. 만약에 실현된 디자인과 내용이 이러한 수요를 충족시킬 수 있다면 사람들은 심사숙고하고 행동할 것이다.
예를 들면 다음과 같습니다.
도구책
개발과 디자인에 직접 들어가기 전에 예시 사이트를 참고하여 당신이 좋아하는 생각을 열거하는 것이 좋습니다.
너는 간단한 검색을 통해 참고 사이트를 쉽게 찾을 수 있다Top portfolio websites in <xyz> field
.
다음은 제가 언급한 투자조합들입니다.
예를 들면 다음과 같습니다.
설계 단계
이것은 내가 시각화 디자인을 실천에 옮기는 단계다.
나는 나의 디자인을 매 페이지/매 절의 아래 격식에 두었다.
Requirements
Light Mode Mobile & Desktop View
Dark Mode Mobile & Desktop View
예: -이 요구는 내가 본 페이지/장에 나와야 한다고 생각하는 구성 요소를 규정했다.
수요를 일부 디자인에 두는 것은 창조적인 방법을 찾아 수요를 실현하는 데 도움이 되고 중요한 디테일이 누락될 가능성도 줄일 수 있다.
프로젝트 구조
이 절에서 나는 내가 사용하는 기술 창고 & 내가 코드를 조직하는 방식에 대해 더 많이 토론하고 싶다.
react 써봤어요.js에서 제 서류 가방을 만들었습니다. 왜냐하면 자바스크립트 프레임워크를 배우기 시작했기 때문입니다.
나의 투자조합은 완전히 정적이며 백엔드 수요가 없기 때문에 복잡한 상태 관리, 데이터베이스 연결 등을 실현할 필요가 없다.
저는 SASS를 사용했습니다. 이것은 CSS 프로세서로 스타일 구성 요소를 더욱 유연하게 합니다.
사용된 스택
파일 구조
.
├── src
├──📂components
├──📂about
├── 📄About.scss
├── 📄About.js
├──📂footer
├──📂....(Other Components)
│ └──📂services (APIs)
| └──📄App.js (Root App)
| └──📄index.js
| └──📄_variables.scss (Variables)
내 코드 라이브러리에서, 서류 가방의 모든 페이지/부분은 클래스 기반 구성 요소로components 디렉터리에 저장되고, 각각의 스타일 파일을 가지고 있습니다.📄응용 프로그램.js
이것은 필요한 순서에 따라 모든 구성 요소로 구성된 루트 단계의 구성 요소입니다.이것은 나의 응용 프로그램의 대략적인 템플릿이다.js
// Module Imports
class App extends React.Component {
constructor(props){
super(props);
let theme = localStorage.getItem("theme");
// Switch Theme as per time Logic
}
componentDidMount(){
// Console Log Messages
}
changeTheme = (theme)=>{
// Change Theme Helper Function
}
render(){
// * Render the components as a SPA
return <div className={'App app-'+this.state.theme}>
<ThemeToggler theme={this.state.theme} changeTheme={this.changeTheme}></ThemeToggler>
<NavWidget theme={this.state.theme}></NavWidget>
<Landing theme={this.state.theme}></Landing>
<Projects theme={this.state.theme}></Projects>
<About theme={this.state.theme}></About>
<Skills theme={this.state.theme}></Skills>
<Hobbies theme={this.state.theme}></Hobbies>
<Footer theme={this.state.theme}></Footer>
</div>;
}
}
export default App;
이것📂서비스 디렉터리는 helper 방법으로 구성되어 있으며, 이 방법들은 필요한 백엔드 API를 호출합니다. (예를 들어 DEV의 API를 사용하여 제 글을 가져와 서류 가방에 표시합니다.)📄_변수scss
이것은 SASS 파일로 색 조합과 다른 유용한 변수로 구성되어 있으며, 다른 스타일로 가져와서 다시 사용하기 쉽도록 합니다.
예.
// Text Colors
$lightPrimaryText:#3F3D56;
$darkPrimaryText:#FAFAFA;
$darkSecondaryColor:#FDCA13;
$lightSecondaryColor:#66BB6A;
$lightTextColorGray:#828282;
$darkTextColorBlue:#0d47a1;
// Container Colors
$lightContainerColor:#FFFFFF;
$darkContainerColor:#202D36;
$maxWidth: 800px;
이곳의 주요 사상은 한 번 정의하고 여러 번 호출하는 것이다최적화
너는 너의 투자 조합이 부족하다고 생각하니?당신은 어떻게 그것에 대해 기준 테스트를 진행합니까?
여러 가지 도구를 사용하여 웹 사이트에 대한 벤치마크 테스트를 수행할 수 있습니다.
web.dev
예.
다음은 SEO 및 성능 향상에 도움이 되는 몇 가지 단계입니다.
배치하다
이것은 위탁 관리 사이트의 마지막 단계다.
다음은 일부 무료 호스트 공급자들입니다
Netlify(무료 SSL 제공)
Firebase hosting(무료 SSL 제공)
Heroku
💖 당신의 투자조합과 기타 유용한 자원을 평론에서 공유하는 것을 환영합니다.
Reference
이 문제에 관하여(내가 어떻게 나의 투자 그룹을 만드는지: 사고 과정부터 배치까지.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/pika1998/how-i-created-my-portfolio-from-thought-process-to-deployment-4j3p
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(내가 어떻게 나의 투자 그룹을 만드는지: 사고 과정부터 배치까지.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pika1998/how-i-created-my-portfolio-from-thought-process-to-deployment-4j3p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)