본문 바로가기

분류 전체보기186

[Mac] 오른쪽 커맨드 (command)키를 한/영 키로 바꾸는 방법 (서드파티 접근) 1. 터미널에 명령어 입력   2. 시스템 설정 > 키보드 > 키보드 단축키 > 입력 소스- 입력 메뉴에서 다음 소스 선택 > 우측 command상세  1. 터미널에 명령어 입력 (1) hidutil 로 키매핑 매크로 생성printf '%s\n' '#!/bin/sh' \ 'hidutil property --set '"'"'{"UserKeyMapping":[{"HIDKeyboardModifierMappingSrc":0x7000000E7,"HIDKeyboardModifierMappingDst":0x70000006D}]}'"'" \ >/Users/Shared/keymapchmod 755 /Users/Shared/keymap (2) keymap.plist 를 만들어 1번 로그인 때마다 실행cat/Users/Sh.. 2024. 7. 16.
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾ ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾ 2024. 6. 24.
[NEXT.js] 5. Link 컴포넌트 사용 이슈 ( new- link ) 1. 정의 & 특성   2. Nextjs 13 버전 업데이트 후 사용법상세  1. 정의 & 특성기존의 태그는 하위에 태그를 포함해서 작성해야 했습니다.그러나, Nextjs 13 버전으로의 업데이트 이후 태그를 사용하지 않아도 되는 것으로 변경 됐습니다. next/link : 태그 없이 사용 가능 # 기존방식 Home # --------------------------# 변화된 방식 Home.    2. Nextjs 13 버전 업데이트 후 사용법 npx @next/codemod new-link . - codemod 를 실행해 new-link를 설치하고, 업데이트 된. 버전의 nextjs13 Link 태그를 사용하게 된다. next/link 2024. 6. 19.
[NEXT.js 14] 5. Layout(feat. { children }: { children: ReactNode }) props Layout  1. 정의 & 특성   2. 코드 예시   3. 관련 에러상세  1. 정의 & 특성Next.js 에는 Layout 컴포넌트가 존재하고 이는 여러 경로간에 공유되는 UI입니다. Layout 컴포넌트는- 파일에서 React 구성요소를 내보내도록 정의할 수 있고,- 렌더링 중에 하위에 레이아웃(page UI)가 존재할 경우, 하위 요소를 받아오기 위한 children props를 작성해야 합니다.  ㄴ 이를 하기 위해서는, { children }: { children: ReactNode } 구문을 사용해서 이뤄질 수 있습니다. { children }: { children: ReactNode } 이 구문은 TypeScript의 객체 구조 분해와 타입 정의를 결합한 것입니다.(따라서, 객체의 특정 .. 2024. 6. 18.
[인텔리제이 intellij] 프로젝트 초기 설정 인텔리제이 설정 쓸 데 없는 맞춤법 검사기 OFF- Editor > inspections > Typo (off) 사용하는/하지 않는 import 문 자동 정리- Editor > General > Auto Import     - XML > (V) Show auto-import tooltip    - Java > (V) Optimize imports on the fly 파일 저장시 코드 자동 정렬- Tools > Actions on Save     -  Reformat code (All file types)    - Run eslint —fix ESLint 설정- Languages & Frameworks > Javascript > Code Quality Tools > ESLint     - (V) Autom.. 2024. 6. 17.
[NEXT.js 14] 4. Font 바꾸기 NEXT.js 에서는 'next/font/google'와 같이 google font 라이브러리를 내장하고 있어 접근성이 좋습니다.뿐만 아니라 'next/font'는 모든 글꼴 파일에 자동적으로 자체 호스팅이 내장돼 있고,이를 적용하고서 레이아웃(뷰)의 쉬프트(깜빡임, 글꼴의 순간적 변화 등) 없이 폰트를 사용할 수 있습니다. Font 바꾸기   1. import {...} from 'next/font/google';    2. layout.tsx 또는 Font.ts 컴포넌트에 사용할 Font 작성   3. tailwind.config.ts 작성    4. tailwind css 표기로 사용하기상세  1. import {...} from 'next/font/google'; # app/font.tsimpor.. 2024. 6. 17.
[NEXT.js 14] 3. CSS 사용 2가지 방법 (css module 생생 / global.css : tailwind css) CSS 사용 방법   1. 첫번째 방법 : css module 사용   2. 두번째 방법 : global.css 사용   3. 파일의 위치   4. suspense & streamed Response를 이용한 세분화 로딩상태 관리상세  1. 첫번째 방법 : css module 사용: 일반적인 표준 css 이지만, css 파일에 특정한 이름을 지정함으로 특정 컴포넌트로 스코핑.=> module.css를 import 하면 그 파일들로부터 객체를 불러올 수 있다 import classes from './main-header.module.css';main-header.js (컴포넌트)에 적용할 css 파일을 경로 depth가 동일할 수 있게 생성해주고, import 해준다. 'classes' 라고 명명한 객체를.. 2024. 6. 14.
[NEXT.js 14] 2. loading.js & Suspense & streamed Response (세분화 로딩상태 관리) loding.js (지연)   1. 정의   2. 참고예시   3. 파일의 위치   4. suspense & streamed Response를 이용한 세분화 로딩상태 관리상세  1. 정의: loading.js 파일은  Suspense 기반의 즉각적인 로딩 상태를 생성할 수 있음.- 기본적으로 Server side 이지만 'use client'; 를 주며 client side 로 사용될 수 있다. => Data를 호출하는 페이지에서 페이지의 새로고침을 할 때 지연(loading.js)시간을 두게 되면, 페이지가 깜빡이며 나타나게 된다.=> 그러나, 서로 다른 페이지간의 이동에서는 깜빡임없이 페이지간 전환이 이뤄진다.>> ★ 그 이유는, NEXT는 아주 강력한 캐싱을 하는데, 페이지에 첫 접속 때에 화면구성.. 2024. 6. 14.
[NEXT.js 14] 1. Image 태그 관련 <Image> 태그   1. 정의   2. 참고예시   3. 속성값 (lazy & srcset ..)   4. priority 설정 (명시적)상세  1. 정의: 는 최적화된 방법으로 이미지를 출력하게 도와줌: 페이지에서 실제로 보이는 경우에만 이미지가 표시되도록 이미지를 지연 로딩하여 구현해줌 (추가적인 구성설정 없이도!): 이미지를 설정하는 프로세스 등을 단순화시킴  2. 참고예시 => 태그에서의 {logoImg.src} 속성값이 아닌 전체 객체 logoImg를 사용=> nextJS에 의해 생성된 객체는 유용한 정보를 포함하게 되어 최적화된 방법으로 image 컴포넌트를 띄울 수 있도록 함 (= import logoImg ~~ 객체가 자동으로 이미지 사이즈를 감지해주는데, 가장 간단한 형식으로도 이를 구현하기에 충.. 2024. 6. 11.

티스토리툴바