본문 바로가기

Web20

SEO 최적화/개선 하기 with 블로그스팟(Blogger) 블로그는 검색으로 사용자들에게 자신의 글을 전달하는 방식으로 운영이 된다. 여기에 SEO(검색 엔진 최적화)는 자신의 글이 필요한 사용자에게 잘 전달될 수 있도록 도움을 주는 요소라고 할 수 있다. 이때 효과적으로 SEO를 해야 하는데 여기에서는 블로그스팟(blogspot) 기준으로 효과적으로 효과적으로 운영할 수 있는 방안을 정리해 본다. 참고 용도로 아래 글도 살펴보면 좋다. 블로거(BlogSpot, Blogger) - 구글 웹 마스터, 색인이 잘 되지 않을때 (asecurity.dev) 1. 검색 설명을 사용하자. 구글 검색을 해보면 본문에 쓴 내용들이 나타나는 것을 알 수 있다. 글을 쓰면 오른쪽에 검색 설명을 넣을 수 있게 구성되어 있다. 이 정보를 작성하면, 검색시 노출되는 평문을 여기에 작성.. 2024. 2. 24.

NodeJS - 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 .. 2024. 2. 23.

Java - Array(배열) 관련 자주 사용하는 내장 함수 NodeJS는 Javascript에 프레임워크(상위 라이브러리 방식)로 동작하는 구조이기 때문에, Vue, React, Svelte등을 이용할 때 Javascript를 이용하는 방법을 알고 있어야 개발을 원활하게 진행할 수 있다. 그중 배열은 Javascript에서 가장 많이 사용되는 방식인데, 내장 함수를 통해 코드의 간결성과 편의성을 상당히 높일 수 있있다. 그중 자주 사용되는 내장 함수들에 대해서 알아보도록 하겠다. 내장 함수를 사용할 때 유의할 점 return형 인지, 원본 데이터가 변경되는지를 확인하는 것이 좋다. 만약 return 형인 경우 원본 데이터에는 영향을 주지 않기 때문에, return을 받을 변수를 지정하여 사용할 수 있다. sort와 같이 원본 배열의 데이터를 변경하는 내장 함수도.. 2024. 2. 23.

Vue - Eslint 라인 비활성화, error 'v-slot' directive doesn't support any modifier 해결 Vue에서 Vuetify를 많이 사용하는데, 개발을 적용하면서 v-slot 관련된 오류가 나타나서 정리해 본다. 결론 부터 얘기하자면, 무시를 해도 되는 오류이다. eslint가 잘 못 인식한 부분이라고 할 수 있다. 다만 이러한 Lint 오류가 많아지면, 실제 오류를 확인하는데 어려움이 발생하므로, 이를 해결하기 위해서는 몇가지 방법이 있는데 필자가 추천하는 방법은 특정라인을 비활성화 하는 것이다. 특정 라인 비활성화 대부분의 Lint 프로그램들은 잘못된 해석을 하는 경우가 더러 있기 때문에 라인별로 비활성화를 제공한다. Eslint도 비활성화를 특정 라인에만 생성할 수 있는데, 다음과 같이 기술하면된다. 다음 라인 비활성화 // eslint-disable-next-line 본 라인 비활성화 /* es.. 2024. 2. 22.

NodeJS, Svelte - CORS 해결 3가지 방법 필자도 CORS를 알고 있지만, 이번에는 프론트쪽 언어를 진행하면서 CORS를 다시금 경험하여 해결 방안을 Nodejs, Svelte 입장에서 정리해본다. CORS는 가장 요점만 정리한다면, 현재 도메인 이외의 경로에서 정보를 요청했을때, 사전에 요청을 현재 도메인이 허용하는지를 구성하도록 하여 해커의 공격을 막기 위한 브라우저의 보안 설정이라고 할 수 있다. 이를 해결하기 위해서는 1. 쿠키 정보를 공유하거나 2. Access-Control-Allow-Origin를 설정하거나 3. Proxy 설정을 하는 것이다. 각 방법에 대해서 간략히 정리해 본다. 1. 인증된 요청 (Credentialed Request) 통한 방법 인증된 요청 (Credentialed Request)은 인증 정보들 전달한다는 의미.. 2024. 2. 22.

Vue - 설치 오류 조치 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 오류를 가장 잘 맞는 .. 2024. 2. 21.

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.

이전 1 2 3 다음

티스토리툴바