본문 바로가기

Frontend

 (37)
[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("..
[Vue3] 상태 관리 라이브러리 Pinia Vue 컴포넌트는 이미 반응형 상태(=== 데이터)를 관리하고 있다.컴포넌트 구조의 단순화- 상태(State): 앱 구동에 필요한 기본 데이터- 뷰(View): 상태를 선언적으로 매핑하여 시각화- 기능(Actions): 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작 {{ count }}=> '단방향 데이터 흐름'의 간단한 표현상태 관리의 단순성이 무너지는 시점"여러 컴포넌트가 상태를 공유할 때" 1) 여러 뷰가 동일한 상태에 종속되는 경우- 공유 상태를 공통 조상 컴포넌트로 끌어올린 다음 props로 전달하는 것- 하지만 계층 구조가 깊어질 경우 비효율적, 관리가 어려워짐 2) 서로 다른 뷰의 기능이 동일한 상태를 변경시켜야 하는 경우- 발신(emit)된 이벤트를 통해 상태의..
[Vue3] Vue Router로 페이지 이동하기 Vue Router: Vue 공식 라우터https://v3.router.vuejs.org/kr/Vue Router 추가-  Vite로 프로젝트 생성 시 Router를 추가한다.- 서버 실행 후 Router로 인한 프로젝트 변화를 확인할 수 있다.-> Home, About 링크에 따라 URL과 새로 렌더링되는 화면이 바뀐다.- 프로젝트 구조도 변화된 것을 확인할 수 있다. -> App.vue 코드가 바뀌고, router 폴더 및 views 폴더가 생성된다. 1) App.vue- RouterLink: 페이지를 다시 로드하지 않고 URL을 변경하고 URL 생성 및 관련 로직을 처리한다. HTML의 a 태그를 렌더링한다.- RouterView: URL에 해당하는 컴포넌트를 표시한다. 어디에나 배치하여 레이아웃에..
[Vue3] 컴포넌트 간 통신 (props, emit) 동일한 사진 데이터가 한 화면에 다양한 위치에서 여러 번 출력될 수 있다.하지만 해당 페이지를 구성하는 컴포넌트가 여러 개라면 각 컴포넌트가 개별적으로 동일한 데이터를 관리해야 할까?그렇다면 사진을 변경해야 할 때 모든 컴포넌트에 대해 변경 요청을 해야한다.=> "공통된 부모 컴포넌트에서 관리하자" 부모는 자식에게 데이터를 전달(pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림(emit events)Props- 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성- 모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩(one-way-down binding) 형성부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됨자식 컴포넌트 내부에서 props를 ..
[Vue3] Lifecycle Hooks Lifecycle Hooks: Vue 인스턴스의 생애주기 동안 특정 시점에서 실행되는 함수-> 개발자가 특정 단계에서 의도하는 로직이 실행될 수 있도록 함 1. Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후 특정 로직을 수행하기  2. 반응형 데이터의 변경으로 인해 컴포넌트의 DOM이 업데이트된 후 특정 로직을 수행하기 Add 1 Count: {{ count }} {{ message }}  이외에도 다양한 hooks 함수들이 있다.https://vuejs.org/api/composition-api-lifecycleLifecycle Hooks 특징- Vue는 Lifecycle Hooks에 등록된 콜백 함수들..
[Vue3] watch watch() 함수는 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출한다.watch 구조watch(variable, (newValue, oldValue) => { // do something}- variable: 감시하는 변수watch 예시감시하는 변수에 변화가 생겼을 때 기본 동작 확인하기 Add 1 Count: {{ count }}  감시하는 변수에 변화가 생겼을 때 연관 데이터 업데이트하기 Message length: {{ messageLength }}

티스토리툴바