분류 전체보기

AWS 한번에 회원가입부터 실행까지 (작성중)

목차 AWS( Amazon Web Services )란? 특징 환경 설정 AWS가입 node 설치 1. AWS( Amazon Web Services )란? 아마존의 자회사이며 클라우드 서비스를 제공하고 있다. 직접 서버 장비인 랙을 구매하여 가동하는 방식은 비용이 많이 들기 때문에 비효율적이고 서버 장비도 비싸기 때문에 개인이 사용하기 버거워 AWS 같이 클라우드 서비스를 이용해 AWS의 클라우드를 통해 원하는 시간과 자원을 이용할 수 있다. AWS는 단순히 사이트 이름이고 AWS사이트 안에 여러 가지 제품들이 존재한다 1-1 특징 아마존 웹 서비스의 주요 서비스 Amazon EC2 리눅스나 윈도우 환경의 컴퓨팅 자원을 가상 서버로 제공합니다. 기존의 서버 운영 환경과 가장 닮아있는 서비스 Amazon ..

React - Next

목차 Next 기본 세팅 디렉토리 생성 pages jsx파일생성 render .next생성 바벨설정하기 _app.jsx _document.jsx 라우팅 동적 라우팅 getServerSideProps Server Side Rendering Link 1. Next 기본세팅 npm init -y Json 파일생성 npm install react react-dom next react 와 react-dom 그리고 next 설치 next react react-dom 설치 확인 "scripts":{ "dev":"next dev -p 3003", "build":"next bulid", "start":"next start" } Json 파일에 추가 해줘야 함 1-1. 디렉토리 생성 1-2 pages 디렉토리 생성inde..

REDUX

dispatch를 실행하게되면 store 변수에 createStore안에있는 initialState함수가 실행되면서 나오는 내용이 const initialState = (state,*action*) => { return{ name: 'aa22' } } 결과값 {type:'change_name'} 목차 설치 redux를 사용하는 목적 redux로 상태를만들기 상태를 바꿔보자. createStore: function dispatch subscribe getState initialState 이녀석의 역할을 뭘까 ? applyMiddleware : function combineReducers : function 설치 npm init -y npm install redux 더보기 { "name": "redux", ..

정규표현식(작성중)

정규 표현식 1960년도 글자의 패턴을 찾는 문법 웬만한 프로그램에서 가능 SQL에서도 가능 폼체크 정규표현식을 만드는 방법 const re = /hello/ 패턴을 찾을거야 /text/ //안에 text를 찾을거야 라는 뜻 const re = /world/ const soure = 'Hello world' const result = re.test(source) console.log(result) 일치하는 정보를 반환 result: true 일치정보를 boolean 형태로 반환 /world/만 하면 Hello ingoo Hello world /world/g 히면 Hello ingoo Hello ingoo const re = /world/ const source = 'Hello world Hello wor..

React-Router_DOM(작성중)

npm install react-router-dom 버전업이 된지 v6 - 2021-12-17 버전이 올라갈때마다 다른 라이브러리들이 바뀐다. v4 v5넘어갈때마다 크게바뀐다.. Next Router context API 사용할때 최상위에 오려놓고 시작해야함 Router 세팅을 App컴포넌트 안에서 끝내야함 메뉴구성시작 Routes 메뉴하나당 쓸수있는 Route import {BrowserRouter as Router,Link,Routes,Route } from 'react reuter-dom' BrowserRouter as Router최상위로 올라간다 App.jsx HOME Counter Comment Login 이부분에 작성 App.jsx HOME Counter Comment Login App.jsx..

react 커스텀 훅

처음에 열나게 하고 나중에 재활용해서 쉽게쉽게쓰자 처음만들때만 힘들지만 나중에는 편하게쓸수있다. react에 단순한 컴포넌트를 생성했다면 이제는 기술적인것들 label React.useState('')//이함수가 실행될때[result > [ '' , ] React.useState('hello')//이함수가 실행될때[result > [ 'hello' , ] React.useState('hello')//이함수가 실행될때[result > [ 'hello' ,()=>{} ] import React,{ useState } from "react" const Form = () => { const [userid,setUserid] = useState('') const [password,setPassword] = use..

React 댓글기능(작성중)

React 를 이용한 댓글 작성을 위한 목차 컴포넌트 구조 children CommenForm 컴포넌트에 Input 박스와 button 버튼추가 App 컴포넌트에 가라데이터 주기 App컴포넌트의 state값을 CommentList 에서 props받기 props받은 데이터를 브라우저에 랜더시키기 등록 버튼을 눌렀을때 내용을 가져올수있게하기 Comment.css 더보기 *{margin:0; padding:0;} body{ font-family: 'Noto Sans KR', sans-serif; font-weight:300; } ul,li{ list-style:none; } .comment{ display:flex; flex-direction: column; flex-wrap: nowrap; padding:3..

React 틱택토

틱택토 게임은 두 명이 번갈아가며 O와 X를 3×3 판에 써서 같은 글자를 가로, 세로, 혹은 대각선 상에 놓이도록 하는 놀이이다. 이 게임을 구현하기위한 단계를 하나하나 작성해서 써볼 예정 컴포넌트 Game : Board, Square컴포넌트의 부모컴포넌트 Board : Square컴포넌트에서 버튼엘리먼트를 만들었다면 9개의 버튼을 만들어주고 이벤트를 주기 위한 컴포넌트 Square : 버튼 엘리먼트를 만드는 컴포넌트 class Square extends React.Component{ render(){ return( 버튼 ) } } class Board extends React.Component{ render(){ return( ) } } class Game extends React.Component{..

[React] Component, props, State

목차 Component props State Component 데이터가 바뀌면 컴포넌트가 다시실행된다. 컴포넌트를 작성할때 첫글자는 대문자로 해야한다. component는 props를 받고 state상태에 따라 출력함. 데이터(props)가 바뀌면 화면이 바뀐다(리액트의 모토) 컴포넌트는 리액트의 핵심 UI구축하는데 편하다. JavaScript 함수와 유사하다 class 컴포넌트 class App extends React.Component{ render(){ return( Hello react ) } } props 데이터 : props state 화면: 컴포넌트(component) 데이터가 바뀌면 컴포넌트가 다시실행된다. 변경이 불가능하다. props는 properties(속성)의 줄임말 부모 컴포넌트가..

React

목차 React 란? JSX babel React문법 ReactDOM.render React.Fragment React 란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 출처 : 위키백과 리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.[3][4][5] ko.wikipedia.org React안에 react 는 메타(페이스북)이 만든거 jsx 다른사람이 만든 babel을 활용해서 메타(페이스북)이 만든거 React-dom 메타(페이..