웹사이트 최적화: 성능 개선

웹사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성되는데 이 요소는 모두 웹서버에 있으며, 사용자의 컴퓨터로 가져오는데 네트워크 비용이 들고 이 비용은 곧 응답시간으로 이어진다. 그렇기 때문에 다운로드해야하는 구성 요소의 개수를 줄이는 것이 가장 크

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

About Javascript: 비동기

자바스크립트에서 비동기를 사용하려면 1. callback, 2. promise, 3. async function 을 사용할 수 있다.promise 이전 콜백만을 사용해 비동기 코드를 작성해왔지만 이 방식은 callback 지옥이라는 문제가 발생할 수 있다. callba

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

About Javascript: 동작 원리

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 말하며 그 중 구글의 V8엔진은 크롬과 nodejs에서 사용되며 크게 두부분으로 나뉜다.Memory Heap: 메모리 할당이 이루어지는 곳Call Stack : 코드가 실행되면서 스택 프레임이

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

웹사이트 최적화: 브라우저 처리 과정

브라우저는 1. 서비스 이동, 2. 리다이렉트, 3. 어플리케이션 캐시 확인, 4. 네트워크 통신, 5. 브라우저 처리 단계로 나누어지며 각 단계마다 최적화에 고려해야 할 사항들이 있다.웹페이지 최적화는 브라우저가 네트워크와 통신하는 과정과 브라우저에서 페이지를 표시하

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

Fast API

Starlette 프레임워크를 기반으로 비동기 API 서버를 지원Pydantic 라이브러리와의 호환으로 데이터 검증 지원OpenAPI 지원을 통해 자동 스웨거 생성 가능성능적인 측면에서는 Node와 Go와 동등한 높은 성능Starlette는 다른 파이썬 웹 프레임워크로

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

Nest.js: 인증 / 인가

이메일을 입력하면 해당 이메일로 인증 코드 전송인증 코드가 확인되면 access token, refresh token을 cookie에 담아 response\*cookie 옵션으로 maxAge, sameSite, secure, httponly를 설정한다.클라이언트 측에서

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

Authentication & Authorization

Screen Shot 2021-09-14 at 10.22.32 PM.png사용자가 누구인지 확인하는 절차로 회원가입, 로그인 과정이 인증의 대표적인 예시이다.아이디 및 비밀번호를 생성한다.비밀번화를 암호화하여 db 에 저장한다.등록된 아이디와 비밀번호를 입력한다.암호화

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

Test(feat: Cypress)

테스트 케이스는 어떠한 가정을 통해 참과 거짓을 반환하며 가정이 변하지 않는 이상 테스트의 결과는 항상 동일해야한다.가정은 테스트 케이스의 의도를 포함하며 각 테스트 케이스 하나당 하나의 의도만을 포함해야한다.모듈(함수/클래스) 단위의 테스트한다.테스트할 부분의 코드를

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

Apollo Client: cache

apollo client는 gql의 결과를 inMemoryCache에 저장하며 이를 통해 클라이언트는 불필요한 네트워크 요청 없이 동일한 데이터에 대해 요청할 수 있다. apollo cache는 먼저 캐시에 원하는 데이터가 있는지 확인하고 있으면 그대로 반환한다.

2021년 7월 6일
·
0개의 댓글
·

Next.js

Next.js Vercel 이라는 프론트엔드 팀에서 만들었으며 따로 설정해주지 않아도 SSR, SEO, Typescript등을 지원하는 React 프레임워크로 static asset과 severless function으로 만들어진 hybrid application에 알

2021년 5월 11일
·
0개의 댓글
·

React: Hook ❔

Hook 을 이용하여 Class 를 작성할 필요 없이 상태값 등 여러 react의 기능을 사용할 수 있다.React는 컴포넌트에 재사용 가능한 행동을 붙이기 위하여 render props, hoc와 같은 패턴을 사용한다. 하지만 이러한 패턴을 사용하기 위해서는 컴포넌트

2021년 4월 12일
·
0개의 댓글
·

GraphQL: code-first vs schema-first

Graphql Schema graphql을 사용하면서 schema를 바탕으로 code가 매치되게 할 수 있고, 코드를 바탕으로 schema가 생성되게 할 수 있다. 두 케이스 모두 graphql 서비스의 작동을 하게 되지면 어떤 접근법을 사용하느냐에 따라 더 많은 기능을 사용할수도 사용하지 못하게 될수도 있고, 더 쉽거나 어렵게 작업하게 될 수도 있다....

2021년 3월 10일
·
0개의 댓글
·

Mobx-state-tree Types

type.model(properties, actions) types.array(type): array type 을 지정할 때 사용된다.types.map(type): map 형태로 데이터를 저장할 때 사용된다.types.stringtypes.numbertypes.inte

2021년 3월 9일
·
0개의 댓글
·

DynamoDB

대소문자를 구별하며 테이블 이름 및 인덱스 이름은 3자 이상 255자 이하로 이루어져 있어야 한다.테이블 이름 및 인덱스 이름은 a-z, A-Z, 0-9, \_(underscore), -(dash), .(dot) 만 포함할 수 있다.Number: 최대 38자리 까지 지

2021년 3월 5일
·
0개의 댓글
·

Django: deploy to AWS

Deploy to AWS

2021년 2월 2일
·
0개의 댓글
·

Git 명령어 정리📄

형상 관리 도구(버전 관리 시스템) 중 하나로 소프트웨어를 개ㅏㅂㄹ하는 기업의 핵심 자산인 소스 코드를 효과적으로 관리할 수 있게 해준다.전체 개발 이력을 각 개발자의 로컬로 복사본을 제공하고 변경된 이력을 다시 하나의 저장소로 복사한다.이러한 변경은 추가 개발 지점을

2020년 12월 29일
·
0개의 댓글
·

데이터 시각화: Dash & Plotly

인터랙티브 시각화를 제공해주는 plotly와 웹 기반의 파이썬 어플리케이션의 프레임워크를 제공해주는 Dash를 이용하여 데이터를 시각화할 수 있다.Dash ComponentSlider, check box, date picker, drop down 등을 사용할 수 있게

2020년 11월 5일
·
0개의 댓글
·

React Native

리액트 네이티브는 자바스크립트와 폰을 연결하기 위해서 브릿지가 필요한데, 다음 코드에서의 Text, View가 이 브릿지와 같은 역할을 한다.여기서 View는 리액트에서의 div와 같은 역할을 한다. 모든걸 View 안에 집어 넣어야 한다.리액트 네이티브에는 그만의 규

2020년 10월 6일
·
0개의 댓글
·

Nest.js

node.js 위에서 움직이는 프레임워크로 node.js에 백엔드를 구성할 수 있도록 해준다.(express를 이용한다.)다른 node.js의 프레임워크에는 없는 구조를 가지고 있다.nest.js는 구조를 갖고 있고, 그 구조 덕분에 순서와 룰도 있어서 이를 따르기만

2020년 9월 28일
·
0개의 댓글
·

GraphQL: BackEnd

URL이 존재하지 않으며 하나의 엔드포인트만이 존재하며 요청한 정보들만 받을 수 있고 원하는 방식으로 조정할 수 있다.views 나 urls는 없으며 query와 resolver가 존재한다.개발자가 어떤 정보를 원하는지에 대해 통제할 수 있다.요청한 영역의 정보보다 많

2020년 9월 21일
·
0개의 댓글
·