DGeon DGeon

유틸함수 프로젝트안에 여러곳에서 쓰는 유틸함수들은 src/lib에 관리 한다 usePromise 기본 API상태를 관리해주는 파일이다. 대기 , 완료, 실패 API호출 시 사용한 loading 대기 : loading을 보여준다 완료 응답값을 반환 resolved 실패 : error타입을 반환 error 코드 import { useEffect, useState } from 'react'; export default function usePromise(promiseCreator, deps) { //대기 중/완료/실패에 대한 상태 관리 const [loading, setLoading] = useState(false); const [resolved, setResolved] = useState(null); con..

13장 라우터란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미 합니다 여러페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한것이 라우팅 시스템이다 라우터 종류 리엑트 라우터 Next.js 리액트 프로젝트의 프레임워크 입니다. 프로젝트 설정기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 기능 제공 싱글페이지 애플리케이션이란? 하나의 페이지로 이루어진 애플리케이션이란 의미 입니다 히스토리까지 관리해준다 터미널 yarn create react-app router-tutorial cd router-tutorial yarn add react-router-dom in..

node_modules에서 라이브러리 불러오기 터미널 yarn add open-color include-media oc는 open-color가 있어야 한다 터미널에 추가 해야 한다 .SassComponent{ display: flex; background: $oc-gray-2; @include media('

서블릿 라이프 사이클 서블릿 로딩 서블릿 인스턴스 생성 init() 메서드 한 번 호출 각 클라이언트 요청에 대하여 반복적으로 service() 메서드 호출 destroy() 메서드 호출 웹소켓 라이프 사이클 연결(Connecting): 클라이언트가 서버에 연결을 시도합니다. 이 단계에서는 클라이언트가 웹 소켓 엔드포인트로 HTTP 헤더를 사용하여 연결 요청을 보냅니다. 핸드셰이크(Handshaking): 서버는 클라이언트의 연결 요청을 받고 웹 소켓 프로토콜을 인식합니다. 서버는 클라이언트와 핸드셰이크를 수행하여 프로토콜 버전, 압축 방법, 인증 등의 세부 사항을 협상합니다. 개방(Open): 핸드셰이크가 성공적으로 완료되면 서버와 클라이언트는 연결이 개방됩니다. 이제 양방향 통신을 할 수 있습니다. ..

4장 컴포넌트 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성합니다 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다 DOM요소에만 이벤트를 설정할 수 있습니다. div, button, input, form, span등에 설정 할 수 있습니다 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없습니다. 리액트에서 지원하는 이벤트 종류 clipboard composition keyboard focus form mouse selection touch ui wheel media image animation transition onChange 코드(hello-react-EventPractice.js) import React from "react"; const E..

state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. (변수) 두 가지의 state가 존재 클래스형 컴포넌트가 지닌 state 함수 컴포넌트에서 useState라는 함수를 통한 state 코드(p104) constructor안에 있는 this.state가 초깃값 설정한다 여러개를 선언 할 수 있다. import React, { Component } from "react"; class Counter extends Component { constructor(props) { super(props); //초기값 설정(여러개해도 상관 없음) this.state = { number: 0, fixedNumber: 0, }; } render() { const { number, fixedN..

React 오직(View)만 신경쓰는 라이브러리이다. Virtual DOM 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML으로 작성 합니다 Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. 마치 실제 DOM의 가벼운 사본 느낌 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링 합니다 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다. 바뀐 부분만 실제 DOM에 적용합니다 기타 특징 리액트는 오직 VIew만 담당합니다. 라이브러리 입니다. 번들러(bundler) 여러개의 자바스크립트를 하나로 묶어주는 것이고 도구로는 Webpack이 대표적이다 css-loader css파일을 불러온다 fil..