공부하는 비오

eslint 오류 prop validation이 없다고하므로 설정해주자. 해결방법 proptypes을 설정해준다.

Error 2020. 12. 9. 13:09

제로초 노드버드 강의를 듣고 정리하며 공부해보자. 공용Component 사용하기 pages(router page)의 공통인 부분을 설정할 때, pages 디렉토리안에 _app.js 파일을 만든다. Next에서 _app.js는 초기에 기본 페이지들의 component로 사용된다. 그 후, 를 불러온다. 그럼 여기 페이지에 적용된 사항이 pages 폴더에 있는 모든 파일들에 적용된다. 즉 공통적으로 불러와야할 파일들이 있다면, 이 파일을 만들어 적용시키면 된다. Head 설정하기 Head를 import 한다. 안에 head에 들어갈 정보들을 넣으면 된다. 참고 https://velog.io/@sbinha/Next.js-app.js%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

Next.js 2020. 12. 8. 21:31

제로초 노드버드 강의를 듣고 정리하며 공부해보자. NextJs에는 내장된 클라이언트 사이드 라우팅기능이 있다. 그 기능을 사용하기 위해서는 Link를 사용하면 된다. 우선 import Link를 해준다. 그리고 아래와 같이 a태그에 Link태그를 감싼후, Link에 href를 지정해주면 된다. React-router-dom 의 경우 Link가 있으면 a가 필요없었지만, NextJs는 그렇지는 않다. Link 사용시 자동으로 라우팅된다! [name].js 이런식으로 사용할 경우 동적라우팅도 된다. 이건 추후 강의듣고나서 다시한번 정리하겠다.

Next.js 2020. 12. 8. 21:24

NextJs는 SPA에서 SSR을 사용하기 편리하게 만드는 프레임워크이다. 물론 순수 React와 Node를 사용해도 SSR을 구현할 수 있지만, NextJs를 사용하면 좀더 쉽게 구현할 수 있다. - 서버사이드 렌더링 - 코드 스플리팅 : 모든 page를 다운받지 않고 필요한 page만 불러옴. (pages 폴더 안에 있는 파일들을 개별적인 컴포넌트(코드스플리팅된 컴포넌트)로 자동으로 만들어준다.) - 클라이언트 사이드 라우터 내장 (pages 폴더 안에 router에 해당하는 파일들(이름 소문자)을 자동으로 라우팅해준다.) - Hot Module Replacement 지원 참조 https://velog.io/@rjs1197/SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B..

Next.js 2020. 12. 8. 21:01

| SSR (Server Side Rendering) 1. 브라우저 : 서버로 웹페이지 요청 2. 프론트서버 : 백엔드서버로 data 요청 3. 백엔드서버 : DB에서 data를 받아와 JSON 과 같은 형식으로 반환 4. 프론트서버 : 반환한 data로 HTML, CSS, JS 제공 5. 브라우저 : 응답받은 HTML을 화면에 보여줌 SSR의 특징은 html을 서버에서 그려준다는 것이다. | CSR (Client Side Rendering) 1. 브라우저 : 프론트 서버에 웹페이지 요청 2. 프론트서버 : 데이터가 없는 문서(HTML, CSS, JS, img...)를 반환 (웹페이지에 사용되는 모든 파일을 받아온다.) 3. 브라우저 : 필요에 따라 백엔드 서버에 data 요청 4. 백엔드서버 : DB에..

이론공부 2020. 12. 8. 20:06

eslint 오류는 어떤게 있는지 다보여줄 심산인가...무슨에러가 이렇게 많아 ㅠㅠㅠ 첫 부분 에러하나를 처리했더니 갑자기 코드가 에러투성이가됐다. eslint 에러라서 정상작동하긴 하지만 에러표시를 본 이상 무시할 수 없다... 서칭 결과 eslint 에러가 맞음. 해결방법은 역시나 .eslintrc 에서 'endOfLine' 추가하기.

Error 2020. 12. 8. 16:28

갑자기 에러가 떴는데 전혀 에러가 뜰 곳이 아니었다. 🙄🙄🙄???? 너무나 정상적인 코드인데 웬 에러야... 찾아본 결과, es6를 사용할 경우 eslint에서 오류가 날 수도 있다고...^^;; 해결방법은 babel-eslint 설치! npm i babel-eslint -D 터미널에서 babel-eslint를 설치해준다. 그리고 .eslintrc에도 아래와 같이 추가. 기본eslint가 아니라 babel-eslint가 코드를 해석한다. 그럼 에러없이 정상작동 한다!

Error 2020. 12. 8. 16:17

모든 컴포넌트에서 props.children을 사용할 수 있다. children은 컴포넌트의 여는태그와 닫는 태그 사이의 내용이다. 예를 들어 아래와 같이 코드를 짤 경우, Profile 컴포넌트에서 사이에 있는 내용인 내 프로필를 AppLayout의 children으로 사용할 수 있다. children은 태그뿐만아니라 문자열도 사용가능하다. Profile 컴포넌트에서 위와같은 화면을 볼 수 있다. AppLayout의 내용이 함께 표시된다. 위와같이 children을 사용하면 layout을 공통으로 사용할 수 있다.

React 2020. 12. 8. 15:19