반응형
[React] My Portfolio React 프로젝트

[React] My Portfolio React 프로젝트

My Portfolio React 프로젝트 소요 기간 : 3일 Figma 기획 : https://make-somthing.tistory.com/77 Github: https://github.com/chalinuna/myweb Demo: https://main--bright-mochi-309946.netlify.app/ 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useNavigator, useState, React-Router-Dom@6, styled-components, SCSS(node-sass 라이브러리)) Unsplash Open api 배포 - Netlify 프로젝트 제작 계기 내 프로젝트와 간단한 이력서, 자기소개를 한꺼번에 보여줄 수 있는 포트폴리오 정리 페이지가 ..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2023. 1. 14.
  • textsms
[프로젝트 기획 - React] 포트폴리오 소개 Figma 프로토타입

[프로젝트 기획 - React] 포트폴리오 소개 Figma 프로토타입

포트폴리오 소개 웹 - 프론트 프로젝트 좀 더 깔끔하게 이력서 형식의 포트폴리오가 필요하다고 생각해, 새로 웹 프로젝트를 구상하게 되었다. React를 이용한 정적 페이지로 구상할 것이며 모바일과 여러 브러우저에서 볼 수 있게 반응형을 고려하여 디자인하였다. 사용할 툴 Frontend - React (antd, react-bootstrap, react-router-dom@6, styled-component ... ) Figma 와이어프레임 메인 페이지, 보유 스킬을 정리한 페이지, 프로젝트 모아보기, 간단한 학력 및 자격사항 보기와 이력서를 제공한다. 프로토타입 Demo : https://www.figma.com/proto/YSRBnB0dqFIWAVLQpXe0nm/Untitled?node-id=0%3A1..

  • format_list_bulleted 프로젝트/프로젝트 기획
  • · 2023. 1. 12.
  • textsms
[React] React SPA - Slide Template + 반응형 Nav menu

[React] React SPA - Slide Template + 반응형 Nav menu

React SPA - Slide Template 슬라이드 형태 리액트 SPA 템플릿 무료 배포 Github : https://github.com/chalinuna/slide-template Demo : https://lambent-lily-149f31.netlify.app/ React App lambent-lily-149f31.netlify.app Preview 제작기간 : 2일 배포 : netlify 제작 언어 및 프레임워크 : React.js 상단 고정되어있는 Navbar와, 세로 슬라이드 형식으로 페이지를 이동할 수 있는 SPA 템플릿. 친구에게서 '상단에 메뉴가 고정되어있고, 메뉴를 누르면 슬라이드 형식으로 미끄러져 내려가듯이 페이지를 이동할 수 있는 템플릿을 만들어달라' 고 요청을 받아 간단히 ..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2023. 1. 11.
  • textsms
[프로젝트 기획 - 풀스택] 포트폴리오 소개 Figma 프로토타입과 ERD

[프로젝트 기획 - 풀스택] 포트폴리오 소개 Figma 프로토타입과 ERD

포트폴리오 소개 웹 - 풀스택 프로젝트 블로그는 토이 프로젝트들을 자세히 소개하는 공간으로 사용하고, 간단히 프로젝트들을 미리보기하며 바로 호스팅 페이지로 이동할 수 있는 포트폴리오 전용 웹 프로젝트를 제작하려 한다. 이를 위해 사용할 툴을 정리하고, 피그마로 와이어프레임을 만들었다. 또한 Figma에서 제공해주는 미리보기 툴을 사용해 프로토타입 링크를 제작하였다. 사용할 툴 Frontend - React Backend - Node.js Exrpess DB - MongoDB Server - AWS S3(이미지 호스팅) , 배포는 AWS EC2 또는 Cloud type 이용 예정 Figma 와이어프레임 회원가입, 로그인, 방명록 작성 및 수정, 삭제, 방명록 리스트 보기, 관리자가 업로드한 프로젝트 캐로셀..

  • format_list_bulleted 프로젝트/프로젝트 기획
  • · 2022. 12. 29.
  • textsms
4. [React + Express] 풀스택 보일러 플레이트 ( 회원가입, 로그인, 로그아웃, 회원 정보 수정, 게시글 CRUD )

4. [React + Express] 풀스택 보일러 플레이트 ( 회원가입, 로그인, 로그아웃, 회원 정보 수정, 게시글 CRUD )

무비 API 이용 풀스택 웹 프로젝트 소요 기간 : 12일 겪었던 문제들 : 에러 하나, 에러 둘, 에러 셋, 에러 넷, 에러 다섯 Github : https://github.com/chalinuna/Boiler 실제 사용 데모 영상 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useState, useEffect, useNavigate, useLocation, useParams, useSelector, useDispatch, Axios, Proxy(Http-proxy-middleware), Route, ReduxToolkit, redux-persist, react-quill, ArrayBuffer, Uint8Array, Blop, FormData, 등... ) Backend -..

  • format_list_bulleted 프로젝트/풀스택 프로젝트
  • · 2022. 12. 18.
  • textsms
4-8. [React + Node.js Express] 게시판 - 게시글 리스트, 상세보기, 수정, 삭제 ( React-Quill ) CRUD

4-8. [React + Node.js Express] 게시판 - 게시글 리스트, 상세보기, 수정, 삭제 ( React-Quill ) CRUD

풀스택 CRUD 포트폴리오의 마지막 단계, 게시글 리스트 불러오기와 상세보기, 수정 및 삭제 단계이다. 간단해 보여도 은근히 처리해야 할 부분들이 자잘하게 많다. 글을 작성한 작성자만 자신의 글을 수정 및 삭제할 수 있도록 버튼 노출 여부를 설정해 주어야 하고, 데이터가 렌더링 된 이후에 컴포넌트가 그려지도록 해야 한다. 또 ref를 이용해 저장했던 정보는 어떻게 참조해야 하는지도 알아보자. Frontend 먼저 게시글 리스트를 보여주는 페이지를 만든다. 각 제목을 클릭하면, 포스트의 _id를 백엔드로 보내 게시글 상세보기 페이지로 진입시킬 것이다. 하단의 페이지네이션은 아래 코드를 사용했다. 별도의 컴포넌트로 만들고 props를 이용해 값을 전달한 뒤, 게시글의 수에 맞는 만큼만 수를 증가시킨다. 온전..

  • format_list_bulleted 프로젝트/풀스택 프로젝트
  • · 2022. 12. 15.
  • textsms
반응형