IT_susu

1. 액션 타입 정의하기 액션명은 대문자 변수에 담고, 내용은 '모듈이름/액션이름' 형태의 문자열로 작성합니다. 모듈 이름을 넣는 이유는 나중에 프로젝트가 커졌을 때 액션의 이름이 충돌되지 않게 해주기 위함입니다. 2. 액션 생성 함수 만들기 실제로 동작할 때는 동작하는 곳에서 액션 생성함수를 넣어서 사용하기 때문에 이들은 export를 시켜줍니다. 3. 초기 state와 리듀서 함수 만들기 switch case문을 사용하여 action.type별로 어떤 state로 바꿔서 변환할 것인지 로직을 작성합니다. 4. 루트 리듀서 만들기 원칙적으로 프로젝트 하나당 스토어가 하나이므로 combineReducer를 활용하여 리듀서들을 합쳐줍니다.

헤더란? http 통신 시 부가적인 정보를 전송. 헤더의 종류 General header: 요청과 응답 모두에 적용되지만 바디에서 최종적으로 전송되는 데이터와는 관련이 없는 헤더 Request header: 패치될 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더 Response header: 위치 또는 서버 자체에 대한 정보와 같이 응답에 대한 부가적인 정보를 갖는 헤더 Entity header: 컨텐츠 길이나 MIME 타입과 같이 엔티티 바디에 대한 자세한 정보를 포함하는 헤더. 헤더의 내용들은 그때그때 추가~ Accept : 클라이언트가 받을 수 있는 컨텐츠 종류 Cookie: 쿠키 Content-Type: 메시지 바디 종류 Content-Length: 메시지 바디 길이

HTTP : 하이퍼텍스트 전송 프로토콜. 하이퍼미디어(HTML, 미디어 등) 문서를 전송하기위한 애플리케이션 레이어 프로토콜. 웹 브라우저와 웹 서버간의 커뮤니케이션을 위해 디자인 되었음. 클라이언트가 요청을 생성하기 위한 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델. 클라이언트(보통 브라우저) -> 메시지 전송 : request 서버 -> 메시지 전송 : response 웹은 계층적으로 설계되어 있는데 클라이언트와 서버 사이에 좀 더 많은 애들이 존재한다. 라우터, 모뎀 등은 네트워크와 전송 계층으로 숨겨지며 http는 애플리케이션 계층의 최상위이다. 따라서 네트워크 문제를 진단하는 것도 중요하지만 기본 레이어들은 http 명세와는 거의 관련이 없다. 클라이언트 사용자를 ..

정규표현식이란 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 쓰이는 형식언어 입니다. \B : 문자와 공백사이가 아닌 값 / /g : 문자열 내의 모든 패턴을 찾는다. ?= : (긍정형)전방탐색. ?=뒤에 올 것을 찾음 ?! : 부정형 전방탐색. 앞에서 지정한 것과 같지 않을 것을 찾음. d{number} : 숫자{몇 개} + : 하나 이상 찾기

전역적으로 사용할 데이터가 있을 때 유용한 기능 1) context 만들기 createContext함수를 이용해 생성. 인자값으로 기본 상태 지정. import { createContext } from 'react'; const ColorContext = createContext({ color: 'black' }); export default ColorContext; 2) consumer context를 사용하는 곳. render props 형태로 넘겨야 함 import React from 'react'; import ColorContext from '../contexts/color'; const ColorBox = () => { return ( { value => ( ) } ) } export defa..

이전했습니다. https://velog.io/@susu1991/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

1) 정의 브라우저의 요소들과 자바스크립트 엔진, var로 우리가 선언한 모든 변수까지 담고 있는 객체 브라우저 담당 - BOM 웹사이트 담당 - document 객체 - DOM 2) 속성들 수많은 속성이 있지만 몇개만 알아봅시다. navigator 브라우저나 운영체제에 대한 정보. serviceworker도 들어가 있음. screen 브라우저 창에 대한 정보. location 주소에 대한 정보. 주소에 대한 다양한 정보와 새로고침, 주소교체도 가능함. history 앞으로 가기, 뒤로 가기 등등. 브라우저 페이지 이동기록을 갖고 있다. 아마 html5에서 추가된 history.pushState(객체, 제목, 주소)와 history.replaceState(객체, 제목, 주소)를 가지고 react-rout..

1. URL 파라미터와 쿼리 사용법 1) URL 파라미터 URL이 /profile/sujeong과 같은 형식으로 이루어 진 것. match.params를 사용하여 URL에 있는 파라미터를 가져올 수 있다. import React from 'react'; const Profile = ({ match }) => { const { username } = match.params; } // App.js 2) URL 쿼리 URL이 /about?detail=true 와 같은 형식으로 이루어진 것. location.search을 사용하여 가져올 수 있다. 가져온 값은 문자열이다. 문자열은 값을 사용하기 불편하므로 qs 등의 라이브러리를 이용하여 문자열을 객체로 변환 후, 사용한다. 그러나 쿼리의 파싱 결과 값도 문자열..

application에 선언적이고 접근 가능한 탐색 기능 제공 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경. 1) to :string - 위치의 pathname, search, hash properties를 string으로 연결 :object - 다음 속성 중 하나를 가지고 있는 객체 pathname: 현재 path search: 쿼리 파라미터 표현(?...) hash: 해시 파라미터 표현(#...) state: location의 지속되는 상태 :function - location이 파라미터로 전달되고 location 표현을 문자열 또는 객체로 리턴하는 함수 ({ ...location, pathname: "/course..

- 정의 : location이 route의 path와 일치하면 렌더링하는 요소 - path 현재 위치의 pathname입니다. 일치하면 해당하는 컨텐츠를 렌더링하고, 맞지 않으면 null을 렌더링합니다. 하나의 컴포넌트에 여러개의 path를 연결하려면 배열로 값을 넘겨주면 됩니다.(리액트라우터v5이상~) path가 없으면 항상 일치합니다. - exact true이면 location.pathname과 정확히 일치해야만 인정합니다. - strict true면, 슬래시가 있는 경로는 슬래시가 있는 location.pathname과 일치해야만 인정합니다. location에 추가 url 세그먼트가 있는 경우에는 동작하지 않습니다. - sensitive true면, 대소문자를 구별합니다. - route가 컴포넌트를..