본문 바로가기

분류 전체보기

 (370)
[React] fetch()로 API 호출 (GET, POST, PUT, DELETE) fetch() 사용 방법fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); - 첫 번째 인자로 API의 url, 두 번째 인자로 옵션 객체를 받고 옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다. 응답 객체(response) 객체로부터는 HTTP 요청 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다. - Promise 타입의 객체를 반환한다. API 호출이 성공했을 경..
[React] useEffect를 사용하여 mount/unmount/update시 작업 설정하기 useEffect란?컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 한다.컴포넌트가 mount/unmount/update 됐을 때 특정 작업을 처리할 수 있다. useEffect의 첫 번째 인자는 함수(effect), 두 번째 인자는 배열(deps)이 들어간다.useEffect(effect, deps);컴포넌트가 mount 될 때렌더링 결과가 DOM에 반영된 직후에 함수가 호출된다.import { useEffect, useState } from "react";export default function DayList() { const [days, setDays] = useState([]); useEffect(() => { console.log("change"); }); return ..
[React] json-server json-server란?빠르고 쉽게 REST API를 구축해준다. 주로 프로토타입을 만들거나, 공부 목적으로 사용하는데 프로덕션용으로는 부적합하다.더미데이터 파일(data.json) 만들기{ "days" : [ {"id":1, "day":1}, {"id":2, "day":2}, {"id":3, "day":3} ], "words" : [ { "id":1, "day":1, "eng":"book", "kor":"책", "isDone":false }, { "id":2, "day":1, ..
[React] 라우터 구현(react-router-dom) react는 프레임워크가 아닌 라이브러리이므로 vue나 angular처럼 내장 라우팅을 지원하지 않는다. 따라서 router 라이브러리를 별도로 설치해 사용해야 한다. 터미널에 다음 명령어를 입력해 react-router-dom 라이브러리를 설치한다.npm install react-router-dom  라우터 사용법은 아래와 같다. react-router-dom에서 BrowserRouter, Routes, Route를 import한다. BrowserRouter로 App 전체를 감싸고 Routes로 url에 따라 달라지는 컴포넌트(Route)들을 감싼다. Routes로 감싸지 않은 컴포넌트는 모든 페이지에 보여지게 된다. Route는 path 속성에 경로, element 속성에 해당하는 컴포넌트를 지정한다..
[React] props를 통해 컴포넌트에 값 전달하기 props는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 age라는 값을 전달해주려면 다음과 같이 코드를 작성하면 된다.// App.jsimport "./App.css";import Hello from "./component/Hello.js";function App() { return ( );}export default App;// Hello.jsimport { useState } from "react";export default function Hello(props) { const [name, setName] = useState("..
[SSAFY] SSAFY 11기의 1학기 수료 후기 SSAFY 합격 후기를 작성할 때가 엊그제 같은데 벌써 1학기가 끝났다..! (시간이 참 빠르다 🫢)오늘은 한 학기동안 SSAFY를 다니면서 배운 것들과 느낀 점을 정리해보려 한다.   기억에 남는 경험들 1. 스타트캠프와 입학식1/2 ~ 1/12 첫 2주간 스타트캠프가 진행되었다. 디자인사고, 아이디어톤, 로봇퀘스트 등 코딩에 대한 흥미를 높일 수 있는 다양한 활동을 했다. 임시반에서 만난 친구와 같은 반이 되지 않더라도 좋은 인연으로 이어질 수 있고 2학기 때 프로젝트를 함께 하게 될 수도 있으니 적극적으로 다가가는 걸 추천한다. 반 배정이 되고, 자기소개를 했던 시간이 가장 기억에 남는다. 싸피인답게 html, css, javascript로 자기소개 페이지를 만들어 발표했는데 내가 만든 페이지가 ..
[Vue3] 상태 관리 라이브러리 Pinia Vue 컴포넌트는 이미 반응형 상태(=== 데이터)를 관리하고 있다.컴포넌트 구조의 단순화- 상태(State): 앱 구동에 필요한 기본 데이터- 뷰(View): 상태를 선언적으로 매핑하여 시각화- 기능(Actions): 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작 {{ count }}=> '단방향 데이터 흐름'의 간단한 표현상태 관리의 단순성이 무너지는 시점"여러 컴포넌트가 상태를 공유할 때" 1) 여러 뷰가 동일한 상태에 종속되는 경우- 공유 상태를 공통 조상 컴포넌트로 끌어올린 다음 props로 전달하는 것- 하지만 계층 구조가 깊어질 경우 비효율적, 관리가 어려워짐 2) 서로 다른 뷰의 기능이 동일한 상태를 변경시켜야 하는 경우- 발신(emit)된 이벤트를 통해 상태의..
[Design Pattern] MVVM 패턴 MVVM 패턴이란?- Model-View-ViewModel의 약자이다.- View와 Model 사이에 중간 레이어로 ViewModel을 두어 View와 Model의 결합도를 낮추어 유지보수성을 향상시킨다. Model- 데이터와 비지니스 로직을 담당하는 부분- 데이터를 가져오고 저장하는 역할 수행- 보통 데이터베이스, 네트워크 요청 또는 파일 시스템과 같은 여러 데이터 소스와 상호작용함 View- 사용자 인터페이스를 담당하는 부분- 사용자가 보는 화면을 표시하고, 사용자 입력을 처리- 보통 마크업 언어를 사용하여 디자인됨 ViewModel- View와 Model 사이에서 중재자 역할 수행- View에서 발생하는 이벤트를 감지하고, 해당 이벤트에 맞는 비지니스 로직을 수행- Model과 상호작용하여 데이터를..

티스토리툴바