본문 바로가기

JavaScript2

[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.
[NextJS] EsLint 설정하기 필요성 프로젝트에 함께하는 팀원들은 저마다의 코딩스타일을 갖고 있습니다. 때문에 각각의 스타일을 용인한 채, 협업을 하게 되면 훗날 코드를 병합하는 과정에서 수많은 골칫거리를 안을 수가 있겠습니다. 문법 에러를 찾아 표시해줄 뿐 아니라, 프로젝트를 개별적으로 개발할 때에는 놓칠 수 있었던, 코딩스타일의 통일-점검을 해주는 ESLint를 소개하고, 설정하는 방법을 알아보겠습니다. 접근 1. ESLint란? 2. 프로젝트 생성 3. ESLint 설치 4. ESLint 설정 방법 1. "ESLint" 란? "ESLint"는 JavaScript 코드에서 발생된 문제(에러) 패턴을 식별하기 위한 정적 코드 분석 도구입니다. - ESLint를 설정해 적용하는 것만으로도 다수의 손길을 거친 프로젝트가 마치 1명이 개.. 2023. 2. 28.