개발 블로그

Install npm install -g typescript 에러발생 1. node 최신버전 설치 2. 보안에러 sudo npm install -g typescript Setting 1. filename.ts 파일생성 2. js파일로 compile tsc filename.ts 컴파일 이후 자동으로 변경사항 발생시 컴파일되게 하려면 watch mode 실행 tsc -w 3. html 파일 등에서 ts 작성코드 사용하려면 tsconfig.json compile 세부 설정 : tsconfig.json 파일 생성 tsc --init { "compilerOptions": { "target": "es5", "module": "commonjs" } } target : ts파일을 어떤 버전의 js로 바꿀지 지정 mod..

문제 설명 길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4) = 21..

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