내가 어떻게 나의 투자 그룹을 만드는지: 사고 과정부터 배치까지.

13099 단어 webdevreactshowdevtutorial
기업계에 진출하기 전에 투자조합을 가지는 것이 제 분투 목표였습니다. 여러분과 함께 나누게 되어 기쁩니다. 약 한 달 전에 이 임무를 완수했습니다.🎉.
너는 https://prafulla.tech를 통해 나의 투자조합을 볼 수 있다.
이 글에서 저는 사고 과정부터 배치까지의 과정을 공유하고 싶습니다.
나는 다음 절에서 전체 과정을 상세하게 소개할 것이다
  • Planning & Design
  • Project Strucutre
  • Optimization
  • Deployment

    • 기획 설계


    이 단계에서 나는 브라우저 기반의 디자인과 원형 도구를 사용했다Figma.Adobe XD, Sketch 등 다른 도구도 사용할 수 있습니다.
    제 포트폴리오의 Figma 프로그램 위원회입니다.

    내가 기획과 디자인 단계를 한 페이지에 두는 것은 실행 생각을 더욱 쉽게 하기 때문이다.
    계획 단계는 다음 두 단계로 구성됩니다.

    목표


    투자조합에서 기대하는 기본적인 수요를 적으면 더욱 강한 목표를 달성하는 데 도움이 된다. 만약에 실현된 디자인과 내용이 이러한 수요를 충족시킬 수 있다면 사람들은 심사숙고하고 행동할 것이다.
    예를 들면 다음과 같습니다.

    도구책


    개발과 디자인에 직접 들어가기 전에 예시 사이트를 참고하여 당신이 좋아하는 생각을 열거하는 것이 좋습니다.
    너는 간단한 검색을 통해 참고 사이트를 쉽게 찾을 수 있다Top portfolio websites in <xyz> field .
    다음은 제가 언급한 투자조합들입니다.
  • saurabhdaware.in
  • rleonardi.com
    • 당신의 투자 그룹에서 반드시 갖추어야 한다고 생각하는 특징을 적어 두세요.
    예를 들면 다음과 같습니다.

    설계 단계


    이것은 내가 시각화 디자인을 실천에 옮기는 단계다.
    나는 나의 디자인을 매 페이지/매 절의 아래 격식에 두었다.Requirements Light Mode Mobile & Desktop View Dark Mode Mobile & Desktop View예: -

    이 요구는 내가 본 페이지/장에 나와야 한다고 생각하는 구성 요소를 규정했다.
    수요를 일부 디자인에 두는 것은 창조적인 방법을 찾아 수요를 실현하는 데 도움이 되고 중요한 디테일이 누락될 가능성도 줄일 수 있다.

    프로젝트 구조


    이 절에서 나는 내가 사용하는 기술 창고 & 내가 코드를 조직하는 방식에 대해 더 많이 토론하고 싶다.
    react 써봤어요.js에서 제 서류 가방을 만들었습니다. 왜냐하면 자바스크립트 프레임워크를 배우기 시작했기 때문입니다.
    나의 투자조합은 완전히 정적이며 백엔드 수요가 없기 때문에 복잡한 상태 관리, 데이터베이스 연결 등을 실현할 필요가 없다.
    저는 SASS를 사용했습니다. 이것은 CSS 프로세서로 스타일 구성 요소를 더욱 유연하게 합니다.
    사용된 스택
  • 반응.jsLearn More
  • SASS(스타일링용)Learn More
    • 단일 페이지 프로그램 (SPA) 을 원하기 때문에, 심지어react 공유기를 실현할 필요도 없습니다.
    파일 구조
    .
├── 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
  • gtmetrix.com
  • Page Speed Insights
    • 이 사이트들은 당신의 사이트에 대해 기준 테스트를 하고 상세한 보고서를 제공하여 사이트를 개선하는 데 도움을 줄 것입니다.
    예.

    다음은 SEO 및 성능 향상에 도움이 되는 몇 가지 단계입니다.
  • CDN(Content Interface Network) 서비스 정적 자산 사용Cloudinary
  • 의 절반은 원 탭(키워드, 설명, 제목,favicon, 오픈 아이콘 등)이고 나머지 절반은 내용(키워드와 관련된 내용을 포함하도록 확보)이다.
  • CSS와 JS 파일 축소
  • 이미지/비디오 로드 지연
  • 압축 파일 형식 사용(예를 들어.webp는 그림에 사용)
  • 플러그인을 사용하여 색상 명암비 확인this의 Figma)
  • xml 사이트 지도를 가지고 사이트 지도를 구글에 제출한다.

    • 배치하다


    이것은 위탁 관리 사이트의 마지막 단계다.
    다음은 일부 무료 호스트 공급자들입니다

  • Netlify(무료 SSL 제공)

  • Firebase hosting(무료 SSL 제공)
  • 000webhost

  • Heroku
    • 다음은 광범위하게 사용되는 비용 지불 공급업체들입니다
  • GoDaddy
  • Digital Ocean
    • Netlify와 Heroku를 사용하는 이유는 GitHub과의 지속적인 통합과 배치 통합이 쉽기 때문입니다.

    💖 당신의 투자조합과 기타 유용한 자원을 평론에서 공유하는 것을 환영합니다.

    2월 16일 공부일기 # 검증
    C#try catch 예외 캡처 문의 주의사항

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage