'Javascript/React와 Node 같이 때려잡기' 카테고리의 글 목록

[React + Node 같이 때려잡기] (6) npm 리액트 로딩스피너 + 위치 도시 기반 날씨 앱 완성

2022.12.10

npm 리액트 로딩스피너 https://www.npmjs.com/package/react-spinners react-spinners A collection of react loading spinners. Latest version: 0.13.7, last published: 7 days ago. Start using react-spinners in your project by running `npm i react-spinners`. There are 714 other projects in the npm registry using react-spinners. www.npmjs.com npm install --save react-spinners Example import { useState, CSSPrope..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (5) react one-way data flow + 위치 도시 기반 날씨 앱 계속 making

2022.12.09

포스팅 위치 도시기반 날씨앱(4)에 이은 마무리 작업 App.js가 모든 로직을 다 갖고 있고, 컴포넌트에 보내주는 식으로 작업을 진행해보도록 한다. react one-way data flow 때문이다. 컴포넌트 형제끼리 데이터를 주고 받기가 상당히 어렵다. 리액트 특징 one-way reactive data flow https://tkssharma.gitbook.io/react-training/day-01/react-js-3-principles/one-way-data- The foundation of understanding component relationships in React and parent component hierarchy… Props stands for properties. It is ..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (4) 위치 도시 기반 날씨 앱 (api 연결 기초작업, UI작업 )

2022.12.07

1. 기능 명세서 //1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다. //2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태 //3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시) //4. 로딩 스피너 기능 추가 2. weather api https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, ..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (3) 리액트 클래스 컴포넌트, 라이프 사이클

2022.12.05

0. 한눈에 비교하는 클래스 컴포넌트 vs 함수 컴포넌트 1. 클래스 컴포넌트 생성 shortCut : rcc (함수 컴퍼넌트 생성은 : rafce : react arrow function component export) import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( AppClass ) } } function이 class로 바뀐 것을 볼 수 있다. AppClass.js : 클릭수를 보여주는 버튼 그리는 예제 import React, { Component } from 'react'; import './App.css'; export default class ..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (2) 리액트 가위바위보 게임

2022.12.04

리액트 가위바위보 게임 Box 2개 만들기(나 버전, 컴퓨터 버전) src 아래에 component 폴더 만들고 Box.js 만들어줌 컴포넌트 생성 단축키 : 컴포넌트 만드는 단축키 : rafce 단축키가 안나올 경우 설치 extention 컴포넌트 만들시 주의사항: 컴포넌트 이름은 반드시 대문자로 시작 리액트가 컴포넌트와 일반 HTML태그(,등..)을 구별하는 방법은 태그가 대문자로 시작하는지 여부이다 따라서 소문자로 시작을 하면 일반 HTML태그로 분류해버리기 때문에 반드시 첫 글자는 대문자로! App.js / Box.js / App.css 코드 (1) 유저가 선택할 수 있는 가위, 바위, 보 버튼 (2) 유저가 선택한 가위, 바위, 보 이미지가 보여지는 UI 세팅 (3) 컴퓨터 출력 가위, 바위, ..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (1) 리액트의 컨셉 state

2022.12.02

React! 는 값의 변화에 react 반응하다란 컨셉에 걸맞게 변수 값이 바뀔 때 마다 getElementById~ innerText~ 일일히 해주던걸 해주지 않아도 된다. 값이 변하면 UI도 자동으로 바꿔준다. -> State state가 변하면 UI가 변하게 한다. 터미널 프로젝트 만들고 싶은 폴더 생성 mkdir react-test cd react-test npx create-react-app 폴더명 나같은 경우는 npx create-react-app rsp 로 함 생성하는데 시간 좀 걸림. cd rsp code . 하면 바로 세팅된 비쥬얼 스튜디오 코드 프로젝트가 열린다. 1. App.js App.css 정리 App.css 파일 안에 있는 모든 내용 지워준다. 아래와 같이 정리해준다. impor..

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (6) npm 리액트 로딩스피너 + 위치 도시 기반 날씨 앱 완성

[React + Node 같이 때려잡기] (5) react one-way data flow + 위치 도시 기반 날씨 앱 계속 making

[React + Node 같이 때려잡기] (4) 위치 도시 기반 날씨 앱 (api 연결 기초작업, UI작업 )

[React + Node 같이 때려잡기] (3) 리액트 클래스 컴포넌트, 라이프 사이클

[React + Node 같이 때려잡기] (2) 리액트 가위바위보 게임

[React + Node 같이 때려잡기] (1) 리액트의 컨셉 state

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역