인증과 인가를 이해하기 위한 Auth0과 OAuth 2.0 설명
2023. 5. 9. 17:42
개발이야기/TIL
먼저 인증과 인가의 개념을 이해해봅시다. 인증(Authentication)은 사용자가 누구인지 확인하는 과정입니다. 로그인 과정에서 이메일 주소와 비밀번호를 통해 사용자를 확인하는 것이 인증입니다. 인가(Authorization)는 인증된 사용자에게 특정 리소스에 대한 접근 권한을 부여하는 과정입니다. 예를 들어, 웹 페이지에 대한 읽기, 쓰기, 수정, 삭제 권한을 관리하는 것입니다. 인증 및 인가는 로그인 및 회원 가입 외에도 사용자의 권한을 관리하는 데 사용됩니다. 예를 들어, 웹사이트에서 관리자와 일반 사용자의 권한을 구분하여 관리하는 것도 인증 및 인가의 영역입니다. Auth0과 OAuth 2.0 소개 Auth0은 인증 및 인가를 손쉽게 구현할 수 있는 서비스(라이브러리 개념)이며, 그 안에는 다..
[Design Pattern] React와 Flux 패턴
2022. 9. 30. 09:45
개발이야기/TIL
지금은 react에서 데이터 관리를 할 때 redux를 쓰는 게 당연시되고 있다. 그럼 리액트는 왜 줄곧 MVC패턴을 사용하다가 flux패턴을 사용하게 되었는지 알아보자. Flux 출현 배경: 기존 MVC 모델의 한계 기존의 어플리케이션 환경에서 보편적으로 사용되는 패턴은 MVC였다. Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달되는 흐름, 하지만 이 패턴의 문제점은 어플리케이션의 규모가 커질수록 데이터 흐름의 복잡도가 무지막지하게 늘어난다는 것이었다. 예를 들어 칼럼 게시판을 만든다고 치면. (이 게시판 UI의 가장 큰 특징은 자신이 최근에 남긴 댓글이 우측 사이드..
[Design Pattern] MVC
2022. 9. 30. 08:54
개발이야기/TIL
디자인패턴 “바퀴를 다시 발명하지 마라(Don’t reinvent the wheel)” 이 문장이 뜻하는 의미는 무엇일까? 이미 만들어져서 잘 되는 것을 처음부터 다시 만들 필요가 없다는 의미이다. 이처럼 디자인 패턴은 자주 발생하는 고질적인 문제들은 또 발생할 수 있기때문에 하나의 패턴을 만들어서 재사용할 할 수 있게 만들어주는 해결책이다. 그럼 ... 만약에... 이런 방법들이 없다면 ? 우리는 클래스 함수들을 일일히 다 만들어야 한다.😵💫🤮 디자인패턴은 라이브러리나 프레임워크와 의미가 비슷하다고 보면되는데, 예를 들어 그냥 jQuery를 이용한다면 $('#MVC')로 DOM을 선택할 수 있는 것을 순수 Javascript를 사용한다면 document.getElementsByid('MVC')로 길게..
[CS] 컴파일러와 인터프리터 차이점
2022. 9. 28. 09:47
개발이야기/TIL
컴파일러와 인터프리터의 차이점을 알아보기전에 컴파일이란 무엇인지 알아보자. 컴파일이란 어떤 언어의 코드전체를 다른 언어로 바꿔주는 과정이다. 그리고 이것을 자동으로 만들어주는 소프트웨어를 컴파일러라고 한다. 코드 전체를 다른 언어로 바꿔준다고?????😧 음.....글쎄요....왜....굳이 다른 언어로 바꿔줘야해? 코드를 컴파일하는 이유는 아주 간단한데.. 바로 '의사소통' 을 해야하기때문이다. 컴퓨터와 의사소통을 하려면 '언어' 가 필요하고, 컴퓨터는 기계어를 사용, 인간은 사람 중심 언어인 고급 언어를 사용한다. 둘의 언어는 서로 방식이 다르기때문에 의사소통이 되지않는다.💔❌(삑) 따라서 우리는 사람의 문제를 해결하기 위한 코드를 작성하고 컴파일러를 활용해 그 코드를 기계어로 변환해주는 것이다. 그럼..
[JS] 여러 input 에 한번에 붙여넣기
2022. 9. 22. 22:25
개발이야기/TIL
요즘엔 볼 수 없지만 예전에는 이런 시리얼번호를 입력하는 폼이 있었다. 시리얼 번호를 입력할때 첫번째 input을 클릭한 뒤 복사한 텍스트를 붙여넣기를 하면 자동으로 모든 input 에 입력되는 기능!! 요즘엔 보안상의 문제인지, 시스템의 문제인지.... 하나로 합쳐진 input창을 볼 수 있다. 하지만 나는 맨위에 input처럼 여러 input 에 한번에 붙여넣는 기능이 필요했다. 구글링 시도 중....... 모든 사이트를 찾아봐도 저렇게 구현되는 기능은 없었다🤯 심지어 문화상품권을 입력하는 핀 input창도 요즘엔 input이 하나더라... (불안해지기 시작) 열심히 찾는도중 onpaste 이벤트를 사용하면 붙여넣기 이벤트를 제어할 수 있다는 글을 발견했다. 결국 찾아냈는데, 2004년에 네이버블로그..