전체 글 119

[Objection.js] Eager Loading Method

withGraphFetched(), withGraphJoined() - 모든 쿼리의 결과에 대한 관련 항목의 그래프를 가져온다. withGraphFetched() - 후드 아래에서 여러 쿼리를 사용하여 결과를 가져온다. * eager loading: 요청 받으면 모든 것을 한다. 예로 두 행렬을 곱하는 것이 있다. 모든 계산을 하는 것이다. // '아놀드'라는 이름을 가진 사람과 그들의 모든 애완동물들을 가져온다. const people = await Person.query() .where('fristName', 'Arnold') .withGraphFetched('pets'); // 각 결과에 대한 자식 관계를 가져오고 그에 관계된 애완동물과 영화에 대한 관계 가져온다. const people = awa..

Javascript/Node.js 2021.09.09

REST API 엔드포인트 이름 규칙

REST 자원 명명 가이드 1. resource는 단일 객체거나 집합이 될 수 있다. 집합 객체 URI - /customers 단일 객체 URI - /customers/{customerId} 2. 자원은 하위 집합 자원들을 포함한다. customer - accounts(하위 집합 자원) accounts 집합 자원을 얻기 위해서 URI는 - /customers/{customerId}/accounts account 단일 자원을 얻기 위해서 URI는 - /customers/{customerId}/accounts/{accountId} ----------------------------------------------------------------------------------------------------..

옵셔널 체이닝 - '?.'

옵셔널 체이닝(?.)을 사용하면 속성이 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 필요한 이유 ? - 사용자가 여러 명일때, 그 중 몇 명은 주소 정보를 가지고 있지 않다고 가정하면 이럴 때 모든 사용자의 주소 정보에 접근하면 에러가 발생할 수 있다. ?.은 ?.앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있다. 1. obj?.prop - obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환한다. 2. obj?.[prop] - obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환한다. 3. obj?.method() - obj..

Javascript/Node.js 2021.09.02

쿠키, Web Storage(Local Storage, Session Storage)

쿠키 - 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일 - 매번 서버에 전송(서버에 부담이 갈 수 있다.) - 다른 도메인에서 요청할 때도 자동 전송될 수 있다. - 유효 기간 존재 Web Storage - 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소 - 쿠키와 달리 서버에 전송되지 않는다 - 필요한 경우에만 꺼내 쓴다. - 유효 기간 존재 X - 로컬 스토리지와 세션 스토리지가 있다. a. Local Storage - 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장 - 도메인별로 생성 b. Session Storage - 탭/윈도우 단위로 세션 스토리지가 생성 - 다른 도메인이라면 또 다른 세션 스토리지가 생성 -..

포워드 프록시/리버스 프록시

프록시 서버 - 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램 포워드 프록시 - 클라이언트가 서버로 요청할 때 직접 요청하지 않고 먼저 프록시 서버를 통해 요청하는 방식 - 서버에게 클라이언트가 누군지 감추는 역할 인터넷보다 프록시 서버를 먼저 호출하게 되면 포워드 프록시 예) 회사 내부 인트라넷에서 인터넷상에 있는 서버에 요청할 때 프록시 서버를 호출하는 방식 리버스 프록시 - 클라이언트가 서버를 호출할 때 리버스 프록시를 호출하게 되고 프록시 서버가 서버를 요청하여 받은 응답을 클라이언트에게 전달하는 방식. - 서버가 누구인지 감추는 역할 예) 내부 인트라넷에 있는 서버를 호출하기 위해서 인터넷 망에 있는 클라이언트가 리버스 프록시..

포트 포워딩

포트 - 하나의 서버가 있을 때 서버는 웹 사이트를 전달해주는 역할과 파일을 요청하는 역할이 있는데 클라이언트가 서버에 요청을 보냈을 때 이 요청이 어떤 요청인지 구분할 수 있는 방법이 포트를 사용하는 것이다. 포트 포워딩 - 컴퓨터 네트워크에서 패킷이 라우터나 방화벽 같은 네트워크 게이트웨이을 통과하는 동안 네트워크 주소를 변환해주는 것을 의미. 즉, 외부에서 접속이 가능하도록 하는 것

클라이언트 사이드 렌더링/서버 사이드 렌더링

렌더링 - 서버로부터 받은 내용을 브라우저 화면에 표시하는 것 렌더링의 과정 - Loader가 서버로부터 정보를 불러옴 - Parsing을 통해 문서를 DOM 트리로 만든다. - DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축 - CSS 설정/레이아웃 위치 지정 - 렌더링 트리가 그려짐 클라이언트 사이드 렌더링(CSR) - 보통 브라우저에서 자바스크립트를 사용해 콘텐츠를 렌더링하는 것. - 즉, 자바스크립트를 사용하여 HTML 문서에 렌더링을 진행하는 것.(Vue.js와 React.js의 등장으로 인기를 끌었다.) - 서버에 문서를 요청하는 것이 아니라, 브라우저에서 처리 장점 - 처음 요청할 때 한 페이지만 불러온다. (예-React에서 index.js만 불러온다) - 사용자의 행동에 따른 필..

[React] 개념

- 페이스북에서 제공해주는 프론트엔드 라이브러리 - Component 기반: Component에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여준다.-> 코드의 재사용성과 유지보수성을 증가 - JSX 문법: 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 준다. - 단방향 데이터 바인딩: 리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기 때문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다. - Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터. 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달..

Javascript/React 2021.07.20

동기/비동기

동기 - 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식 - 어떠한 일을 처리하는 동안 다른 프로그램은 정지 비동기 - 요청을 보낸 후 응답과는 상관없이 다음 동작이 이루어지는 방식 - 결과가 주어지는데 시간이 오래 걸려도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다. - 처리를 요청할 때 할 일이 끝난 후 처리결과를 알려주는 콜백이라는 함수를 함께 알려준다.

[Node.js] 개념

Node.js - Chrome V8 Javascript 엔진으로 빌드된 Javscript 런타임 *런타임 - 특정 언어로 만든 프로그램을 실행할 수 있는 환경 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있다. - 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼(특히 서버사이드로 많이 사용) - V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경) - 서버 사이드 스크립트 언어가 아니라 프로그램(환경) -> 서버에서도 사용할 수 있도록 만든 프로그램 - 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어짐. - Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있는 것이 특징 - 내장 ..

Javascript/Node.js 2021.07.20