전체 글

[자바스크립트] axios

Axios 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)애서는 XMLHttpRequest를 사용한다. 특징 브라우저를 위해 XMLHttpRequests생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이트 지원 XMLHttpRequests(XHR) XHR 객체는 서버와 상호작용할 때 사용한다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터는 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의..

[리액트] Components

🎀 Components 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 한다. 처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있지만, 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타낸다. UI 일부가 여러 번 사용되거나(Button, Panel, Avatar), UI 일부가 자체적으로 복잡한(App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋다. 😚 컴포넌트의 이름은 항상 대문자로 시작한다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 ..

[리액트] JSX 문법

🎀 JSX 란? JavaScript를 확장한 문법이다. React에서는 본직적으로 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 관신사의 분리 : 컴퓨터 과학에서 관심사 분리는 컴퓨터 프로그램을 별개의 섹션으로 분리 하기 위한 설계 원칙이다. React는 JSX 사용이 필수는 아니다. 🎈 JSX에 표현식 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; fu..

[리액트] Router

리액트는 SPA(Single Page Application) 방식 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다. 1) Router 분배하는 기능을 수행하는 소프트웨어나 하드웨어 대표적인 라우터로는 아이피공유기가 있다. React의 Router는 URL에 의해 컴포넌트를 분배하는 기능을 한다. HTML5에서 Javascript에 추가된 기능중 history객체를 통해 URL을 변조하는 기능이 있다. 리액트의 Router는 이 기능을 활용하여 현재 페이지의 URL을 다양하게 변조하여 거기에 각각의 컴포넌트를 분배한다. 2) SPA 개발의 장점 페이지 이동 없이 JS에 의해 화면이 갱신되므로 실제로 네트워크 통신이 발생하지 않아 실행 속도가 빠르다. 3) SPA 개발의..

[리액트] 시작하기

개발환경 구성하기 1) Node.js 설치확인 window 명령프롬프트 실행 : Winkey + R > cmd (엔터) 명령어 수행 : node --version MacOS 터미널 실행 : cmd + space > terminal (엔터) 명령어 수행 : node --version 결과값이 출력되지 않을 경우 설치 설치하기 https://nodejs.org 에서 프로그램 내려받아 설치. 대부분의 경우 LTS 버전 권장. Mac M1 버전의 경우 17 이상 버전 필요함. 설치 완료 후 열어두었던 명령프롬프트나 터미널을 종료하고 재시작. 앞서 수행한 버전확인 명령어를 통해 설치 완료 확인. 2) yarn npm install -g yarn 3) visual studio code 작업시 도움되는 extensi..