개발일기

Axios Axios는 JavaScript 및 Node.js용으로 만들어진 HTTP 클라이언트 라이브러리로, 웹 브라우저 및 Node.js 환경에서 HTTP 요청을 보내고 응답을 처리하는 데 사용됨 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 http를 이용해서 서버와 통신하기 위해 사용하는 패키지 GET / POST / DELETE / PATCH // GET // 서버의 데이터를 조회할 때 사용 axios.get(url[, config]) // POST // 서버에 데이터를 추가할 때 사용 axios.post(url[, data[, config]] // DELETE // 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용 axios.delete(url[, config]) ..

JSON Server 가상의 RESTful API를 생성하여 가상의 데이터를 관리하고 제공함 프론트엔드 애플리케이션을 개발할 때 가상 API를 사용하여 데이터를 테스트하고 개발할 수 있도록 도와줌 설치하기 yarn add json-server 설정하기 프로젝트 루트 디렉토리에 db.json 파일을 생성하고 가상 데이터 입력 // db.json { "posts": [ { "id": 1, "title": "제목1", "body": "내용1" }, { "id": 2, "title": "제목2", "body": "내용2" } ] } 실행하기 yarn json-server --watch db.json --port 3001

LifeCycle react hooks useState State를 만들 때는 useState()를 사용 const [ value, setValue ] = useState( 초기값 ) useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App;

Redux Toolkit JavaScript 애플리케이션의 상태를 관리하기 위한 상태 관리 라이브러리 Redux를 사용할 때 발생하는 반복적이고 복잡한 작업을 간소화하고, 보일러플레이트 코드를 최소화 Redux Toolkit 주요 기능 configureStore Redux 스토어를 설정하는 함수로, 설정 및 미들웨어를 간단하게 구성할 수 있음 createSlice Reducer와 액션을 한 번에 생성하는 함수로, 슬라이스라고 불리는 작은 Redux 모듈을 쉽게 만들 수 있음 createAsyncThunk 비동기 작업을 처리하는 데 사용되는 함수로, Redux Thunk와 통합하여 API 호출과 같은 비동기 작업을 쉽게 처리할 수 있음

Event.stopPropagation() 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지 예시 - div2에 evet.stopPropagation()가 없으면 div2 부분을 클릭했을 때도 onClick={closeModal}이 실행됨 evet.stopPropagation()}> 닫기 Hello 참고 https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation Event.stopPropagation() - Web API | MDN Event 인터페이스의 stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, sto..

position: fixed 상위 요소에 영향을 받지 않아 고정된 위치 설정 가능 스크롤과 상관없이 항상 화면에 보임 위치를 지정하기 위해 top, right, bottom, left 속성을 사용하여 원하는 위치로 이동시킬 수 있음 예시 - Slectwrap의 overflow: hidden;이 DropDiv2에만 적용됨. - DropDiv1은 position: fixed; 적용으로 영향받지 않음 // styled components const Slectwrap = styled.div` border: 2px solid lightgray; height: 220px; margin: 40px 5px 5px 5px; padding: 0px 3px; position: relative; overflow: hidden..