position: absolute 를 통해서 가운데 정렬을 만드는 방법 canvas 엘리먼트가 있다고 가정 (div와 같음) #canvas1 { border: 5px solid black; position: absolute; top: 50%; left: 50%; } 여기까지만 하면, element좌상단 좌표를 기준으로 정가운데 정렬(top, left 50%) 된다. 여기에다 element를 왼쪽 오른쪽으로 이동시켜주면 가운데 정렬이 될것이다. transform: translate(-50%, -50%) 을 적용해주면 된다! #canvas1 { border: 5px solid black; position: absolute; top: 50%; left: 50%; transform: translate(-50%,..

작동 원리1. 클라이언트에서 유저가 credentials(아이디, 비밀번호) 로 서비스에 로그인2. 서버는 서명된 JWT를 생성하고 response에 넣어 반환3. 클라이언트에서 서버에 추가적인 요청을 보낼 때, JWT를 HTTP header에 첨부4. 서버는 클라이언트에서 온 JWT를 검증하고 데이터 반 로그인 성공 -> JWT 반환- 인증(authentication) 과정에서 유저가 로그인에 성공하면, JWT가 반환된다- 이때, 토큰은 보안 문제를 방지하기 위한 세심한 주의가 필요하다 토큰 관련 주의사항- 토큰은 가능한 짧게 보관하는 것이 좋다 (탈취당하는 것을 막기 위해)- 토큰을 브라우저 저장소(로컬 스토리지 or 세션 스토리지 등) 에 저장하면 안된다 토큰 형태- 유저가 보호되는 경로 (prot..

JWT : JSON Web Token의 약자 - 데이터를 JSON 형태로 안전하게 주고 받기 위한 개방형 표준 (RFC 7519를 따르고 있음)- 전자서명되어 위변조 불가- 회원 가입, 로그인 등의 권한 부여(authorization) 과정에서 폭넓게 사용됨- 토큰 자체에 정보를 포함할 수 있음 (payload) Token이란- 토큰은 세션과 달리 서버가 아닌 클라이언트에 저장됨 Authorization 활용 시나리오- 유저가 한번 로그인하면, 이후의 모든 요청의 헤더에 JWT가 포함됨- 이 토큰을 통해 유저가 허용된 라우트 및 리소스 등에 접근 가능 (서버가 토큰을 검증) JWT 구조1. Header2. Payload3. Signature-> 토큰은 xxxxx.yyyyy.zzzzz 같은 모양을 갖는다 ..

리졸버는 API 사용자가 요청한 데이터를 해결(resolve)한다 API에는 2가지 자료형의 리졸버가 포함된다 - 쿼리 - 뮤테이션 쿼리 - 특정 데이터를 지정하여 요청하는 형태 뮤테이션 - API에서 데이터를 수정할 때 사용 - 객체 형태로 수정 작업의 최종 결과를 반환

GraphQL API의 기본 구성요소 2가지 - 스키마 - 리졸버 스키마 - 데이터와의 상호작용을 텍스트로 표현한 것 - API가 스키마 내에서 정의된 데이터만 반환하고 상호작용을 수행할 수 있도록 함 - 객체 자료형으로 구성됨 (5가지 스칼라 자료형 내장됨) 1. String : UTF-8 문자열 2. Boolean 3. Int : 32비트 정수 4. Float : 부동 소수점 5. ID : 고유 식별자 객체 자료형 예시 (String 자료형) const typeDefs = gql` type Query { hello: String } `; 먼저 자료형을 정의한다 스키마 자료형 예시 (피자 메뉴를 위한 API) type Pizza { id: ID! size: String! slices: Int! topp..

1. 인터넷 네트워크 1-1. IP 1-2. TCP/UDP 1-3. PORT 1-4. DNS IP는 기억하기 어렵고, 변경될 수 있다는 한계점이 있다 따라서 DNS를 사용한다 DNS (Domain Name System) - IP의 전화번호부 역할 - 도메인 명 IP 주소 변환 ex) 구글 서버, 네이버 서버 도메인 명 : google.com IP : 200.200.200.2 도메인명 : naver.com IP : 210.210.210.3

1. 인터넷 네트워크 1-1. IP 1-2. TCP/UDP 1-3. PORT 1-4. DNS PORT : 같은 IP 내에서 프로세스 구분 - 포트번호는 0 ~ 65536 할당 가능 - 0 ~ 1024 : 잘 알려진 포트이므로 사용하지 않는 것이 좋음 - FTP : 20, 21 - TELNET : 23 - HTTP : 80 - HTTPS : 443

1. 인터넷 네트워크 1-1. IP 1-2. TCP/UDP 1-3. PORT 1-4. DNS 인터넷 프로토콜 스택의 4계층 각 계층을 지나며 점점 추가 데이터가 붙음 TCP(Transmission Control Protocol) 특징 TCP : 전송 제어 프로토콜 - 연결 지향 - TCP 3way handshake (가상 연결) - 데이터 전달 보증 (SYN, ACK가 왔다 갔다 하면서 데이터 전송 여부를 확인) - 순서 보장 (패킷 순서 잘못되면 서버에서 데이터 재전송 요청) - 신뢰할 수 있는 프로토콜 - 현재 대부분 TCP 사용 TCP 3way handshake UDP(User Datagram Protocol) 특징 UDP : 사용자 데이터그램 프로토콜 - 하얀 도화지에 비유 (기능이 거의 없음) ..