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 는 해당…