node.js

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", ..

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 메타(페이..

node.js AJAX

node.js butter , Hash ,JWT

목차 Butter 아스키코드 Hx butter란? hash 암호화 양방향 단방향 salt JWT JWT의 형태 로그인 과정 JWT코드 1. butter Hx (헥스) Hx = 헥스 헥스는 16진수이다 8bit = 1byte 8bit는 2 니블로 표현할 수 있다 니블이라는 단위는 4비트 말하는 것이다 4bit가 2개라서 2 니블이라 말한다. 4bit는 16가지 의 데이터 가짓수를 만들 수 있다. 1 니블이 16진수를 표현할 수 있다. 8비트는 2 니블이니까 16진수 2자리로 8byte를 표현할 수 있고 1byte로 두 자릿수로 표현할 수 있는 게 16진 수다 사진에서 Hx에 2자리 숫자로 나오는 것 ingoo라는 값을 변수로 넣어서 buf라는 변수에 buffer에 name값을 보낸다 buffer buffe..