리액트 공부 - launch chrome against localhost / 투두리스트 만들기

vs 코드 내에서 리액트 실행 오류 

여기서 설정을 눌러 launch.json을 url 8080에서 3000으로 바꿔도 안됨..

 

*

한번 실행됐던 파일의 경우 

폴더 불러오면 

vs 코드 내 터미널에 폴더가 이미 거기로 들어가져있어서

yarn start 명령하면 

실행되는데...

---

 

일단 투두리스트를 제대로 된 구조로 만들어보자 

https://velopert.com/3480

 

컴포넌트 폴더에 제작 시작!

 

const TodoListTemplate = ({form, children}) => {

    return(

        <main className="todo-list-template">

            <div className="title">

                오늘 할 일 

            </div>

            <section className="form-wrapper">

                {form}

            </section>

            <section className="todos-wrapper">

                {children}

            </section>

        </main>

    );

};

 

이걸로 틀 생성 

 

 

 

 

 

*

특정 div에 다른 js파일의 형식 넣을 때?

 

1 임폴트 

import Form from './components/Form';

 

2 폼 넣기 

<TodoListTemplate form={<Form/>}>

 

-근데 이건 사전에 form 자리를 정해놨기 때문 (todolisttemplate.js에서)

            <section className="form-wrapper">

                {form}

            </section>

---

그래서 나도 일단 react1010에다 하고있는데 이거 주요 js, css 등은 

component 폴더로 옮김 ( 이때 image 파일 경로를 다시 줘야하는데 안줘서 한번 오류남 )

 

---

 

나중에 리액트 스프링 연동할 때 참고 

https://joshua-dev-story.blogspot.com/2020/01/react-spring.html

---