본문 바로가기

💻 DEV54

[인텔리제이 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.

[IntelliJ - MacOS] 인텔리제이 IDEA Live Edit Plugin 사용하는 방법 접근 (요약)Visualization을 위한 task 를 위해서 D3.js를 연구-학습하기 위해, html 파일을 다뤄보던 중이었습니다.Next.js에서 지원이 되었던 Live Reload가 되지 않음에 불편함을 느끼고 이를 해결하기 위한 방법으로인텔리제이 Live Edit Plugin을 사용하는 방법을 다뤄봅니다. 1. Plugin설치: Live Edit 2. 크롬 확장 프로그램 설치: JetBrains IDE Support 3. Live Edit Plugin 설정방법 1. Plugin설치: Live Edit 2. 크롬 확장 프로그램 설치: JetBrains IDE Support 3. Live Edit Plugin 설정 2024. 5. 22.

[IntelliJ] MAC 에서 UTF-8 적용하기 .txt .csv 접근 (요약)Mac에서 인텔리제이를 사용해 작업을 하다보면, .txt 파일이나 .csv 파일 등을 호출하거나 열어볼 때가 있습니다.이 때에 UTF-8로의 인코딩이 원활하게 진행되지 않아 알아볼 수 없는 문자들로 작성이 될 때가 있습니다.이를 해결하는 방법을 제시합니다. 1. 해결법1. 터미널 명령어 2. 헤맨 방법방법 1. 해결법1. 터미널 명령어 : 인코딩 설정해 저장 ## 1. 파일의 경로로 이동## 2. 명령어 입력>> iconv -c -f euc-kr -t -utf-8 파일명.txt > 파일명.txt 2. 헤맨 방법 파일을 열 때에 텍스트 편집기 > 설정 > 일반 텍스트 파일 인코딩 > 파일 열 때 : "자동"이 아닌 "UTF-8"을 설정해줬지만, 코드에서 파일을 가져올 때 깔끔한 .. 2024. 5. 13.

[IntelliJ] 프로젝트 디렉토리 보이지 않을 때 해결법 접근 (요약) 인텔리제이에서 코드 작업을 하다보면 종종 브랜치간의 이동을 한다거나, git 작업을 이어가게 됩니다. 이 때, git checkout을 하거나 특정 행위를 하다보면, 개발자도 모르는 사이에 프로젝트의 디렉토리가 모두 사라져 보이지 않는 문제가 발생하곤 합니다. 이를 간단하게 해결해보는 방법을 학습해보겠습니다. 1. 문제식별 2. 문제해결 (1) IntelliJ > File(상단메뉴) > Project Structure (2) Project Settings > Modules > Import Module (3) 프로젝트 선택 및 경로 지정 방법 1. 문제 식별 2. 문제 해결 (1) IntelliJ > File(상단메뉴) > Project Structure (2) Project Settings.. 2024. 1. 15.

[Figma] We can't open that file 에러 해결 (WebGL) 접근 (요약) Figma를 사용하던 와중 예기치 않은 에러와 맞닥뜨렸습니다. "We can't open that file"이라며 크롬 브라우저 내 WebGL 설정 관련 에러였습니다. 해결토록 합시다. 1. 에러 메시지 2. 해결 방법 1. 에러 메시지 Uh oh... we can't open that file we can't open the editor because WebGL isn't supported, or is disabled, in your browser. if your browser supports WebGL, check out this help article to find out how to enable it. 2. 에러 해결 1단계) chrome://flags 접속 2단계) WebGl Dr.. 2023. 12. 13.

이전 1 2 3 4 5 6 다음

티스토리툴바