내마음대로만들어보자/React 프로젝트 만들기 이해20 [React] 최소단위 컴포넌트 만들기 - Image * 기본 뼈대코드 import React from "react"; import styled from "styled-components"; const Image = (props) => { return ( ) } Image.defaultProps = { } export default Image; 1. Image.js → 기획서에 바탕으로 반복되어 사용되는 이미지( 동그라미, 네모 )모양에 따라 적용되도록 최소단위 컴포넌트를 만들어보자. 2. 기본스타일잡기 Image.defaultProps = { shape: "circle", src: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg", size: 36, }; → 기본 모양, 기본 이미지, 크기 등을 .. 2021. 10. 31. [React] 최소단위 컴포넌트 만들기 - Gird 1. 최소단위 컴포넌트 만들기 준비 * 최소 컴포넌트 단위에 기본 스타일을 잡아줄거기때문에 패키지를 우선 설치해주자. yarn add styled-components 2. Grid 잡기 그리스 시스템은 기획서에 나와있는 동일한 여백 등을 처음에 잡아준다면 매 페이지 마다 수정해 줄 필요가 없다. * 예제 코드 import React from "react"; import styled from "styled-components"; const Grid = (props) => { const { is_flex, width, margin, padding, bg, children } = props; const styles = { is_flex: is_flex, width: width, margin: margin, p.. 2021. 10. 31. React 프로젝트 기획서 만들고 구조잡기 1. 프로젝트 기획서 만들기 프로젝트의 화면을 공유하고 현업에서 사용하는 툴을 가지고 기획서를 만들어보자. https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 2. 컴포넌트 쪼개기 컴포넌트를 쪼개는경우 너무 작게 쪼개면 만들기힘들고 너무 크게 쪼개면 재활용이 어렵다. ※ 반복되는 부분을 찾자. → 예를들어, 게시글, 댓글, 상단 메뉴바 등등 반복되는 부분들은 컴포넌트로 빼주는게 좋다. 유저프로필처럼 여러군데에서 자주 쓰인다면 한.. 2021. 10. 26. React 프로젝트 생성 1. nvm 설치 → nvm은 (Node Version Manager) 이름에서 알 수 있듯이 노드 버전 관리자이다. ※ 설치 참고 링크 https://grepper.tistory.com/2 NVM (Node Version Manager) 설치 (in mac) 맥 초기화 후 진행했던 NVM 설치를 통한 Node.js 세팅 과정에 대해 남기겠습니다. NVM 이란 ? (Node Version Manager) 이름에서 알 수 있듯이 노드 버전 관리자입니다. 설치는 mac 용 패키지 관리자인 homebrew grepper.tistory.com nvm 을 통해 다양한 노드버전을 한 시스템에 설치해서 사용할 수 있다. 2. node 설치 node install [node version] node use [node .. 2021. 10. 25. 이전 1 2 3 4 5 다음
