DGeon DGeon

3장 프론트엔드 개발 Node.js 자바스크립트 런타임 환경 구글 크롬의 v8 자바스크립트 엔진을 실행한다 npm node.js의 패키지 관리 시스템이다 터미널 npm version 교재는 8.5.0 버전 mkdir test-project cd test-project npm init npm install react npm install 프론트 엔드 어플리케이션 생성 프론트쪽 폴더 생성 후 mkdir react-workspace cd react-workspace npx create-react-app todo-react-app cd todo-react-app npm start localhost:3000 구동확인 npm install @mui/icons-material @mui/material @emotion..

REST API 반복되는 문제 상황을 해결하기 위한 도구이다 제약조건 클라이언트-서버 리소스를 관리하는 서버가 존재하고, 다수의 클라이언트가 리소스를 소비하기 위해 네트워크를 통해 서버에 접근하는 구조를 의미한다 상태가 없음 클라이언트가 서버에 요청을 보낼 때 이전 요청의 영향을 받지 않음을 의미한다. Login페이지에서 다음 페이로 넘어갔을때 이전요청페이지를 알고 있으면 상태가 있음 반대면 없음 캐시가능한 데이터 HTTP에서는 cache-control이라는 헤더에 리소스의 캐시 여부를 명시할 수 있다. 일관적인 인터페이스 시스템 또는 애플리케이션의 리소스에 접근하기 위한 인터페이스가 일관적이여야 한다는 뜻 리소스에 접근하는 방식, 요청의 형식, 응답의 형식이 애플리케이션 전반에 걸쳐 URI, 요청의 형..

유틸함수 프로젝트안에 여러곳에서 쓰는 유틸함수들은 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..