본문 바로가기

FrontEnd

 (37)
[Next.js] Nextjs에 Clerk IDaaS 적용기 원래 회사에서 사용자 인증 ,권한 관리 서비스로 사용하던 IDaaS(Identity-as-a-Service)는 auth0였는데, 비용 문제 등등 해서 Clerk로 변경을 할 수 있다고 해서, 일단 전체 변경했던 부분을 정리해본다! 이 회사에서 쓰는건 죄다 한글문서는 거의 존재하지 않았는데 Clerk도 마찬가지였다 :O 개인적으로 문서도 auth0에 비해 훨씬 깔끔하고 UI컴포넌트도 다양하고 설명도 잘 되어 있어서 적용하는데 문서만으로 충분했다 🔗 QuickStart 🔗 공식문서 > 🔗 UI컴포넌트 관련 페이지 > 참고로 저는 app router 기반으로 설정한부분을 정리해둡니다. ( Clerk Dashboard 설정, 가입과 nextjs는 되어 있는걸로 생각하고 넘어갑니다 ) 1. Install Cler..
vscode 테마 적용이 갑자기 안되는 경우 11/19일 다시 확인했는데 잘 되네 : ) ? 급하게 수정해서 배포했나보다 그냥 삽질 후기로 유지해 두도록 하겠습니다... 갑자기 vscode 컬러 적용 안되는 문제가 생겼다.? 결론 vscode-typescript-next 업데이트 때문 갑자기 주석이고 뭐고 다 흰색으로 보여서 재설치하고 업데이트 하고 난리를 쳐도 그대로.. 이정도 가독성이면 뭘 할수가 없잖아요!!! 스택오버플로우에 올라온 다른 사람과 경우가 똑같았다.. 갑자기 코드 작성해야 하는데 멘붕 ;0; 한시간 넘게 찾다가 갑자기 이런문제를 만난 개발자들이 많다는걸 알았음! 해결방법 문제는 아래 라이브러리 때문이였는데.. vscode-typescript-next 어제 업데이트하면서 뭔가 문제가 생겼나보다?! 그래서 다운그레이드 해서 다들 해결..
프록시 패턴, 프록시 서버, CORS, 이터레이터 패턴 간단 정리 프록시 패턴 다른 객체로 접근하는것을 통제하기 위해서 그 객체의 대리자를 제공하는 패턴 바빠서 그 일을 할 수 없는 메인 객체 대신 대리인 객체가 어느 정도 그 일을 처리해 줄 필요가 있거나, 다른 객체에 접근하기 위해 메인 객체는 은닉하고 대리인 객체를 두고자 하는 경우에 사용한다. 프록시 서버 프록시 객체가 클라이언트의 모든 요청을 받아 실제 객체의 서비스 접근을 흐름을 제어 CORS CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘 - CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다. 같은 출처와 다른 출처의 구분 두 URL의 구성 요..
[Storybook] 테마&로고 변경 , 공통 스타일 적용, 파비콘 변경 오늘 회사에서 적용하려고 급하게 검색으로 적용한 스토리북 테마 적용에 대해서 간단하게 정리합니다 : ( 아래 코드는 다크모드는 적용하지 않고 라이트 모드만 적용한 예시입니다! 1. 로고 변경, 커스텀 색상 테마 적용 1-1. 테마 정의 파일 작성 .storybook/theme.js import { create } from "@storybook/theming/create"; import logo from "../assets/images/storybook-icon.png"; export default create({ base: "light", colorPrimary: " #aa418c", colorSecondary: "#00526e", // UI appBg: "white", appContentBg: "wh..
[알고리즘] 탐욕, 그리디 (greedy) 탐욕, 그리디 : greedy 현재 상황에서 가장 좋은 것(최선의 선택)을 고르는 알고리즘 탐욕 알고리즘은 여러 경우 중 하나를 결정해야 할 때마다 그 순간에 최적이라고 생각되는 것을 선택해 나가는 방식으로 진행하여 최종적인 해답에 도달한다. 순간마다 하는 선택은 그 순간에 대해 지역적으로는 최적이지만, 그 선택들을 계속 수집하여 최종적(전역적)인 해답을 만들었다고 해서, 그것이 최적이라는 보장은 없다. ❓최적해 제약 조건을 충족시킬 수 있는 해(어떤 문제가 요구하는 값) 가운데 목적 함숫값을 최대 또는 최소로 만드는 값 그리디 특징 탐욕 알고리즘은 항상 최적의 결과를 도출하는 것은 아니지만, 어느 정도 최적에 근사한 값을 빠르게 도출할 수 있는 장점이 있다. 이 장점으로 인해 탐욕 알고리즘은 근사 알..
[자료구조] 트라이 (Trie) 트라이 : Trie 검색을 목적으로 하는 트리의 일종 동적인 set, 혹은 서로 관련이 있는 array를 저장하기 위해 주로 사용한다. 자동완성 기능, 사전 검색 등 문자열을 탐색하는데 특화되어있는 자료구조라고 한다. ❓ 자동 완성에서 Trie를 사용하는 과정 참고 https://biewoom.github.io/non%20linear%20ds/advanced%20ds/nodes%20ds/2020/04/14/Trie.html Trie는 문자열들을 하나하나 쪼개어 tree 구조에 넣음으로써 검색을 더 빠르게 한다. 예를 들어 'Datastructure'라는 단어를 검색하기 위해서는 제일 먼저 'D'를 찾고, 다음에 'a', 't', ... 의 순서로 찾으면 된다. 이러한 개념을 적용한 것이 트라이(Trie)..
[자료구조] 힙 (Heap) 손글씨로 패드에 정리하다가 블로그로 옮기는 자료구조.. 전에 패드에 정리한건 천천히 옮겨두어야겠다 힙 : heap 완전 이진 트리의 일종 여러 개의 값들 중 최댓값이나 최솟값을 빠르게 찾아내도록 만들어진 자료구조이다. 데이터들이 우선순위를 가지고 있어 우선순위가 높은 데이터가 먼저 나간다! ❓ 완전 이진트리 1) 완전 이진트리는 마지막 레벨을 제외 하고 모든 레벨이 완전히 채워져 있다. 2) 마지막 레벨은 꽉 차 있지 않아도 되지만, 노드가 왼쪽에서 오른쪽으로 채워져야 한다 ❓반정렬 상태 반정렬 상태라는 것은, 트리 구조를 배열에 저장한 것이므로 배열로만 보았을 때는 완전히 정렬된 상태로 보이지는 않는다. 힙(Heap) 규칙 큐에는 FIFO, 스택은 FILO의 규칙이 있듯 힙(Heap)에도 규칙 있다. ..
[FrontEnd] Html 테이블 쉽게 작성하는 사이트 오랜만에 html로 테이블을 여러개 만들일이 생겨서 테이블 변환해 주는 사이트가 있지않을까? 해서 찾다가 발견!!! 사실 편하게 ANTD, MUI같은 라이브러리 사용할 수도 있지만, 그럴 필요도 없는데다가 완전 정적인 페이지를 만드는거고, 테이블도 약간의 스타일을 줘야 했으므로 !! 혹시 또 쓸일은 없겠지만? 근데 너무너무 편해서 정리해둠! 1. 엑셀이나 다른 워드 프로그램처럼 이렇게 열과 행을 지정 할 수 있다. 2.  그냥 엑셀이나 표처럼 작성하고, 병합도 가능하고 정렬, 폰트 등의 지정도 가능하다. 3. 가운데 정렬하고, C1, D1, E1을 병합한 결과 4. 선택한대로 스타일 지정된 결과를 받을수도 있고, 나는 사진처럼 체크해서 css는 제외한 Html만 사용했다 사이트 링크
[JavaScript] 실행 컨텍스트의 생성과정 (Creation Phase, Execution Phase) 아래 영상을 보고 정리한 내용입니다 ! : ) 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 함수단위로 컨텍스트가 생긴다. Creation Phase | 생성단계 1 Activation Object 또는 Variation Object가 생성된다 - Variation Object : 일반 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체 - Activation Object : Variation Object의 종류인데, 전역 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체 var, let, const로 선언된 변수(명시적 변수)들이 지역,전역 상태에 따라 위의 각 Object에 추가된다. 호이스팅이 일어나는 상황이고, 변수명을 key가 되고, value는 일단 undefind로 할당된다. Exe..
[FrontEnd] SOAP, REST, RESTful까지 한번에 정리 1. SOAP(Simple Object Access Protocol) http, https를 통해 XML기반 메세지를 교환하는 프로토콜 WSDL Doc 웹 서비스를 서비스에 대한 정보를 기술하기 위한 XML 기반 마크업 언어. UDDI 웹 서비스 저장소 SOAP의 한계 WSDL로 정의하고 UDDI에 저장하고 서비스를 UDDI에 요청하여 받아와서 사용 하므로 구조가 복잡하고 http에서 전달되기 무겁다. (프로토콜 자체라 보안이나 메시지 전송 등에 있어서 REST보다 더 많은 표준들이 정해져있기 때문에 조금 더 복잡함) 개발 환경이 필요하고, UDDI(저장소)를 거쳐야 한다. 2. REST(REpresentational State Transfer) ROA를 구현하기 위한 자원을 중심으로 한 애플리케이션 개..

티스토리툴바