본문 바로가기

Web13

Java - 비구조화 할당(Unpacking) 이해, 예제 포함 Java에서는 비구조화 할당이라는 기능을 제공하는데, 고급 개발 언어인 이유중 하나가 바로 비구조화 할당이라고 할 수 있다. Python에서도 제공하는 기능이지만 비구조화된 할당을 사용하면 다음과 같은 장점을 가지게 된다. 코드 가독성 향상: 당연한 거지만 비구조화 할당은 코드를 더욱 간결하고 읽기 쉽게 만들어 줍니다. 변수명이 길거나 복잡한 객체를 다룰 때 유용하게 사용할 수있다. 코드 중복 제거: 비구조화 할당을 사용하면 불필요한 중복 코드를 제거할 수 있는데, 반복적(for 문과 같이)인 객체의 속성을 추출해서 변수에 저장할 때 객체명을 계속해서 입력하는 것을 방지할 수 있다. 속도 향상: 비구조화 할당은 작은 메모리 객체에서 더욱 효율적이다. 이유는 객체의 속성을 개별 변수로 바로 할당하기 때문이.. 2023. 5. 8.

Svelte - 3.x 2023 상반기 업데이트 new feature 하이라이트 20230508 필자가 좋아하는 Svelte 가 2023년 상반기에 주요한 업데이트 내용을 정리해 보았다. 현재 5월 기준 아래와 같은 기능개선이 있었다. Improve detection of promises that are also functions (Svelte 3.55.1, #8162) Add missing types and properties for the global part attribute and on:submit, respectively (Svelte 3.55.1, #8181) Lots of performance and bug fixes (Svelte 3.55.1* and extensions-107.0.x) 2023년 4월에는 대부분 기능 개선의 업데이트만 존재한다. svelte/eleme.. 2023. 5. 8.

HTML - 가장 많이 사용하는 마크다운(MarkDown) 제목: #을 사용하여 제목을 만들 수 있다. # Hello World는 "Hello World"라는 제목을 만든다. Hello World 굵게: ** 또는 __를 사용하여 텍스트를 굵게 표시할 수 있습니다. **bold text**는 bold text로 표시 bold text 기울임: * 또는 _를 사용하여 텍스트를 기울임꼴로 표시할 수 있습니다. *italicized text*는 italicized text로 표시 italicized text 취소선: ~~를 사용하여 텍스트에 취소선을 추가할 수 있다. ~~strikethrough text~~ 는 strikethrough text로 표시 strikethrough text 목록: 순서 있는 목록은 1., 2., 3. 등으로 시작하며, 순서 없는 목록은 -.. 2023. 3. 20.

npm - 업데이트 방법 npm은 일반적으로 Node.js 설치와 함께 자동으로 설치된다. 이를 업데이트 하는 방법은 Node.js를 최신 버전으로 업데이트하면 npm도 함께 업데이트된다. 따라서 npm을 업데이트하려면 Node.js를 최신 버전으로 업데이트하는 것이 가장 간단한 방법이지만, 동일한 Node.js 내에서 사용할 수 있는 npm만 업데이트 하는 방법은 다음과 같다. Windows[명령 프롬프트나 PowerShell] npm install -g npm@latest 정상적으로 업데이트 되었는지, `npm -v` 명령을 이용해서 확인 할 수 있다. Mac, Linux [터미널] sudo npm install -g npm@latest 확인 명령은 Windows와 동일하게 `npm -v` 명령을 실행하여 업데이트된 npm .. 2023. 3. 7.

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.

이전 1 2 다음

티스토리툴바