chez Manon

https://formik.org/ Formik React hooks and components for hassle-free form validation. The world's leading companies use Formik to build forms and surveys in React and React Native. formik.org Formik ? Formik is the world's most popular open source form library for React and React Native. > 회원가입같이 데이터를 입력해서 서버에 보내는 페이지를 react로 구현하다보면 state, eventhandler, validate 등의 여러 코드들이 많이 발생한다. 이런 form 형태의 ..

유저 비밀번호 암호화 🤷🏻‍♀️ 비밀번호는 어떻게 관리해야 할까? : DB에 저장 시 개인정보를 해싱하여 복원할 수 없도록 암호화해서 저장 해야 한다. ( DB가 해킹을 당해도 pw 그대로 노출되지 않으며, 내부 인력도 알 수 없도록 하기 위해서) 🤷🏻‍♀️ 암호화는 어떻게 할까? ✔️ 해쉬 함수? : input 넣으면 output이 빠르게 나오는 함수이다. (같은 input > 같은 output / 다른 input > 다른 output ) ( MD5, SHA-1 : 보안에 취약) , SHA-256 등이 있다. ✔️ 단방향 해쉬 ? : 원본 메시지를 변환하여 암호화된 메시지인 digest 다이제스트를 생성한다. ( 원본을 알면 암호화된 메시지를 구하기는 쉽지만, 암호화된 메시지로는 원본 구하기 어렵다. ..

strapi Bootstrap + API REST API를 쉽게 만들 수 있게 도와주는 Open source Node.js Headless CMS 툴이다. mongoDB와 연결 가능하고, GraphQL이 기본적으로 제공되어서 편리하게 백엔드 서버 구축가능하다. 🤷🏻‍♀️ CMS ? : Contents Management System 인터넷이나 컴퓨터 통신 등을 통하여 제공되는 정보나 내용물들을 관리하는 정의된 목적을 달성하기 위한 통합요소들의 집합체 ( Node.js로 만들어진 오픈소스 툴이며, backend부분만 있고 frontend부분은 없는 CMS ) strapi 특징 : 관리자 페이지 제공 (컨텐츠 관리, 모델링) REST API 및 GraphQL 사용가능 다양한 DB연동 ( mongoDB, po..

this의 여러뜻 1. window html파일에서 console.log(this) 찍어보면 window{....} 출력된다. function 함수 () {console.log(this)} 하고 함수를 호출해도 똑같이 window가 출력된다. (일반함수에서 this는 window 출력!) 🤷🏻‍♀️ window ? : window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다. document.getElementById( ), console.log( ) 등 이런 함수들을 보관하는 큰 {object}라고 생각하면된다. 또, 전역변수를 만들었을 때 이 값도 보관해주는 보관소! ( 전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범위가 넓은 변수이다. 걍 script내에서 변수만들면 ..

Ajax - Axios library : 브라우저, Node.js를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리 > axios setting yarn add axios npm install axios GET / POST GET : 서버에서 데이터를 받아온다. axios.get('get요청할url') .then (( ) => { 요청 성공시 실행코드 }) .catch ( ( ) => {요청 실패시 실행코드 }) > then 콜백함수 안에 파라미터를 추가하면 그게 받아온 데이터이다. { axios.get("https://codingapple1.github.io/shop/data22.json") .then((result) => { console.log(result.data)}) .c..

useEffect / useReducer [ 기초 지식 ] component는 lifecycle이 존재 컴포넌트도 인생이 있다. 1. mount (생성, 처음 나타났을 때) : props로 받는 값을 컴포넌트의 로컬 상태로 설정할 때 / 외부 API요청 (REST API 등, 라이브러리 사용 setInterval을 통한 반복작업 혹은 setTImeout 통한 작업 예약 2. unmount (사라질 때) : setInterval로 등록한 작업을 clear하기 (clearInterval, clearTimeout), 라이브러리 인스턴스 제거 3. re-rendering (업데이트, 관련된 state가 변경되면 재렌더링) > component의 인생의 중간중간 hook을 걸 수 있다. (인생에 참견한다) 이를 ..

React에서의 스타일링 - css - css.module - styled component - scss styled-component 🔻사용이유 컴포넌트가 많은 경우 스타일링에 불편함이 발생한다. 1. class 중복으로 생성한다. 2. 다른 컴포넌트에 원하지않는 스타일이 적용된다. 3. css파일이 너무 길어져서 수정이 어렵다. > 컴포넌트 제작 시 styled-components라는 라이브러리를 이용하여 js파일에서 스타일을 바로 입힌다. 컴포넌트마다 고유한 클래스를 가진다. 🔻 설치 yarn add styled-components npm install styled-components //1.import 한다. import styled from "styled-components"; //2.style..

React Router? SPA의 routing문제를 해결하기 위해 사용되는 네비게이션 라이브러리이다. React Router를 사용하면 앱에서 발생하는 라우팅이 location이나 history와 같은 브라우저 내장 api와 완벽하게 연동이 된다. > setting npm install react-router-dom vs : HashRoutersms URL 맨뒤에 /#/이 붙은채로 시작한다. 왜? 원래 브라우저 주소창에 페이지 입력하면 서버한테 특정 페이지좀 보여달라는 요청이다. 근데 우리는 서버없고 그냥 리액트가 라우팅을 담당하고 있으므로, 존재않는 페이지 서버한테 요청해서 에러뜰 수 있다. 안전빵으로 # 붙여준다. #뒤에 붙은것들은 서버로 요청안되니까! //index.js import { Brows..

Data binding JSX에서 데이터바인딩하기 데이터 바인딩? 자바스크립트 데이터를 HTML에 꽂아넣는 작업을 뜻한다. > 변수를 만들어서 넣기 { } 중괄호에 넣어서 온갖곳에 변수 집어넣기 가능하다. import React, { useState } from "react"; let data = "안녕"; function app() { return ( {data} ); } export default app; > html에 스타일 직접 넣기 { } 중괄호에 넣어서 { 속성명 : '속성값'} 속성명은 camelcase로 입력해야된다. {data} 보기싫으니까 변수명에 넣어서 사용하거나 css파일에서 하도록 하자. let data = { color : 'red'} State / useState 중요한 데이터..

Prettier 코드의 줄 간격이나 행을 자동으로 갈끔하게 정리해주는 VSCode의 확장 프로그램이다. > 자동 적용 안될 경우 1. setting에서 format on save를 검색하고 설정에 체크되어 있는지 확인한다. 2. default formatter를 prettier-code formatter (exbenp.prettier-vscode)로 설정한다.