개발 연습 블로그

🐱‍👤 애플리케이션에서 유저 특정하고, 각기 다른 권한을 주기 위해 필요한 작업 순서 🦥 1. 회원가입 2. 로그인 (authentication = 인증) 3. 로그인 이후의 요청과 응답 (authorization = 인가) 이미 로그인한, 권한있는 유저의 요청인지 체크 (1) 쿠키에 유저 정보 담는 방식 (원시적) (2) 세션 방식 근데 세션 방식의 단점은 스케일이 커졌을 때 발생한다. (효율성 문제...) 서버를 여러대 두게 되었을 때 (3) 토큰 방식 토큰 구현 방식에는 몇가지 선택지가 있는 것 같다. - 토큰 타입 : JSON (= JWT ) / XML ( = SAML) - 토큰을 어디에 담아 보낼지 : 쿠키 / Authorization Header (참고) If the token is sent ..

😎 2021.04.30 - [WEB] - 쿠키, 세션, passport.js 지난시간 localstrategy 복습 인증 요청 이후 모든 요청 OAuth2.0 delegating user authentication to the service that hosts the user account, and authorizing third-party applications to access the user account. 이부분은 나중에 까먹으면 생활코딩 OAuth2.0 강의를 또 듣자... google login 간단한 구현 코드 1편과 동일한데 strategy 만 local => google로 바꿨다. const express = require('express'); const app = express(); c..

쿠키 An HTTP cookie(also called web cookie, Internet cookie, browser cookie, or simply cookie) is a small piece of data stored on the user's computer by the web browser while browsing a website. Cookies were designed to be a reliable mechanism for websites to remember stateful information 유저단은 브라우저가 알아서 해주니까 신경안써도 되고, node.js express 서버에서는 예를들어 이런식의 작업들을 하면 쿠키라는 것을 적용할 수 있다. (1) set-cookie (2) htt..

이젠 create-react-app프로젝트와 express 서버 간의 요청의 경우를 살펴보자. create-react-app 프로젝트의 스크립트 안에서 서버에 어떻게 CORS policy를 위반하지 않고 http request를 잘 보낼 수 있을까? [1] 빌드해서 연결해서 요청보내기 (npm run build) => 같은 오리진이니까 문제 없다 간이 예를 들어보자면 빌드 명령어 결과로 생성된 build 디렉토리 아래다가 이런 간단한 express 서버를 만들어서 연결해보자. [2] npm start 명령어일때 드디어 CORS 문제 발생 => 최종 연결할 서버가 아니라 dev용 서버에 연결되어 돌아가기 때문에. ( 참고 ) create-react-app 의 dev 서버에 대한 글 : 2021.02.27 ..

CORS가 뭔지 알아보려고 구글링하는데 create-react-app으로 생성한 react랑 express서버를 프록시나 cors설정으로 연결하는 블로그 글이 있었다. react로 뭘 만들어본 적이 없어서 그 글을 읽어도 어떤 맥락에서 저런 설정을 해야하는건지 낯설었다. 이번에 알아보도록 하자. 개념 알아보기 proxy In computer networking , a proxy server is a server application or appliance that acts as an intermediary for requests from clients seeking resources from servers that provide those resources. - 위키피디아 forward proxy vs ..

🐤 zerocho 리액트(웹 게임) 강좌를 듣고 정리했습니다. 코드 출처도 zerocho 입니다. 리액트 특징 [1] 리액트를 쓰면 개발 방식의 큰 변화중 하나가 직접 DOM을 조작해서 화면을 바꿔주는 방식이 아니라, 우리는 state, props등의 데이터만 바꿔주고, 리액트가 state의 변경 사항을 감지하고 다시 렌더링해서 알아서 데이터 - 화면의 싱크를 맞춰준다는 것이다. + [2] 일종의 사용자 정의 엘리먼트인 컴포넌트 단위로 화면을 구성해나가기 때문에 재사용성이 좋아지고, [3] 결과물이 single page application라는 점 때문에 (서버에게 요청하는 페이지는 첫 엔트리 지점 하나고 나머지는 js 코드로 생성한 컴포넌트들이 조건에 따라 보여지고 숨겨지고 하는 방식으로 페이지 이동을..

https://programmers.co.kr/learn/courses/30/lessons/42890 코딩테스트 연습 - 후보키 [["100","ryan","music","2"],["200","apeach","math","2"],["300","tube","computer","3"],["400","con","computer","4"],["500","muzi","music","3"],["600","apeach","music","2"]] 2 programmers.co.kr 처음 코드 function solution(relation) { function comb(l,n){ if(n{x.push(l[0]); return x}); let wo = comb(l.slice(1),n); return w.concat(wo..

function solution(expression) { let l = expression.split(/([*+-])/g); let op = [...new Set([...expression.matchAll(/([*+-])/g)].map(x=>x[0]))]; let f = {'*': (a,b)=>a*b, '-':(a,b)=>a-b, '+':(a,b)=>a+b}; //순열 function perm(l){ let ret=[]; for(let [i,x] of l.entries()){ let rest=perm(l.slice(0,i).concat(l.slice(i+1))); if(!rest.length) ret.push([x]); else rest.reduce((r,p)=>{p.push(x); r.push(p); ..