순수 css 모듈각 파일 별로 안정성을 보장해준다.고립성과 독립성이 보장되어 이름 충돌에 걱정하지 않아도 된다.JS에서 CSS를 작성할 수 있다.JS가 꼭 필요하므로 변경될 때마다 재컴파일 되어야 한다.고립성과 독립성이 보장되고 js, css 파일을 왔다갔다 하지 않아

CI는 지속적으로 통합한다는 의미인데, 우리가 테스트 코드를 실행하고 합치며 배포 준비 상태로 만들어놓는 것을 말한다.Continuous Delivery는 손으로 직접 최종 배포를 하는 것이고,Continuous Develoyment는 자동화로 배포하는 것이다.Deli

Docker Docker는 부팅 등 운영체제의 핵심 기능(커널)을 공유하는 가상머신이다.

와이어샤크란 실시간으로 데이터를 주고 받는 과정을 포착해주는 도구이다.이 한줄 한줄들을 패킷이라고 부른다.http의 포트번호는 80이고 https는 443이다.네이버같은 https 사이트에서 naver.com:443 뒤에 443이 생략되어 있는 것이다.여기서 보면 ht

DNS는 도메인 주소를 IP 주소로 바꿔주는 시스템이다.AWS에서는 Route53, 구글에서는 CloudDNS라고 한다.주소를 입력하면 DNS에 접속이 되고 DNS에서 IP로 연결이 넘어간다.동적페이지는 매번 그때 그때 바뀌는 페이지를 말한다.ex) 상품 상세보기 페이

테스트코드란 기능이 잘 동작하는지 사람이 일일이 손으로 체크하는 것을 대신 해주는 것이다.하지만 기능을 검사해주는 코드를 또 만드는 것이 더 비효율적이지 않을까?업데이트 배포를 한 후에 새로운 코드가 기존에 있던 코드에 영향을 주면 다시 기존 코드부터 전부 검사를 해야

Optimistic-UI Optimistic-UI란 실제로 성능을 높여서 속도가 빨라지는 것이 아니라 빨라보이도록 눈속임을 하는 것을 말한다. API요청을 보내놓고 결과를 받기 전에 이미 브라우저에서는 바뀐 값을 그려준다. 그리고 결과가 돌아오면 화면을 다시 그려준다.

기존의 우리가 사용하던 이미지 등록 방식은 이러했다. > 1. 브라우저에서 이미지 등록 버튼을 누르면 백엔드에 uploadFile로 전송되어 storage에 file이 보내진다. 백엔드는 storage로부터 다운로드URL을 받아와서 다시 브라우저에 돌려준다. 브라우저

let 방식으로 카운트를 올리면 리렌더링이 되지 않기 때문에 카운트: 0의 숫자는 변하지 않는다. Document.getElementById로 값을 넣어주어야 한다.state 방식으로 카운트를 올리면 자동으로 리렌더링되어 브라우저에 카운트가 올라간다. 하지만 나는 부모

Observable 프로그래밍 방식에는 함수형 프로그래밍과 반응형 프로그래밍이 있다. 기능들을 만들어놓고, 내가 규칙에 맞게 만든 기능을 체이닝하는 방식으로 코드를 만드는 것을 함수형 프로그래밍한다고 한다. 함수형 프로그래밍은 인풋에 비해 아웃풋이 동일해 편리하고 안전하다. 반응형 프로그래밍은 어떤 특정한 입력에 반응해서 실행되는 것이다. Promise는...

Callback 매개변수의 인자로 들어가는 데이터가 함수인 경우, 콜백함수라고 부른다. (ex) useEffect, setTimeout...) 실행 권한을 다른 함수에게 맡기는 용도로 사용한다. 콜백함수에는 단점이 있다. 콜백이 중첩되는 경우에 코드가 안쪽으로 계속

브라우저보다 Next.js에서 화면이 먼저 그려져서(pre-rendering) 생기는 에러이다.이것을 해결할 수 있는 방법은 세 가지가 있다.1\. useEffect2\. typeof3\. process.brower이렇게 해도 import 자체가 안되는 라이브러리들이

Hook이란 함수형 컴포넌트에서 사용할 수 있는 use로 시작하는 state들을 말한다.이 Hook을 우리가 직접 만들 수도 있다.클래스형 컴포넌트에서 사용하는 withAuth는 특정 컴포넌트를 실행하기 전 먼저 실행시켜주는 역할을 했다. 함수형 컴포넌트에서 사용하기

React-hook-form 제어 컴포넌트는 입력할 때마다 state에 저장되는 방식으로 동기화에 초점이 맞춰져 있다. ex) 안녕 -> ㅇ,ㅏ,ㄴ,ㄴ,ㅕ,ㅇ 비제어 컴포넌트는 state에 저장하지 않고 필요할 때 document.getElementById나 useR

변수에 accessToken을 넣고 새로고침을 하면 로그인 정보가 모두 날아간다. 새로고침은 브라우저에서 해당 주소로 다시 엔터를 친 것과 같아서 이전에 그려졌던 state 변수들이 사라진다. 브라우저에 저장해야 새로고침을 해도 사라지지 않는다. 브라우저 저장공간은 여

Login Process 브라우저에서 로그인을 하면 백엔드로 API 요청이 가고, 백엔드에서는 DB에 해당 유저가 있는지 확인한 후 memory session에 저장하고 session id를 부여한다. 하지만 유저가 많아지게 되면 그 많은 유저 정보를 일일이 메모리

argu는 함수에 들어가고 함수의 param은 argu를 받아온다. 함수에 들어가는 것은 인자(argu), 기다리는 것은 매개변수(param)이다. 매개변수의 이름은 아무렇게나 지어도 되지만 관례를 따르는 것이 좋다. Props count가 함수의 인자 부분에 들

데이터베이스에서 특정 단어가 들어간 게시글을 검색하는 방법에는 테이블 풀스캔이라는 방식이 있다. 일일히 하나하나 게시글을 확인해 단어가 들어가는지 확인하는 방식인데 너무 비효율적이다. 그래서 단어 별로 묶은 테이블을 하나 더 만드는데, 역인덱스 방식(Inverted

UUID Universally Unique IDentifier의 약자로, key가 없는 경우 임의로 만들어주는 라이브러리이다. 피치 못한 경우에만 사용하고 가급적이면 실제로 존재하는 key값을 주는 것이 좋다. Image Process 이미지는 DB가 아닌 Cloud

CORS(Cross Origin Resource Sharing) 예전에는 origin과 같은 백엔드로만 데이터 요청이 가능했었다. 이것을 SOP정책이라고 하고 이 불편함을 완화하기 위해 CORS정책이 나왔다. openAPI도 CORS가 허용되어 있는 것만 가져다 쓸 수 있었다. 처음에 브라우저에서 백엔드로 내가 요청할 수 있는 데이터가 무엇인지 p...