Front-end/React (34) 썸네일형 리스트형 npx, npm차이점 설명 최근에 리액트를 배우기 시작했을 때, 나는 많은 사람들이 (나를 포함해서) 잘 알려진 npm대신 npx를 보고 헷갈려하는 것을 보았습니다. 우리중에 몇몇은 이상하다고 느꼈지만 별로 깊게 생각하지 않았고, 나머지는 그것은 오타라고 생각하고 npx대신 npm으로 "고쳐서" 애를 먹었습니다. 이러한 일이 몇 번 일어나고 나서 이 문제를 설명할 필요가 있다고 느꼈습니다. 그것이 바로 나와 같은 오해를 가진 이들을 위해 이 글을 쓴 이유입니다. 오타가 아니고, npx! npm말고.😃 NPM 우리가 매우 잘 알고 있듯이, npm은 Node.js의 의존성과 패키지 관리를 위한 패키지 매니저입니다. 우리의 프로젝트에 누군가 패키지 의존성을 설치할 때 짠! 하고npm install을 실행함으로써 package.json파.. React - VScode and Chrome Settings https://github.com/john-smilga/VS-CODE-SETUP john-smilga/VS-CODE-SETUP Contribute to john-smilga/VS-CODE-SETUP development by creating an account on GitHub. github.com settings.json 추가하기 "emmet.includeLanguages": { "javascript": "javascriptreact" }, Udemy강좌 시작 ( React Tutorial and Projects Course ) React Tutorial and Projects Course React에 대한 이해를 높이기 위해 Udemy강좌수강을 시작했다 강의 50시간이라는 것이 압박이긴하지만 가장 높은 평점과 이미 검증된 강의기 때문에 React의 이해도를 높이고 자유자재로 사용하기 위해서는 꼭 수강해야해한다고 생각했다 fetch 란? fetch 란? fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다. 기본 구조 fetch(url) .then(res => { console.log(res) }) .catch(error => { console.log(error) }) 기본적인 구조와 동작은 Promise 객체와 동일하다. 파라미터로 요청을 보낼 url을 입력해 주고 응답을 받아서 추가적인 작업 또한 해줄 수 있다. then에서 응답 객체 res를 받고, catch에서 에러 요청이 발생했을 때, 에러를 받는다. 요청 정보 파라미터 fetch.. props란? props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다. 예제를 통하여 이에 대하여 알아보겠습니다. props 추가하기 컴포넌트에서 immutable (변하지 않는) 데이터가 필요 할 땐, render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고, 컴포넌트를 사용 할 때, 괄호 안에 propsName="value" 를 넣어 값을 설정합니다. Header 컴포넌트와 Content 컴포넌트가 props를 사용하도록 업데이트 해보겠습니다. Header.js import React from 'react'; class Header extend.. JSX란? 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다! 어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다. "React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰) 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다. 다음의 예제를 보자. HTML이 .js의 변수에 저장되어 있다. 변수에.. Rendering이란? html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다. 엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. (공식문서) React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다. 위의 그림을 보면 전체 H.. React 강의 by 동빈나 https://youtu.be/s2knmog2j1U?list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB 이전 1 2 3 4 5 다음
