웹사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성되는데 이 요소는 모두 웹서버에 있으며, 사용자의 컴퓨터로 가져오는데 네트워크 비용이 들고 이 비용은 곧 응답시간으로 이어진다. 그렇기 때문에 다운로드해야하는 구성 요소의 개수를 줄이는 것이 가장 크
자바스크립트에서 비동기를 사용하려면 1. callback, 2. promise, 3. async function 을 사용할 수 있다.promise 이전 콜백만을 사용해 비동기 코드를 작성해왔지만 이 방식은 callback 지옥이라는 문제가 발생할 수 있다. callba
자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 말하며 그 중 구글의 V8엔진은 크롬과 nodejs에서 사용되며 크게 두부분으로 나뉜다.Memory Heap: 메모리 할당이 이루어지는 곳Call Stack : 코드가 실행되면서 스택 프레임이
브라우저는 1. 서비스 이동, 2. 리다이렉트, 3. 어플리케이션 캐시 확인, 4. 네트워크 통신, 5. 브라우저 처리 단계로 나누어지며 각 단계마다 최적화에 고려해야 할 사항들이 있다.웹페이지 최적화는 브라우저가 네트워크와 통신하는 과정과 브라우저에서 페이지를 표시하
Starlette 프레임워크를 기반으로 비동기 API 서버를 지원Pydantic 라이브러리와의 호환으로 데이터 검증 지원OpenAPI 지원을 통해 자동 스웨거 생성 가능성능적인 측면에서는 Node와 Go와 동등한 높은 성능Starlette는 다른 파이썬 웹 프레임워크로
이메일을 입력하면 해당 이메일로 인증 코드 전송인증 코드가 확인되면 access token, refresh token을 cookie에 담아 response\*cookie 옵션으로 maxAge, sameSite, secure, httponly를 설정한다.클라이언트 측에서
Screen Shot 2021-09-14 at 10.22.32 PM.png사용자가 누구인지 확인하는 절차로 회원가입, 로그인 과정이 인증의 대표적인 예시이다.아이디 및 비밀번호를 생성한다.비밀번화를 암호화하여 db 에 저장한다.등록된 아이디와 비밀번호를 입력한다.암호화
테스트 케이스는 어떠한 가정을 통해 참과 거짓을 반환하며 가정이 변하지 않는 이상 테스트의 결과는 항상 동일해야한다.가정은 테스트 케이스의 의도를 포함하며 각 테스트 케이스 하나당 하나의 의도만을 포함해야한다.모듈(함수/클래스) 단위의 테스트한다.테스트할 부분의 코드를
apollo client는 gql의 결과를 inMemoryCache에 저장하며 이를 통해 클라이언트는 불필요한 네트워크 요청 없이 동일한 데이터에 대해 요청할 수 있다. apollo cache는 먼저 캐시에 원하는 데이터가 있는지 확인하고 있으면 그대로 반환한다.
Next.js Vercel 이라는 프론트엔드 팀에서 만들었으며 따로 설정해주지 않아도 SSR, SEO, Typescript등을 지원하는 React 프레임워크로 static asset과 severless function으로 만들어진 hybrid application에 알
Hook 을 이용하여 Class 를 작성할 필요 없이 상태값 등 여러 react의 기능을 사용할 수 있다.React는 컴포넌트에 재사용 가능한 행동을 붙이기 위하여 render props, hoc와 같은 패턴을 사용한다. 하지만 이러한 패턴을 사용하기 위해서는 컴포넌트
Graphql Schema graphql을 사용하면서 schema를 바탕으로 code가 매치되게 할 수 있고, 코드를 바탕으로 schema가 생성되게 할 수 있다. 두 케이스 모두 graphql 서비스의 작동을 하게 되지면 어떤 접근법을 사용하느냐에 따라 더 많은 기능을 사용할수도 사용하지 못하게 될수도 있고, 더 쉽거나 어렵게 작업하게 될 수도 있다....
type.model(properties, actions) types.array(type): array type 을 지정할 때 사용된다.types.map(type): map 형태로 데이터를 저장할 때 사용된다.types.stringtypes.numbertypes.inte
대소문자를 구별하며 테이블 이름 및 인덱스 이름은 3자 이상 255자 이하로 이루어져 있어야 한다.테이블 이름 및 인덱스 이름은 a-z, A-Z, 0-9, \_(underscore), -(dash), .(dot) 만 포함할 수 있다.Number: 최대 38자리 까지 지
형상 관리 도구(버전 관리 시스템) 중 하나로 소프트웨어를 개ㅏㅂㄹ하는 기업의 핵심 자산인 소스 코드를 효과적으로 관리할 수 있게 해준다.전체 개발 이력을 각 개발자의 로컬로 복사본을 제공하고 변경된 이력을 다시 하나의 저장소로 복사한다.이러한 변경은 추가 개발 지점을
인터랙티브 시각화를 제공해주는 plotly와 웹 기반의 파이썬 어플리케이션의 프레임워크를 제공해주는 Dash를 이용하여 데이터를 시각화할 수 있다.Dash ComponentSlider, check box, date picker, drop down 등을 사용할 수 있게
리액트 네이티브는 자바스크립트와 폰을 연결하기 위해서 브릿지가 필요한데, 다음 코드에서의 Text, View가 이 브릿지와 같은 역할을 한다.여기서 View는 리액트에서의 div와 같은 역할을 한다. 모든걸 View 안에 집어 넣어야 한다.리액트 네이티브에는 그만의 규
node.js 위에서 움직이는 프레임워크로 node.js에 백엔드를 구성할 수 있도록 해준다.(express를 이용한다.)다른 node.js의 프레임워크에는 없는 구조를 가지고 있다.nest.js는 구조를 갖고 있고, 그 구조 덕분에 순서와 룰도 있어서 이를 따르기만
URL이 존재하지 않으며 하나의 엔드포인트만이 존재하며 요청한 정보들만 받을 수 있고 원하는 방식으로 조정할 수 있다.views 나 urls는 없으며 query와 resolver가 존재한다.개발자가 어떤 정보를 원하는지에 대해 통제할 수 있다.요청한 영역의 정보보다 많