목록React (5)
앵코딩

Koa란? Node.js환경에서 웹 서버 구축시 Express, Hapi, Koa등 웹프레임워크를 사용함 Express 는 미들웨어, 라우팅, 템플릿, 파일 호스팅 같은 다양한 기능이 자체적으로 내장 Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리 적용하여 사용 => 필요한 기능들만 붙여 서버를 만들 수 있어 가벼움 async, await 문법을 정식으로 지원하여 비동기 작업이 수월 koa 프레임 워크 설치 npm add koa ESLint란? 문법 검사 도구이며 , 코드를 작성할 때 실수할 시 에러또는 경고 메시지를 에디터에서 바로 확인할 수 있게 해줌 npx eslint --init Koa 기본 사용법 // src/index.js const Koa = require("koa"); co..

ERROR 는 에러라 꼭 고쳐야하고 WARNING 은 경고 - 무시가능 /* eslint-disable */ // Lint를 꺼줌 , WARNNING메시지 안보이게 좋아요 버튼 & 갯수 UI 만들기 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [글제목,b] = useState(['여성 의류 추천','대구 분식집 추천','리액트 공부방법']); // a: state에 보관했던 자료 // b: state 변경을 도와주는 함수 let [like,setLike] = useState(0); // setLike - state변경함수 /..
import logo from './logo.svg'; import './App.css'; function App() { // return() 안에는 병렬로 태그2개이상 기입금지 return ( 블로그임 글제목 2월 17일 발행 ); } export default App; state 란? 자료 잠깐 보관할때 변수 저장 Destructuring 문법 // 여러가지 자료들을 한 곳에 보관하고 싶을때 array let num = [1,2]; // 따로 변수로 빼고 싶을때 let a = num[0]; //1 let c = num[1]; //2 let [d, f] = [1, 2]; // 쉽게 빼주려면 Destructuring 문법을 사용해서 빼줌 // 이렇게 선언시 d=1, f=2의 값을 가지게됨 state 만드..

처음 App.js 파일에서 중간 부분들은 지운 후 기본 상태에서 시작 import logo from './logo.svg'; import './App.css'; function App() { return ( {/* 이 안에 jsx문법 사용하여 작성 */} ); } export default App; JSX 란 ? javascript파일에서 html을 쉽게 작성할 수 있게 도와주는 언어 JSX문법 1. class 대신 className 사용 2. 변수를 넣을땐 {중괄호 사용} => 데이터를 꽂아넣는다 ( 데이터 바인딩 ) 3. style 넣을 땐 태그안에 style={{ 스타일명 : '값' }} import logo from './logo.svg'; import './App.css'; function Ap..

React를 사용하는 이유 1. Single Page Application 만들때 사용 => Javascript로 사용시 코드가 길고 복잡 2. Html 재사용이 편리 3. 같은 문법으로 앱개발 가능 ( ReactNative ) 개발환경 셋팅 1. Node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 프로잭트 생성 - 작업용 폴더 생성 후 shift + 우클릭 , PowerShell/터미널 열기 누름 npx create-react-app 파일이름 3. 미리보기 터미널에서 npm start 입력 프로젝트 파일 node_modules폴..