개발에 도움이 되는 (78) 썸네일형 리스트형 this - this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이며 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 즉, 실행한 주체를 가리키며, 호출되는 방식에 따라 동적으로 결정된다. - this의 여러 case this는 전역 객체로 window를 기본적으로 참조하고 있다. 일반 함수 호출의 경우 this는 window를 참조한다. (호출 주체가 window기 때문에) 화살표 함수 호출의 경우 상위 객체를 참조한다. var obj = { name: 'B', print: function () { var inner1 = function () {console.log(this.name, name)}; inner1(); var inn.. JWT(Json Web Token) - JWT (Json Web Token) 쿠키와 세션의 단점을 보완하기 위해 나온 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰 인증에 필요한 정보들을 Token에 담아 암호화시켜 사용하는 토큰 JWT를 이용하면 유저가 자신의 데이터를 볼 수는 있는데 수정은 서버를 통해서만 할 수 있다 - JWT 구조 위 그림과 같이 header, payload, signature 세 파트로 나뉘어져있고, 각 파트는 . 으로 구분한다. 모두 Base64Url로 인코딩되어 있다. 1. header : 토큰의 타입, 서명 생성에 어떤 알고리즘이 사용되었는지 설정 { "typ" : "JWT", "alg" : "HS512" // HS512 알고리즘이 적용되어 private key를 암호화 } 2. payload :.. SOP(Same-Origin Policy), CORS(Cross-Origin Resource Sharing) 1. SOP (Same-Origin Policy) : 동일 출처 정책을 뜻하며, MDN에선 다음과 같이 정의한다. 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식 정리하자면 "같은 출처의 리소스만 공유가 가능하다" 라는 정책이다. - 출처 (Origin) : Protocol, Host, Port의 조합으로 되어있다. ex) https://help-solomon.tistory.com:443/ https = Protocol , help-solomon.tistory.com = Host, 443 = Port 이 중 하나라도 다르면 동일한 출처로 보지 않는다. SOP가 있어서 다른 사이트와의 리소스 공유를 제한하기 때문에 사용자 정보(ex. Log.. Canvas (React version) - Canvas : 테두리(border)도 컨텐츠(content)도 없는 단순한 흰 도화지 같은 사각형의 공간으로 다양한 그래픽 요소를 만들 수 있다. 간단한 도형을 그리는 것은 물론 데이터 시각화, 애니메이션, 웹 게임 등을 만들 수 있다. - 기본 Step 1. tag 생성 const canvasRef = useRef(null); useEffect(() => { canvasRef.current.width = window.innerWidth; canvasRef.current.height = window.innerHeight; }, []); canvas의 크기는 반드시 태그 속성으로 해주거나 useRef를 통한 DOM 접근으로 설정해준다. CSS 사용시 화면 왜곡 및 깨짐이 발생할 수 있다. 위 사진의 .. GitHub 배포 방법(요약) Repository가 있고 배포 직전까지 왔다고 가정하고 진행 - gh-pages 설치 npm i gh-pages - package.json 수정 homepage는 https://{사용자 계정 이름}.github.io/{저장소 이름}/ 으로 하면 된다. 저 위의 예시는 wpo-team-01는 Organizations 계정 이름이고 wanted-codestates-project-1-9가 저장소 이름이다. 본인의 이름으로 저장하면 된다. - package.json 저장 후 deploy npm run deploy - 아래 그림과 같이 Git Settings에 들어가 순서대로 실행 3번에서 Branch를 gh-pages( / root )로 바꾸고 Save - Actions에서 배포 진행 상황을 볼 수 있음 클로저(Closure) - 클로저 (Clousure) MDN에서의 정의 : "함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합" 모던 자바스크립트 Deep Dive에서의 정의 : "반환된 내부 함수가 자신이 선언됐을 때의 환경(렉시컬 환경)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수" 즉, 자신이 생성될 때의 렉시컬 환경을 기억하는 함수 내 나름대로의 정의 : 외부 변수를 품고 있는 함수, 함수는 원래 호출 후 실행 완료되면 CallStack에서 Pop되고, 선언된 변수 메모리는 GC에 의해 제거되어야 하지만 참조하고 있는 변수가 있어 제거되지 못한 상태라고 생각한다. function outerFunc() { var x = 10; var innerFun.. 코딩 테스트 시험 전 날 정리하면 좋을 기능들 이 게시물은 제목 그대로 요약정리 글이며, 너무 길어질 것을 우려하여 간략한 설명만 있으므로 이해가 안 된다면 MDN 참고 ( 계속 추가 예정 ) - Array 관련 pop() : Array의 맨 마지막 요소를 제거하고 그 요소를 Return push() : Array의 맨 마지막에 요소를 추가 shift() : Array의 맨 앞쪽에 요소를 제거하고 그 요소를 Return unshift() : Array의 맨 앞쪽의 요소를 추가 join('') : Array를 String 형태로 (구분자를 사이에 삽입) splice(start index, 개수) or splice( 삽입 또는 삭제를 원하는 index, 삭제할 개수, 삽입할 내용 ) : start index를 기준으로 개수만큼 삭제 return으로는 삭.. Redux Toolkit - Redux Toolkit Redux 표준 방식으로 만들어졌으며, 아래와 같이 세 가지 문제를 해결하기 위해 만들어졌다. 1) 기존 Redux Store 구성이 너무 복잡하다. 2) Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. 3) Redux에는 너무 많은 상용구 코드가 필요하다. - 주요 API 1. configureStore() : Store를 구성하는 API로 Slice Reducer를 자동으로 결합하고, 제공하는 모든 Redux MiddleWare, redux-thunk, Redux DevTools Extension을 사용할 수 있다. 2. createSlice() : Reducer 함수의 객체, Slice 이름, 초기 상태 값을 받아들이고 해당 Action 생성자와 A.. 이전 1 2 3 4 5 6 ··· 10 다음
