본문 바로가기
반응형

Web9

Javascript - 배열 관련 자주 사용하는 내장 함수 NodeJS는 Javascript에 프레임워크(상위 라이브러리 방식)로 동작하는 구조이기 때문에, Vue, React, Svelte등을 이용할 때 Javascript를 이용하는 방법을 알고 있어야 개발을 원활하게 진행할 수 있다. 그중 배열은 Javascript에서 가장 많이 사용되는 방식인데, 내장 함수를 통해 코드의 간결성과 편의성을 상당히 높일 수 있있다. 그중 자주 사용되는 내장 함수들에 대해서 알아보도록 하겠다. 내장 함수를 사용할 때 유의할 점 return형 인지, 원본 데이터가 변경되는지를 확인하는 것이 좋다. 만약 return 형인 경우 원본 데이터에는 영향을 주지 않기 때문에, return을 받을 변수를 지정하여 사용할 수 있다. sort와 같이 원본 배열의 데이터를 변경하는 내장 함수도.. 2023. 1. 25.
Eslint 라인 비활성화 - error 'v-slot' directive doesn't support any modifier 해결 Vue에서 Vuetify를 많이 사용하는데, 개발을 적용하면서 v-slot 관련된 오류가 나타나서 정리해 본다. 결론 부터 얘기하자면, 무시를 해도 되는 오류이다. eslint가 잘 못 인식한 부분이라고 할 수 있다. 다만 이러한 Lint 오류가 많아지면, 실제 오류를 확인하는데 어려움이 발생하므로, 이를 해결하기 위해서는 몇가지 방법이 있는데 필자가 추천하는 방법은 특정라인을 비활성화 하는 것이다. 특정 라인 비활성화 대부분의 Lint 프로그램들은 잘못된 해석을 하는 경우가 더러 있기 때문에 라인별로 비활성화를 제공한다. Eslint도 비활성화를 특정 라인에만 생성할 수 있는데, 다음과 같이 기술하면된다. 다음 라인 비활성화 // eslint-disable-next-line 본 라인 비활성화 /* es.. 2023. 1. 6.
Vue - vue/cli 설치 오류 command not found Vue를 시작하기 위해 가장 기본적인 cli 명령을 설치하는데 수많은 npm WARN deprecated 오류가 발생한다. 하지만 보통 이 오류가 나타나더라도 설치에 문제는 없다. 오늘 오전 시간을 문제점 해결을 하면서 경험한 부분중 오류시 중요 체크 포인트를 정리해 본다. 1. Uninstall 후 다시 설치 가장 먼저 해봐야할 부분은 바로 제거후 다시 설치하는 것이다. $ npm uninstall @vue/cli -g $ npm install @vue/cli -g #권한 오류가 있는 경우 $ sudo npm uninstall @vue/cli -g $ sudo npm install @vue/cli -g 2. 환경 경로(Path)가 저장되었는지 확인 command not found 오류를 가장 잘 맞는 .. 2023. 1. 3.
CSS - Select 비활성화, 기본값 설정 Select는 CSS에서 특정 요소를 지정하거나 선택하는데 사용하기 유용한 컴포넌트이다. 이를 보다 효과적으로 사용할 수 있는 옵션 2가지에 대해서 정리해 보도록 하겠다. 1. 비활성화 특정 옵션의 경우 화면 표시에 표시만하거나, 조건에 따라서 비활성화하는 방ㄱ으로 사용할 수 있다. 사용은 옵션에 disabled를 선언해 주는 것으로 간단히 사용할 수 있다. Category {#each types as t (t)} {t} {/each} 위 코드를 적용해 보면, 아래와 같이 기본적으로 Category를 보여줄 수 있다. 그리고 해당값은 실제 선택할 수 없도록 하여, 사용자의 잘못된 사용을 막을 수 있다. 2. 기본값 지정 다음은 자주 사용되는 값인 경우 기본적으로 선택하여 사용할 수 있도록 도움을 주는 옵.. 2022. 5. 8.
CSS - grid 기본 이해, 2차원 배열하기 CSS를 사용할 때, 특정 화면 사이즈에 요소들을 배치해야하는 경우가 있다. 이때 효율적으로 작성할 수 있는 부분이 바로 CSS에서 제공하는 grid이다. grid는 행과 열을 통한 2차월 배열을 지원한다. 따라서 행과 열을 grid 작성시 지정해 줄 수 있으며, 해당 기준의 열과 행에 맞춰서 화면 배열이 만들어지게 된다. grid에서 열(grid-template-columns), 행(grid-template-rows)을 지정하는 옵션을 통해 조절 할 수 있는데 repeat를 이용해 반복 횟수를 지정할 수 있다. 한줄에 2개의 열을 100px씩 표시하고 싶다면 아래와 같이 지정 할 수 있다. test1 test2 test3 test4 아래와 같이 100px씩 2개의 버튼이 열을 만들어 구성된 것을 알 수.. 2022. 4. 26.
CSS - element 요소 정리 CSS를 작성할 때 기본적으로 알아두면 좋은 element에 대해서 정리해 본다. (현재 업데이트중...) Ctrl + F 키로 검색을 하면 보다 편하게 찾을 수 있다. 요소 설명 background-color 배경 색 border 테두리 스타일 color 글씨 색상 padding 세로 가로 크기 text-align 글씨 정렬 (가로 기준) text-decoration 글씨 표현 방식(기본값 링크시 밑줄) display 가로 세로등 element 표현 방식 font-size 글씨 사이즈 border-radius 모서리 라운딩 :hover 마우스가 위치할때 변화 transition-duration :hover시 전환되는 속도(기본값 0) box-shadow 배경 그림자 설정 float 그룹의 정렬 위치, .. 2022. 4. 3.
CSS 마침표 "."의 의미 CSS에서 Style을 지정할 때 "."은 선택자로 특정 스타일을 지정하는 용도로 활용된다. . 기호는 class 값을 고유 선택자로 지정할 때 사용된다. 이러한 선택자는 HTML 태그에 고유 식별자를 지정해서 개별적인 디자인 효과를 줄 때 사용하므로 특정 스타일을 구분할 때 효과적이다. . 점 고유 선택자 나, 너, 우리라는 h1 태그를 달고 있는 글자를 출력하고자 한다. 이때 "나"라는 h1 태그에만 빨간색 효과를 주고자 한다면, class를 red를 지정하고, .h1라는 스타일 이름을 생성해 테스트를 해보도록 하자. 나 너 우리 아래와 같이 고유 식별자로 지정한 .h1를 통해 빨간색이 적용 된다. . 이 없는 건 바로 html 에 기본적 태그에 사용할 수 있다. 만약 위에 사용하고자 한다면, h1 .. 2022. 4. 2.
Sass(SCSS)란, 사용법 HTML 의 화면의 디자인 적인 요소로 사용되는 CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로써, 웹 화면의 표현을 간편하면서, 레이아웃과 스타일을 정의할 때의 자유도가 높다고 할 수 있다. 그리고 편리하 사용성은 누구나 쉽게 접근하여 사용할 수 있지만, 들어갈 수록 그 복잡함도 함께 커지게 된다. 이러한 CSS는 W3C의 표준 스타일시트로 활용되고 웹 표현에 필수 요소 이기에 반드시 사용해야 하지만, CSS의 불편한 부분을 보완하고 편의성을 높인 CSS 전(Pre)처리기가 나오게 되었고, 이것이 Sass/SCSS이다. * CSS 전처리란 CSS가 동작하기 전, 즉 개발 단계에서 이 전처리 언어인 SCSS를 사용하고 실제 웹에서는 CSS로 변환해서 동작되는 것을 의미한다. Sass/.. 2022. 3. 29.
MVC - .Net razor how to selection dynamic CSS You can use it in View file as below. First, use according to the condition @if (item.service == 0) { @Html.DisplayFor(modelItem => item.service) ms } else { @Html.DisplayFor(modelItem => item.service) ms } Here is how to use it through true or false. @Html.DisplayFor(modelItem => item.ping) ms In this case, css can be applied according to the following condition. 2020. 10. 28.