본문 바로가기
반응형

💻 개발IT

[HTML/CSS] cell sticky table 생성
💻 개발IT/기타 2022. 9. 14. [HTML/CSS] cell sticky table 생성 HTML 삽입 미리보기할 수 없는 소스 위와 같이 header나 일부 column이 고정된 테이블을 만들고 싶을 때, CSS를 이용해야한다. header 고정 div { width: 100%; height: 300px; overflow: auto; table { border-collapse: separate; thead th { position: sticky; top: 0; } } } overflow 속성을 통해 설정해놓은 300px height를 넘길 때 스크롤이 생기도록 한다. ※ overflow : 내부 컨텐츠가 주어진 공간을 넘어갈 때 어떻게 할지 결정 ※ overflow auto : 주어진 공간을 넘어갔을 때만 스크롤바 생성 position sticky 설정을 통해 상단에(top: 0) head..
[nvm] Error: Permission denied @ apply2files - /usr/local/lib/node_modules/expo-cli/node_modules/.bin/detect-libc
💻 개발IT/기타 2022. 9. 13. [nvm] Error: Permission denied @ apply2files - /usr/local/lib/node_modules/expo-cli/node_modules/.bin/detect-libc 맥에서 nvm 설치시, 아래와 같은 에러가 나는 경우 Error: Permission denied @ apply2files - /usr/local/lib/node_modules/expo-cli/node_modules/.bin/detect-libc /use/local에 대한 권한을 재설정해준다. sudo chown -R $(whoami):admin /usr/local/* \ && sudo chmod -R g+rwx /usr/local/*
디자인의 게슈탈트 이론
💻 개발IT/개발자를 위한 디자인 2022. 9. 12. 디자인의 게슈탈트 이론 게슈탈트 이론 "우리의 뇌는 구성 요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다" Gestalt는 형태를 뜻하는 독일어로, 독일 심리학자 Max Wertheimer이 주장한 시지각 인지이론 유사성의 원리 (Similarity) 색, 모양, 크기가 동일한 요소들을 하나의 관계로 묶으려는 경향 유사성이 높을수록 연관성이 높은 것으로 인식하며, 색, 크기, 모양, 패턴 등을 이용하는데 이 중 색은 유사성을 특히 도드라지게 만드는 요소이다. 근접성의 원리 (Proximity) 서로 이웃해 있는 요소들과 그렇지 않은 요소들을 구분하는 경향 가까이 있는 요소들끼리 서로 연관된 것으로 보인다. 연속성의 원리 (Continuation) 어떤 선이나 운동 방향을 인지하..
OpenAPI Generator 사용법
💻 개발IT/기타 2022. 9. 8. OpenAPI Generator 사용법 OpenAPI Generator란? API 스펙을 기반으로 코드들을 자동으로 생성해주는 도구 왜 필요할까? 시스템 규모가 크면 API 가 엄청 늘어나는데 프론트에서 이 많은 API들의 입출력을 정의하는 것이 번거로움 또한, 요구사항 변경으로 인해 API 스펙이 변경되면 이를 재정의해야하는 상황 사용법 1. openAPI Generator 설치 1) 프로젝트 내 설치 npm install @openapitools/openapi-generator-cli -D 2) 글로벌 설치 npm install @openapitools/openapi-generator-cli -g 2. 루트 폴더에 openapi.json 파일 추가 { "modelPackage": "src/domain/model", "apiPackage":..
[CSS] content 속성
💻 개발IT/기타 2022. 9. 7. [CSS] content 속성 div::after { content: '' } content 속성은 CSS에서 before, after와 함께 쓰이며 HTML이 아닌 CSS로 내용을 추가할 수 있는 속성이다. ※ before : 특정 HTML element 앞에 삽입 after : 특정 HTML element 뒤에 삽입 보통 아래와 같이 글자 사이의 구분선을 넣기 위해 사용한다. 공지사항 | 게시판 | 방명록 https://developer.mozilla.org/ko/docs/Web/CSS/content
[Vue] process.env undefined 오류
💻 개발IT/Vue.js 2022. 9. 7. [Vue] process.env undefined 오류 vue에서 process.env의 변수가 undefined 되는 문제가 있었다. 확인해보니 변수명의 prefix가 있어 VUE_APP_* 로 변수명을 바꾸면 해결 https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code Modes and Environment Variables | Vue CLI Modes and Environment Variables Modes Mode is an important concept in Vue CLI projects. By default, there are three modes: development is used by vue-cli-service servetest is used..
[Vue] Property or method * is not defined on the instance but referenced during render.
💻 개발IT/Vue.js 2022. 9. 6. [Vue] Property or method * is not defined on the instance but referenced during render. 속성을 정의하지 않았는데 화면에 렌더링되려고 할 때 아래와 같은 에러가 나타난다. Property or method * is not defined on the instance but referenced during render. 이 에러는 보통 정의하지 않은 경우나 오타 등 다양한 원인으로 나타나게 되는데, 나는 아래 "items"에서 에러가 났었다. import { reactive } from '@vue/composition-api' export default { setup(props) { const state = reactive({ items: null }), return { state } } } 이 경우에 리턴문을 아래와 같이 변경하든지, return { ...toRefs(state) } templ..
[npm] read-shrinkwrap This version of npm is compatible with lockfileVersion@1,
💻 개발IT/Vue.js 2022. 8. 31. [npm] read-shrinkwrap This version of npm is compatible with lockfileVersion@1, npm install 할 때, npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@2. I'll try to do my best with it! 위와 같은 에러 발생. npm version이 6.14.4이라 lockfileVersion 1을 호환해야하는데 해당 프로젝트는 lockfileVersion 2라서 생기는 문제로 npm version을 7 또는 8로 업그레이드 하면 된다. npm install --g npm
[swagger] No operations defined in spec!
💻 개발IT/Spring 2022. 8. 26. [swagger] No operations defined in spec! http://~/swagger-ui.html 에서 No operations defined in spec! 만 보일 때, basePackage 가 프로젝트 패키지 맞는지 확인 @Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage("com.example.demo")) .paths(PathSelectors.any()) .build(); }
반응형

티스토리툴바