Ubuntu 20.04에 ReactJS를 설치하는 방법
이 튜토리얼에서는 Ubuntu Linux 시스템에 React 애플리케이션을 설치하고 생성하는 방법을 배웁니다. React.js 애플리케이션을 만들고 실행하려면 Node.js가 필요합니다. 다음 단계는 Ubuntu 시스템에 Node.js 14를 설치합니다. Ubuntu 시스템에 Node.js 14(현재 안정 버전) PPA를 추가합니다. 다음으로 다음 명령을 실행하여 Node.js를 시스템에 설...
javascriptReact2022-10 last update
7 minutes reading
(해결됨) – 페이지 새로고침 시 ReactJS 404 오류
전체 응용 프로그램을 제공하는 index.html 파일을 만듭니다. 모든 요청은 먼저 index.html에 대한 hist여야 합니다. 브라우저에서 하나의 하위 URL에 직접 액세스하는 경우 웹 서버는 해당 이름의 파일을 찾지 못합니다. 이 경우 404 오류 메시지가 사용자에게 반환됩니다. 프로덕션 ReactJS 애플리케이션의 하위 URL에 직접 도달하면 웹 서버에서 404 오류 메시지를 반환...
ReactReactJsError Code 4042022-10 last update
5 minutes reading
Windows에 Node.js를 설치하지 않고 환경 변수 설정을 변경하지 않고 Node.js + React 환경을 빌드하는 방법
Node.js를 이용할 기회가 늘어나고 있지만, 회사의 PC는 보안상 인스톨러를 이용해 자유롭게 소프트를 인스톨할 수 없다. 그 때문에, 인스톨러를 이용하지 않고 Node.js를 구축할 필요가 있다. 방법을 조사했으므로 그 내용을 간단히 이하에 정리한다. <다운로드 사이트> 여기에서는 현시점(2021/04/12)에서의 최신 LTS 「v14.16.1」을 이용하는 것으로 한다. 여기서는 「C:\...
환경 변수WindowsReactNode.js2022-10 last update
5 minutes reading
Windows10에서 VSCode+React+TypeScript 개발 환경 구축 순서(2021.08) ※이어서 eslint,prettier,prop-types도 인스톨
"VSCode React TypeScript"에서 구구하면 상당히 나오는데, 왠지, 내 환경이라면 잘 되지 않았습니다. 그래서 나 나름의 잘 가는 방법을 남겨 둡니다. VSCode에 React+TypeScript 개발 환경을 구축하고, 디버깅 할 때까지 목표로합니다. 프로젝트는 D:\Develop\react001 에 작성합니다. 다음은 명령 프롬프트에서 실행됩니다. 명령 프롬프트 다음과 같이...
ReactTypeScriptVSCode2022-10 last update
5 minutes reading
React 환경 구축 【Node.js의 인스톨로부터 Create React App까지】 ~macOS편~
본 기사는 macOS에서의 React 환경 구축을 해설한 기사입니다. Windows를 이용하고 있는 분은 이쪽을 봐 주세요. 웹 애플리케이션 개발을 시작할 때 Node.js를 설치합니다. 이미 Node.js가 설치되어 있는지 여부는 다음 명령으로 확인할 수 있습니다. 터미널을 열고 아래 명령을 입력해 봅시다. 아래와 같이 설치되어 있는 Node.js의 버젼이 표시되면, 이미 인스톨이 끝났으므...
환경 구축React자바스크립트TechpitNode.js2022-10 last update
6 minutes reading
React 환경 구축 【Node.js의 인스톨로부터 Create React App까지】 ~Windows편~
본 기사는 macOS에서의 React 환경 구축을 해설한 기사입니다. 웹 애플리케이션 개발을 시작할 때 Node.js를 설치합니다. 이미 PC에 Node.js 환경이 있다면이 부분을 읽어도 괜찮습니다. 이미 Node.js가 설치되어 있는지 여부는 다음 명령으로 확인할 수 있습니다. 터미널을 열고 아래 명령을 입력해 봅시다. 아래와 같이 설치되어 있는 Node.js의 버젼이 표시되면, 이미 인...
환경 구축React자바스크립트TechpitNode.js2022-10 last update
7 minutes reading
Arch Linux에 React Js 설치
다음 기사를 따라 보았습니다. 내 환경입니다. 1) 설치 확인 2) 애플리케이션 생성 다음과 유사한 파일이 생성됩니다. 3) 서버 시작 4) 브라우저에서 방문 서버에서 방화벽이 움직이면 중지합니다. 5) src/App.js를 개조합니다. src/App.js 6) 브라우저로 액세스 7) 좀 더 src/App.js를 개조합니다. src/App.js 8) 브라우저로 액세스 9) 공개 파일 만들기 ...
archLinuxReact웹2022-10 last update
8 minutes reading
이제부터 Gatsby 설치부터 정적 사이트 빌드까지
Gatsby는 다음 Wordpress라고도 불리는 React 기반 오픈 소스 프레임 워크. 초고속 웹사이트나 블로그, 앱을 쉽게 만들 수 있으며, 지금 가장 주목받고 있는 CMS 툴이기도 합니다. 여기에서는 Gatsby를 앞으로 시작하는 사람을 위해, 설치~정적 사이트의 빌드까지를 바꾸어 해설해 갑니다. 우선 환경의 체크. node는 11.10 이후로 할 필요가 있다. brew 사용하고 있었...
자바스크립트gatsbyReactNode.js2022-10 last update
5 minutes reading
React에서 QiitaAPI를 두드려 앱 만들기 입문
React 공부를 시작했기 때문에 시작에 API를 두드려 초간단한 앱을 처음부터 만들어 보는 연습을 했습니다. 이번에 사용한 API는 입니다. 작성한 앱은 에 있습니다. 어떤 API를 두드릴지 결정할 때 참고로 한 기사 앱을 만들 때 참고한 기사 create-react-app를 사용하여 앱의 병아리를 만들 수 있습니다. 이번에는 react-api-study라는 앱 이름으로 만들었습니다. 참고...
QiitaAPI초보자React2022-10 last update
12 minutes reading
gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링
이번에 실시하는 gatsby의 튜토리얼은 이쪽 GraphQL과 소스 플러그인을 사용하여 Gatsby 사이트로 데이터를 캡처하는 방법을 이해할 수 있습니다. 그러고 보면 GraphQL에 대해 그다지 잘 이해할 수 없었다. 글쎄요. 아무것도 돌진한 뒤에 이해하고 있다. 그것이 내 방식. 솔레가 올레노야 리카타. 소레카오레노리타카타. 빨리 가자. 소스는 만든 사람을 사용합니다. GraphiQL은 ...
자바스크립트gatsbyReactJSX2022-10 last update
11 minutes reading
gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역
이번에 실시하는 gatsby의 튜토리얼은 이쪽 튜토리얼의 시작 부분에 이렇게 썼습니다. 이 중요 이전 튜토리얼에서는 소스 플러그인이 데이터를 개츠비 데이터 시스템에 어떻게 캡처하는지 보여주었습니다. 이 튜토리얼에서는 변환 플러그인이 소스 플러그인이 가져온 원시 콘텐츠를 변환하는 방법을 배웁니다. 소스 플러그인과 트랜스포머 플러그인의 조합은 Gatsby 사이트를 구축할 때 필요할 수 있는 모든...
자바스크립트gatsbyReactJSX2022-10 last update
15 minutes reading
gatsby 입문 자습서 2. 개츠비 스타일링 개요
이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 스타일링의 개요를 알 수 있는 것 같습니다. Create a new Gatsby site 새로운 gatsby 사이트를 만듭니다. 다음을 실행gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-worldcd tutorial-part-two Add styl...
자바스크립트gatsbyReactJSX2022-10 last update
17 minutes reading
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2)
튜토리얼의 1.Get to Know Gatsby Building Blocks의 계속 에서 튜토리얼을 해 나갑니다. 구성 요소를 사용한 구축 components는 사용하는 느낌의 UI 부속이라고 하는 감각? Using page components src/pages/about.js를 만들어 다음을 설명 src/pages/about.js 만든 후 액세스http://localhost:8000/abo...
자바스크립트gatsbyReactJSX2022-10 last update
15 minutes reading
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1)
이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 빌딩 블록이라는 것을 알 수 있는 것 같습니다. , hello-world 사이트를 명령으로 만든 것처럼 다음 명령으로 gatsby 사이트를 만들 수 있습니다.gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]리포지토리 URL을 생략하면 다음이 기본입니다. VS Code로 만든 hell...
자바스크립트gatsbyReactJSX2022-10 last update
8 minutes reading
useState를 쓰면서 배우기 쓰면서 배우기 (React Hooks 입문 시리즈 4/6)
쓰면서 배우는 React Hooks 입문 시리즈로 새로 작성했습니다. React의 내장 훅인 useState 의 설명을 합니다. state 와 state 의 갱신 함수를 돌려주는 후크입니다. state 가 갱신되면(자) 컴퍼넌트는 재렌더링 됩니다. 카운트 앱 샘플 코드 카운트 앱 (setState의 업데이트 함수 인수에 함수를 전달하는 버전) 샘플 코드 => 로직을 구성 요소 밖으로 잘라낼 ...
자바스크립트React후크react-hooks2022-10 last update
17 minutes reading
useRef 쓰고 배우기 쓰고 배우기 (React Hooks 시작하기 시리즈 3/6)
React 16.8에서 추가된 기능인 React Hooks에 대해 썼습니다. 쓰면서 배우는 React Hooks 입문 시리즈로 새로 작성했습니다. React의 내장 훅이면 useRef 의 설명을 합니다. ref 객체 (React.createRef의 반환 값)를 반환하는 후크입니다. 이를 사용하면 DOM 참조 및 구성 요소 내에서 값을 유지할 수 있습니다. 값을 유지한다고 하는 점은 useSt...
자바스크립트React후크react-hooks2022-10 last update
11 minutes reading
【입문편】Vue에서 React에 입문해 보았다【그 ①】
직장에서 Vue 사용하고 있습니다. 일부 블로그나 기사에서 “React→Vue는 힘들지 않지만, Vue→React는 힘들다.”라고 말하는 것을 보았습니다. 라는 2점을 정리해 보았습니다. · 앱 도입 · 구성 요소 준비, 호출 node.js가 설치되어 있어야 합니다. 그건 그렇고, 나는 node -v12.17.0입니다. 앱 만들기 내용은 이런 느낌. 앱 시작 이런 화면이 나오면 도입은 되어 ...
ReactVue.js자바스크립트CompositionAPIreact-hooks2022-10 last update
16 minutes reading
React 입문 - Part5 - json 파일 불러오기, 보기
를 참고해 프로젝트를 작성해 주세요. 프로젝트 폴더 아래에 code.json라는 파일을 만듭니다. 내용은 json이라면 무엇이든 좋지만, 이번에는 아래를 사용합니다. pages 아래에 read-json.tsx라는 파일을 만듭니다. 터미널에서 yarn dev 를 실행하여 http://localhost:3000/read-json 에 액세스합니다. 아래와 같은 표시가 되면 OK군요. json의 어...
JSONReactTypeScript2022-10 last update
5 minutes reading
시작하기 - Part2 - Next.js를 사용하여 페이지 전환
Next.js(네쿠스토지에에스)는 React의 기능을 확장하기 위한 JavaScript 프레임워크입니다. Next.js를 사용하면 서버 측에서 페이지를 생성하는 서버 측 렌더링 (SSR)을 만들 수 있습니다. 서버측 렌더링을 실시해, 클라이언트측의 페이지 생성 처리를 줄임으로써, 보다 고속의 웹 페이지의 표시가 가능하게 됩니다. Next.js는 서버 측 렌더링 (SSR) 및 파일 기반 라우팅...
Reactnext.js2022-10 last update
8 minutes reading
【초AWS 학습】7분 - Cloud9・React 입문
자바스크립트 프레임워크인 React 개발 환경을 AWS의 Cloud9에서 구축합니다. 개발 환경의 가장 빠른 구축에 초점을 맞추어, 최소한 알아야 할, Cloud9의 작성·삭제와 React의 인스톨을 다루고 있습니다. 또한 Cloud9 네트워크의 이해를 돕기 위해 보안 그룹 설정을 변경하여 IPv4 공용 IP로부터의 연결에 대해서도 다룹니다. 브라우저에서만 코드를 작성, 실행 및 디버깅할 수...
Reactcloud9AWS2022-10 last update
4 minutes reading
GraphCMS로 ApolloClient3.0에 입문해 보았다
정말 그냥 포트폴리오 (카메라적인 의미로) 프런트 엔드 엔지니어가 ApolloClient에 입문하더라도, graphCMS는 의외로 꽤 좋을지도 모른다는 이야기. Contentful 같은 사람입니다. HeadlessContentsManagementSystem이라고 해서 VIEW가 없는 WordPress적인 것이라고 상상해 주시면 좋을까. 블로그 게시물 기능적인 것입니다. 그리고, 이 Graph...
아폴로GraphQLReactGraphCMS2022-10 last update
13 minutes reading
Reagent 시작 - Part5: Rente 설치
는 와 를 사용한 ClojureScript 프레임워크입니다. 서버와의 통신은 WebSocket과 Ajax, 를 사용할 수 있습니다. 덴마크의 라는 회사가 commit도 활발히 개발하고 있습니다. 에서 공개하고 있습니다. 이전 Docker 이미지는 버리고 새 프로젝트를 만듭니다. 한 달이 지나면 Clojure용 Dockerfile과 docker-compose.yml도 조금 바뀌었습니다. Doc...
ReactClojureReagentBootstrapClojureScript2022-10 last update
16 minutes reading
Angular2 입문①(환경 구축편)
AngularJS(Angular1)는 만지고 있었습니다만, React를 촉발한 이래, React 중심으로 개발하고 있었습니다. React 정말 좋아합니다만, Angular2가 나왔으므로 적정 시찰이라고 하는 일로 입문하려고 생각합니다. (아시알씨의 가 나온 것이 계기입니다.) 환경의 구축은, 엉망과 다소 어색할 것 같으므로, 우선 의 병아리형을 인스톨 해 움직여 보려고 합니다. Node.js...
AngularReactTypeScript자바스크립트Angular22022-10 last update
4 minutes reading
입문 React redux ~redux의 개념은 반복해서 사용할 수 있어요~
React에서의 프런트 어플리케이션 개발시에 세트로 취급되는 것이 많은 것이 이 redux입니다. A predictable state container for Javascript apps. 보다. 다음 4가지 특징입니다. · 예측 가능 · 중앙화 · 디버깅이 쉽다. · 유연한 왜 이것을 사용해야합니까? 한 컴포넌트에서 정의한 값을 다른 컴포넌트에서도 사용하고 싶은 경우에, React에서는 P...
Reactredux2022-10 last update
5 minutes reading
Firebase Emulator Suite를 설치하고 사용해 보았습니다.
저변 프로그래머 Masalib입니다. 자신의 블로그( )에 너무 액세스가 없기 때문에 Qiita에도 기재하게 합니다. Qiita에서는 별로 쓰지 않기 때문에 문화가 다르면 죄송합니다. 다운로드한 파일을 로컬 PC에 다운로드합니다. 제 경우에는 "C :\java\jdk-15"입니다 「Windows 키」＋「R」키로 파일명을 지정해 실행하는 화면을 표시하고 「control sysdm.cpl」을 입...
FirebaseReact2022-10 last update
12 minutes reading
create-react-app 명령을 사용하여 react를 설치하는 방법
먼저 node.js가 설치되어 있는지 확인하십시오. 버전이 나오면 OK! node.js를 설치하지 않은 사람은 아래 문서를 참조하여 설치하십시오. Node.js가 설치되면 npm을 설치합니다. 버전이 나오면 제대로 npm이 설치되어 있습니다. 설치되지 않은 사람은 이전 기사를 참고로 npm을 설치해보십시오! 만약, permission denied라는 에러가 나온 분은 아래의 커멘드를 실행해 ...
npm자바스크립트ReactNode.js2022-10 last update
4 minutes reading
Next.js & Tailwind CSS 입문
Next.js의 입문편을 정리해 보았습니다. Next.js는 어쨌든 서버 측에서 실행되는 ReactJS입니다. 이것을 기억하면 서버 사이드도 프런트 엔드도 React의 느낌으로 쓸 수 있을 것 같습니다. 여기의 공식 문서를 참고로 했습니다. 먼저 yarn에서 React 프로젝트를 만듭니다. 프로젝트 이름은 기본 my-app이었습니다. 만든 프로젝트 내에서 yarn을 사용하여 다음을 설치합니다...
ReactTypeScriptnext.js자바스크립트tailwindcss2022-10 last update
7 minutes reading