리액트바오

인증보안부분은 재미있으면서도 어렵다. 특히 OAuth는 내가 무심코 많이 써왔는데 어떻게 돌아가는지 알게 되니 흥미로웠다. 프로젝트를 하게 되면 OAuth를 적용하여 구글,카카오톡,네이버 로 로그인 할 수 있도록 만들어야겠다. OAuth 인증 방식을 구현하는 방법은 아래와 같다. 1. GitHub에 내 앱 등록 https://www.oauth.com/oauth2-servers/accessing-data/create-an-application/ 를 참고하여, OAuth 앱을 등록한다. Homepage URL 및 Authorization callback URL은, 안내한 문서의 스크린샷에서처럼 https://example-app.com 으로 써도 좋고 http://localhost:3000과 같이 써넣어도 ..

TIL 2022. 2. 10. 23:20

OAuth 2.0 여러분이 웹이나 앱에서 흔히 찾아볼 수 있는 소셜 로그인 인증 방식은 OAuth 2라는 기술을 바탕으로 구현된다. 전통적으로 직접 작성한 서버에서 인증을 처리해 주는 것과는 달리, OAuth는 인증을 중개해 주는 메커니즘이다. 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜이다. 즉, 이미 사용자 정보를 가지고 있는 웹 서비스(GitHub, google, facebook 등)에서 사용자의 인증을 대신해 주고, 접근 권한에 대한 토큰을 발급한 후, 이를 이용해 내 서버에서 인증이 가능해진다. OAuth가 모든 것을 해결해 주는 솔루션은 아니다. 여전히 사용자 정보가 내 서버에 저장되는 것은 변함이 없다. OAuth는 인증(Authenticati..

TIL 2022. 2. 9. 23:12

인증보안을 학습하는 날이다. 설 연휴동안 미리 읽어보기는 했지만 잘 와 닿지 않았다. 좋은 페어를 만나서 함께 스프린트를 진행해보니 어렵지만 재미있었다. HTTPS 프로토콜 HTTPS는 Hyper Text Transfer Protocol Secure Socket layer 의 약자이다. HTTP over SSL(TLS), HTTP over Secure라고 부르기도 한다. HTTPS는 HTTP 요청을 SSL 혹은 TLS라는 알고리즘을 이용해, HTTP 통신을 하는 과정에서 내용을 암호화하여 데이터를 전송하는 방법이다. 질문: SSL, TLS는 무엇일까? SSL과 인증기관(CA)은 어떤 관계가 있나? 인증에서 HTTPS 프로토콜을 사용해야만 하는 이유는 HTTP보다 상대적으로 안전한 방법이고, 데이터 제공자..

TIL 2022. 2. 8. 04:20

오늘 학습할 내용은 '코딩테스트 준비' 였는데 개념을 읽고 페어와 함께 문제를 푸는것이었다. 코플릿 문제푸는것에 흥미가 없던 나는 시작전부터 사실 한숨을 쉬기도 했는데 좋은 페어를 만나니 그 마음은 온데간데 사라지고 너무 몰입이 잘 되는 시간이었다. 또다시 문제를 풀어보고 싶고, 흥미롭고 코플릿문제에 흥미가 생길정도랄까.. 나도 이런 좋은 영향력을 줄 수 있는 사람이 되고 싶다. Big-O 표기법 Big-O(빅-오) Big-Ω(빅-오메가) Big-θ(빅-세타) O(1) Big-O 표기법은 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼마만큼 걸리는가?를 표기하는 방법이다. O(1)는 constant complexity라고 하며, 입력값이 증가하더라도 시간이 늘어나지 않는다. 다시 말..

TIL 2022. 1. 18. 22:04

chmod: 권한을 변경하는 명령어 명령어 chmod 폴더나 파일의 읽기, 쓰기, 실행 권한을 변경할 수 있다. OS에 로그인한 사용자와, 폴더나 파일의 소유자가 같을 경우에 명령어 chmod 로 폴더나 파일의 권한을 변경할 수 있다. 만약 OS에 로그인한 사용자와, 폴더나 파일의 소유자가 다를 경우에는 관리자 권한을 획득하는 명령어 sudo 를 이용해 폴더나 파일의 권한을 변경할 수 있다. 명령어 chmod 로 권한을 변경하는 방식은 두 가지가 있다. 첫 번째는 더하기(+), 빼기(``), 할당(=)과 액세서 유형을 표기해서 변경하는 Symbolic method입니다. 두 번째는 rwx를 3 bit로 해석하여, 숫자 3자리로 권한을 표기해서 변경하는 Absolute form이다. Symbolic met..

TIL 2022. 1. 18. 21:49

자료구조 그래프에 대해 공부했고 이 내용을 가지고 코플릿을 풀었다. 그래프 부분이 어렵게 느껴져서 레퍼런스를 보며 이해하는 방향으로 공부했다. 속상했다. [Graph] 인접 행렬 길찾기 주어진 인접행렬에서 한 정점으로부터 다른 정점으로 이어지는 길이 존재하는지 반환해야 합니다. 입력 인자 1: matrix Array 타입을 요소로 갖는 인접 행렬이 담긴 2차원 배열 인자 2: from Number 타입의 시작 정점 인자 3: to Number 타입의 도착 정점 출력 boolean 타입을 리턴해야 합니다. 입출력 예시 const result = getDirections( [ [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1], [0, 1, 0, 0], ], 0, 2 ); console..

TIL 2021. 12. 17. 21:45

자료구조 스택과 큐에 대해 공부했고 이 내용을 가지고 코플릿을 풀었다. [Queue] 박스 포장 마트에서 장을 보고 박스를 포장하려고 합니다. 박스를 포장하는 데는 폭이 너무 좁습니다. 그렇기에 한 줄로 서 있어야 하고, 들어온 순서대로 한 명씩 나가야 합니다. 불행 중 다행은, 인원에 맞게 포장할 수 있는 기구들이 놓여 있어, 모두가 포장을 할 수 있다는 것입니다. 짐이 많은 사람은 짐이 적은 사람보다 포장하는 시간이 길 수밖에 없습니다. 뒷사람이 포장을 전부 끝냈어도 앞사람이 끝내지 못하면 기다려야 합니다. 앞사람이 포장을 끝내면, 포장을 마친 뒷사람들과 함께 한 번에 나가게 됩니다. 만약, 앞사람의 박스는 5 개고, 뒷사람 1의 박스는 4 개, 뒷사람 2의 박스는 8 개라고 가정했을 때, 뒷사람 1..

TIL 2021. 12. 16. 21:51

리액트로 온라인 마켓에서의 장바구니에 추가, 물품 삭제, 수량 조절하는 과제를 페어와 함께 진행했다. 수량을 조절하는 부분이 어려워서 고민을 했었기에 수량조절 부분을 기록해보려고 한다. App function App() { const [items, setItems] = useState(initialState.items); const [cartItems, setCartItems] = useState(initialState.cartItems); //이 부분이 수량 조절 하는 부분 함수다. const handleQuantity = (quantity, itemId) => { const newCartItems = [...cartItems] let findIdx = cartItems.findIndex((item) ..

TIL 2021. 12. 2. 22:39