hanbnara

스타일링할때 가능한 방법들은 다음과 같을 거 같다. - 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 를 넣고 싶다. 를 사용해보자. 해당 테스트는 일단 다담주~ ^^

https://webisfree.com/2015-02-04/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EC%BF%A0%ED%82%A4(cookie)-%EC%A0%80%EC%9E%A5-%EB%B0%8F-%EC%82%AD%EC%A0%9C-%EC%98%88%EC%A0%9C%EB%B3%B4%EA%B8%B0 [자바스크립트] 쿠키(cookie) 저장 및 삭제 예제보기 브라우저의 쿠키(cookie) 데이터저장소를 이용하면 최근에 본 페이지나 키워드등을 저장할 수 있습니다. 온라인쇼핑몰이라면 관심상품으로 등록할 수도 있을테고... 온라인 사전 사이트라면 기존에 검색했던 내용들을 저장할 수 있을 것입니다. webisfree.com 링크로 대신~ 항상 감사한 정보들

axios catch error 에서 상태에 따라 UI를 조작해야하는 경우 상태값을 받아오려면~ catch(function(err){ console.log( err.response ); // error.reponse 객체로 참조해서 케이스별 분기 });

video autoplay 는 하려면~ mute속성을 준다. ios 에서 autoplay 하려면 playsinline 속성을 준다. 결론은 mute playsline 속성 모두 준다.