hanbnara

https://yceffort.kr/2021/12/nextjs-lesson-and-learn Home yceffort yceffort.kr

nextjs.org/blog/next-10 지금 시점으로 약 한달정도 지남 9버전과의 호환성엔 문제가 없고 전체적으로 성능최적화 기능들로 업데이트 됨

form 안에는 필드값이 여러개가 있다. 이것을 일일이 업데이트하는 함수를 짜기는 번거롭다. 하나의 함수로 처리하자. codesandbox.io/s/prod-tree-m6vjc?file=/src/LoginForm.js

해당 설정은 vscode 기준 자칫 잊어버리거나 깜빡할 수 있는 내용들을 지속적으로 업데이트 하자. prettier 설정은 - 해당 프로젝트 root 에 .prettierrc 파일이 있을시 이 파일이 우선한다. 프로젝트 폴더 생성 후 create-react-app / create-next-app 을 해야할 때 npx create-react-app . 혹은 npx create-next-app .

styled components 에서 createGlobalStyle 을 이용해서 antd 에서 정의한 class 를 수정해준다. 이외 react-slick 등 외부 라이브러리 사용시 정의된 class 를 수정할 수도 있다. import { createGlobalStyle } from 'styled-components'; const Global = createGlobalStyle` .ant-row{ ... } .slick-slide{ display: inline-block; } `;

할때는 build 우선 필수~... 무엇을 하든 build는 선행필수 사항 어떤 호스팅 플랫폼에서는 build 자동으로 해줌. vercel에서는 내용업데이트 후 build 하고 vercel deploy 실행해 주어야 함

스타일링할때 가능한 방법들은 다음과 같을 거 같다. - styled-component 를 사용 - scss 를 사용( css 보다는 편하니까 그냥 scss 사용, next 는 기본셋팅 되어있음 ) - tailwindcss 를 사용 - antd 를 사용( bootstrap 보다는 세련되어 보임, 색상, ui 애니메이션등 ) 이것저것 건드려본 결과 ( 오랜 시간을 테스트 해 본것은 아님 ) 특정 ui에 대한 디자인이 없다면 antd, styled-component 를 사용하면 될거 같다. tailwind는 util로서 사용하기는 용이할 수도 있으나 css 를 사용할 줄 아는 상태에서는( 나 같은 경우 ) 사용하기가 더 번거로웠다. - 초반에는 해당 클래스네임을 참고하면서 하는것 - 다른 라이브러리와 스타일이..

antd 를 설치 후 _app.js 에 antd.css 를 import 해야 style 적용이 가능합니다. import "antd/dist/antd.css"

velog.io/@susu1991/next.js%EC%97%90-styled-components-%EC%A0%81%EC%9A%A9-%EA%B3%A0%EA%B5%B0%EB%B6%84%ED%88%AC%EA%B8%B0.-by.-react-bird next.js에 styled-components 적용 고군분투기. by. react-bird Intro 이전부터 프로젝트에 styled-components를 편하게 잘 사용하고 있기도 했고, 강의도 마침 이 플러그인을 사용하였습니다. 다만 강의는 무지 뒤편에서 이 플러그인을 적용시키는데 저는 아직 거�� velog.io next study 중 방금전까지 작동되던 코드에서 에러가 난다. 다른 콤포넌트는 괜찮은 듯 한데 Input.Search 적용시에 에러가 남. 에러 ..

일단 css는 사용할 일이 없으니 scss를 사용하는 방법으로 바로 이야기 하자면 create react app 을 사용했을 경우, node-sass 를 npm 을 사용해 설치 후 scss 파일을 만들고 사용하고자 하는 component에 import 시킨다. 끝? 응! 끝! react 에서는 UI를 styling 하는 방법은 아래와 같이 정리될 수 있다. https://velog.io/@velopert/react-component-styling 다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components 리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하..