Frank의 공부 일지

3.1 ESLint를 사용하라 - ESLint는 발생 가능한 코드 에러를 체크하고 껄끄러운 간격 문제를 식별하는 것부터 프로그래머가 분별없이 에러를 던지는 것과 같은 코드의 심각한 안티 패턴을 감지하여 코드 스타일을 바꾸는 것에 대한 사실상의 표준이다. - ESLint도 자동으로 코드스타일을 고칠 수 있지만 prettier와 beautify같은 수정 부분의 포맷을 맞춰주는 강력한 툴이 있고 ESLint와 함께 작동된다. -> 그렇게 하지 않을 경우: 프로그래머가 쓸데없이 간격과 각 줄의 길이 문제에 집중하고 프로젝트의 코드스타일에 대해 과도하게 생각하느라 시간을 낭비하게 된다. 3.2 Node.js에 특화된 플러그인들 - vanila JS만 지원하는 ESLint의 표준 규칙 위에 eslint-plugin..

2.1 비동기 에러 처리시에는 async-await 혹은 promise를 사용하라 - 비동기 에러를 콜백 스타일로 처리하는 것은 지옥으로 가는 급행열차나 마찬가지다. 평판이 좋은 promise 라이브러리를 사용하거나 훨씬 작고 친숙한 코드 문법인 try-catch를 사용하게 해주는 async-await를 사용하는 것이다. -> 그렇게 하지 않을 경우: Node.js의 function 콜백 스타일은 에러 처리와 일반 코드의 혼합, 코드의 과도한 중첩, 어색한 코딩 패턴 때문에 유지보수가 불가능한 코드로 가는 확실한 길이다. 예) promise를 사용해서 에러를 잡아내는 예제 doWork() .then(doWork) .then(doOtherWork) .then((result) => doWork) .catch..

1.1 컴포넌트 기반으로 설계 - 코드를 컴포넌트로 나누고, 각각의 컴포넌트가 자신의 폴더 혹은 할당된 코드베이스를 안에서 작고 간단한 단위로 유지되도록 해라. -> 그렇게 하지 않을 경우 새로운 기능을 작성하는 개발자가 변경사항이 어떤 영향을 미치는지 알기가 힘들면 의존하고 있는 다른 컴포넌트를 망칠까 두려워 하게 되고, 이는 배포를 더 느리고 더 불안전하게 만든다. 좋은예: 자족적인 컴포넌트 기반으로 설계 나쁜예: 파일을 기술적인 역할별로 모아두기 1.2 컴포넌트를 계층화하고, Express를 그 경계 안에 둬라 - 각각의 컴포넌트는 웹, 로직, 데이터 접근 코드를 위한 객체인 '계층'을 포함해야 한다. 이것은 우려할 만한 요소들을 깨끗하게 분리할 뿐만 아니라 모의 객체를 만들어 테스트하기 굉장히 쉽..

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

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..

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

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

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

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