개발일지

json-server란 간단한 DB와 API 서버를 생성해 주는 패키지입니다.우리가 json-server를 사용하는 이유는 백엔드에서 실제 DB와 API Server가 구축될 때까지 프론트엔드개발에 임시적으로 사용할 mock data를 생성하기 위해 사용합니다!json-server를 통해 프론트엔드에서는 백엔드가 하고 있는 작업을 기다리지 않고, 프론트엔드의 로직과 화면을 구현할 수 있어 효율적으로 협업할 수 있습니다. 설치방법yarn add json-serveryarn add json-server json-server 실행하기json-server가 간단한 패키지이긴하나, 간이 백엔드 서버입니다. 그래서 리액트와는 별개로 따로 실행을 해주어야 합니다.1. 루트와 같은 경로에서 db.json파일 생성하기2..

동기 처리서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 a작업의 진행이 모두 끝날 때까지 대기 후 b작업을 시작한다."일의 순서"가 중요한 경우 동기처리 비동기 처리반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 즉 a작업이 시작하면 동시에 b작업이 실행된다."일의 순서"가 중요하지 않은 경우, 효율적인 일 처리를 위해 비동기 처리

이용하는 홈페이지의 메인화면에서 스크롤을 많이 내렸을 때 한 번에 올라갈 수 있는 기능을 하는 버튼을 오른쪽 하단에서 본 적이 있을 것입니다. 이 기능을 사용하면 홈페이지를 이용하는데 편리함을 더해 줄 수 있겠죠? 그래서 오늘은 브라우저를 300만큼 내렸을 때 top버튼이 나오면서 맨위로 올라가는 기능을 하는 버튼을 만들어보겠습니다!import { useEffect, useState } from 'react';import { StUpIcon } from './UpButton.styled';function UpButton() { const [upButton, setUpButton] = useState(false); useEffect(() => { const handleShowButton = () ..

오늘은 useState기능을 응용하여 간단한 todolist를 만들어 보았습니다! 구현기능input으로 입력값 받아서 list추가하기list 취소버튼, 완료버튼list 삭제하기구현해 보기1. useState import 하고 state 만들기import { useState } from "react";const List = () => { const [input, setInput] = useState(""); //... 2.  브라우저에 보이는 부분을 return안에 작성해 주고 state변경함수를 만들어 필요한 곳에 적용시켜 준다.import { useState } from "react";const List = () => { const [input, setInput] = useState(""); //..