https://formik.org/ FormikReact 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-componentsnpm install styled-components//1.import 한다.import styled from "styled-components";//2.sty..

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

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

Prisma: ORM으로 객체를 schema로 정의한 다음, 그 객체와 내가 선택한 DB를 연결시켜주는 매개체Node.js와 Typescript ORM직관적인 데이터모델, 자동화된 마이그레이션, 타입안정성, 자동완성 기능 💡ORM ( Object Relational Mapping ) : ‘객체로 연결’객체와 관계형 데이터베이스의 데이터를 자동으로 mapping(연결)해주는 framwork객체지향 프로그래밍은 class를 사용하고, 관계형 db는 table을 사용하기 때문에 객체모델과 관계형 모델간에 불일치가 존재 → ORM을 통해 객체간의 관계를 바탕으로 SQL을 자동으로 생성하여 불일치를 해결app과 db연결 시 SQL언어가 아닌 application 개발 언어로 db를 접근할 수 있게 해주는 툴OR..