nomad coder의 WebRTC 강의를 듣고 정리한 내용입니다. websocket vs http 둘다 프로토콜이다. 프로토콜이란 둘이 만났을 때 어떻게 일들이 진행될지 결정하고 어떻게 돌아가야할지에 대한 규칙을 만든다. 프로그래머는 이 규칙을 갖고 그를 따르는 코드를 만들어 실행한다. 표준이 되는 규칙, protocol 이 먼저 만들어져야하고, 개발자들이 이 규칙을 코드에 녹여내야한다. http stateless 브라우저가 요청을 해야 서버가 응답을 할 수 있다. websocket real-time 기능을 만들 수 있다 wss (secure websocket) 프로토콜을 사용한다.(wss://) 브라우저가 서버로 websocket request 를 보내면 서버가 받거나 거절한다. 악수가 한번 성립되면 연결이 establish 된다. 연결이 되어있기 때문에 서버는 유저를 기억할 수 있다. 연결이 되어있기 때문에 요청을 기다리지 않고도 메세지를 보낼 수 있다. bi-directio…

컴포넌트 추상화 공통적인 요소들을 추출해 불필요한 부분들을 생략하고 객체의 속성 중 중요한 것에만 중점을 두어 개략화(사전 : 대강 추리는 일) 하는 것 하나의 컴포넌트가 하나의 책임만을 담당한다. 책임이란 어플리케이션에서 컴포넌트가 하는 행동 컴포넌트들을 각각의 책임에 맞게 필요한 로직만으로 구성한다면 응집도가 높아지며, 다른 컴포넌트와의 결합도는 줄고 컴포넌트 특성상 외부로 노출할 필요가 없는 부분은 캡슐화가 될 것 컴포넌트는 이벤트 기반으로 스타일과 DOM 구조까지 고려하여 고유한 책임을 수행하게 되기에 버튼에 스타일을 적용하거나 클릭했을 때의 애니메이션을 넣거나 필요에 따라 색상과 폰트를 변경하거나 생각보다 다양한 것들이 책임을 수행하기 위해 고려되어야 한다. 텍스트와 같이 작은 책임 수행을 넘어서 레이아웃의 형태를 책임지는 컴포넌트, 서버와의 통신을 통해 데이터를 가져오는 컴포넌트, 특정 도메인에 관련된 비즈니스 로직을 수행하는 컴포넌트 등 범위가 확대될수록 이러한 책임을…

하단 토스 컨퍼런스 내용 clean code 개발할 때 병목이 되고 유지보수가 오래걸리며, 기능 추가가 불가능하거나, 성능이 안좋을 수 있는 코드는 다음과 같다. 흐름 파악이 어렵고 도메인 맥락 표현이 안되어 동료에게 물어봐야 알 수 있는 코드 읽기 좋은 깔끔한 코드는 코드 리뷰의 시간을 단축하며, 버그가 났을 때 디버깅 시간도 단축시킨다. 클린코드의 의의=유지보수(코드파악, 디버깅, 리뷰) 시간(시간=자원=돈)의 단축 나쁜 코드는 하나의 목적인 코드가 흩뿌려져 있는 경우 다 떨어져 있어 나중에 기능을 추가할 때 스크롤을 위아래로 이동하며 미로찾기를 해야함 하나의 함수가 여러가지 일을 하고 있는 경우 세부 구현을 모두 읽어야 함수의 역할을 알 수 있다. 코드 추가 및 삭제도 시간이 걸림 함수의 세부 구현 단계가 제각각일 경우 큰 그림을 보며 리팩토링 하면 함수 세부 구현 단계 통일 하나의 목적인 코드는 뭉쳐두기 하나의 함수는 한가지만 하도록 쪼개기 ⇒ 클린코드란 짧은 코드가 아닌 …

사용시 이점 중간에 service worker를 통해서 네트워크 요청을 가로채고 모의 응답을 받아 반환하기 때문에 기존 data fetch 로직을 그대로 사용하여 mock 데이터를 반환 받을 수 있다. 그렇기 때문에 api 가 혹시라도 늦게 나온다고 하더라도 사전에 api spec 만 미리 맞춰놓는다면 네트워크 요청 로직을 미리 작성해 놓고 그대로 사용하여 테스트할 수 있다. 데이터를 하드코딩 하거나 mock server를 만든다고 하더라도 추후에 url 및 엔드포인트 변경이라던가 네트워크 요청 로직을 다시 작성할 필요가 있는데, msw는 그에 비해 on/off 하듯이 기존에 필요한 로직을 그대로 사용하여 원하는 데이터를 조작하여 사용할 수 있어 백엔드와 개발 시점이 겹친다고 하더라도 일정이 미뤄지지 않고 개발할 수 있다. 원하는 테스트를 진행하기 위해 db 조작을 따로 요청할 필요 없이 mock 데이터를 생성해 테스트할 수 있다. header, cookie 등 네트워크 요청시 사…

code smells in css css 규칙 스타일은 추가만하고 취소는 하지 않도록 한다. 매직넘버(반드시 그렇게만 작동하는 값) 피하기 조건부 선택자를 피한다. 재사용 불가능하고 특정도를 높이며 선택자를 한정함으로 브라우저 작업량을 증가시켜 성능을 저하시킨다. 꼭 필요한 경우를 제외하고 절대값을 피하고 상대값을 사용한다. 무차별 강제 스타일을 피한다. 위험한 선택자(너무 광범위하게 적용될 수 있는 것)를 피한다. !Important 피하기 사용시 명확한 의도를 갖고 사용하도록 한다. ID 보다 class를 선호하라 class는 한 페이지에 한번만 존재해도 되고 여러번 존재해도 되며 재사용이 가능해지는 경우가 많다. 느슨한 클래스 이름(의도한 목적을 충분히 드러내지 못하는)을 피한다. Reference CSS 코드 냄새

next 12 버전대에서 변경됨 NextJS 12 버전부터 SWC를 Next.js Compiler 로 소개한다. SWC는 Rust 기반의 컴파일러로 싱글 코어에서 babel 보다 20배, 4 코어에서 babel 보다 70배 빠르다고 소개하고 있다. babel의 한계점 배포 뒤, 개발자들이 babel이 변경한 코드를 이해하기 어려워 할 수있다. 코드의 크기가 늘어난다. polyfill을 사용해서 babel이 지원해주지 않는 범위까지 변환해주어야 한다. 다른 컴파일러보다 시간이 오래 걸린다. SWC 컴파일러 SWC(Speedy Web Compiler)는 Rust로 작성된 컴파일러이다. 저급 프로그래밍 언어인 Rust로 작성되었기 때문에 컴파일시 매우 빠르게 동작한다. 개발자들은 웹사이트 최적화, 번들링, 컴파일 등 다양한 기능을 위해 SWC를 사용할 수 있다. SWC의 장점1. 확장성: 개발자들은 라이브러리를 fork 해올 필요 없이 Next JS에 미리 설치된 SWC를 사용할 수 있…

패키지 관리자(feat: yarn berry , pnpm) node_modules 구조 하에서 모듈을 검색하는 방식은 기본적으로 디스크 I/O 작업이다. 이는 node_modules가 가진 문제이기 때문에 yarn classic과 npm 모두에 해당되는 내용 이처럼 모듈 탐색을 메모리 상에서 자료구조로 처리하지 않고 I/O로 직접 처리하다보니 추가적인 최적화가 어렵고 실제로 yarn 개발진은 이러한 이유들로 더 이상 최적화 할 여지가 없었다고 문서에서 밝히고 있다. yarn berry에서는 PnP 라는 기술을 통해 이를 개선한다. yarn berry(PnP) yarn, npm과 다르게 node_modules를 갖고 있지 않다. 대신 각각의 의존성들이 zip 파일로 압출되어 .yarn/cache에 ./pnp.js로 저장된다. node_modules는 사이즈와 복잡성 등 여러가지 이유로 commit되면 안되지만 zip 파일을 commit 하는 것은 간단하다. 그렇기 때문에 브랜치를 바…

React Query 기본적으로 데이터를 fetch 해온 후 캐싱하게 되며 캐싱한 데이터는 stale 하다고 판단한다. stale time을 지정할 수 있다. 포커스가 들어왔을 경우(refetchOnWindowFocus), 새로 mount 되었을 때(refetchOnMount), 네트워크가 끊어졌다가 다시 연결된 경우(refetchOnReconnect), 데이터가 stale 하다고 판단될 수 있는 경우에 서버에서 데이터를 가져와 캐싱을 했어도 refetch하도록 지정할 수 있다. 위의 컨셉으로 인해 사용자는 항상 fresh한 데이터를 보게할 수 있다. 지원 기능 및 동작 렌더링 퍼포먼스 측면에서 쿼리가 업데이트 될때만 컴포넌트를 업데이트하며 여러 컴포넌트가 같은 쿼리를 사용할 시 한꺼번에 묶어 업데이트 해준다. 쿼리가 지정된 시간동안 사용되지 않을 경우 자동으로 garbage collection을 지원한다. 데이터 프리패칭이 가능하다. 프로미스에 cancel 함수를 적용하면 프로…

Default Cache Behavior 데이터가 서버로부터 fetch 되면 RTKQuery 데이터를 redux에 cache로 저장하게 된다. 같은 데이터를 위해 또 다른 요청을 하게 된다면 추가 요청을 하는 대신 RTKQuery는 존재하는 캐시 데이터를 제공하게 된다. 구독이 시작되면 엔드포인트에 사용된 parameter는 serialized되며, 내부적으로 요청 캐시키로 저장된다. 앞으로 같은 캐시키를 생성한다면 원래의 것과 비교해 중복되지 않게 하며, 같은 데이터와 업데이트를 공유하게 된다. (두개의 다른 컴포넌트에서 같은 요청을 하게 된다면 같은 캐시된 데이터를 사용하게 된다.) 요청이 시작되고 데이터가 이미 존재한다면 서버로 요청을 하지 않고 데이터를 주게 되고 데이터가 캐시에 존재하지 않는다면 새로운 요청을 하게 되면 해당 response는 캐시로 저장하게 된다. 구독은 reference-counted(참조횟수 계산 방식)이다. 같은 엔드포인트+param 에 대한…

flex flex 항목을 로 지정하면  로 지정한 것과 동일하게 동작합니다. 이 경우, flex 항목들은 가 0이므로 값보다 커지지 않고 가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어듭니다. 또, 가 이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.  로 지정하면 로 지정한 것과 동일하며,  과는 주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다. 으로 지정하면 으로 지정한 것과 동일하며 flex 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 를 로 지정했을 때 정해지는 크기로 결정됩니다. 이 축약형은 더 축약해서  이나 처럼 쓸수도 있는데, 이는  만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 는 와 동일하게 처리됩니다. flex-direction row, row-reverse, column, column-reverse flex-b…

modal vs react-native-navigation modal When the modal becomes visible, the modal screen component is mounted , and when the modal is hidden, the screen is updated  and unmounted . These are the three phases in the component lifecycle: mounting, updating, and unmounting. A component is mounted when “it is being created and inserted into the DOM” [1]. An update is triggered when the component’s props or state are changed. Unmounting is when a component is being removed from the DOM. Executing a p…

배포 자동화 (fastlane vs bitrise) ios Testflight + fastlane firebase app distribution + fastlane android google play console 내부 테스트 firebase App Distribution + fastlane —> 많이 사용하고 명령어 하나로 가능함 설정 fastlane 설치 프로젝트 폴더 내 gemfile에 코드 추가 firebase 연결 fastlane 에서 env 사용 Android env 파일 iOS env 파일 Codesigning Using match The concept of match is described in the codesigning guide. With match you store your private keys and certificates in a git repo to sync them across machines. This makes it easy to onboard n…

env 설정 react-native-config staging, production 환경 변수를 나누기 위해 react-native-config 패키지를 이용한다. react-native-dotenv The variables will automatically be pulled from the appropriate environment and is the default. The choice of environment is based on your Babel environment first and if that value is not set, your NPM environment, which should actually be the same, but this makes it more robust. In general, Release is  and Debug is  여러 환경에서 해당 패키지를 이용하기 위해서는 dotenv-flow가 필요함 (패키지 gihub 문서 Readme 에서 확…

React Native Navigation 화면 이동  pushes a new route to the native stack navigator if it’s not already in the stack, otherwise it jumps to that screen. We can call  as many times as we like and it will continue pushing routes. The header bar will automatically show a back button, but you can programmatically go back by calling . On Android, the hardware back button just works as expected. You can go back to an existing screen in the stack with , and you can go back to the first screen in the stack…

redux-toolkit 프로그램 개발을 하다보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행한다. Redux Toolkit을 이용한다면 createAsyncThunk를 사용해 비동기 처리를 진행할 수 있다. createAsyncThunk() 액션을 정의 위와 같이 첫번째 파라미터로 typePrefix로 액션 타입을 생성하고, 두번째 파라미터로 promise 기반으로 결과를 반환하는 action을 작성한다. createAsyncThunk는 Promise의 3가지 상태와 같이 pending, fulfilled, rejected의 상태를 갖는다. extraReducer 리듀서에 연결 사용 redux toolki…

Redux action useReducer를 이용하면 컴포넌트에서 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트 해줄 수 있다. 액션은 객체로 type 필드를 작성해 다양한 상황을 만들어 준다. store 리덕스에서는 한 어플리케이션당 하나의 스토어를 만들게 되며 그 안에는 state, reducer 및 내장함수들이 있다. Dispatch 스토어의 내장함수 중 하나로 액션을 인자로 넘겨 Reducer() 함수를 실행하여 액션 ㄱ밧을 받아 상태를 변경한다. Reducer 2개의 인자값을 받아와 state 값에 변화를 일으키는 함수로 현재의 state와 전달받은 action을 참고하여 새로운 state를 return 해준다. subscribe 함수 형태의 값을 파라미터로 받아와 전달하면 액션이 디스패지 될 때마다 전달해준 함수가 호출된다. dispatch 되어 state 가 변경될 때 리렌더링 해준다. Connect() useSelector connect()함수에서 mapRe…

React Native Component HTML에서 사용하는 tag 들을 어떻게 대체하여 사용할 수 있는지, react native에서 사용할 수 있는 컴포넌트들에 어떤 것들이 있는지 알아보자 div -> View img -> Image svg가 아닌 png 이미지 이용시 source props를 통해서 사용할 수 있다. span,p -> Text react native 에서 텍스트 보여주기 위해서는 반드시 Text 컴포넌트를 이용해야한다. allowFontScaling props를 통해서 휴대폰 설정의 폰트크기가 앱에 영향을 미치지 않도록 설정할 수 있다. includeFontPadding props를 통하여 폰트에 extra padding이 들어가지 않도록 방지할 수 있다. ul/ol, li -> FlatList button -> Button input -> TextInput 휴대폰 키보드를 통해 텍스트를 입력할 수 있는 컴포넌트 ScrollView vs FlatList vs…

다음 글은 Nomad Coder의 암호화폐 101 with Nico 시리즈를 정리한 글 입니다. blockchain 블록체인은 블록들이 모여있는 체인으로 데이터베이스를 예로 들을 수 있다. 이 데이터베이스는 추가만 가능하고 삭제는 불가능하며 편집도 불가능하다. 블록체인은 탉중화화가 가능하며 특정 개인이 DB를 관리할 수 없고 모두가 DB의 복제본을 갖고 있는 분산된 DB로서 크립토를 감시하거나 통제하기 어렵게 만든다.(많은 사람들이 노드를 돌리고 있고 모두가 정확하게 동일한 DB 복제본을 갖고 있기 때문에 모두가 컴퓨터를 몽땅 꺼야 비트코인이 죽을 수 있지만 동시에 그런일이 일어날 일은 없기 때문에 불가능하다. 덕분에 크립토 커런시들이 정부의 감시나 통제에 대응할 수 있다.) 블록은 정보를 DB에 추가하는 방법이다. 데이터를 그냥 추가하는 것이 아니라 블록이라는 것으로 추가하며 비트코인의 경우 10분마다 블록이 생성된다. 블록에는 중요한 정보들이 많은데, 블록의 해시 이전 블록의 …

airdrop 광고하기 위해서 무료로 자신들의 토큰을 나눠줌 (e.g uniswap은 이전에 protocol을 사용한 사용자들의 wallet address를 list up해서(testers 혹은 early adaptor에게) 자신들의 token을 무료로 전송했다.) proof of work & proof of stake proof of work란 특정한 수를 맞출 때까지 복잡한 퍼즐을 추측하고 검사하는 과정을 말한다. 비트코인에서는 랜덤으로 섞인 수와 문자를 SHA-256으로 해시하여 특정 개수는 0을 찾는 과정을 진해하고 알맞을 결과를 맞추게 되면 그 block을 solve(문제를 풀면 reward를 받게 된다.)했다고 하며, 그 block을 블록체인에 추가된다. proof of work: race를 위해 사람들이 줄지어있다고 가정했을 때 그 사람들 중 유독 그 race에 강점을 갖고 있는 사람이 있고 경합을 할 경우 그 사람이 우승해서 reward를 받게 되며 나머지 우승하지 …

solidity *이 글은 freeCodeCamp의 Solidity Tutorial와 Dapp University의 Master Solidity 내용을 정리한 글입니다. 아래 코드는 Solidity Repository에서 확인할 수 있습니다. Data types Arrays array 에서 값을 제거하는 방법으로는 pop 과 delete가 있는데, pop은 가장 최신 값을 지우면 length도 줄어드는 반면에 delete는 0이나 null을 넣어 기존 값을 비우기 때문에 원하는 인덱스 값을 제거하지만 length는 줄어들지 않는다. 배열 안 문자열 검색 혹은 비교시 solidity에서는 string을 직접적으로 비교할 수 없고 string을 byte화, keccak256을 이용해 다시 새히화 해서 비교해야한다. Mappings array 는 length 값을 구할 수 있지만 mapping은 불가능하다. Modifier 특정 owner만 실행 가능 특정 시간이 지나면 실행 Contr…

HTTP 요청 최소화 웹사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성되는데 이 요소는 모두 웹서버에 있으며, 사용자의 컴퓨터로 가져오는데 네트워크 비용이 들고 이 비용은 곧 응답시간으로 이어진다. 그렇기 때문에 다운로드해야하는 구성 요소의 개수를 줄이는 것이 가장 크고 효과적이다. 재사용 방문자를 위해 캐시 설정을 진행할 수도 있다. 파일 개수 최소화 웹사이트의 성능을 개선할 때는 파일의 용량보다 개수가 더 중요하다. 아주 용량이 작은 파일이라도 원격 서버에서 가져와야한다면 네트워크 비용이 든다. 파일이 캐시에 있더라도 해당 파일이 유효한지 판단해야하며 병렬로 다운로드 하는데 한계가 있기 때문에 파일의 개수가 늘어나는 것은 성능에 치명적이다. 파일 크기 최소화 쿠키 크기 최소화 필요한 정보를 저장하는 가장 쉬운 방법이 최상위 도메인을 이용해 쿠키를 설정하는 것인데 이렇게 되면 자바스크립트 파일이나 스타일시트 파일, 이미지 등 쿠키 정보가 필요없는 구성 요소를…

Javascript: 비동기 자바스크립트에서 비동기를 사용하려면 1. callback, 2. promise, 3. async function 을 사용할 수 있다. callback 의 문제점 promise 이전 콜백만을 사용해 비동기 코드를 작성해왔지만 이 방식은 callback 지옥이라는 문제가 발생할 수 있다. callback 의 무한 중첩으로 코드의 맥락과 흐름 파악에 어려움을 느낄 수 있고 콜백 뎁스에 추가적인 로직이 들어간다면 코드는 더 복잡해지게 된다.(콜백의 경우 코드 진행이 순차적이 지 못해 코드의 컨텍스트 및 흐름 파악에 어려움이 있을 수 있다.) 어떠한 함수에 콜백을 넘기면 콜백에 대한 제어권은 호출부를 떠나 그 함수에 넘어가게 되며 이를 제어의 역전 (IoC, Inversion Of Control)라고 한다. 콜백 체계에는 코드의 순차성, 빋음성이 결여되는 결함이 생기며 콜백 지옥이 펼쳐질 수 기때문에 그 문제점을 해결하기 위새 ES6부터 promise 가 도입되…

javascript 자바스크립트는 스크립트를 작성해 실행하는데 컴파일이 필요하지 않은 Interpreter 언어이다. 하지만 자바스크립트 엔진 내부에서 실행중 컴파일이 필요한 경우 내부에서 컴파일한다. compile 언어 compile 언어와 interpreter 언어의 가장 큰 차이점은 pre-processting, 즉 compile 유무이다. compile이란 A를 B 언어로 변환하는 과정으로 고금 언어로 작성된 소스코드를 기계어로 변환하는 것을 의미한다. 변환된 기계어는 고급 언어를 바로 인터프리팅 방식으로 실행한 것보다 빠르다. interpreter 언어 interpret은 코드를 한줄씩 순차적으로 bytecode(abstraction of machine code)로 변환하는 방식이다. 이 bytecode를 가지고 컴퓨터가 이해할 수 없기 때문에 그것을 받아서 실행해주는 프로세스 가상 머신이 필요한데 이 가상 머신이 런타임에 호출되는 부분을 골라서 실행한다. 컴퓨터가 바로 …

브라우저 브라우저는 1. 서비스 이동, 2. 리다이렉트, 3. 어플리케이션 캐시 확인, 4. 네트워크 통신, 5. 브라우저 처리 단계로 나누어지며 각 단계마다 최적화에 고려해야 할 사항들이 있다. 동작 방식 기반 최적화 웹페이지 최적화는 브라우저가 네트워크와 통신하는 과정과 브라우저에서 페이지를 표시하는 과정에서의 응답 속도를 개선하는 것이기 때문에 브라우저가 어떻게 동작하는지 이해하는게 좋다. 서비스 이동(prompt for unload) 사용자가 웹 서비스를 이용하다 다른 주소로 이동할 때 브라우저가 제일 먼저 실행 사용자가 웹 서비스를 이용하다 다른 주소로 이동할 때 브라우저가 제일 먼저 실행하는 단계로 페이지가 표시될 떄 이벤트가 할당되고 메모리를 사용하게 되는데 이 메모리를 더이상 사용하지 않을 때(페이지를 떠날 때) 메모리를 해제해야한다. 필요없는 메모리를 해제(가비지 컬렉션)하지 않으면 브라우저가 응답 없음 상태가 되거나 실행 속도가 급격히 느려지게 된다. DOM의 …

Fast API Starlette 프레임워크를 기반으로 비동기 API 서버를 지원 Pydantic 라이브러리와의 호환으로 데이터 검증 지원 OpenAPI 지원을 통해 자동 스웨거 생성 가능 성능적인 측면에서는 Node와 Go와 동등한 높은 성능 Starlette는 다른 파이썬 웹 프레임워크로, Sanic, Flask, Django 등과 비교하면 가볍고 강력한 ASGI(Asynchronous Server Gateway Interface) 프레임워크/툴킷이다. fastapi는 Starlette를 한번 감싸기 때문에 Stalette를 직접 사용하는 것보다는 성능이 떨어질 수밖에 없지만 개발 속도를 폭증시켜주는 등 fastapi의 장점은 이 모든 것을 상쇄시킬 수 있다. Starlette이 강력한 성능을 보장하는 이유는 내부적으로 uvicorn을 사용하고 있기 때문이다. uvicorn은 uvloops와 httptools를 사용하는 초고속 ASGI 서버이다. uvloop의 성능 비밀은 li…

테스트의 기본 테스트 케이스는 어떠한 가정을 통해 참과 거짓을 반환하며 가정이 변하지 않는 이상 테스트의 결과는 항상 동일해야한다. 가정은 테스트 케이스의 의도를 포함하며 각 테스트 케이스 하나당 하나의 의도만을 포함해야한다. 테스트 분류 Unit Test (단위 테스트) 모듈(함수/클래스) 단위의 테스트한다. 테스트할 부분의 코드를 다른 시스템으로부터 분리(isloate)시킨 채 테스트한다. 작성 비용이 적게 들고 실행 속도가 빠르다 실패했을 때 문제가 생긴 부분을 비교적 정확하게 파악할 수 있다. 경우에 따라 한두개의 단위를 모아서 하나의 단위로 취급하기도 한다. Integration Test (통합 테스트) 주로 단위 테스트보다 큰 범위의 테스트를 의미한다. 개별 모듈(함수/클래스)들이 연결되어 제대로 상호작용하는지를 테스트 단위 테스트에 비해 작성이 어렵고 실행 속도가 느리다 단위 테스트에 비해 실패 시 문제가 생긴 부분을 정확히 파악하기가 어렵다 End-To-End Tes…

Defi 디파이란 탈중앙화 금융(Decentralized Finance)의 약자로, 탈 중앙화된 분산 금융 또는 분산 재정을 의미한다. 주로 암호화폐를 담보로 결고 일정 금액을 대출받거나, 다른 담보를 제공하고 암호화폐를 대출받는 방식으로 작동한다.(반대는 C-Fi) 블록체인을 기반으로 하는 기존의 금융 도구로 특히 이더리움(Ethereum )이다. 디지털 자산을 만들고 발행하는 모듈화된 프레임워크 또는 오픈 소스 프로토콜을 전제로 하고 있으며 검열에 대한 저항과 금융 서비스 접근성 향상과 같은 공공 블록체인에서 작동한다는 이점을 제공하도록 설계되었다. *이더리움: 블록체인 기술을 기반으로 스마트 계약 기능을 구현하기 위한 분산 컴퓨팅 플랫폼으로 비트코인을 기반으로 만든 가능 대표적인 알트코인으로 서 비트코인 2.0 이라고도 불린다. 이더리움이 제공하는 이더는 비트코인과 마찬가지로 암호화폐의 일종으로 거래되고 있다. 이더해시 알고리즘 기반의 작업증명(poW) 방식으로 채굴중이지만 …

초기 flow 이메일을 입력하면 해당 이메일로 인증 코드 전송 인증 코드가 확인되면 access token, refresh token을 cookie에 담아 response *cookie 옵션으로 maxAge, sameSite, secure, httponly를 설정한다. 클라이언트 측에서 저장된 cookie와 함께 request 서버에서 request header cookie 에 담긴 token 을 secret key 와 함께 확인 토큰이 valid 하며 일치할 경우 정상적으로 response, 일치하지 않을 경우 error를 보낸다. 토큰이 만료되었을 경우 refresh token으로 access token을 재발급 받아 사용한다. *httpOnly 이 옵션은 자바스크립트 같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 한다. 를 통해 쿠키를 볼 수도 없고 조작할 수도 없다. 해커가 악의적인 자바스크립트 코드를 페이지에 삽입하고 사용자가 그 페이지에 접속하기를 기다리는 방식의…

Authorization & Authentication Authentication(인증) 사용자가 누구인지 확인하는 절차로 회원가입, 로그인 과정이 인증의 대표적인 예시이다. 아이디 및 비밀번호를 생성한다. 비밀번화를 암호화하여 db 에 저장한다. 등록된 아이디와 비밀번호를 입력한다. 암호화되어 db에 저장된 사용자의 비밀번호가 서로 일치하는지 비교한다. 일치하면 로그인, 일지하지 않을 경우 에러를 보낸다 로그인에 성공하면 access token을 클라이언트에 전송한다. 최초 로그인 성공 후 access token을 첨부하여 서버에 요청을 전송함으로써 매번 로그인하는 과정을 생략할 수 있다. Authorization(인가) 사용자가 요청을 실행할 수 있는 권한 여부를 확인하는 절차 HTTP의 특징인 request/response, stateless한 성질때문에 서버는 사용자가 로그인 했을 경우 header에 메타데이터를 보내서 확인하는데, 이 메타정보를 JWT라고 한다. 인증 절차…

InMemoryCache apollo client는 gql의 결과를 inMemoryCache에 저장하며 이를 통해 클라이언트는 불필요한 네트워크 요청 없이 동일한 데이터에 대해 요청할 수 있다. https://images.velog.io/images/zoeyul/post/4afc798e-3b20-46db-8b64-c8c887f1f17f/Screen%20Shot%202021-07-07%20at%201.45.39%20AM.png apollo cache는 먼저 캐시에 원하는 데이터가 있는지 확인하고 있으면 그대로 반환한다. 원하는 데이터가 없을 시 외부 서버로 해당 데이터를 요청한 후 재사용을 위해 반환되는 값을 받아오거나 직접 캐싱을 구현한다. 기본 캐시 설정 클라이언트를 생성할 떄 캐시 객체를 생성하여 넘겨주면 되고 options 인수로 TypePolicy의 keyFields, read, merge function을 다룰 수 있다. InMemoryCache는 쿼리 응답 개체를 내부 …

Next.js Vercel 이라는 프론트엔드 팀에서 만들었으며 따로 설정해주지 않아도 SSR, SEO, Typescript등을 지원하는 React 프레임워크로 static asset과 severless function으로 만들어진 hybrid application에 알맞는 solution이다. 기능 코드 스플리팅 일반적인 리액트 싱글 페이지는 초기 렌더링 때 모든 컴포넌트를 내려받지만 용량이나 규모가 커지면 로딩 속도가 지연될 수 있다. Next에서는 필요에 따라 파일을 불러올 수 있게 여러개의 파일을 분리하는 코드 스플리팅을 사용하였다. 폴더 구조를 보면 pages 폴더 안에 각 page(라우트) 들이 들어가며 컴포넌트 폴더에는 리액트 컴포넌트들이 들어가는데 브라우저가 실행되고 사용자가 접속하면 첫 페이지인 index 페이지만 불러오고 그 이후에 다른 페이지로 넘어갔ㅇ르 떄는 해당 페이지만 불러오게 된다. 간단한 클라이언트 사이드 라우팅 Router와 Link를 모두 사용할 수 …

Hook 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. class 안에서는 동작하지 않으며 class 없이 react를 사용할 수 있게 해준다. 사용 규칙 최상위 에서만 Hook을 호출하며 반복문, 조건문, 중첩된 함수 내에서 hook을 실행하지 않는다. early return이 실행되기 전 react 함수의 최상위에서 hook을 호출하며 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 hook이 호출되는 것을 보장하며 useState와 useEffect가 여러번 호출되는 중에도 hook의 상태를 올바르게 유지할 수 있도록 새준다. 일반 javascript 함수에서는 hook을 호출하지 않는다. React 함수 컴포넌트 내에서만 호출하거나 직접 작성한 custom hook 내에서만 hook을 호출하면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다. eslint-plugin-react-hoo…

Graphql Schema graphql을 사용하면서 schema를 바탕으로 code가 매치되게 할 수 있고, 코드를 바탕으로 schema가 생성되게 할 수 있다. 두 케이스 모두 graphql 서비스의 작동을 하게 되지면 어떤 접근법을 사용하느냐에 따라 더 많은 기능을 사용할수도 사용하지 못하게 될수도 있고, 더 쉽거나 어렵게 작업하게 될 수도 있다. Schema First schema first는 graphql의 schema를 먼저 정의하고 그 schema 정의에 맞게 코드를 작성하는 방법을 말한다. schema를 작성하기 위해서는 그래프큐엘의 data model을 나타내기 위해 만들어진 SDL(Schema Definition Language)를 사용하며 그렇기 때문에 schema first라고 불린다. graphql이 그래프 형태의 관계들을 쿼리하여 사용할 수 있는 만큼 다음과 같이 타입으로 관계를 지정할 수 있다. film이 많은 actor들을 가직 수 있는 만큼 리스트의 …

Deploy to AWS Django는 코드를 자체적으로 테스트 하기 위한 간단한 웹서버를 가지고 있지만 배포시에는 보안이 더 좋고 강력한 웹서버가 필요하기 때문에 nginx와 uWSGI를 연동하여 사용해보자. Nginx 가벼우면서도 강력한 프로그램을 목표로 만들어졌으며, Apache보다 동작이 단순하고 전달 역할만 하기 때문에 동시 접속 처리에 특화되어있다. 정적 파일을 처리하는 HTTP 서버로서의 역할, 응용 프로그램 서버에 요청을 보내는 reverse proxy로서의 역할을 한다. (캐싱, 리다이렉션 등 가능하다.) reverse proxy❔ 클라이언트가 데이터를 요청하면 reverse proxy는 요청을 받아서 내부 서버에서 데이터를 받은 후 이 데이터를 클라이언트에 전달하게 된다. 웹 응용프로그램에 reverse proxy를 두는 이유는 요청에 대한 버퍼링 떄문인데, WAS(Web Application Server)는 클라이언트의 하나의 요청에 대해 하나의 프로세스 또는…

Dash & Plotly 인터랙티브 시각화를 제공해주는 plotly와 웹 기반의 파이썬 어플리케이션의 프레임워크를 제공해주는 Dash를 이용하여 데이터를 시각화할 수 있다. Dash Component Slider, check box, date picker, drop down 등을 사용할 수 있게 해준다. plotly graph graph, chart, data validation, plot 처럼 data를 시각화 해준다. map box, scatter plot, line chart, bar chart 등을 이용할 수 있다. call back dash component와 plotly graph를 연결하여 interative하게 만들어준다. Plotly Create effective data visualizations of proportions Build a web data dashboard in just minutes with Python Dash & Plotly Introducti…

React Native Expo vs RN CLI React Native CLI native file들을 더 많이 컨트로로 하고 싶을 때 사용한다. React Native CLI를 사용하면 xcode 파일을 생성하고, 안드로이드 파일을 생성하여 양쪽 파일들이 리엑트 네이트브에서 실행된다. 양쪽 파일에 다 접근할 수 있기 때문에 어떤 때에는 둘을 합칠수도 있다. Expo 모든 native file들은 숨기고 모든것을 관리한다. react native cli에 비하여 빠르게 핸드폰에서 앱을 테스트할 수 있다. 앱을 build하는 방식, simulation, react native update를 처리해주며, react native에 비해 더 많은 모듈들이 있다. expo는 create-react-app과 같으며 그 위에 더 많은 것들을 제공해준다. CLI에 비해 수동적으로 진행해야하는 작업이 덜하고 시작하는데 훨씬 빠르다. native file에 대한 접근은 할 수 없다. Startin…

Nest.js express 기반으로 제작되었으며, node.js에 백엔드를 구성할 수 있도록 해준다. 기본적으로 typescript를 지원하며, javascript로 어플리케이션을 작성하는 것도 가능하다. 다른 node.js의 프레임워크에는 없는 구조를 가지고 있다. nest.js는 구조를 갖고 있고, 그 구조 덕분에 순서와 룰도 있어서 이를 따르기만 하면 큰 규모의 백엔드를 쉽게 만들 수 있다.(미리 셋팅된 여러 기능들을 제공하기 때문에 수동으로 생성하지 않아도 된다.) node.js 어플리케이션을 빌드하는데 유용하며, 객체지향 프로그래밍(Object Oriented Programming)과 함수형 프로그래밍(Functional Programming), 함수 반응형 프로그래밍(Functional Reactive Programming)의 요소도 일부분 사용한다. setting nest-cli 다음의 커맨드 라인으로 필요한 것을 생성하고 모두 import 해준다. Controll…

GraphQL 클라이언트가 필요한 데이터를 정확하게 특정하여 API에 요청하는 선언적인 데이터 불러오기를 가능하게 만드는 것이다. 고정된 형태의 데이터 구조를 반환하는 엔드포인트를 여러개 제공하는 것이 아니라 단 하나의 엔드포인트만을 노출시키고, 클라이언트가 요청한 데이터들만을 정확하게 반환한다. (필요한 데이터가 무엇인지 서버에 알려주기 위해서 클라이언트가 보다 많은 정보를 보내야 한다.) GraphQL은 데이터베이스 관련 기술이 아닌 API를 위한 쿼리 언어이다. 데이터베이스의 종류와 상관 없이 작동하며, 효율적으로 사용될 수 있다. 모바일 사용의 증가로 인한 효율적인 데이터 로딩의 필요성을 위해서 네트워크 상에서 전송되어야 하는 데이터의 양을 최소화하고 어플리케이션의 퍼포먼스를 대체적으로 향상시켜준다. UI를 조금이라도 바꾸면 필요한 데이터가 변할수도 있기 때문에 그럴 경우 백엔드에서 대응해야 하는데, graphql을 사용하면 서버에서 추가로 작업하지 않더라도 클라이언트를 수…

GraphQL 클라이언트가 필요한 데이터를 정확하게 특정하여 API에 요청하는 선언적인 데이터 불러오기를 가능하게 만드는 것이다. 고정된 형태의 데이터 구조를 반환하는 엔드포인트를 여러개 제공하는 것이 아니라 단 하나의 엔드포인트만을 노출시키고, 클라이언트가 요청한 데이터들만을 정확하게 반환한다.(필요한 데이터가 무엇인지 서버에 알려주기 위해서 클라이언트가 보다 많은 정보를 보내야 한다.) GraphQL은 데이터베이스 관련 기술이 아닌 API를 위한 쿼리 언어이다. 데이터베이스의 종류와 상관 없이 작동하며, 효율적으로 사용될 수 있다. 모바일 사용의 증가로 인한 효율적인 데이터 로딩의 필요성을 위해서 네트워크 상에서 전송되어야 하는 데이터의 양을 최소화하고 어플리케이션의 퍼포먼스를 대체적으로 향상시켜준다. REST API를 사용할 때는, 클라이언트측의 특정 요구사항이나 설계 변경에 대응하기 위하여 서버의 데이터를 노출시키는 방법을 변경해야 하는 경우가 종종 발생한다. 이로 인해 …

Hooks 함수형 컴포넌트에서도 상태를 관리하기 위해서 hooks를 사용한다. useState 컴포넌트에서 동적인 값을 상태(state)라고 하는데, 이것을 사용하면 컴포넌트에서 상태를 관리할 수 있다. useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 반환되는데, 첫번째 원소는 현재 상태, 두번째 원소는 Setter함수이다. 배열 비구조화 할당을 통하여 다음과 같이 사용하지 않고 각 원소를 추출해서 사용한다. Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해준다. 함수형 업데이트 setter 함수를 사용할 때 업데이트 하고 싶은 새로운 값을 파라미터로 넣어줄 수도 있지만 그 대신에 기존 값을 어떻게 업데이트 할지에 대한 함수를 등록하는 방식으로도 값을 업데이트할 수 있다. 이렇게 그 다음 상태를 값을 업데이트 하는 함수로 파라미터에 넣어주며 함수형 업데이트는 주로 컴포넌트를 최적화 하게될 때 사용된다. use…

TypeScript 타입스크립트는 자바스크립트 처럼 생겼고 컴파일 했을 때 자바스크립트로 컴파일된다. 자바스크립트는 엄격한 규칙이 없고 사용하기 쉬우며 우리가 원하는 방향으로 수정하기 때문에 인기가 많은데 큰 프로젝트를 하거나 팀으로 일하거나 버그를 최소화하고 싶을 경우에는 단점이 될 수 있다. 타입스크립트는 이러한 단점을 보완하며 언어가 예측 가능하고 읽기 쉬운 코드 등 자바스크립트를 더 잘 사용할 수 있게 한다. 타입스크립트는 typed 언어로 어떤 종류의 변수와 데이터인지 설정해줘야 한다. 만약 해당 타입에 맞지 않게 설정하면 에디터 상에서 오류가 나타나게 된다. 특정 변수 또는 상수의 타입을 지정할 수 있고 사전에 지정한 타입이 아닌 값이 설정될 때 바로 에러를 발생시키며 그때는 컴파일이 되지 않는다. 함수에서 타입 정의하기 타입 스크립트를 사용하면 코드를 작성하는 과정에서 함수의 파라미터로 어떠 타입을 넣어야 하는지 바로 알 수 있다. 가장 우측의 : number 는 해당…