본문 바로가기

분류 전체보기

 (61)
Buttion.jsx를 받아오는 App.jsx import React from "react"; import { Button } from "./components/"; function App() { return ( {/* primary 색상 버튼, 크기 별로 확인 */} kjs kcc abc {/* secondary 색상 버튼, 크기 별로 확인 */} asdf qwer zxcv {/* teritiaty 색상 버튼, 크기 별로 확인 */} Button BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON ); } export default App;
Button.jsx /** @jsx jsx */ import { jsx, css } from "@emotion/core"; import PropTypes from "prop-types"; // 버튼 컴포넌트 const Button = ({ children, onClick, color = "primary", size = "medium", variation, width, }) => { console.log(color); return ( {children} ); }; // 스타일 설정 함수 const setStyle = ({ color, size, variation, width }) => { // 색상 객체 const COLORS = { primary: "#774836", secondary: "#82363A", teritiaty..
파일경로 브랜치가 보이는 순간 신경써야된다 그전에는 경로를 보는 것 브랜치가 브랜치 안에 있는 파일들을 관리해준다 (파일들은 당한다) 폴더 파일 브랜치 3개가 있고, 폴더 안에 잇는 파일들을 브랜치로 폴더 안에 있는 파일들을 제어관리한다.
공부 중 의문사항 집 테스크탑에서 브랜치 불러오기 했는데 웹페이지 랜더링이 안된다. 그리고, Button.jsx 파일에 노트북에 수정 & 커밋한 내용이 반영이 안 되어 있다. (이건 내가 깃헙에 안 올려서?) 수정사항 확인해보고 싶은데 확인을 못 함, 무슨 에러인지 모르겠음 git hub에서 다른 사람 파일을 받아오면 yarn은 파일이 너무 커서 install이 안되어있다. 처음에 다른 사람꺼를 받아왔을 때는 미구동 상태니까 구동을 시켜주면 정상적으로 렌더링 할 수 있다. node_modules에서 확인할 수 있다.
2020/04/14 React 숙제 내용물 콘솔로그로 출력하고 싶을 때 사용한다. 원격저장소에 있는 것을 포킹한 것을 내가 받아온 것.
리액트 프로젝트 시작 components 가 porps를 모아 놓는 곳 containers 가 state를 모아 놓는 곳 pages 웹 페이지를 모아 놓는 곳 assets 이미지랑 색깔 관련 모아 놓는 곳 library 계속 반복되는 함수가 많이 있는데 그것을 모아 놓는 곳 . 은 내 폴더라는 의미 컴포넌트가 없으면 index.js로 만든다 불러올 때, 초기 설정만 해놓으면 되게 편하다. @emotion/core 리액트용 css library이다. "dependencies" 에서 내가 받은 파일 목록을 볼 수 있다. sass에서 & { } 이것의 자기 선택자(class)를 뜻한다. & { } 안에서 값 설정한거 하나하나 따로 스타일링 가능하다. 우리가 만든 것은 속성 : 값도 마음대로 설정 가능 App이 최상위고 그 안에 B..
나의 첫번째 리액트 컴포넌트 React를 설치하고 나서, 이제 VScode를 통해서 실행시켜준다. cd 내 파일경로명, yarn start로 서버를 가동시켜준다. 그러면 동글동글 돌아가는 리액트가 나온다. 이건 개발자가 만들어 준 거기 때문에 이제 나의 컴포넌트를 새로 만들어보자 바벨이란 도구를 사용해서 JSX문법이 JS로 전환이 된다. import와 expoert 로 주고 내보내기가 가능하다. JSX에서 주석을 사용하는 경우에는 /* */ 기존처럼 주석을 사용할 수 있지만, 여기에 { } 중괄호로 한번 더 감싸주어야만 화면에 출력되지 않고, 제대로 된 주석이 작성이 가능하다. 또한 // 셀프클로징 주석도 사용이 가능하다. JSX에서 지켜져야 할 규칙 태그는 꼭 닫혀야 한다! or 이런식으로 해줘야만 에러가 발생하지 않는다.
Getter 와 Setter 함수 Setter 함수에는 파라미터를 설정해줘야 사용을 할 수 있다.

티스토리툴바