내배캠 TIL 2023.02.02

팀원들과 아침 조회시간에 알게된 것 

 

스타일 컴포넌트에서 글로벌 css가 그때 그때 반영이 되지 않는 문제 해결하는 법

cssf를 이용해서 감싸주면 된다.

tailwind styling 코드가 한정되어있다고 생각했는데  커스텀 할 수도 있다고 한다.

group과 peer이라는 개념이 이용된다. 

 

git commit 컨벤션 템플릿을 만들어서 쓸 수 있다. txt 파일로 설정해서 불러올 수 있다? 근데 앞에 넣어놓은 내용을 다 지우고 해야하나? 예시는 뭘 많이 넣어놓은 것 같던데

 

jest로  test role 넣어주는 코드를 구경했다.

아주 큰 프로젝트일 때 안정성을 위해 쓰면 좋을 것 같다.

매번 테스트 롤 코드 써주고 테스트 돌리고 하면 개발 시간이 엄청 많이 걸릴 듯 하다.

 

오늘의 목표

next.js 포트폴리오 만들기 유튜브 강의 듣고 코드 따라치기

문제 & 해결

next.js 프로젝트를 시작하고 세팅을 하는데, css import 하는 것을 다 지웠는데도

이렇게 css가 남아있어서 보니까

styles라는 폴더에 globals.css라는 파일안에 코드가 뭔가 많이 써져있었다. 이걸 지워주니

요렇게 깔끔! 해졌다.

 

warn이 뜬다. 

Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

fast-refresh-reload | Next.js

그냥 새로고침 하라는 말인 것 같다.

알게된 것

 

테일윈드 시작하기

npm install -D tailwindcss

npx tailwindcss init

init 하면 tailwind.config.js 이라는 파일을 만든다.

npm install -D tailwindcss postcss autoprefixer

 

테일윈드 next.js 프로젝트에 기본 세팅 법

Install Tailwind CSS with Next.js - Tailwind CSS

Install Tailwind CSS with Next.js - Tailwind CSS

 

tailwind.config.js

  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

 

global.css에 

@tailwind base;
@tailwind components;
@tailwind utilities;

 

postcss.config.js라는 파일 만들고

module.exports = {
  plugins: {
    tailwindcss: { config: "./tailwind.config.js" },
    autoprefixer: {},
  },
};

 

 

tailwind 전용 부트스트랩 같은거, 헤더, 히어로,  푸터 가져와서 쓴다. 

근데 br 닫는 태그가 빠졌다던지, className이여야하는데 class가 들어가있다던지 사소하게 바꿔줘야할 내용들이 있다. 

Tailblocks — Ready-to-use Tailwind CSS blocks

Tailblocks — Ready-to-use Tailwind CSS blocks

테일윈드는 w h로는 작은 숫자만 되고 꽤 큰 단위 크기를 넣어주려고 하면 lg, md, sm 이런 걸 써줘야하는 것 같기도?

 

다크 모드 구현

next-themes - npm (npmjs.com)

next-themes

npm install next-themes

import "@/styles/globals.css";
import { ThemeProvider } from "next-themes";

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

 

모던 자바스크립트 튜토리얼

https://ko.javascript.info/object-copy

참조에 의한 객체 복사

https://ko.javascript.info/rest-parameters-spread

나머지 매개변수와 스프레드 문법

 

알고리즘 

https://seonchoco.tistory.com/152

[level 0] 배열 원소의 길이 - 120854

https://seonchoco.tistory.com/151

[level 0] 배열 뒤집기 - 120821