분류 전체보기369 [NEXTJS] style jsx 설정 방법 Next.js에서 css-in-js 작성하는 방법 1. inline css(not cool) 2. ) } 전역 style 설정 방법 pages/_app.js를 만들면 됨. APP COMPONENTS APP PAGES차이점 2022. 1. 16. [Github] 로컬에 작성한 코드를 원격지의 새로운 레포지토리와 연동하기 로컬 프로젝트 홈경로에서 다음 명령어 실행 git remote add origin 깃 클론주소 명령어 붙여넣기 예시 2022. 1. 10. [Vuetify] v-btn hover effect circle -> square shape로 변경하기 다음처럼, v-btn을 사용해서 버튼을 생성하고, 브라우저에서 마우스를 올리면, 사각형 형태로 모양을 표시하고 싶었습니다. 을 사용한다면, 그림자가 아래 그림처럼 원형태로 보일겁니다. 를 사용하거나, tile 옵션을 주게되면, 으로 버튼을 표시하더라도, 사각형 형태의 그림자 효과를 줄 수 있습니다. 2022. 1. 4. [CSS] input width 100% 삐져나오는 현상 문제 input width 100%로 스타일을 주었는데, 아래 그림처름 삐져나오는 문제가 발생했습니다. 해결방법 border-box : width와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. // styled-components 기반으로 작성되었다. const Input = styled.input` width: 100%; box-sizing: border-box; ` 발생 원인 input의 외곽선 너비가 입력칸 너비에 포함되기 때문임. 2022. 1. 4. [CSS] outline 속성 개요 용도는 선택된 요소를 두드러져 보이게 할 때 많이 사용합니다. border를 사용하게 되면, border가 요소 외부 크기에 영향을 줘서, 다른 요소들의 layout이 영향을 받습니다. 하지만, outline은 다른 요소들의 layout에 영향을 주지 않습니다. 사용방법 outline-style: dashed; // 필수 outline-color: red; outline-width: ; 2021. 12. 30. [react] memo 개요 react + typescript + react beautiful dnd 로 드래그 앤 드롭으로 정렬기능을 구현했습니다. 리스트 중에서 하나의 아이템을 드래그 해서 정렬하면, 정렬은 잘 되는데, 문제가 생겼습니다. 옮긴 아이템과 그 이후에 순서가 밀려나야 하는 아이템들만 렌더링 되는게 아니라, 리스트 아이템 전체가 새로 렌더링이 되면서 잠깐 모든 리스트들이 깜박이는 현상이 발생했습니다. 해결 방법은 react의 memo hook을 사용하는 것입니다. react memo를 사용하는 방법 👇 이전 코드 👇 memo를 사용해서 prop가 변경되지 않은 Card 컴포넌트가 다시 렌더링 되지 않도록 수정한 코드 2021. 12. 29. [VSCODE] Github에 코드 올리는 방법 1. 빨간 칸 클릭 2. git add . 명령어를 GUI방식으로 실행 3. commit 메시지 작성 4. git commit -m '- hour 및 minute input 추가 - recoil atom 생성' 명령어를 GUI 방식으로 실행 5. git push origin/master 6. 깃허브페이지 확인 끗 2021. 12. 26. [Vuetify] global font family 설정하는 방법 방법 src/sass/variables.scss 파일을 똑같이 생성해 줍니다. 내용에 다음 코드를 입력합니다. $body-font-family: 'jost-medium', 'sans-serif'; 폰트가 변경된 것을 확인할 수 있습니다. 참고 https://vuetifyjs.com/en/features/sass-variables/#example-variable-file SASS variables Customize Vuetify's internal styles by modifying SASS variables. vuetifyjs.com 2021. 12. 24. [Vue2 + SASS] 전역으로 SCSS 적용하기 1. sass, sass 설치 npm i -D sass sass-loader 2. scss 파일 작성 /src/assets/scss/_variables.scss /src/assets/scss/base.scss /src/assets/scss/reset.scss 3. vue.config.js 작성 module.exports = { css: { loaderOptions: { sass: { data: ` @import "@/assets/scss/_variables.scss"; @import "@/assets/scss/reset.scss"; @import "@/assets/scss/base.scss"; ` } } } } 4. 세팅할 때 에러 Sass Loader has been initialized using a.. 2021. 12. 11. [VSCode] Delete `␍` eslint 알림 사라지게 설정 문제: 코드 줄 끝에 eslint 알림이 표시됨. eslint라 정상 실행은 됨. 에러 메시지: Delete `␍`eslint(prettier/prettier) 원인 : End Line Sequence가 CRLF여서 그럼. 해결 방법 ./.eslintrc.js 설정파일을 생성 .eslintrc.js 설정파일에 다음을 작성 module.exports = { // ... rules: { // ... 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, }; 2021. 12. 1. 이전 1 ··· 14 15 16 17 18 19 20 ··· 37 다음
