DEVELOPMENT RECORD

1. custom 404 페이지 pages 폴더에서 404.jsx파일을 만들어주게 되면 페이지를 찾을 수 없을 때 나타난다. 파일명을 404.jsx로 해야한다!! const NotFound = () => { return 404 페이지 입니다.; } exort default NotFound; 2. _error 프로젝트를 빌드 한 뒤, 프로덕션 환경으로 실행하면 에러 페이지가 적용된다. const Error = () => { return 에러가 발생했습니다. }; export default Error; 출처 https://velog.io/@carrot/Next.js-%EC%97%90%EB%9F%AC-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0 Next...

Image 를 사용시에 hostname 관련 이슈가 발생시 해결법은 next.config.js에 아래와 같이 도메인을 등록해주면 된다. module.exports = { ... images: { domains: ["cdn.pixabay.com"] }, ... } 출처 https://velog.io/@broccoliindb/nextimage-hostname-error next/image hostname error hostnameImageImage 를 사용시에 hostname 관련 이슈가 발생시 해결법은 next.config.js에 해당 설정을 통해 아래와 같이 도메인을 등록해주면 된다. 아래 예는 github avatar 도메인과, 로컬테스트용 도메인인 l velog.io https://github.com..

Styled-Component에서 active 요소를 주고 싶을 때 className으로 제어해도 되고, props로 제어해도 된다. props로 제어 isActive의 값에 따라서 ? : 삼항연산자를 활용해서 사용하는거라 한 눈에 확인하기가 어렵다는 단점이 있다. const TabAnchor = styled.button` border: ${(props) => (props.isActive ? `1px solid #333333` : `0px`)}; `; className으로 제어 : 코드가 깔끔해진다. import styled from "@emotion/styled"; const TabAnchor = styled.button` border: 0px; &.isActive { border: ${({ theme..

페이지 전체를 스크롤 시, 가운데에 있는 div 영역을 상단에 고정시키고 일정 내용들은 그대로 스크롤 하고 싶을 때는 sticky를 사용한다. 단, IE에서 먹지않음!!!! fixed와 sticky의 차이점은?? - fixed : 페이지 화면 내 절대적인 위치에 고정 - sticky : 가장 가까운 부모 element를 기준으로 배치 ( 부모 필요 ) 각각의 콘텐츠마다 고정해야 되는 내용이 달라져야 되는 경우에는 sticky를 이용하면 좀 더 콘텐츠에 맞는 내용을 고정시켜 사용자에게 명확한 정보를 전달해줄 수 있다. Header Fixed Sticky Absolute 주의사항 sticky요소의 전체 부모요소 중에 overflow: auto,overflow: hidden,overflow: scroll 가 ..

폰트 적용 중에 이게 버그인지 모르고 적용이 안되서.. 계속 바꾸고 바꾸고 했는데.. 찾아보니.. 리엑트에 관련한 버그였다?... 아무튼 적용된거다!!! 나처럼 삽질하는 사람 없길 바라며.. 출처 https://flymogi.tistory.com/75

const styleSheets = Array.from(document.styleSheets); for (let style of styleSheets) { if (style instanceof CSSStyleSheet && style.cssRules) { // crash ... // do something with the CSS rules of each style sheet } } 이러한 에러가 계속 떠서 구글링 해보았다. 문제 원인 4bit용 크롬에서만 해당 증상이 나타난다. 문제 해결 폰트 파일을 다운 받아서 내부에서 해결하자. 1) public/fonts 경로에 font 파일을 넣어준다. 2) global 파일에 폰트 작성 body { padding: 0; margin: 0; font-family:..

className이 달라서 생기는 경고, 첫 페이지는 SSR로 작동하며 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다. 해결 방법 1. 바벨 플러그인 설치 npm i babel-plugin-styled-components 2. .babelrc 파일 생성 후 작성 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } 출처 https://donis-note.medium.com/nextjs-styled-components-%EC%A0%81%EC%9A%A9%EC%8B%9C-prop-classname-di..

컴포넌트를 사용해서 html의 태그를 컨트롤 할 수 있다. 일반적으로는 head의 title태그나, meta태그 등을 페이지 별로 다르게 적용할 때 사용할 수 있다. // pages/index.js import Head from 'next/head' const Index = () => ( Next.js ) export default Index; 출처 https://jjamong.github.io/docs/front/react/nextjs/head/ next/head | 짜몽 개발 연구소 next/head 컴포넌트를 사용해서 html의 태그를 컨트롤 할 수 있습니다. 일반적으로는 head의 title태그나, meta태그 등을 페이지 별로 다르게 적용할 때 사용할 수 있습니다. 시작하기 // pages/in..

next.js에서 모든 것은 _app.js 이 파일을 통한다. (페이지들의 공통) 페이지들의 공통된 레이아웃 페이지를 탐색할 때 상태 유지 추가 데이터를 페이지에 주입 글로벌 CSS 추가 출처 https://velog.io/@lyj-ooz/next-js-1 next js 1 (시작하기, _app.js 파일) next.js에서 모든 것은 \_app.js 이 파일을 통한다. 0\. 가장 큰 전체적인 레이아웃을 여기서 잡는다. 1\. 페이지 전환 시, 레이아웃을 유지할 수 있음 2\. 페이지 전환 시, 상태값을 유지할 수 있음 3\. co velog.io https://velog.io/@carrot/Next.js-%EA%B3%B5%ED%86%B5-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%..

출처 https://haranglog.tistory.com/10 [React] 리액트에서 react-moment, moment.js 사용하여 실시간으로 변경되는 시간 만들기 ✔ moment.js Moment js 는 시간이 포함된 데이터를 받아 조작해야 할 경우 가장 많이 사용되는 편리한 라이브러리입니다. 스터디를 모집하는 사이드 프로젝트를 만들 때 사용하였습니다. 현재 시간 haranglog.tistory.com