쑥쑥자라기🌱

1. 스크립트 등록 $ npm set-script 스크립트이름 "명령어" 2. 스크립트 실행 $ npm run 스크립트이름 등록한 스크립트는 package.json에서 확인할 수 있다.

1) Fetch API Fetch API는 서버와 통신하기 위해 사용하는 XMLHttpRequest의 대체제이다. XMLHttpRequest보다 훨씬 사용법이 간단하고 서비스 워커 등 다른 기술을 쓸 때 손쉽게 엮어 사용할 수 있다. fetch()는 구식 브라우저에서는 돌아가지 않는다. fetch() fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스는 반환된다. 이 프라미스를 사용해서 fetch()를 호출한다. // url – 접근하고자 하는 URL // options – 선택 매개변수, method나 header 등이 여기에 들어간다. let promise = fetch(url, [options]) fetch() 사용법 get const callSomething = async () =..

1) 서버와 클라이언트 동작 방식 서버와 클라이언 클라이언트는 요청을하고 서버는 응답을 한다. 서버와 클라이언트는 REST API를 통해 소통한다. 클라이언트는 REST API를 호출하고 서버는 응답을 보내준다. 2)XMLHTTPRequest XMLHttpRequest 객체는 서버와 통신하기 위해 사용하는 객체이다. 달리 말하면 브라우저는 XMLHttpRequest를 이용해서 Ajax 요청을 생성하고 전송한다. 이때, 서버가 브라우저의 요청에 대한 어떤 응답을 돌려주면 같은 XMLHttpRequest 객체가 그 결과를 처리한다. XML뿐만 아니라 JSON, text 등 모든 종류의 데이터를 받아오는데 사용할 수 있다. HTTP 이외의 프로토콜도 지원한다.(file,ftp) XMLHTTPRequest 객체..

Mock API를 만들고 테스트하기 위해서는 POST MAN이라는 프로그램이 필요하다. https://www.postman.com/downloads/ [포스트맨 설치 링크] 1) Rest API란? REpresentational State Transfer API의 약어이다. 소프트웨어 개발 아키텍쳐의 한 형태로, 클라이언트와 서버 사이 통신 방식 중 하나이다. RESTful은 REST API를 제공하는 웹서비스를 말한다. REST 구성 자원: URI 행위: Http method(GET, POST, PUT, DELETE) 표현: JSON, XML, ...(대부분의 경우 JSON을 주고 받는다.) REST 특징 클라이언트 - 서버 구조 무상태성 캐시 처리 기능 자체 표현 구조 계층화 인터페이스 일관성 2) ..

1) 상태관리 흐름 (1) 리덕스 Store를 Component에 연결한다. (2) Component에서 상태 변화가 필요할 때 Action을 부른다. (3) Reducer를 통해서 새로운 상태 값을 만들고 (4) 새 상태값을 Store에 저장한다. (5) Component는 새로운 상태값을 받아온다.(props를 통해 받아오니까 다시 랜더링된다.) 2) Redux 리덕스는 상태관리 라이브러리이다. (전역 상태관리를 편하게 할 수 있다.) (1) State 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각해도된다.)를 state라고 부른다. 딕셔너리 형태({key}: value) 형태로 보관한다. (2) Action 상태에 변화가 필요할 때(= 가지고 있는 데이터를 변경할 때) 발생하는 것. // 액..

1) React.createContext(): 데이터를 저장할 공간 만들기 const MyStore = React.createContext(); 2) 데이터를 가져다 쓰는 방법 - Context.Provider 데이터를 주입하기 Provider는 Context를 구독한 컴포넌트들에게 데이터가 변했다고 알려준다. 여러 컨텍스트가 있다면 중첩해서 사용해도 된다. - Context.Consumer 주입한 데이터를 구독하기 Consumer는 컴포넌트가 context를 구독하게 해준다. function App() { // Context의 Value는 App 컴포넌트에서 관리 const [name, setName] = useState("유정"); return ( {(value) => {return {value.na..

1) 상태관리란? 상태관리는 전역 데이터 관리이다. 렌더링과 연결된 데이터를 컴포넌트끼리 주고 받기는 생각보다 어렵다. 이런 번거로움을 줄여주기 위해 전역 데이터를 만들고 관리해주는 것이 리액트에서 말하는 상태관리이다. 형제 컴포넌트끼리 데이터를 주고 받기 위해서는 1. 부모 컴포넌트에서 state를 생성하고 자식 컴포넌트들에게 props로 데이터와 state를 변경할 함수를 넘겨준다. 2. 자식 컴포넌트에선는 props로 받아온 값을 참조해서 쓰고, 값 변경이 필요한 경우는 넘겨받은 함수로 해당 값을 변경해준다. 3. props drilling 많이 사용하는 상태관리 툴 ContextAPI() Redux Recoil zustand react-query mobx 2) 전역 저장소는 필요하지 않을 수 있다..

1. async 함수 앞에 async를 붙여서 사용한다. 항상 프라미스를 반환한다. (프라미스가 아닌 값이라도, 프라미스로 감싸서 반환해준다.) // async는 function 앞에 써준다. async function myFunc() { return "프라미스를 반환해요!"; // 프라미스가 아닌 것을 반환한다. } myFunc().then(result => {console.log(result)}); // 콘솔로 확인 2. await async와 함께 쓰인다. (async 없이는 못쓴다.) async 함수 안에서만 동작한다. await는 프라미스가 처리 될 때까지 기다렸다가 그 이후에 결과를 반환한다. async function myFunc(){ let promise = new Promise((reso..