Be Front-End Programmer Be Front-End Programmer

React 개발을 도와주는 확장 프로그램 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 582858083e on 8/24/2021. chrome.google.com

1. 설치 Visual Studio Code 콘솔 창에서 아래 명령어 입력 npm i react-icons 2. 패키지 설치 확인 package.json "dependencies": { "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.2.0", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" }, "react-icons": "^4.2.0", 3. 사용 선언 import { FaTimes } f..

https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us

REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스 REST는 프로토콜이나 표준이 아닌 아키텍처 원칙 세트 웹의 장점을 최대한 활용할 수 있는 네트워크 기반의 아키텍처 Create - POST Method Read - Get Method Update - Put Method Delete - Delete Method https://www.redhat.com/ko/topics/api/what-is-a-rest-api REST API(RESTful API, 레스트풀 API)란 - 서버, 구현, 사용법 REST API(RESTful API)란 REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻합니다. api 서버, rest api 구현 및 사용법을 설명합니다. ..

필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다. 페이지 새로 고침 없이도 가능. 구식 브라우저에선 지원하진 않지만(폴리필을 쓰면 사용 가능) 대부분의 모던 브라우저가 지원합니다. fetch() 기본 문법은 다음과 같습니다. let promise = fetch(url, [options]) url – 접근하고자 하는 URL options – 선택 매개변수, method나 header 등을 지정할 수 있음 options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드 됩니다. fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환됩니다. 반환되는 프라미스는 fetch()를 호출하는 코드에서 사용됩니다. POST ..

비동기적 어떤 행동을 하려고 할 때 사용한다. 실행은 동기적으로 되지만, 실제 처리(성공, 실패)는 비동기적으로 처리된다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDN Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. developer.mozilla.org

useEffect 변형(Mutations), 구독(subscriptions), 타이머(timers), 로깅(logging) 또는 다른 부작용(side effects)은 (React의 렌더링 단계에 따르면) 함수 컴포넌트의 본문(body) 안에서는 허용되지 않습니다. 만약 이를 수행한다면 그것은 매우 혼란스러운 버그 및 UI의 불일치를 야기하게 될 것입니다. 대신에 useEffect를 사용하세요. useEffect에 전달된 함수는 화면에 컴포넌트가 그려진 후에 수행되게 됩니다. 기본적으로 동작은 모든 렌더링이 완료된 후에 수행됩니다만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있습니다. https://ko.reactjs.org/docs/hooks-reference.html Hooks API Refere..

백엔드 구축하기가 번거롭거나 간단하게 서버와 연동해서 테스트 할 때 사용하자 https://ibks-platform.tistory.com/382 [JSON-Server] 코딩없이 Mock Restful API 서버 만들기 개요 안녕하세요 남산돈가스입니다. 오늘은 json-server라는 npm모듈을 소개해드리려고 합니다. 화면연동 시 서버 API가 없는 상태에서 미리 mock데이터로 연동이 필요하다던지 등 샘플용 API가 필요 ibks-platform.tistory.com