전체 글

React & Node.js 연동하기

이 포스트를 쓰기 전에 여러 블로그 포스트를 보고 왔습니다. https://velog.io/@autumndr3ams/210802-React-Node.jsexpress-연결하기 https://baegofda.tistory.com/210 https://baegofda.tistory.com/211 일단 Node.js 가 설치되어 있다는 가정하에 진행을 하겠습니다. 1. 일단 작업 할 폴더(testReact)를 만든 뒤 cmd 또는 파워쉘을 키고 npx create-react-app client 를 쳐줍니다. 다음과 같이 나왔다면 제대로 설치된 것 입니다. 2. 그럼 폴더에 client 폴더가 있을건데 전 testReact 라는 폴더에 만들었으니 testReact 라는 폴더안에서 커맨드 창을 열고 server을..

[ React & Node ] Book-Reports-App - 1. Setting

저는 Inflearn 사이트에서 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 라는 강의를 보고 Todo List 프로그램을 만들어 보았지만 뭔가 부족한 느낌이 들었습니다. 그래서 Book Reports[독후감] app 을 만들어 볼려고 합니다. 일단 기능에 대해 생각을 해볼려고 하는데 FE 부분 부터 생각을 해보자면, 기술 스택은 React + Node.js 를 사용할 예정이며 DB는 mysql을 사용하고 ORM 을 적용을 해볼것입니다. 1. 책 이미지를 넣을 공간이 필요합니다. 2. Author (작가) 를 기입할 공간이 필요하다. 3. 독후감 이기에 책에 대해 comment(설명 또는 후기)를 적어야 합니다. 4. 별점 (이 책을 읽고 나의 별점) 을 넣을수 있어야 합니다. ..

React - Props

보통 처음에 state를 배우고 나면 props 개념을 배우게 됩니다. props는 보통 상단 componet에서 하단 component에게 이름을 붙여 값을 전달하는 방식이며 여러 데이터를 넘길수 있습니다. Props를 사용하는 이유는 상단 컴포넌트에서 하단 컴포넌트에게 데이터를 이동시켜주기 위함입니다. App.js import React from "react"; import MyHeader from "./components/MyHeader"; import Counter from "./components/Counter"; function App() { return ( ); } export default App; Counter.js import React, { useState } from "react";..

React - State

전에 봤던 vanilla js 의 counter 프로그램을 React로 만든다고 한다면, App.js import React from "react"; import Counter from "./components/Counter" function App() { return ( ); } export default App; 기본적으로 Counter 이라는 Component 를 이용하여 count increment, decrease 를 하는 코드를 만들어 볼것입니다. Component.js import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () ..

React 왜 배우는 것 일까?

일반 html로만 사이트를 만든다면 분명 존재하는 수많은 중복 html 코드들이 존재 할 것입니다. 예를 들자면 header, footer, aside 등등의 공통된 코드들을 수도 없이 늘려본 경험이 다들 있을 거라고 생각이 됩니다. React는 그런 중복 코드들을 줄이고자 Component로 만들어 버립니다. [코드 재활용] Component 기반의 UI 라이브러리라고 불리기도 합니다. 간단한 예시로 다음 코드를 보면 될 것 같습니다. Simple Counter 0 Minus Plus Vanilla JavaScript를 쓰셧던 분들이라면 자주 보셧을것 같습니다. 일단 counter 이라는 프로그램을 간단하게 만들어 볼 것인데 간단한 프로그램임에도 난잡한 코드가 된 것을 볼 수 있습니다. 다만 코드가 조..