HB HB

목차 1. redux 기본 설정 2. redux 사용하기 : createStore, Provider, useSelector, useDispatch 1. redux 기본설정 npm i redux npm i react-redux // 리액트 외부 라이브러리인 redux를 리액트와 연결해주기 위해서 npm i react-devtools-extension // 개발단계에서 크롬에서 리덕스 개발자도구 사용하기 위해서 필요한 파일 1. useStore.jsx 2. reducer.js (보통 rootReducer와 +@로 나눠서 씀) 3. index.js (최상단에 Store 컴포넌트 삽입) 2. redux 사용하기 1. createStore를 사용하여 전역상태관리를 할 수 있는 store 객체를 생성함 create..

목차 1. react-router-dom 기본설정 2. 컴포넌트 작성 3. useNavigate 사용해보기 1. react-router-dom 기본설정 (1) 터미널에서 react-router-dom을 설치한다. npm i react-router-dom 컴포넌트 구조는 아래와 같다 index.js > App.jsx > Header.jsx(여기 페이지를 이동할 메뉴링크 삽입) + 페이지 별 최상위컴포넌트.jsx (2) App.jsx에서 react-router-dom 가져오기 import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom' 라우터를 나누는데 필요한 BrowserRouter, Routes, Route 를 가져온다. ..

1. 커스텀훅이란? 리액트에서 함수형 컴포넌트를 쓸 때 상태관리나 생명주기관리 등을 위해서 사용하는 것이 리액트에서 제공하는 useState, useEffect와 같은 내장 훅이다. 이런 훅을 개발자가 자기의 입맛대로 커스텀해서 사용하는 것을 커스텀 훅이라고 한다. 자주 사용하는 패턴이 있을 때 코드의 중복을 피하기 위해서는 각 패턴별로 필요한 처리를 별도의 파일로 빼두었다가 필요한 곳에서 import해서 사용하는 것이 효율적이기때문에 커스텀훅을 사용하는 것이 좋다. 이때문에 커스텀훅을 만들 때 가장 중요한 것은 재활용성이 높도록 작성을 하는 것이다. 오늘 배운 form 컴포넌트로 예를 들어보면 회원가입, 로그인, 글쓰기, 글수정 등등.. form엘리먼트를 사용하는 곳이라면 어디든 불러와 활용할 수 있게..

https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 목차 1. 리액트의 개념 1-1. 리액트란? 1-2. 기본 세팅 2. 리액트 시작하기 2-0. ReactDOM.render() 2-1. 컴포넌트 만들기(1) : Class 2-2. 컴포넌트 만들기(2) : Function 2-3. Props & State 2-4. lifecycle 1. 리액트의 개념 1-1. 리액트란? 자바스크립트 라이브러리... 이지만 프레임워크라고 해도 됨. 페이스북에서 만든 오픈소스 프로젝트 프론트엔드에서 사용자 인터페이스(UI)를 만드는데 사용됨 ..

1. 사전지식(1) : Buffer 2. 사전지식(2) : 암호화와 Hash 3. JWT 3-1. 개념 3-2. JWT로 로그인하기 1. Buffer 컴퓨터는 0과 1을 알아듣는다. 사람은 프로그래밍 언어로 코드를 짠다. 문자를 바이너리 데이터로 변환하는 것을 인코딩, 반대로 바이너리 데이터를 문자로 변환하는 것을 디코딩이라고 한다. 1byte = 2nibble = 8bit, 1nibble = 4bit 이 니블이라는 단위가 중요한 것은 1니블은 4bit, 즉 크기가 2^4로 16이기 때문이다. 1니블은 하나의 16진수로 변환이 가능하고 따라서 HEX코드를 나타내는 하나의 단위가 된다.(0~f) buffer의 개념역시 이와 관련되어 있다. Buffer란 Node.js 에서 제공하는 Binary 데이터를 담..

❗️ 수정 중 CREATE DATABASE homepage; // 데이터베이스 추가 SHOW DATABASES; // 데이터베이스 추가된 것 확인 USE homepage; // 데이터베이스 선택 SHOW TABLES; // (table = 엑셀파일의 sheet) 테이블목록 보기 CREATE TABLE member( // 테이블명 member name varchar(50), // name필드 - string 데이터타입 - 50byte까지 넣을 수 있음 id varchar(50), pw varchar(50), gender varchar(50) ); // 테이블 생성완료 (필드값만 있는 상태) INSERT INTO member(name, id, pw, gender) VALUES('hb', 'hbhb', '12..

목차 1. Mysql 설치하기 2. 데이터베이스의 구조 : 그림 3. SQL 문법 4. 웹서버와의 통신 ❗️수정중 brew install mysql brew --version brew services start mysql mysql_secure_installation mysql -uroot -p disallow root login remotely : 이거만 n함.... homebrew가 설치되어 있는 m1 맥에서 mysql을 다운받는법 터미널에서 brew install mysql 자동으로 m1맥에 맞는 mysql을 찾아서 다운로드 해줬다. 시간이 살짝 걸렸음. 설치가 완료된 후에는 mysql --version 으로 잘 설치가 되었는지 확인해보기 mysql Ver 8.0.28 for macos11.6 on..

1. HTTP 프로토콜 1-1. HTTP 프로토콜이란? 1-2. request, response 1-2. Connectionless & Stateless 2. 쿠키 2-1. 쿠키는 무엇이고 왜 필요할까? 2-2. 쿠키를 생성하는 방법 3. 세션 3-1. 세션은 무엇이고 쿠키와는 무슨 차이일까? 3-2. 세션을 사용해야 하는 이유 3-3. 세션을 생성하는 방법 1. HTTP 프로토콜 1-1. HTTP 프로토콜이란? HTTP ( Hypertext Transfer Protocol) : 인터넷 상에서 데이터를 주고받기 위해 서버/클라이언트 모델을 따르는 프로토콜(규약) HTTP는 어떤 종류의 데이터든 상관없이 모두 전송할 수 있다. HTML 문서, 텍스트, 이미지, 동영상, 오디오 등등 모두! 여러 종류의 데이..