hanbnara

react-slick.neostack.com/ Neostack The last react carousel you will ever need react-slick.neostack.com 사용할때마다 슬라이더의 이미지들의 사이즈를 화면너비와 정해진 높이에 맞추어야 할때, 메인 배너같은 경우, custom styling 에 대해 혼란스러울 경우가 있어 메모해둔다. ( 매번 이미지를 감싸는 다른 요소의 사이즈를 변경하는 것에 초점을 두다가 시간을 낭비하는 경우가 많다. ) 간단한 방법은( 내가 해본 결과 ) - 기본 스타일링을 적용하고 - 슬라이더의 기본 너비 수정 - 거기에서 슬라이더 이미지의 width, height 값과 사이즈를 설정하면 된다. - 그외 UI 요소들 수정 예를 든다면 다음과 같다. .sli..

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 적용시에 에러가 남. 에러 ..

nuxt 실행시 port 설정 - package.json 에서 기술하는 방식이 작동하지 않는다. - nuxt.config.js 에서 기술하면 된다. nuxt 에서 process.env.NODE_ENV 설정하기 - vs code 의 launch.json 에서의 설정이 잘 되지를 않는다. 왜지? - vs code 의 terminal 에서( terminal tool로는 cmd 로 설정해야 한다. 그렇지 않으면 않된다.) set NODE_ENV=development 실행하면 된다.

아래와 같이 gh-pages 설치 npm i gh-pages package.js 파일에 "homepage": "http://{your github id}.github.io/{your project name}" 을 입력하고 "scripts" 항목아래 "deploy": "gh-pages -d build", "predeploy": "npm run build" 를 입력한다. npm run deploy 를 실행하면 predeploy 실행 후 deploy를 실행한다. 실행 완료 후 homepage url 로 방문하면 deploy 성공~ 자세한 내용은 https://youtu.be/HdFbiPkZXR0 해당 script 를 실행시 "Permission Denied (publickey)" 발생시 아래를 참고해서 해결했..

일단 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 리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하..

sitemesh 로 layout 을 구성해 보자. 들어올 컨텐츠에 원하는 자리에 style, contents markup, javascript 를 넣고 싶다. 를 사용해보자. 해당 테스트는 일단 다담주~ ^^