profile
차곡차곡 쌓는 몌으니 개발노트

Docker

Docker란?부팅 등 운영체제의 핵심 기능(커널)을 공유하는 가상머신(VM)→ OS 전체를 새로 설치하지 않아도됨!새로운 신입사원이 들어왔을 때예전에는 설치가 필요한 리스트와 환경 구축하는 과정을 다 작성해서 가이드 문서를 전달해주고, 그대로 설치를 해야했었으나, 이

2022년 12월 22일
·
0개의 댓글
·

Http VS Https

와이어샤크 : 실시간 네트워크 분석을 위해 패킷 교환 과정을 포착하는 도구(패킷 분석 툴)와이서샤크를 통해 로그인을 하거나 특정 페이지에 접속하면 데이터를 주고받는데, 서버 상호간에 데이터를 정상적으로 주고 받는지 데이터를 중간에 가로채서 확인하는 것이다.HTTP로 A

2022년 12월 21일
·
0개의 댓글
·

옵티미스틱UI

게시글의 '좋아요'버튼을 누를 때, 서버에 도달하기 전에 화면의 값을 바꿔버리는 옵티미스틱 UI를 사용하게 된다.API요청을 하기도 전에 화면상에서 값을 바꿔버리고 계속해서 요청을 보내는 것이다.❗️옵티미스틱UI는 보통 실패 확률이 낮고 만일 실패하더라도, 큰 상관이

2022년 12월 15일
·
0개의 댓글
·

Promise all, lazyload, preload, prefetch

현재의 이미지 업로드 방식의 비효율적인 부분은 1\. 이미지 찌꺼기가 남는다2\. 이미지 미리보기가 느리다.그냥 Promise로 함수를 만들어서 실행하게 되면, result1 → result2 → result3이 순차적으로 실ㄹ행되게 되고, 약 6초의 시간이 소요된다.

2022년 12월 14일
·
0개의 댓글
·

refreshToken, Observable

브라우저 쿠키에 자동으로 refreshToken이 저장되고, accessToken은 변수에 담겨진다.

2022년 12월 12일
·
0개의 댓글
·

결제프로세스

각각의 카드사에게 승인을 받아서 결제시스템을 구축하는 방법은 카드사마다 지원하는 결제 방법이 전부 다르다. 그렇기때문에 모든 경우를 고려하여 결제 시스템을 개발하려면 인건비와 시간이 많이 소요되며 실제 비즈니스 환경에서는 이러한 방식으로 개발하는 것이 불가능하다.→ 그

2022년 12월 8일
·
0개의 댓글
·

[React] 카카오 MAP API 사용하기

카카오 개발자사이트 (https://developers.kakao.com) 접속개발자 등록 및 앱 생성웹 플랫폼 추가: 앱 선택 – 플랫폼 – Web 플랫폼 등록 – 사이트 도메인 등록사이트 도메인 등록: 웹 플랫폼을 선택하고, 사이트 도메인 을 등록 (예:

2022년 12월 6일
·
0개의 댓글
·

구조분해할당(Destructuring)

객체의 구조분해할당시에는 순서는 중요하지 않지만 이름이 중요하다! (key값이 중요)배열의 구조분해할당시에는 순서가 매우 중요하고, key는 중요하지 않다! 특정 객체에서 지우고 싶은 데이터가 있을 때 어떻게 할까?❌ delete를 통해 원본을 건드리는 일은 바람직하지

2022년 12월 5일
·
0개의 댓글
·

[React] 폼 라이브러리

폼 라이브러리를 사용하면 굉장히 간편하게 코딩을 할 수 있다. 폼 라이브러리는 검증을 대신해주는 폼, state를 대신해주는 폼 등 종류가 매우 다양하다.제어컴포넌트 : setState발생 ⇢ 리렌더링, 버벅거림, 성능 느림비제어컴포넌트 : 리렌더링 발생하지 않음, 버

2022년 12월 2일
·
0개의 댓글
·

[React] HOF / HOC

HOF > High Order Function, 더 높은 순위에 있는 함수, 함수를 리턴하는 함수 aaa가 bbb보다 먼저 실행되기 때문에 더 높은 순위에 있는 함수(HOF)라고 할 수 있다. HOC > High Order Component , 상위에 있는 컴포넌

2022년 12월 1일
·
0개의 댓글
·

[React] Closure

classComponent : HOC(Higher Order Component)functional : custom-hooks stack(LIFO구조) : Last In First Out, 나중에 들어온게 가장 먼저 실행되는 구조 queue(FIFO구조) : First

2022년 12월 1일
·
0개의 댓글
·

[React] 렌더링 방식

로그인을 위한 accessToken을 변수에 넣고 global State로 사용했다.하지만 새로고침을 하게 되면 로그인 정보가 모두 날아가서 매번 다시 로그인을 해야한다.(⇢ 새로고침을 할 때, 새로운 html, css, js를 다시 받아오기 때문. 이전에 그려준 st

2022년 12월 1일
·
0개의 댓글
·

[React] 로그인 이해하기

변수에 저장하는 것은 RAM : 껐다가 키면 사라지지만 대신 빠름 DISK : 껐다가 켜도 사라지지 않지만 느림 인증정보를 계속해서 저장하게 되면 메모리가 꽉차게 되고 그렇게 지속되다 보면 서버가 터지게 된다. 이를 해결하기 위한 방법 두가지 scale-in : 메

2022년 11월 30일
·
0개의 댓글
·

[React] global State

글로벌 스테이트? 여러컴포넌트에서 사용되는 state 하나의 state가 여러 페이지에서 필요한 경우, 매번 props로 내려주는 것이 아닌 글로벌 스테이트를 사용하게 된다. props없이 여러 컴포넌트로 보내서 사용할 수 있다. fetchPolicy 백엔드에 AP

2022년 11월 29일
·
0개의 댓글
·

[React] graphql, rest-api

Temp Body

2022년 11월 29일
·
0개의 댓글
·

[React] 검색프로세스, debouncing, throttling

게시판에 들어오는 값들을 단어로 쪼개서 검색전용Board를 따로 만들고 그 단어가 몇 번 게시물에 있는지 게시물 번호를 저장해 놓은 뒤, 해당 단어로 검색이 들어오면 검색전용Board에 저장되어있는 Board의 값을 보여주는 형태로 보통 검색이 이루어진다.토크나이징 :

2022년 11월 28일
·
1개의 댓글
·

[React] 이미지 업로드 하기

uploadFile이라는 api가 존재할 때, 파일을 선택하고 uploadFile을 요청하게 될 경우, backend에서 storage로 파일을 전송하게 된다. 이미지를 저장할 때 실제 이미지는 DB에 저장되지 않고 storage에 저장 된다. storage에 저장될

2022년 11월 24일
·
0개의 댓글
·

[네트워크] 서버와 통신

rest-api 서버 : expressgraphql-api 서버 : apollo-serverAPI서버를 만든다 = 1) API-Docs (타입)2) API (함수)서버 : 누군가의 접속을 기다리는 프로그램 - 포트번호가 존재하고, 한 컴퓨터 안에서 포트번호 중복 불가!

2022년 11월 23일
·
0개의 댓글
·

[네트워크] 백엔드 서버 구축

typeORM 설치yarn add typeormyarn add pgtypescript설치yarn add --dev typescript.gitignore 파일 생성 후, node_modules 제외시키기tsconfig.json 파일 생성하기💡참고 tsconfig.jso

2022년 11월 22일
·
0개의 댓글
·

[네트워크] CORS 정책

브라우저랑(프론트엔드) 백엔드랑 같은 정책 안에 있을 때만 실행된다 → SOP(Same Origin Policy)ex) 네이버 프론트에서 네이버 백엔드 API만 사용할 수 있다. SOP정책에서 데이터 자원을 공유할 수 있도록 변경된 정책 → CORS(Cross Orig

2022년 11월 22일
·
0개의 댓글
·