본문 바로가기

분류 전체보기

 (111)
[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..
[Next.js] Next.js app router error page 무한 새로고침 에러 next에 app router가 추가되었다! 기존의 page router도 사용가능 하지만 app router로 정의한 부분이 먼저 우선 적용된다고하기도 하고, 새 프로젝트를 개발하게되어 공식문서 따라하다가 오류난 부분이 있어서 정리해본다. app폴더 하위에 not-found.tsx 파일을 생성했는데 (404페이지인 경우 렌더링됨) 파일은 제대로 나오는데 무한 새로고침의 굴레에 빠졌음.. 사실 이전 프로젝트할때도 이런 증상이 있긴 했었다... 고질적인 문젠가개발환경에서만 그렇고 배포되면 별 문제 없길래 그냥 넘어갔었는데 이번엔 검색하다 이틀전에 올라온 해결방법을 찾아서 정리해둠! 추가한 폴더, 파일은 아래 이미지 참고 🤓 next 버전 : 13.4.6 1. app폴더 하위에 [...not_found] 라..
[Next.js] monorepo환경에서 next-seo, next-sitemap, robot 설정 | 사용하기 회사에서 monorepo로 프로젝트들을 작업하고 있는데, 그 중 한 프로젝트에 SEO를 위해 title, opengraph등 설정했던 내용들을 정리합니다. 1. next-seo 공식문서 https://github.com/garmeeh/next-seo 1. 라이브러리 설치 yarn add next-seo 2. DefaultSeo 설정 seo.config.js 옵션이 꽤 많은데, 일단 설정이 필요한 부분만 적용했습니다. 더 많은 옵션은 링크에서 확인가능합니다 : ) // /apps/프로젝트/seo.config.js export default { title: `{title}`, titleTemplate: '%s | `{부가설명}`', // %s에 각 페이지에서 설정한 title이 들어감 canonical: `..
[CS] 메모리 계층과 메모리, 캐시미스와 캐시미스, 웹 브라우저의 캐시 메모리 계층 1. 메모리(RAM) 하드디스크로부터 일정량의 데이터를 복사해서 임시 저장하고 이를 필요시마다 CPU에 빠르게 전달함 시스템이 재부팅될 때마다 초기화 (휘발성) 2. 캐시 데이터를 미리 복사해놓는 임시 저장소이자 빠른 장치와 느린 장치에서 속도차이에 따른 병목 현상을 줄이기 위한 메모리를 말함 캐시는 더 느린 주기억장치에 비해 빠른 접근 속도를 가지고 있으며, 빈번하게 사용되는 데이터를 저장 이를 통해 CPU는 필요한 데이터를 더 빠르게 찾을 수 있어 성능이 향상 캐시를 직접 설정하는 경우 자주 사용되는 데이터를 기반으로 설정해야한다. 자주 사용하는 데이터에 대한 근거가 지역성이다 지역성의 원리 시간 지역성: 최근 사용한 데이터에 다시 접근하려는 특성 공간 지역성: 최근 접근한 데이터를 이루..
[CS]운영체제(OS)역할과 구조, 시스템콜, 컴퓨터의 요소 정리 스터디 하면서 결정한 책으로 큰 영역은 정해지지만, 책에서 간결하게 정리해서 그런지 비어있는 내용이 너무 많아서 책을 기반으로 검색과 chatGPT로 내용을 보완해서 정리해둔다. 운영체제의 역할 운영체제는 컴퓨터 시스템의 핵심 소프트웨어로, 하드웨어 자원을 관리하고 프로그램을 실행시키는 역할을 합니다. 또한 사용자와 하드웨어 간의 인터페이스를 제공하며, 시스템의 안정성과 보안을 유지하기 위한 다양한 기능을 수행합니다. 운영체제의 구조 운영체제는 크게 커널과 유틸리티(응용 프로그램)로 이루어져 있습니다. 커널은 하드웨어와 직접적으로 상호작용하여 하드웨어 자원을 관리하고, 유틸리티는 커널 위에서 동작하는 프로그램으로, 사용자와 시스템 간의 인터페이스를 제공하며, 시스템의 자원 관리와 관련된 작업을 수행합니다..
[TypeScript] 이펙티드 타입스크립트 스터디 01,02 - 타입스크립트? 자바스크립트는 타입 스크립트에 속합니다. 즉, 자바스크립트로 작성된 모든 코드는 타입스크립트입니다. 자바스크립트는 런타임에서 타입을 알게되고, 타입스크립트 타입 시스템은 자바스크립트 런타임 동작을 모델링합니다. 이렇듯, 런타임으로 가기전에 타입검사를 함으로 런타임에 발생할 수 있는 오류를 먼저 잡아낼 수 있어서 프로그램 개발자에게 빠르게 알려줄 수 있습니다. tsconfig.json ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정을 할 수 있는 파일 컴파일타임과 런타임과 에러 컴파일타임(Compiletime) 개발자가 작성한 소스코드를 컴파일하여 기계어로 변환하는 과정. 컴파일 타임 에러 신택스에러(Syntax error), 파일참조 오류, 타입 체크 오류, ... 컴파일러는 컴파일..
vscode 테마 적용이 갑자기 안되는 경우 11/19일 다시 확인했는데 잘 되네 : ) ? 급하게 수정해서 배포했나보다 그냥 삽질 후기로 유지해 두도록 하겠습니다... 갑자기 vscode 컬러 적용 안되는 문제가 생겼다.? 결론 vscode-typescript-next 업데이트 때문 갑자기 주석이고 뭐고 다 흰색으로 보여서 재설치하고 업데이트 하고 난리를 쳐도 그대로.. 이정도 가독성이면 뭘 할수가 없잖아요!!! 스택오버플로우에 올라온 다른 사람과 경우가 똑같았다.. 갑자기 코드 작성해야 하는데 멘붕 ;0; 한시간 넘게 찾다가 갑자기 이런문제를 만난 개발자들이 많다는걸 알았음! 해결방법 문제는 아래 라이브러리 때문이였는데.. vscode-typescript-next 어제 업데이트하면서 뭔가 문제가 생겼나보다?! 그래서 다운그레이드 해서 다들 해결..
프록시 패턴, 프록시 서버, CORS, 이터레이터 패턴 간단 정리 프록시 패턴 다른 객체로 접근하는것을 통제하기 위해서 그 객체의 대리자를 제공하는 패턴 바빠서 그 일을 할 수 없는 메인 객체 대신 대리인 객체가 어느 정도 그 일을 처리해 줄 필요가 있거나, 다른 객체에 접근하기 위해 메인 객체는 은닉하고 대리인 객체를 두고자 하는 경우에 사용한다. 프록시 서버 프록시 객체가 클라이언트의 모든 요청을 받아 실제 객체의 서비스 접근을 흐름을 제어 CORS CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘 - CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다. 같은 출처와 다른 출처의 구분 두 URL의 구성 요..
네트워크 용어 정리2 - 네트워크, 프로토콜, 인터넷, TCP/IP, 웹 브라우저 오늘은 많이 들었으나 말로 정의 내리기 어려웠던 네트워크, 프로토콜, 인터넷, TCP/IP, 웹 브라우저에 대해 정리합니다. 아래 링크해놓은 블로거분이 길게 잘 설명해주셨고, 저는 그냥 짧게 축약만해서 이해 안가시면 아래 참고 링크 보시는게 더 좋을것 같아요! 1. 네트워크 서로 통신이 가능한 단말들의 연결 2. 프로토콜 서로 다른 언어나 다른 형태로 말하면 이해 할 수 없으니, 네트워크에서 단말들이 서로 통신을 하기 위해 정해진 규칙 3. 인터넷 여러개의 네트워크가 연결된것 => LAN사이를 연결하여 이를 전 세계로 확장한 네트워크 서로 다른 네트워크에 위치해있더라도 통신이 가능하게 하여 정보나 자원을 공유할 수 있도록 하는 것이 바로 인터넷 4. TCP/IP 서로 통신이 가능하려면 위의 프로토콜을 정..
네트워크 용어 정리1 - LAN, WAN, NIC, 인터넷, 허브,스위치, 라우터 ,공유기 LAN, WAN, NIC, 이더넷, 인터넷, 허브, 라우터 등 의 용어에 대해 정리합니다. 1. LAN과 WAN 네트워크의 범위를 구분하는 용어 LAN : Local Area Network 말 그대로 근거리 통신망 "비교적 좁은 범위의 네트워크"를 의미 WAN : Wide Area Network 말 그대로 원거리 통신망 "광역 네트워크"를 의미 인터넷도 넓은 의미에서 WAN의 한 종류라고 볼 수 있다고 함 (전 세계의 LAN을 연결 한 것으로 본다면) 2. 클라이언트와 서버 컴퓨터의 역할을 표현하는 용어이다. 클라이언트 클라이언트는 서비스를 요청 데스크톱, 노트북, 스마트 폰, 태블릿 등 서버 서버는 서비스를 제공 데이터베이스 서버, 웹 애플리케이션 서버, 파일 서버, DNS 등 네트워킹 장치 클라이언트..

티스토리툴바