이누의 개발성장기

EC2(Elastic Compute Cloud) 독립된 컴퓨터 한 대를 임대해주는 서비스 아마존에게 빌리는 컴퓨터 1대 = 1개의 instance 운영체제, 컴퓨터 사양, 메모리, 이름, 보안 등등 설정하여 instance 생성 가능 실행 중일 때만 요금이 결제되기 때문에 필요한 인스턴 스을 필요한 만큼만 사용하여 처리하기 좋음 cf. 생성한 인스턴스 삭제 : instance status - terminate 인스턴스 생성 Step 1, Choose AMI(Amazone Machine Image) : 운영체제 선택. Amazon Linux, Red Hat, SUSE Linux, Ubuntu, Windows 등이 존재한다. SQL Server가 존재하는 Windows는 무료가 아니다.(Windows 정책)..

지역(region) 어디에 위치해 있는 아마존 컴퓨터를 쓸것인가? 즉, 소비자가 위치하고 있는 곳과의 거리를 좌우 네트워크 속도와 관계 (가까울수록 빠름) 클라이언트의 위치를 고려하여 결정할 필요가 있음 cf. https://www.cloudping.info/ 에서 지연시간을 측정할 수 있음 가용영역(AZ,availability zone) 사용가능한 백업공간 하나의 region에는 여러개의 az가 존재함 각 공간 사이에는 인터넷보다 빠른 전용선으로 직접연결 (마치 하나의 공간처럼 사용이 가능함) region과 region은 인터넷으로 연결되어있음

SSH(Secure Shell Protocol) SSH : 네트워크 프로토콜 중 하나로 컴퓨터와 컴퓨터가 Public Network를 통해 서로 통신을 할 때 보안적으로 안전하게 통신을 하기 위해 사용하는 프로토콜. 데이터전송과 원격제어 두가지 용도로 주로 사용된다. Public key와 Private key가 서로 복잡한 수학적 관계를 맺으며 인증과정을 만들어내기 때문에 다른 프로토콜에 비해 안전하다. SSH Server와 SSH Client로 구성되며, SSH Client가 입력한 명령이 SSH Server로 전달되어 SSH Server가 설치된 컴퓨터를 조작하게 된다. 그렇게 조작된 결과는 SSH Client에게 다시 전송된다. openssh openssh? ssh 서비스중 하나 $ sudo apt..

web server 인터넷은 클라이언트와 서버간의 소통으로 구성되어 있다. 클라이언트는 서버에게 request를, 서버는 클라이언트에게 response를 보내주며 상호작용하는 것이다. 클라이언트를 하는 컴퓨터에서는 웹브라우저가 정보를 요청(request)하는 역할을 한다. (ex. firefox, ie, chrome) 서버역할을 하는 컴퓨터에서는 웹서버가 정보를 전달(response)해주는 역할을 한다. (ex. apache, nginx, iis) 사실 Linux를 서버로 운용하기 위해 사용할 수 있는 방법은 여러가지가 있다, 하지만 그 중 가장 보편적이면서도 편리한 것이 웹서버이기 때문에 웹서버가 흔히 쓰인다. apache $ sudo apt-get install apache2 apache 패키지를 설..

0. 패키지 설치 $ npm i @nestjs/graphql graphql-tools graphql apollo-server-express apollo server를 기반으로하는 @nestjs/graphql을 활용해 nest.js 환경에서 GraphQL을 사용할 수 있다. Apollo server나 기존 GraphQL 라이브러리도 당연히 필요하기 때문에 함께 설치해준다. 1. 모듈 연결하기 import { GraphQLModule } from '@nestjs/graphql'; @Module({ imports: [ GraphQLModule.forRoot({ autoSchemaFile: true, }) ], controllers: [], providers: [], }) GraphQL 모듈이 정상적으로 돌아가..

Apollo, GraphQL in React Apollo? 애플리케이션 클라이언트를 백엔드 서비스에 원활하게 연결하는 데이터 그래프 를 구축하기위한 플랫폼 패키지 설치 npm install @apollo/client graphql @apollo/client : Apollo Client를 설정하는 데 필요한 대부분의 것이 포함 graphql : GraphQL 쿼리 분석을 위한 로직 제공 클라이언트 생성 import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'http://localhost:4000/', cache: new InMemoryCache() }); ApolloClient()..

Styled Components 컴포넌트 기반 개발 방법에서는 HTML, CSS, Javascript를 하나의 파일에 모으는 패턴이 선호된다. JSX를 통해 Javascript 코드가 HTML을 포함하고 있고, CSS는 Styled Components를 통해 삽입한다. 내부 CSS 코드는 기존 문법대로 작성하면 된다. 패키지 설치 $ npm i styled-components HTML 엘리먼트 스타일링 import styled from "styled-components" styled.div` // HTML 엘리먼트 스타일 정의 ` React 컴포넌트 스타일링 import styled from "styled-components" import Comp from "./Comp" styled(Comp)` // ..

React Router React의 SPA 환경에서 라우팅을 할 수 있도록 돕는 네비게이션 라이브러리. SPA의 장점은 유지하면서도, Component간의 엔드포인트 변경도 이루어지기 때문에 매우 유용하다. location, history 같은 내장 API와도 완벽하게 연동된다. React Router에는 web 용 라이브러리와 Native용 라이브러리가 따로 존재한다. 그 중 Web용 라이브러리인 'react-router-dom'은 아래 명령어로 React 프로젝트에 설치할 수 있다. $ npm i react-router-dom 활용방법 import React from "react"; import { Link, Route, BrowserRouter as Router } from "react-router..

useRef const App = () => { const inputRef = useRef(); setTimeout(() => inputRef.current.focus(), 5000); return ( Hi ); }; 자바스크립트에서 특정 요소의 크기를 가져오거나 포커스 하는 등의 기능을 수행하기 위해 DOM Selector가 필요하다. React의 컴포넌트에서는 React Hooks의 useRef를 활용해 그 기능을 수행할 수 있다. useRef를 통해 ref 객체를 만들고 선택하고 싶은 DOM에 속성으로 해당 ref 객체를 넣어주면 된다. 위 코드는 5초 후에 inputRef가 ref 속성으로 지정된 input DOM을 focus하는 코드이다.

useInput const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value } } = event; let willUpdate = true; if (typeof validator === "function") { willUpdate = validator(value); } if (willUpdate) { setValue(value); } }; return { value, onChange }; } const App = () => { const maxLen = (value) => value.length ..