본문 바로가기

분류 전체보기321

KDT 5th 웹개발자 입문 수업 40일차 간단하게 백엔드 서버 구축해서 데이터를 프론트에 보내기 터미널 2개에 백엔드 서버와 리액트를 둘다 돌려준다. const express = require('express'); const cors = require('cors'); const server = express(); const PORT = 4000; server.use(cors()); server.get('/', (req, res) => { const pororoObjArr = [ { name: '뽀로로', age: '5', nickName: '사고뭉치', }, { name: '루피', age: '4', nickName: '공주님', }, { name: '크롱이', age: '5', nickName: '장난꾸러기', }, ]; res.send(JS.. 2023. 3. 31.
한입 크기로 잘라먹는 리액트 - 5 React 에서 API 호출하기 useEffect 를 사용하여 컴포넌트의 Mount 시점에 API 를 호출하고 해당 API 의 결과값을 일기 데이터의 초기값으로 이용 = fetch() 를 사용하여 API 를 호출 -> API 의 응답 데이터를 App.js 의 data 상태에 저장하여 초기화해주기 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonpla.. 2023. 3. 31.
KDT 5th 웹개발자 입문 수업 39일차 조건부 렌더링 컴포넌트를 상황에 따라 켜고 끄려면 -> 조건부 렌더링이 필요 원래 js, html 에서는 display 속성을 none 으로 처리해줬지만 리액트는 jsx 문법을 사용하므로 if 문/3항 연산자/논리 연산자와 html 태그를 같이 사용해주면 되므로 display 속성을 처리할 필요가 없다. export default function CoditionalState() { const [isVisible, setIsVisible] = useState(false); const toggle = () => { setIsVisible(!isVisible); }; return ( {isVisible ? 'Off' : 'On'} {isVisible && } ); } && 연산자를 사용하면 display 속성.. 2023. 3. 30.
한입 크기로 잘라먹는 리액트 - 4 전에 더미 데이터를 선언해주고 그 데이터만 일기 리스트에 보이게 만들었었다. 이번에는 이 더미 데이터를 없애주고, 직접 일기를 입력해준 내용이 나오게 만들어줘본다. 부모 컴포넌트인 App 에서 data를 관리하는 state 함수를 만들어주고 일기를 입력 받는 자식 컴포넌트에게는 해당 입력 필드의 값을 읽어서 데이터를 추가해줄 수 있는 setData가 포함된 함수를 넣어주고 일기를 보여주는 자식 컴포넌트에는 입력 받은 data 자체를 보내줘서 관리해준다. function App() { const [data,setData] = useState([]); const dataId = useRef(0); const onCreate = (author, content, emotion) => { const created.. 2023. 3. 30.

티스토리툴바