NEW
-
FrontEnd
[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] 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
[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
[CS] 메모리 계층과 메모리, 캐시미스와 캐시미스, 웹 브라우저의 캐시
메모리 계층 1. 메모리(RAM) 하드디스크로부터 일정량의 데이터를 복사해서 임시 저장하고 이를 필요시마다 CPU에 빠르게 전달함 시스템이 재부팅될 때마다 초기화 (휘발성) 2. 캐시 데이터를 미리 복사해놓는 임시 저장소이자 빠른 장치와 느린 장치에서 속도차이에 따른 병목 현상을 줄이기 위한 메모리를 말함 캐시는 더 느린 주기억장치에 비해 빠른 접근 속도를 가지고 있으며, 빈번하게 사용되는 데이터를 저장 이를 통해 CPU는 필요한 데이터를 더 빠르게 찾을 수 있어 성능이 향상 캐시를 직접 설정하는 경우 자주 사용되는 데이터를 기반으로 설정해야한다. 자주 사용하는 데이터에 대한 근거가 지역성이다 지역성의 원리 시간 지역성: 최근 사용한 데이터에 다시 접근하려는 특성 공간 지역성: 최근 접근한 데이터를 이루..
JavaScript
-
JavaScript
[ JavaScript ] Date 객체에서 년,월,일 따로 출력하기
회사에서 엑셀 파일 다운로드 구현해뒀는데, 해당 파일 다운로드시 오늘날짜를 ( YYYY.MM.DD ) 형태로 파일명에 추가해달라는 요청이 와서 년, 월, 일을 가져오는 방법에 대해서 정리한다. 처음엔 그냥 Date 객체에서 getFullYear, getMonth, getDate등을 사용했는데 코드가 너무 지저분해서 다른 방법을 사용하면서 관련된 코드들을 정리해보았다! 1. getFullYear, getMonth, getDate등을 사용 getMonth에 1을 더해주고 한자리수 일 경우에 0을 추가 해주는등 너무 지저분해보여서 다른 방법을 찾아보았음! const date = new Date() const year = date.getFullYear() let month = date.getMonth() + 1..
-
JavaScript
[ JavaScript ] 논리 연산자 정리 &&, ||, <<, >>, !, !!, ?, ??
& : 비트 연산자 비트의 논리 합을 하는 연산자 && : 논리곱 연산자 &&는 모든 조건이 참이여야 true || : 논리합 연산자 ||는 둘중 하나가 참이면 true > : 비트 이동 연산자 왼쪽, 오른쪽으로 비트를 밀어내는 연산자 ! , !! : 부정 연산자 ! : 입력값을 boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다. !! : boolean타입으로 명시적으로 형 변환 ?. : 옵셔널 체이닝 객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환됨 ?? : Null 병합 연산자 앞에 오는 값이 null 또는 undefined이면 뒤에오는 값을, 아니면 null 또는 undefined을 반환 ✔️참고 https..
-
FrontEnd
[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] 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
[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
[CS] 메모리 계층과 메모리, 캐시미스와 캐시미스, 웹 브라우저의 캐시
메모리 계층 1. 메모리(RAM) 하드디스크로부터 일정량의 데이터를 복사해서 임시 저장하고 이를 필요시마다 CPU에 빠르게 전달함 시스템이 재부팅될 때마다 초기화 (휘발성) 2. 캐시 데이터를 미리 복사해놓는 임시 저장소이자 빠른 장치와 느린 장치에서 속도차이에 따른 병목 현상을 줄이기 위한 메모리를 말함 캐시는 더 느린 주기억장치에 비해 빠른 접근 속도를 가지고 있으며, 빈번하게 사용되는 데이터를 저장 이를 통해 CPU는 필요한 데이터를 더 빠르게 찾을 수 있어 성능이 향상 캐시를 직접 설정하는 경우 자주 사용되는 데이터를 기반으로 설정해야한다. 자주 사용하는 데이터에 대한 근거가 지역성이다 지역성의 원리 시간 지역성: 최근 사용한 데이터에 다시 접근하려는 특성 공간 지역성: 최근 접근한 데이터를 이루..
-
CS
[CS]운영체제(OS)역할과 구조, 시스템콜, 컴퓨터의 요소 정리
스터디 하면서 결정한 책으로 큰 영역은 정해지지만, 책에서 간결하게 정리해서 그런지 비어있는 내용이 너무 많아서 책을 기반으로 검색과 chatGPT로 내용을 보완해서 정리해둔다. 운영체제의 역할 운영체제는 컴퓨터 시스템의 핵심 소프트웨어로, 하드웨어 자원을 관리하고 프로그램을 실행시키는 역할을 합니다. 또한 사용자와 하드웨어 간의 인터페이스를 제공하며, 시스템의 안정성과 보안을 유지하기 위한 다양한 기능을 수행합니다. 운영체제의 구조 운영체제는 크게 커널과 유틸리티(응용 프로그램)로 이루어져 있습니다. 커널은 하드웨어와 직접적으로 상호작용하여 하드웨어 자원을 관리하고, 유틸리티는 커널 위에서 동작하는 프로그램으로, 사용자와 시스템 간의 인터페이스를 제공하며, 시스템의 자원 관리와 관련된 작업을 수행합니다..
-
TypeScript
[TypeScript] 이펙티드 타입스크립트 스터디 01,02 - 타입스크립트?
자바스크립트는 타입 스크립트에 속합니다. 즉, 자바스크립트로 작성된 모든 코드는 타입스크립트입니다. 자바스크립트는 런타임에서 타입을 알게되고, 타입스크립트 타입 시스템은 자바스크립트 런타임 동작을 모델링합니다. 이렇듯, 런타임으로 가기전에 타입검사를 함으로 런타임에 발생할 수 있는 오류를 먼저 잡아낼 수 있어서 프로그램 개발자에게 빠르게 알려줄 수 있습니다. tsconfig.json ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정을 할 수 있는 파일 컴파일타임과 런타임과 에러 컴파일타임(Compiletime) 개발자가 작성한 소스코드를 컴파일하여 기계어로 변환하는 과정. 컴파일 타임 에러 신택스에러(Syntax error), 파일참조 오류, 타입 체크 오류, ... 컴파일러는 컴파일..
-
FrontEnd
vscode 테마 적용이 갑자기 안되는 경우
11/19일 다시 확인했는데 잘 되네 : ) ? 급하게 수정해서 배포했나보다 그냥 삽질 후기로 유지해 두도록 하겠습니다... 갑자기 vscode 컬러 적용 안되는 문제가 생겼다.? 결론 vscode-typescript-next 업데이트 때문 갑자기 주석이고 뭐고 다 흰색으로 보여서 재설치하고 업데이트 하고 난리를 쳐도 그대로.. 이정도 가독성이면 뭘 할수가 없잖아요!!! 스택오버플로우에 올라온 다른 사람과 경우가 똑같았다.. 갑자기 코드 작성해야 하는데 멘붕 ;0; 한시간 넘게 찾다가 갑자기 이런문제를 만난 개발자들이 많다는걸 알았음! 해결방법 문제는 아래 라이브러리 때문이였는데.. vscode-typescript-next 어제 업데이트하면서 뭔가 문제가 생겼나보다?! 그래서 다운그레이드 해서 다들 해결..
-
FrontEnd
프록시 패턴, 프록시 서버, 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 등 네트워킹 장치 클라이언트..
-
FrontEnd
[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..
-
FrontEnd
[알고리즘] 탐욕, 그리디 (greedy)
탐욕, 그리디 : greedy 현재 상황에서 가장 좋은 것(최선의 선택)을 고르는 알고리즘 탐욕 알고리즘은 여러 경우 중 하나를 결정해야 할 때마다 그 순간에 최적이라고 생각되는 것을 선택해 나가는 방식으로 진행하여 최종적인 해답에 도달한다. 순간마다 하는 선택은 그 순간에 대해 지역적으로는 최적이지만, 그 선택들을 계속 수집하여 최종적(전역적)인 해답을 만들었다고 해서, 그것이 최적이라는 보장은 없다. ❓최적해 제약 조건을 충족시킬 수 있는 해(어떤 문제가 요구하는 값) 가운데 목적 함숫값을 최대 또는 최소로 만드는 값 그리디 특징 탐욕 알고리즘은 항상 최적의 결과를 도출하는 것은 아니지만, 어느 정도 최적에 근사한 값을 빠르게 도출할 수 있는 장점이 있다. 이 장점으로 인해 탐욕 알고리즘은 근사 알..
-
Next.js
[Next.js] Hydrate 간단하게 정리
일단 설명하기 전에, react에서 렌더링 되는 과정과 next에서 렌더링 되는 과정의 차이점에 대해서 정리합니다. 1. React.js Html과 JS파일을 한꺼번에 보내고 클라이언트에서 JS코드를 통해 웹 화면을 렌더링 2. Next.js Pre-rendering된 Html을 클라이언트에 전송 그 이후에 번들링된 React 코드(JS)들이 클라이언트에 전송 위 두개가 합쳐짐 = Hydrate 정리 위에 Next.js에 정리된 부분을 보면 먼저 전달받은 Pre-rendering된 Html은 단순하게 html으로만 구성된 화면이고, 자바스크립는 하나도 없는 상태입니다. 웹 화면을 보여주지만, 이벤트 리스너들도 각 DOM요소에 적용되기 전 상태라는 것! 그 이후에 번들링 된 React 코드들이 이전에 보내..
-
FrontEnd
[자료구조] 트라이 (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)..
-
FrontEnd
[자료구조] 힙 (Heap)
손글씨로 패드에 정리하다가 블로그로 옮기는 자료구조.. 전에 패드에 정리한건 천천히 옮겨두어야겠다 힙 : heap 완전 이진 트리의 일종 여러 개의 값들 중 최댓값이나 최솟값을 빠르게 찾아내도록 만들어진 자료구조이다. 데이터들이 우선순위를 가지고 있어 우선순위가 높은 데이터가 먼저 나간다! ❓ 완전 이진트리 1) 완전 이진트리는 마지막 레벨을 제외 하고 모든 레벨이 완전히 채워져 있다. 2) 마지막 레벨은 꽉 차 있지 않아도 되지만, 노드가 왼쪽에서 오른쪽으로 채워져야 한다 ❓반정렬 상태 반정렬 상태라는 것은, 트리 구조를 배열에 저장한 것이므로 배열로만 보았을 때는 완전히 정렬된 상태로 보이지는 않는다. 힙(Heap) 규칙 큐에는 FIFO, 스택은 FILO의 규칙이 있듯 힙(Heap)에도 규칙 있다. ..
-
오류 해결 모음
[NEXT.js] Missing component: 오류 해결
레이아웃 열심히 잡고 있는데, 갑자기 터미널에 아래와 같은 문구가 보였다. 오류 Your custom Document (pages/_document) did not render all the required subcomponent. Missing component: Read how to fix here: https://nextjs.org/docs/messages/missing-document-component _document 파일을 여니.. Head 컴포넌트 잘 있는데 왜그래?? 싶었고 레이아웃 적용은 잘 되고 화면에 잘 보여지는데 console을 여기저기 찍었는데 하~~나도 안보이고 이 문제로 3일을 애썼다.. 원인 In your custom pages/_document an expected sub-..
-
FrontEnd
[FrontEnd] Html 테이블 쉽게 작성하는 사이트
오랜만에 html로 테이블을 여러개 만들일이 생겨서 테이블 변환해 주는 사이트가 있지않을까? 해서 찾다가 발견!!! 사실 편하게 ANTD, MUI같은 라이브러리 사용할 수도 있지만, 그럴 필요도 없는데다가 완전 정적인 페이지를 만드는거고, 테이블도 약간의 스타일을 줘야 했으므로 !! 혹시 또 쓸일은 없겠지만? 근데 너무너무 편해서 정리해둠! 1. 엑셀이나 다른 워드 프로그램처럼 이렇게 열과 행을 지정 할 수 있다. 2. 그냥 엑셀이나 표처럼 작성하고, 병합도 가능하고 정렬, 폰트 등의 지정도 가능하다. 3. 가운데 정렬하고, C1, D1, E1을 병합한 결과 4. 선택한대로 스타일 지정된 결과를 받을수도 있고, 나는 사진처럼 체크해서 css는 제외한 Html만 사용했다 사이트 링크
-
FrontEnd
[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
[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를 구현하기 위한 자원을 중심으로 한 애플리케이션 개..
-
Next.js
[Next.js] next/Link 사용하기 (공식문서 내용 정리)
next/Link 사용하기 1.pages의 하위 디렉토리가 아래와 같을때 pages/index.js pages/about.js pages/blog/[slug].js 2. import 후 import Link from 'next/link' 3. 아래의 형태로 사용 Home About Us Blog Post Link의 props정리 필수값 1. href 이동할 경로 혹은 URL ... 옵션값 1. as 이동할 경로 혹은 URL ... 2. passHref 기본값 : false next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할 A태그 // 자식태그가 styled component a태그인 경우 참고 : https://f-dever-error-log.tistory.com/56 위처럼 pass..
-
Next.js
[Next.js] next/router 사용하기 (공식문서 내용 정리)
next/router 사용하기 router 객체에 접근하기 위해서 useRouter를 사용한다 1. import 후 import { useRouter } from 'next/router' 2. 아래의 형태로 사용 const router = useRouter() 아래처럼 console에서 router 객체에 대한 정보를 얻을 수 있다. router object 1. asPath - basePath이나 locale이 포함되지 않은 path ex ) 'https://dlquff-byeol4001.vercel.app/501da229-9915-4264-9d37-6783545ee553' 의 경우 asPath = '/501da229-9915-4264-9d37-6783545ee553' 2. basePath - 활성화 ..
-
FrontEnd
실행 컨텍스트(Execution Context)의 정의와 종류
1. GEC Global Execution Context 글로벌로 자바스크립트가 실행될때의 전역 실행 환경 콜스택에 제일 먼저 쌓이고 가장 나중에 제거된다. 자바스크립트가 싱글스레드이기 때문에 무조건 한개만 존재할 수 있다. 2. FEC Functional Execution Context 함수가 호출되고 실행될때 그 호출된, 실행되고있는 함수에 대해서 실행되고 있는 환경 함수 내부의 this와 함수가 필요로하는 지역변수들을 포함한다. 함수가 실행될때 생성되었다가 함수가 종료되면 제거된다. 3.Eval evel함수 실행시 생성되는 컨텍스트 (잘 안쓴다고 하기도 해서 따로 정리하진않음) ✔️ 참고 https://www.youtube.com/watch?v=AbNc8_poxu4
-
FrontEnd
[Browser Rendering] - 3. 브라우저 렌더링 최적화
위의 내용을 보고 정리한 내용입니다..! Layer 웹페이지를 렌더링 하기 위해 필요한 이미지 단위 요소 레이어를 배치, 합성 하여 최종적인 웹페이지를 표현한다 페인트 단계에서 메인 스레드는 하나의 페이지를 여러 층의 레이어로 분리하고 그 레이어들을 어떠한 순서로 그릴지 결정한다. 이 과정에서, 레이아웃 트리를 기반으로 레이어 트리가 생성된다. 이렇게 레이어 트리가 생성되면 모든 시각적 부분을 그리기 위해 각 레이어의 픽셀을 채우게 된다. 즉, 웹 브라우저 화면에 있을때 기존의 렌더링 프로세스와 별개로 또 하나의 화면이라고 부를수 있는것이 Layer이다. 렌더링 과정 1. 스크립트가 들어오면 2. cpu에서 recalculate style이라고 스타일을 다시 계산함 3. 레이아웃 과정이 일어남 ( 브라우..
-
FrontEnd
[Browser Rendering] - 2. 브라우저 렌더링 순서 ( webkit의 동작과정 )
위 강의를 보고 정리한 내용입니다. URL과 URI URL은 URI에 포함된다. URI는 네트워크 상에서 자원을 식별하기 위한 문자열(식별자까지 포함) URL은 네트워크 상의 자원의 위치를 나타내는 주소 결론적으로 요약하자면, URL과 URN은 URI의 종류이다. 그렇기에 모든 URL은 URI이고, 또한 모든 URN은 URI이다. URL, URN 그리고 URI GraphQL과 RESTful API 정리하다가 URL, URN 그리고 URI의 차이점에 대해서 알고 넘어가야 할것 같아서 작성하는 글이다. 결론부터 말하자면 아래와같다. 자원의 식별자(URI), 위치(URL), 이름(URN) URI(Uniform.. im-designloper.tistory.com 렌더링 엔진 URI를 통해 요청을 받아서 해당하는..
-
Next.js
[Next.js] router.query가 빈값일때! ( with.useEffect )
오늘의 문제는 Next에서 useEffect내에서 router.query를 console에 찍어봤는데 자꾸 빈 배열이 반환되는 경우! 화면에는 제대로 나오는데 console에 찍어보면 자꾸 빈 객체가 보이는 문제였다.. // ❌ ❌ ❌ ❌ ❌ export default function App() { const router = useRouter(); const queries = router.query; useEffect(() => { console.log(queries,'{} 빈 객체가 찍힘') }, []) return ( {queries} ) } Why? 정적 파일 최적화(Automatic Static Optimization)에 의해 정적으로 최적화된 페이지는 루트 매개 변수가 제공되지 않아서, que..
