11.23.2024(토) Today I Learned

div { 
  white-space: nowrap;// 콘텐츠 영역에 텍스트가 넘치려고 하면 넘치는 부분은 안보이고 뒤에 ... 이 붙는다 
  overflow: hidden;
  text-overflow: ellipsis;
}

 지식을 우겨 넣는 게 아니라, 배웠다면 이런 상황에서는 어떻게 적용될까?  스스로 계속 질문을 던지며 지식을 완전히 습득하는 연습을 했습니다. 

 

-2. next.js 사전 렌더링 3가지

1. 서버사이드 렌더링 ssr  : 가장 기본적인 사전 렌더링 방식이자 요청이 들어올 때 마다 사전 렌더링을 진행함 

2. 정적 사이트 생성 ssg :  빌드 타임에 미리 페이지를 사전 렌더링 해둠 

3. 증분 정적 재생성 isr 

 

-1. [ css ] white-space : pre-line

줄바꿈만 그대로 유지하면서 연속된 띄어쓰기와 들여쓰기를 무시하고 싶을 때 사용한다고 하네요. 

그것보다 아래 코드가 유용해보여서 가져왔습니다. 영화 설명란에 일정 범위이상 텍스트가 넘치면 아래와같이 표현할 수 있을것같아요.

 

 

0. [ css ]  word-break : keep-all

텍스트가 콘텐츠 영역을 넘어갈 때 줄 바꿈이 어떻게 해야하는 지 설정하는 속성입니다.  다른 여러 속성이 있는 데 실습해도 keep-all 빼고는 차이를 못느꼈습니다. mdn 은 차이가 있는 거 처럼 나오는 데  글쎄요 아직 이해가 안가네요. keep-all 속성값은 normal 과 달리 띄어쓰기를 기준으로 줄이 바뀌는 것을 볼 수 있습니다. 

  /* word-break: normal; */
  /* word-break: break-all; */
  /* word-break: keep-all; */
  /* word-break: break-word; */

word-break : keep-all 적용전

word-break : keep-all 적용 후

 

 

1. [ css ] width:calc(100% - 48px ) 대신 stretch 키워드 

사용가능한 공간만 채워 여백계산도 필요없다고 하네요 맞아요 이런걸 찾고 있었어요!!!

 

 

 

2. [Next.js 14] page 별 레이아웃

export default function App({
  Component,
  pageProps,
}: AppProps & { Component: NextPageWithLayout }) {
  const getLayout = Component.getLayout ?? ((page: ReactNode) => page);

  return <GlobalLayout>{getLayout(<Component {...pageProps} />)}</GlobalLayout>;
}


//getLayout이 적용된 Page 컴포넌트
Page.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

 

3. API Routes 

Next.js 에서 API를 구축할 수 있게 해주는 기능 

 

4. app 컴포넌트가 아닌 컴포넌트에서는 import "./index.css " 처럼  css 를 그대로 import 할 수 없다. 

import style from  "./index.module.css";