hwlink

기업협업으로 출근하게 될 기업이 Recoil 기술스택을 사용 하길래 Recoil 공식문서를 참고하여 개념정리를 미리 하고 출근하려한다. 공식문서: https://recoiljs.org/ko/docs/introduction/getting-started 등장 배경 비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는 Redux와 MobX, 그리고 이들은 근본적으로 React를 위해 출시된 것이 아니다. React의 hooks와 어울리면서 React에 필요한 것들만 React스럽게 제작한 상태관리 라이브러리 Recoil 개요 Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 ..

Coding/React 2021. 12. 26. 15:15

Amazon Elastic Compute Cloud 다양한 오에스버전의 가상서버를 제공하는 아마존 웹서비스 인스턴스 생성 1. EC2에서 사용할 os머신 설정 (프리티어 버전 우분투 18.04 64bit) 2. CPU 메모리 등 서버의 규모 선택 프리티어 t2.micro선택 3.인스턴스 구성 - virtual pirvate cloud AWS 가상 전용 네트워크 : 아이피 주소를 기반으로 한 논리적인 네트워크 공간 구성가능, 방화벽 접근제어 설정가능케 해준다. - 퍼블릭ip 자동할당 : 동적으로 공인아이피 부여, EC2 인스턴스 재시작시 자동으로 변경 추후 고정아이피를 사용하려면 Elastic아이피설정 - 종료방식 : 중지: 인스턴스 셧다운시에 os 정지 >> os이미지 보존 재시작시 다시 시작 종료: o..

Coding/WEB 2021. 12. 25. 18:02

리덕스란 무엇인가 기초배경 :: MVC 기존에는 1979년에 고안된 MVC 디자인 패턴을 사용하였다. 관심사의 분리에 따라 분업화하는 디자인 패턴이다. Model: 정보, 데이터 리액트(State) Controller: 특정 동작에 따라 Model, View 조작, 변경을 위해 Model, View 모니터링, 이벤트감지 및 처리 View: 브라우저 화면, 유저 인터페이스, Controller에 변경 통지 하지만 단점도 존재하는데 아래 그림처럼 하나의 컨트롤러가 여러 모델에 걸쳐 데이터를 조작하고 있는 상황. 모델은 여러 뷰를 업데이트 하고, 뷰 또한 컨트롤러를 통해 모델을 업데이트 합니다(양방향 데이터 바인딩) 바인딩: 뷰와 데이터를 연결하는 것 컨트롤러가 일으킨 조작이 정확히 어떤 요소들에 대한 업데이..

Coding/React 2021. 12. 23. 02:03

DBMS 통상 데이터베이스와 DBMS 를 합쳐서 DataBase라고 부른다. 데이터의 집합 why use Database 데이터베이스 종류 관계형 데이터베이스(RDBMS) 관계 대수라는 것에 착안하여 고안한 데이터베이스 행과 열을 가지고 표 형식 데이터를 저장하는 형태의 데이터베이스를 가리킨다. 표 형식 데이터란 2차원 데이터를 말한다. 가로: 열, 세로: 행 이런 표를 잔뜩 저장해두고, 각각의 SQL(데이터베이스가 이해할 수 있는 언어) 자세하게 요청할 수 있다. 관계형 데이터베이스가 사용되는 시스템 다양한 시스템에서 사용된다. 일반적인 인프라 인터넷이다. 웹 시스템과 연동하는 경우 예약시스템, 등 다양한 서비스에 적용된다 관계형 데이터베이스 소프트웨어 RDMBS라는 용어는 관계형 데이터베이스를 관리하..

Coding/WEB 2021. 12. 18. 11:45

Style Component: styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 2차 프로젝트를 진행하면서 기존 사용하던 scss가 아닌 styled component를 적용하여 진행하게 되었다. - 스타일 컴포넌트 사용하는 이유. 먼저 스타일을 적응하는 방법 1. 외부 CSS 파일에 CSS코드를 작성하여 className으로 속성을 전달 - 규모가 커질수록 css 부피가 커진다. sass를 적용하면 조금 나아지지만 그래도 부피가 너무 크다. 2. inline CSS를 react component 에 삽입 - 인라인 스타일은 미디어 쿼리를 사용할 수 없고, 브..

Coding/React 2021. 12. 17. 13:19

1. 서버 : 요청을 받아서 응답을 줄 수 있는 기계 (그 중 하나가 컴퓨터) scale out 물리적인 서버를 늘리는 것 scale up 서버 성능을 높이는 것 서버들만 모아서 관리를 해주는 데이터센터 Traditional IT 방식의 문제점 데이터 센터 렌트 비용을 지불해야 함 power supply, cooling, maintenance 비용을 지불해야 함 새로운 하드웨어 (서버)를 추가하거나 교체할 때 시간이 많이 소모됨 확장하는데 제한사항이 많음 현재 유지되고 있는 인프라를 24/7 모니터링 할 인원을 고용해야함 천재지변에 대응하기 어려움 (지진, 화재, power shutdown 등) Cloud Computing 물리적으로 서버를 가지고 있는 것이 아니고, 서버가 구름 위에 둥둥 떠다닌다. →..

Coding/WEB 2021. 12. 15. 22:43

setState는 비동기로 동작 리액트에서 setState를 사용하여 상태를 업데이트할 경우 즉시 반영되지 않는다. 리렌더링이 된 후에 업데이트 된다. (state 변경 > 리렌더링 > state반영) 여러개의 state를 컨트롤하는데에는 이점. 배칭이란? 배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것을 의미한다. 예를들어, 하나의 클릭 이벤트 안에 두 개의 state 업데이트를 가지고 있다면, React는 언제나 이 작업을 배칭하여 하나의 리렌더링으로 만든다. 다음과 같은 코드를 실행해보면, 매 번 누를 때마다, state를 두 번 변경 하였지만, React는 단 한 번의 렌더링만 수행한다. const [num, setNum] ..

Coding/React 2021. 12. 7. 21:56

1. HTTP 정의 HTTP는 HyperText Transfer Protocol의 약자 HyperText 하이퍼텍스트(문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일) Tansfer 장소를) 옮기다, 이동[이송/이전]하다 HTML을 주고받는다 Protocol Protocol : 프로토콜, 통신 규약 2. HTTP 두가지 특징 Request / Response (요청 / 응답) Stateless - State(상태) + less(없음) 각각의 HTTP 통신(요청/응답)은 독립적 이기 때문에 과거의 통신(요청/응답)에 대한 내용을 전혀 알지 못 한다. 이전의 상태를 전혀 알지 못 한다는 것은 무엇을 의미할까? - **매 통신마다 필요한 모든 정보를 담아서 요청을 보..

Coding/Network 2021. 12. 5. 11:44