Namu Study

Cross Oring Resource Sharing 보안 목적으로 브라우저에 기본설정 되어있는 정책 출처(origin)가 다른 요청을 차단한다. 브라우저와 서버의 출처가 다른경우에 cors정책에 의해서 api요청이 불가능 하다. 해결하려면 출처를 같게 설정하거나 다른 출처를 서버에서 허용해야 한다. 허용은 서버에서 하지만 차단은 브라우저에서 한다. 이를 이용해서 프록시 서버를 이용한 우회가 가능하다. app.use( cors({ origin: "127.0.0.1:5500", }) );

자바 스크립트 코드에서 오류를 잡아주는 도구입니다. 오류란 코드 품질 관리를 위한 ESLint 설정에 맞지 않는 코드입니다. 코드 품질관리를 위해서 언어 사용 스타일과 관련된 코딩 컨벤션을 적용하고 공유하기 위해서 사용합니다. -> prettier의 맞춤법 보정 기능과는 역할이 다르며 같이 사용이 가능합니다. eslint를 설치하고 설정파일 설정 명령어를 입력하면 적용 범위를 선택할 수 있습니다. https://helloinyong.tistory.com/325 ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서..

this는 실행 컨텍스트가 생성될 때 같이 결정된다. this의 값은 함수를 어떻게 호출하냐에 따라 값이 달라진다. 메서드에서 this this에는 호출한 주체에 대한 정보가 담긴다. a.b() => this는 a

API에 사용하는 쿼리 언어입니다. 서버에서 실행하고 사용됩니다. 쿼리외에 다른 언어로도 사용이 가능합니다. 서버에서 정한 양식에 맞게 request 쿼리를 보내면 그에 맞는 response를 받을 수 있습니다. 클라이언트는 서버에서 정한 request 양식에서 원하는 데이터만 선택해서 받을 수 있습니다. 최적화가 잘된 GraphQL은 대규모 서비스에 유리합니다.(SNS) -> 네트워크 비용을 절약할 수 있습니다. 양식이 정해져 있지 않기 때문에 자유로운만큼 최적화를 위한 사용법이 잘못되면 오히려 낭비가 생기거나 의도치 않은 오류를 낼 수 있다. 내부 에러가 발생해도 response status code는 항상 200이다. 에러 메세지로 에러를 구분할 수 있다. restAPI와 같이 사용할 수 있다. e..

활성화된 실행 컨텍스트의 수집 정보 Variable Environment Lexical Environment ThisBinding Variable Environment 최초 실행 시 Variable Environment에 담기는 내용은 Lexical Environment와 같다. 실행 컨텍스트를 생성할 때 Variable Environment에 환경 정보를 담고 그대로 복사해서 Lexical Environment를 만든다. 이후에는 Lexical Environment를 주로 사용한다. Variable Environment의 내용은 변하지 않는다. Lexical Environment Variable Environment를 그대로 복사해서 생성되며 환경 변경 사항이 실시간으로 반영된다. Variable En..

git을 사용하는 이유 git은 버전 관리 도구입니다. 형상관리 도구라고도합니다. 프로젝트 협업 도구입니다. commit 단위로 code의 변경과정을 기록하고 모니터링할 수 있습니다. main, dev 기능별 브랜치를 생성하고 합치며 분업과 협업 안정적인 배포에 도움이 됩니다. git을 사용하면 현재 코드에 문제가 생겼을 때 비교적 쉽게 정상적으로 작동하던 과거 코드로 복구할 수 있습니다. -> git reset, revert... 스냅샷 방식으로 다른 방식(delta-base?)의 버전 관리 도구 보다 가볍고 빠릅니다. -> delta방식은 코드에 변경이 있으면 파일 전체를 새로 저장하는 듯 하다. git만 설치해서 사용할 수 있지만 github와 같은 외부 저장소와 같이 사용합니다. 브랜치 전략 팀 ..

얕은 복사: 바로 아래 단계의 값만 복사하는 방법 -> 중첩된 객체에서 참조형 데이터가 저장된 속성을 복사할 때 주소 값만 복사한다 -> 원본과 사본이 같은 주소를 사용한다. -> 사본 바꾸면 원본도 바뀐다. 깊은 복사: 모든 아래 단계의 값들을 전부 복사하는 방법 객체를 복사해서 완전히 새로운 객체를 만들기 위해서는 기본형 데이터 타입이 나올 때 까지 참조형 데이터의 내부 속성을 복사해야 한다. 얕은 복사 const copyObject = function (target) { const result = {}; for (let prop in target) { result[prop] = target[prop]; } return result; }; const user = { name: "jaenam", url..

객체지향 프로그래밍을 할 때 원본 객체를 유지해야할 필요가 있다. 변하지 않는 객체를 불변객체(immutable object)라고 한다. 자바스크립트에서 불변 객체를 만들려면 알아 둬야하는 것이 있다. var user = { name: "Jaenam", gender: "male", }; var changeName = function (user, newName) { var newUser = user; newUser.name = newName; return newUser; }; var user2 = changeName(user, "Jung"); console.log("user:", user, "user2:", user2); user라는 객체를 하나 만들고 user와 새로운 이름을 받아서 새로운 사용자 정보를..

JWT를 사용하는 이유 JSON 객체 데이터를 안전하게 전송할 때 JWT는 데이터를 키로 서명해서 토큰을 생성한다. 사용자의 Authorization 헤더 정보로 인증과 정보 조회를 진행할 때 SWT(Simple Web Token), SAML(Security Assertion Marup Language Tokens)과 비교 SAML에 비해 사이즈가 작습니다. SWT는 대칭키를 이용한 서명만 가능합니다. JWT와 SAML은 공개키/비공개키를 이용한 인증이 가능합니다. JWT 구조 Header 일반적으로 헤더는 두 영역(토큰 타입, 암호화 알고리즘)을 포함합니다. 헤더는 Base64로 인코딩되어 JWT에 포함됩니다. Payload 페이로드에는 사용자가 작성한 데이터를 포함합니다. 페이로드는 Base 64로 ..

다른 여러 기술들이 그렇듯이 자바 스크립트도 표준 문제가 있었던 듯 하다. 이를 정리하기 위해서 ECMA에서 표준을 정했고 이를 ECMA-262라고 한다. 이 표준에 새로운 버전이 업데이트 될 때 마다 ES(ECMA Script)1~4,5,6 또는 발행 연도를 붙여서 ES2015, 2016과 같이 부른다. 새로운 버전이 업데이트되면 새로운 함수가 추가되거나 에러수정, 생산성 향상을 위한 문법 수정 등이 있을 수 있으며 기타 여러 수정 사항이 있을 수 있다. 현재 최신 버전은 2020년에 나온 ES11이고 주로 사용되는 버전은 ES5와 ES6다. ES6에서 새로 추가된 기능 arrows classes enhanced object literals template strings destructuring def..