본문 바로가기

반응형

전체 글

(645)
Node.js 서버에서 Jwt 토큰 사용하기 Jwt 토큰은 Json Web Token의 약자입니다. 말그대로 Json 포맷 데이터를 가지고 있는 토큰입니다. https://jwt.io/ JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io Jwt 토큰은 3가지 형태로 나누어저 있는데 , header, payload, signature 지금은 Node에서 어떻게 Jwt 토큰을 다루는지에 대해서 학습하겠습니다.!!! Header { "typ": "JWT", "alg": "HS256" } - 타입은 JWT - 해싱 알고리즘은 HS256을 사용합니다. (단방향 해시라고 하는데요..
프로그래머스 : 보석 쇼핑 const isTrue = (count, cnt) => { for(let i=0;i
프로그래머스 : 다단계 칫솔 판매 (JavaScript) HashMap으로 판매자들을 number 로 변경, 그 후 배열로 부모 관계 데이터 표현 DFS 상위에 판매결과값 전달. const hash = new Map(); var edge; var answer; const DFS = (num, money)=> { const next = edge[num]; const nextMoney = Math.floor(money * 0.1); const currentMoeny = money - nextMoney; answer[num] += currentMoeny; if(next !== null && nextMoney!== 0) DFS(next, nextMoney); } function solution(enroll, referral, seller, amount) { const..
프로그래머스 : 표 편집 (JavaScript) https://programmers.co.kr/learn/courses/30/lessons/81303 코딩테스트 연습 - 표 편집 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z"] "OOOOXOOO" 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z","U 1","C"] "OOXOXOOO" programmers.co.kr JavaSciprt로 양방향 연결리스트 구현 후 처리해주면 쉽게 풀 수 있습니다. var list; var stack = []; var answer; const Delete = (k) => { stack.push([k,list[k][0],list[k][1]]); let pre = list[k][0]; let ne..
React 프로젝트에 Redux 적용하기 : Redux란?? 다음 Redux는 React.Hook 타입을 기본으로 적용하였습니다. 리액트에는 데이터를 전달하는 요소들이 다음 표와 같이 있습니다. 구분 설명 프로퍼티 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터입니다. state 컴포넌트의 state를 저장하고 변경할 수 있는 데이터입니다. 컨텍스트 부모 컴포넌트에서 생성하여 모든 자식 컴포너넌트에 전달하는 데이터입니다. 리덕스 서버에서 받은 데이터를 앱 전체에 전달하거나 관리합니다. 컨텍스트와 리덕스가 서로 비슷해 보일수 도 있다. 최상위 컨텍스트에서 서버에서 요청하고 데이터를 핸들링하는 로직을 넣으면 리덕스이기 때문이다. 하지만 리덕스는 라이브러리를 제공하면서 편리한 기능들을 제공한다. 리덕스는 어떻게 동작할까? - 컴포넌트는 dispatch() ..
Node.js : Oauth 로그인 연동 (카카오 로그인, 구글 로그인) Oauth KAKAO 로그인, 구글 로그인 같은 경우는 Oauth 플로우를 따르고 있습니다. 따라서 먼저 Ouath에 대해서 학습합니다. 지금 소개에서는 Oauth를 다 다루지 않고 이전 포스팅으로 대체하겠습니다. Ouath 는 모르겠고 구현만 필요해도 학습하는것을 추천합니다. 해당 플로우를 알아야 구현에 많은 도움이 됩니다. https://redbinalgorithm.tistory.com/443 OAuth, OAuth2 생각해보기 웹 사이트를 이용할 때 "네이버로 로그인" 같이 별도의 회원가입 없이 로그인을 제공하는 서비스를 이용해 본적이 있다. 이때 해당 플랫폼의 아이디가 있다면 외부 서비스에서도 인 redbinalgorithm.tistory.com 간단하게 Oauth는 내가만드는 클라이언트 서버에서..
SVG SVG svg는 벡터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 벡터 이미지 표준입니다. SVG !== CSS 이지만 CSS를 이용해 SVG를 활용할 수 있습니다. Cicle width, height : svg 전체의 크기를 그려줍니다. (종이의 크기) = cx, cy : 현재 cicle태그인 원의 중심점을 의미합니다. r : 반지름을 의미합니다. (이값이 설정되면 원의 크기가 정해집니다.) stroke : 테두리선의 색상을 의미합니다. stroke-width : 테두리선의 굵기를 의미합니다. fill : 테두리를 제외한 내부요소의 색상을 결정합니다. rect x, y : svg 그림의 좌측, 상단에서 떨어진 정도를의미합니다. (cx, cy 다릅니다.) line x(12), y(12)..
접근성 : ARIA-TAB ARIA-TAB 탭은 스타일을 의미하는 것이 아니라 현재 페이지 내용에 색인을 제공하는 구조(tablist, tab, tabpanel)를 의미합니다. role 속성은 값에 따라 적용할 수 있는 HTML 요소가 제한됩니다.role="tabpanel" 속성은 요소에 사용할수 없습니다. 기본 골격 주요 속성 role ="tab" aria-selected : 현재 탭의 선택 여부를 확인합니다. aria-controls : 현재 tab과 연결된 panel의 id값을 적용합니다. tabindex : 활성 포커스 속성입니다. 자세한 내용 role ="tabpanel" tabindex : 활성 포커스 속성입니다. 활성되면 키보드 tab버튼으로 접근 가능합니다. aria-labelledby : 현재 panel과 연결된 ..

반응형