개발자로 전향중

My bucketlist! 설치 프로그램 styled.component, router, App.js import { Route, Routes } from "react-router-dom"; import React from "react"; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from "./BucketList"; import styled from "styled-components"; import Detail from "./detail"; import {useDispatch} from "react-redux"; import {createBucket} from "./redux/modu..

평점 만들기! 3주차 개인과제 끝! 나중에 좀 더 보완하려고 노력할것임! import { Route, Routes } from "react-router-dom"; import React from "react"; import MyWeek from "./myweek"; import MyDay from "./myday"; import styled from "styled-components"; function App() { const data = [ { title: "월" }, { title: "화" }, { title: "수" }, { title: "목" }, { title: "금" }, { title: "토" }, { title: "일" }, ]; return ( 내 일주일은? ); } const Conta..

import { Route, Routes } from "react-router-dom"; import React from "react"; import MyWeek from "./myweek"; import MyDay from "./myday"; import styled from "styled-components"; function App() { const data = [ { title: "월" }, { title: "화" }, { title: "수" }, { title: "목" }, { title: "금" }, { title: "토" }, { title: "일" }, ]; return ( 내 일주일은? ); } const Container = styled.div` max-width: 350px; min-..

내장 함수란? 자바스크립트에서 자체적으로 제공하는 함수를 내장 함수라고 한다. 내장 함수는 이미 시스템에 정의되어 있기 때문에 사용자가 별도로 정의하지 않고 주어진 원칙에 따라 사용하면 되는 함수이다 함수 선언식 function do_something() { ... } 함수 표현식 // 함수 이름은 생략해도 괜찮아요! let do_something = function [함수 이름]() { ... } 화살표 함수 // 화살표 함수는 함수 표현식의 단축형입니다. // function까지 생력이 되었죠! let do_something = () => { ... } 👉 삼항 연산자는 if문의 단축 형태입니다. 사용법: 조건 ? 참일 경우 : 거짓일 경우 let info = {name: "mean0", id: 0}..

딱히 설명할 부분이 없어서 글로 진행합니다. JSX 안에서 혹은 그냥 일반 코드작성시 if문을 쓸 때가 매우 매우많습니다. 지금까지는 삼항연산자만 주구장창 사용했는데 또 어떤 if문들을 쓸 수 있는지 맛만 보고 지나갑시다. 그냥 코딩 스타일적인 부분이기 때문에 그냥 이런게 있다고 알아두시면 되겠습니다. 1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다. 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능합니다. if (어쩌구) {저쩌구} 이게 안된다는 소리입니다..

자바스크립트 반복문을 통해 DOM에 JSX을 렌더링하고 싶을 때 function App() { const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; return ...; } 아래처럼 컴포넌트 return문 안에서 for문은 못씁니다. // wrong function App() { const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; return ( { for ( let i = 0; i < weekArr.length; i++) { {weekArr(i)} } } ) } 방법은 두가지 1. return문에서 JSX를 반환하는 함수 호출 (JSX 루프 렌더링 시에 반드시 key값을..

yarn add react-router-dom 설치 index.js import React from 'react'; import ReactDOM from "react-dom"; import { BrowserRouter} from "react-router-dom"; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; // 이부분이 index.html에 있는 div#root에 우리가 만든 컴포넌트를 실제로 랜더링하도록 연결해주는 부분입니다. ReactDOM.render( , document.getElementById("root") ); // If you want to start measur..

만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 어떻게 접근해야할까? DOM에서 다루는 방법은 1주차에 배웠는데, 리액트에선 어떻게 하면 좋을까요? (render()가 끝나고 가져오면 될까요? 아니면 mount가 끝나고? 아니, 그 전에 가상돔에서 가져오나? 아니면 DOM에서? 😖) → 답은, 리액트 요소에서 가져온다! ->React 요소를 가지고 오는 방법1 : React.createRef() import React from "react"; import logo from "./logo.svg"; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from "./BucketList";..