미디어쿼리

max-width

최대여기 영역까지 css적용!

*그래서 순서도 큰 영역에서 작은 영역으로 써줘야 적용이 된다!!!!!!!

(이런느낌)

  @media screen and (max-width: 1440px) {
   
  }
  @media screen and (max-width: 1024px) {
   
  }

  @media screen and (max-width: 400px) {
   
  }

최소영역은 반대

작은 영역에서 큰영역으로 순서 써야함..

중앙정렬

중앙정렬할 때 

마진 오토가 안먹혀서 뭔가 했더니 가로값을 주어야했다!!

 position: fixed;
  /* fixed를 쓸 때에는 width, height를 명시해줘야 한다. */
  width: 460px
  /* left, right는 해당 요소의 위치 시작점을 결정한다. 그런데, 이때, margin의 양 값을 auto로 줌으로써 마진을 주어 해당 요소의 양 끝 위치를 각각 0으로 만들어준다. */
  margin: 0 auto;
  left: 0;
  right: 0;

출처 :https://wansook0316.github.io/dv/html-css/2020/03/19/position-fixed-center-%EC%A0%95%EB%A0%AC.html

////

position

postion: fixed

position:relative

position:absolute

....

https://developer.mozilla.org/ko/docs/Web/CSS/position

display:plex

yarn build시 에러

 Build optimization failed: found page without a React Component as default export in
pages/types

error Command failed with exit code 1.

페이지마다 export default ,

default를 기본으로 하는애가 있어야한다고 이해해서 

페이지 types에 없어서 그런가 해봤는데 해결안됨

오히려 타입안에 인터페이스에 default붙이니까 못읽음

찾아보다가 

구성 요소를 페이지 폴더 외부로 이동해야 합니다. Pages/는 Next.js 라우팅이 구조를 기반으로 하므로 페이지 구성 요소에만 사용해야 합니다.  

Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있습니다. 

파일이 페이지 디렉토리에 추가되면 자동으로 경로로 사용할 수 있습니다. 

위의 동작이 기본 동작이지만 페이지 디렉토리에 페이지가 아닌 파일을 포함하도록 Next.js 앱을 구성할 수 있습니다. 

이렇게 하려면 아래와 같이 next.config.js 파일의 pageExtensions 항목을 수정하면 됩니다. 그런 다음 .page(_document.page.js, _app.page.js, index.page.js 등)를 포함하는 파일 확장자를 갖도록 페이지 구성 요소의 이름을 바꿉니다.

 module.exports = {

    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']

}

이 구성을 사용하면 Next.js는 페이지/API 경로 및 라우팅을 구축하기 위해 .page를 포함하지 않는 모든 파일을 무시합니다.

이거보고 next.config.js에서 페이지별 설정 넣어야한다는 공식문서보고 혹시 넣어봤는데 build되네 호..

잘 모르겠음 그리고 빌드를 하면 out에 서버페이지가 생기는 거 맞나? 

dev는 개발모드고

정확한 차이를 정리해봐야겠다.

이 공식문서 봄

https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory

next.config.js

파일에 이거 추가함

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

다시 원위치..

문제는 이거를 넣으면 

기존 경로

local:3000 이 404로 페이지를 찾을 수 없다고 뜨고 안열린다. 

원래대로 지워줘야 뜨네 흠.. 

아 문서를 읽어보니 

pageExtensions를 넣고 나서 

이름을 바꿔줘야되는구나 

이름 바꿔줌

해결됨

라고 생각했는데 안떠서 다시..

https://stackoverflow.com/questions/65598753/cant-build-react-next-project-found-page-without-a-react-component-as-default

https://webisfree.com/2020-02-17/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EA%B0%9D%EC%B2%B4%EB%A5%BC-%EC%83%88%EB%A1%9C%EC%9A%B4-%EA%B0%9D%EC%B2%B4%EB%A1%9C-%EB%B3%B5%EC%82%AC-clone%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 

https://jung-story.tistory.com/118

https://myinfrabox.tistory.com/20

parseInt("-10"); // -10

문자열 "-10"을 숫자로 변환하여 정수 음수 -10을 리턴합니다.

parseInt("10.9"); // 10

문자열 타입의 실수값은 소수점을 제거한 후, 정수값만 리턴합니다.

출처: https://hianna.tistory.com/386 [어제 오늘 내일:티스토리]

Array.prototype.slice()

시도해보기

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%EC%9D%98-%EC%9D%B4%ED%95%B4/

https://d2.naver.com/helloworld/59361

스타일 설명까지 읽었는데 

솔직히 다 이해가 가지는 않는다 다시 읽어봐야지...

 1. 브라우저 렌더링 과정

엔진마다 렌더링 조금씩 다름, 크롬 기준으로 볼거임

(브라우저의 주요 기능은 사용자가 선택한 자원(보통 html)을 서버에 요청하고 브라우저에 표시하는 것)

* DOM은 document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부릅니다. DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미

태그가 노드객체로 변환되고

연관성 갖을 수 있도록 트리를 생성함 이게 바로 DOM트리임

최상위에는 document객체가 들어감

DOM tree 생성되고, CSS도 CSSOM tree생성됨

그리고 렌더링 엔진이 DOM트리와 CSSOM 트리 합쳐서 render tree렌더트리 생성

렌더트리는 화면에 표시될 모든 정보 포함하는 트리임

렌더트리가 생성된다음 layout이라는 과정 거침 (reflow라고도 함)

뷰포트에 맞춰서 요소들의 정확한 위치랑 크기를 계산하는 과정임

계산하고 화면에 실제 픽셀로 변환해서 그리는 페인트 과정함

사용자가 정보 업데이트 했을때는?

3가지 경우로 동작함

1. 레이아웃이 다시 발생하는 경우 – 크기 위치

2. 페인트부터 다시 발생되는 경우 -텍스트 이미지

3. 레어어의 합성만 다시 발생

2. virtual dom

문제는

변화가 발생할때마다 렌더트리가 다시 생성된다는 것이다.

이 과정을 다시 반복하게 됨.

게다가 최근에는 SPA, single page application(페이지를 변경하지 않고 동일한 페이지에서 조작

페이지를 서버가 아닌 브라우저에서 관리)을 많이 사용하면서 dom tree를 변경할 일이 많아졌음

 그래서 virtual dom이 등장했다.

가상돔에 생긴 변경사항을 반영해서 전체 real dom을 바꾸지 않아도 됨

이런 처린 실제 돔 아닌 메모리상에서 동작해서 훨씬 빠름

가상돔은 실제로 렌더링 되지 않아서 연산비용을 최소화할 수 있다. 

virtual dom이 하는 것은 

DOM fragment의 변화를 묶어서 적용한 다음

기존 DOM에 던져주는 과정을 자동화, 추상화해놓은 것이다. 

리액트가 가상돔을 이용하는 자바스크립트 라이브러리다. 

ui의 가상적인 표현을 메모리에 저장하고 reactDOM과 같은 라이브러리에 의해 

실제돔과 동기화하는 프로그램이다.

리액트는 JSX를 사용하는데, 각 컴포넌트에서 리턴되는 react element를 JSX문법으로 작성하는 것이다.

JSX는 자바스크립트 확장 문법이다.

바벨이 JSX를 React.createElement()호출로 컴파일한다. 컴파일하는 걸 보면 React elemet객체를 리턴하는 것을 볼 수 있다. 

React elements는 DOM요소의 가상 버전으로 가볍고 상태가지지 않고 불변성 유지한다. 

render에 의해서 실제 돔에 반영한다

https://www.youtube.com/watch?v=PN_WmsgbQCo&t=20s