본문 바로가기

부트캠프교육중301

클라이언트-서버 아키텍처 # 클라이언트-서버 아키텍처 = 2티어 아키텍처 client server architecture (2 tier architecture) -리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨것. -리소스가 존재하는곳(리소스를 제공하는 곳): 서버 -리소스를 사용하는 앱: 클라이언트 -클라이언트와 서버는 요청과 응답을 주고받는 관계이다. -요청이 선행되고 그 후에 응답이 온다.(요청이 있어야만 응답이온다) (서버 마음대로 클라이언트에 리소스를 전달하지 않는다.) #데이터베이스 - 리소스를 저장하는 별도의 공간, 창고같은곳 -서버는 데이터베이스에 있는 리소스를 전달해주는 역할(서버는 전달해주는 역할만 담당) -2티어 아키텍처 + 데이터베이스 = 3티어 아키텍처 -데이터베이스도 데이터제공자로서 일하므로 서버.. 2023. 1. 30.
react 데이터흐름 # react의 개발방식의 가장 큰특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다!! #상향식(bottom-up)으로 앱을 만든다 -먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다 -상향식의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. -그래서 앱의 디자인을 전달받고나면, 컴포넌트 계층구조로 나누는 것이 가장 먼저 해야할일이다! #데이터를 전달하는 주체는 부모컴포넌트가 된다. 이는 데이터 흐름이 하향식(top-down)임을 의미한다. 데이터는 위에서 아래로 흐른다. 리액트는 단방향 데이터 흐름(one way data flow)을 따른다. #state는 최소화하는 것이 가장 좋다. state가 많아질수록 애플리케이션은 복잡해진다. #이러면 state가 아니다 -부모로부터 props를 통.. 2023. 1. 26.
controlled Component 리액트가 state를 통제할수있는 컴포넌트를 controlled Component라고한다. 트윗은 받는 사람 정해져있다 보내는 사람은 변경될수있다 내용도 변경될수있는 값 상태가 된다. react가 state를 통제하는방법 => input에 값입력시, state도 그때그때 바뀌면(onchange)된다. 그리고 이 변경된 state와 input의 value 또한 같게 작성해야한다. import "./styles.css"; import React, { useState } from "react"; export default function App() { const [username, setUsername] = useState(""); const [msg, setMsg] = useState(""); return .. 2023. 1. 26.
이벤트처리 #DOM의 이벤트 처리방식과 유사하다. 몇가지 문법차이만있다. -react에서 이벤트는 소문자 대신 카멜 케이스를 사용한다. -JSX를 사용하여 문자열이 아닌 함수로 이벤트처리 함수(이벤트 핸들러)를 전달한다. HTML Event React Event input, textarea, select와 같은 폼엘리먼트는 컴포넌트의 state로 관리하고 업데이트한다. onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽어올수있다. onChange는 input의 텍스트가 바뀔때마다 발생하는 이벤트이다. 이벤트가 발생하면 handleChange함수가 작동하며, 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state로 갱.. 2023. 1. 26.

티스토리툴바