김평범's OrdinaryCode

Nuxt3 프로젝트 이동 하기 - 2️⃣ Nuxt3 프로젝트 생성 / 폴더 구조

김평범님 — Thu, 30 Jan 2025 19:11:49 +0900

Nuxt3 프로젝트를 이제 생성해보도록 하겠다.

프로젝트 생성 필수 조건

- Node.js - 활성 LTS 릴리스 이용

- 텍스트 편집기

- 터미널 (Nuxt 명령어 실행 용)

✅현재 nuxt3.15 버전으로 프로젝트를 진행 중

‍ Nuxt Project 생성 명령어

# Nuxt CLI 설치 (글로벌 설치)
npm install -g nux

i # 새로운 Nuxt 프로젝트 생성
nuxi init my-nuxt-app

# 의존성설치
cd my-nuxt-app
npm install

nuxi는 Nuxt 공식 CLI툴로 프로젝트 초기화 및 개발 플로우를 지원한다.

nuxi init으로 프로젝트 초기 프로젝트 생성이 가능하다.

️ Nuxt 프로젝트 폴더 구조

Nuxt2와 다르게 Nuxt3 첫 프로젝트 생성 시 기본 폴더구조는 제공하지 않는다.

좀 더 유연하게 활용하기 위하 최소한의 설정으로 프로젝트가 세팅이 되기 때문에

기본 디렉토리는 내가 초창기에 추가를 해줘야한다.

Nuxt3 주요 폴더 구조 명

필요한 디렉토리는 아래 명령어로 추가가 가능하다.

/pages

- 라우트 파일을 자동으로 감지

- 파일 생성을 하면 해당 파일명이 자동으로 라우트로 등록

/component

- 파일 생성 시 자동 임포트 지원

- 해당 디렉토리에 저장된 컴포넌트는 별도 임포트 없이 템플릿에서 바로 사용 가능

/layouts

- 레이아웃 파일을 관리하는 디렉토리

/assets

- css, 이미지, 폰트 정적 파일 저장

/public

- 별도 빌드 과정없이 정적 리소스 제공 하는 폴더

- nuxt2에서 static 폴더 역할

- / 경로로 접근 가능

/plugins

- Vue 플러그인, 글로벌 설정 초기화 할때 활용

/middleware

- 라우튼 접근을 제어하거나 가드 역할을 하는 미들웨어 작성

위 폴더 구조는 필수는 아니며, 내 프로젝트 상황에 따라서 만들면 된다.

아래는 간단하게 폴더 구조 초기 설정을 위한 코드이다.

mkdir -p pages components layouts assets public plugins middleware

Nuxt 자동 임포트

Nuxt에서는 특정 폴더 에있는 파일은 직접 import하지 않아도 자동 임포트(Auto Import)를 통해서 접근이 가능하다.

개발자가 직접 import 구문 없이 접근이 가능하기 때문에 코드량이 적어지고 편리해진다.

자동 임포트는 기본적으로 Nuxt에서 활성화 되었지만,

특정 폴더 Import를 하게 하거나, 해당 기능을 비활성화 시킬 수 있다.

export default defineNuxtConfig({
  imports: {
    dirs: ['composables', 'stores'], // 특정 폴더만 자동 임포트 허용
  },
});

export default defineNuxtConfig({
  components: false, // components 자동 임포트 비활성화
  imports: {
    autoImport: false, // composables, stores 자동 임포트 비활성화
  },
});

Nuxt3 프로젝트 이동 하기 - 1️⃣ Nuxt3란? (Nuxt2와 달라진 점)

김평범님 — Wed, 29 Jan 2025 20:14:25 +0900

진짜 오랜만에 시작하는 블로그

확실히 공부를 하려면 블로그에 기록하는 게 가장 동기부여가 잘되어서,

다시 시작해보려고 한다.

개발자 생활이 오래되다보니, 이제 내가 만든 코드로 레거시가 되는 경험도 하게 됨.

바쁘다는 핑계로 미뤄뒀던 Nuxt2에서 Nuxt3 이동을 2025년에는 꼭 이루겠다는 다짐과 함께

오늘부터 Nuxt3에 대한 스터디 기록을 하려고 한다.

지치지 않게 힘빼고 시작해 볼 예정

Nuxt3란?

Nuxt 3 공식 소개 페이지

Nuxt는 Vue 기반 프레임워크로 서버랜더링(SSR) / 정적 사이트 생성 (SSG) 등 SEO 최적화를 제공한다.

Nuxt3는 Vue 3와 Vite를 기본적으로 사용하여 빠른 개발 환경을 제공하고 있다.

Nuxt3로 오면서 Nuxt2와 달라진 점은?

1️⃣ 파일기반 라우팅 시스템은 동일

/pages 디렉토리에 Vue 파일 생성 시 자동으로 라우트 등록

2️⃣ 자동임포트 기능 추가

composables / compoents/ store 등에서 직접 import 없이 사용가능

해당 폴더에 파일 생성 시 자동으로 인식하고 불러와서 사용할 수 있다.

기존 nuxt2버전에서는 compoents 폴더에 파일을 추가하면

import MyButton from '@/components/MyButton.vue'

위와 같은 코드를 넣어서 import 해서 사용했다면 Nuxt3부터는 별도 import 없이 사용가능하다.

3️⃣ Vite 기본 제공

Vite는 프론트앤드 개발환경을 제공하는 빠르고 가벼운 빌드 도구로,

Nuxt3부터는 기본 빌드 도구로 채택됨

Vite 도입으로 기존보다 개발 서버가 빠르게 실행되며, 최적화된 빌드를 제공한다.

4️⃣TypeScirpt 지원

완벽한 Typescript 지원으로 안정적인 개발이 가능해졌다.

5️⃣ 서버엔진 변경 (Nitro 도입)

서버리스, Edge Computing, APIRoute 제공

별도 설정 없이 API 생성 가능

6️⃣ Compositon API 기본 지원

Nuxt2에서 Options API 기반으로 작성되었다면

Nuxt3에서는 Composition API를 기본으로 설정하면서 setup()을 활용하는 걸 기본적으로 이용하게 되었다

<script setup>
//Composition API 예시
const message = ref("Hello, Nuxt 3!");
</script>

<template>
  <p>{{ message }}</p>
</template>

7️⃣ Vuex → Pinia로 대체

기존 상태라이브러리를 Vuex를 이용하던걸 Nuxt3부터는 Pinia가 기본 상태관리라이브러리로 사용 중이다.

Nuxt3에서도 Vuex 이용이 가능하다, 별도 설치 후 사용이 가능하다.

//Pinia 예시코드
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
  }),
  actions: {
    setUser(user: any) {
      this.user = user;
    },
  },
});

이제 위와 같은 내용들을 반영하여, 차근차근 Nuxt3로 프로젝트 이동을 시작해보려고 한다. :)

[SLACK] 슬랙 윈도우 팝업 알람이 안 뜨는 경우 알람 받기

김평범님 — Wed, 31 Jan 2024 00:07:32 +0900

슬랙은 현재 가장 인기있는 협업 소프트웨어 중에 하나이다.

회사의 업무 메신저가 2년만에 슬랙으로 변경되었다.

설치를 하고나니, 슬랙 팝업 창이 안뜨는 문제가 있었다.

환경설정 → 알림 → 소리 및 모양

슬랙에서 알람이 안뜨는 경우, 환경설정 알림을 확인해주자

나의 경우 Windows의 포커스 지원 때문에 알림이 이 안뜨고 있었다.

집중 지원 > 해제

시스템

윈도우 설정에에 들어가면 시스템 메뉴에 들어간다.

시스템 > 집중지원 > 해제

집중지원을 클릭하면, 3가지 선택지가 있다.

그 중 해제를 클릭해줘야 슬랙에서 알람을 받을 수 있다.

슬랙 환경설정 알림

집중지원 해제 후, 환경설정 > 알람> 예시보기를 클릭하니

윈도우 팝업으로 알람이 잘 뜨는걸 확인할 수 있다.

[대학생,직장인 추천 사이트] PDF AI 요약 프로그램 서비스 - Chat PDF 사용하는 방법

김평범님 — Wed, 23 Aug 2023 20:42:54 +0900

PDF에서 정보가 너무 많은 경우 요약해서 보여주면 좋겠다는 생각이 들 때가 있는데

오늘 소개하는 사이트는 AI를 통해서 PDF를 요약해서 보여준다고 한다

대학생, 직장인들 중 긴 PDF한번에 읽을 시간이 없는 분들이 계실 텐데

오늘은 쉽고 빠르게 PDF를 요약하는 방법이니!! 꼭 알아보고 가길 추천드린다.

ChatPDF 이용해 보기

1️⃣ChatPDF 사이트 접속하기

https://www.chatpdf.com/

ChatPDF - Chat with any PDF!

ChatPDF is the fast and easy way to chat with any PDF, free and without sign-in. Talk to books, research papers, manuals, essays, legal contracts, whatever you have! The intelligence revolution is here, ChatGPT was just the beginning!

www.chatpdf.com

사용하는 방법은 간단하다! 먼저 위사이트에 접속해 주자

2️⃣요약이 필요한 파일 업로드하기

Chat PDF

사이트에 접속하면, PDF를 올리는 곳에 내가 요약해서 보고 싶은 PDF파일을 업로드해 주면 끝!

예를 들어 정부 지원 사업 같은 복잡한 공고문을 업로드해 보았다.

3️⃣ 요약된 정보 채팅으로 확인하기

ChatPDF

업로드가 완료되면 왼쪽에 채팅형식으로 해당 PDF를 정리해서 보여주는 것을 볼 수 있다.

먼저 가장 중요한 내용이라고 판단한 질문인

일상 돌봄 서비스가 무엇인지?
어떤 서비스를 이용할 수 있는지?
가격정보는 어떻게 되는지?

총 3가지의 주요 내용을 뽑아준다.

Chat PDF 이용하기

만약 나온 질문지 중에서 내가 원하는 내용을 보고 싶으면 우측에 파란색 비행기 모양 버튼을 클릭하면

채팅형식으로 요약된 내용을 보여준다.

Chat pdf 이용해보기

만약에 ChatPDF에서 뽑은 질문 외에 내가 궁금한 내용이 있다면 직접 채팅을 입력해서 정보를 받을 수 있다.

정보를 제공한 다음에 뒤에 나오는 파란색동그라미는 해당정보를 몇 페이지에서 추출했는지를 알려주며

해당 버튼을 클릭하면 해당 정보가 있는 페이지로 바로 이동까지 된다.

처음 이용해 보는데 생각보다 내용도 정확하게 요약이 되긴 하나,

아직 많이 이용해 본 게 아니라서 중요한 서류라면 꼭 페이지를 이동해서 크로스 체크를 해보기를 추천하고

중요서류가 아니라면 이 정도 퀄리티면 정말 쉽게 이용할 듯해서!

자주 이용해 볼 예정이다.

[ubuntu] pm2 save 목록 다시 되살리기 / ngnix 상태 확인하기

김평범님 — Wed, 26 Jul 2023 23:27:52 +0900

아침에 출근 후 이슈 때문에 이용한 명령어 정리하기!

출근 후 우분투 서버가 제대로 동작을 안 해서 점검을 하게 되었다.

일단 서버는 재시작해서 접속이되기 시작했는데,

서버에 돌려놓은 pm2가 모두 죽어 있는 상태

pm2 ls

다행히 pm2 save로 목록을 진행해 놔서 ngnix를 재시작했는데,

pm2 list들이 ngnix 재시작 후에도 리스트가 안 올라온다.

부랴부랴 확인해보니 아래 명령어를 이용하면 pm2 save로 저장해 놓은 list가 재실행된다고 한다.

‍♀️pm2 save 리스트 재실행하기

pm2 resurrect

ubuntu pm2 resurrect

해당 명령어를 통해서, pm2 save로 저장해놓은 프로세스는 다시 살아났는데,

여전히 서버접속이 안된다.

‍ ngnix 상태 확인하기

그렇다면 pm2 문제가 아니라 ngnix가 제대로 동작하지 않는 것 아닐까?라는 생각으로

ngnix 상태를 확인해보기로 했다.

아래 명령어를 이용하면 ngnix 상태를 확인할 수 있다.

systemctl status nginx

ngnix 상태 확인하기 / systemctl status nginx

만약에 안된다고 하면 앞에 sudo 붙여주고 ngnix 상태확인해 주기

Active: failed 상태로 현재 우분투 서버 내 ngnix가 오류가 난 상태임을 확인했다.

아래에는 문제가 되는 원인이 나오는데 이건 상황마다 다를 듯한데, 아래 이슈를 해결해 주자.

나의 경우 ssl 처리가 안 돼있는 도메인이 proxy에 걸려있어서 나던 오류!

오류를 모두 수정해 준 뒤 ngnix 재시작해주기

‍ ngnix 재시작하기

systemctl restart nginx

ngnix 재시작하기 / systemctl restart nginx

오류 수정 후 ngnix를 재시작해주고 다시 상태를 확인해 보니

Active: active(running)으로 정상 상태로 변경된 것을 확인할 수 있다.

[WebStorm] 특정 파일 텍스트 파일로 인식할 때 - 파일 형식 바꾸는 방법

김평범님 — Tue, 11 Jul 2023 19:55:17 +0900

웹스톰 파일 형식 Text로 인식할 때 변경방법

최근 webstorm에서. vue 파일을 생성했는데,

Vue파일 확장자는 잘 지정이 되어있는데

웹 에디터에서 그냥 텍스트 형식으로 보이기 시작했다.

모든 Vue 파일이 아니라, 특정파일만 문제가 나서 어떻게 해결해야 되는지 찾아봤고,

오늘은 해결방법 공유를 위한 포스팅

Webstorm > Setting >Editor > File Types 메뉴로 들어간다.

Webstorm  파일 타입

파일타입을 확인해보면 Text 파일에 Registered Patterns를 확인해 보니,

내 프로젝트에서 문제 되던. vue 파일이 여기에 등록이 되어있었다.

어쩐지 새로 파일을 만들어도 계속 Text로 인식했는데

여기에 이미 Text파일이다라고 정의를 하면,. vue 파일로 에디터 자체에서 인식이 안되었던 듯

저와 같이 고생하실 분들 위해서 공유하고 갑니다.

[Vue] vue VCalendar에서 v-model 변경 시 특정 날짜로 datepicker 이동 시키기

김평범님 — Thu, 29 Jun 2023 22:21:15 +0900

VCalendar 이전날짜 자동 focus 기능 구현하기

datepick에서 이번에 신규로 개발한 기능은

기존 날짜를 선택하면 이전기간과 비교해서 보여주는 datepicker를 개발 중이었다.

이전기간이 변경이 되면,

비교 기간이 자동으로 v-model에 연동되어서 변경이 되는데

아쉬운 점이 연결된 데이터는 변경이 되었는데

datepicker에서는 표시가 안 되는 문제가 발생했다. ‍♀️

오늘은 v-model로 연결된 데이터가 변경되면,

해당 날짜로 datepicker를 focus 시키는 기능을 찾아보기로 했다!

VCalendar

VCalendar는 vue에서 range를 선택하기에 최적화되어있는 datepicker로,

현재 range를 선택할 때 내가 사용하고 있는 datepicker라이브러리이다.

https://vcalendar.io/

Welcome | VCalendar

vcalendar.io

VCalendar move Methods 이용하기

methods vCalendar

먼저, 찾아보니 move라는 Methods를 이용하면 target 날짜로 이동이 가능한 function을 제공하고 있는 걸 확인!

sample Code

<template>
  <div>
    <v-date-picker
      ref="date"
      :value="date"
      @input="updateSearchParamsDate"
      is-range
    />
    <v-date-picker
      ref="compareDatepicker"
      :value="compareDate"
      is-range
    />
  </div>
</template>
<script>
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration'; //dayjs 기간 계산을위해 추가
dayjs.extend(duration);

  export default {
    data() {1
      return {
        date: {
          start: null,
          end: null
        },
        compareDate: {
          start: null,
          end: null
        },
      }
    },
    methods: {
      updateSearchParamsDate(value) {
        //datepicker에서 선택된 date 세팅
        this.date.start = dayjs(value.start).format("YYYY-MM-DD");
        this.date.end = dayjs(value.end).format("YYYY-MM-DD");

        //date 기간 만큼 이전기간 설정하기
        const dateDifference = dayjs.duration(dayjs(this.date.end).diff(dayjs(this.date.start))).asDays();
        let end = dayjs(this.date.start).subtract(1, 'days').format("YYYY-MM-DD");
        let start = dayjs(end).subtract(dateDifference, 'days').format("YYYY-MM-DD");
        this.compareDate = {start, end};

        //설정된 기간으로 datepicker 이동
        this.$refs.compareDatepicker.move(this.compareDate.end);
      },
    }
  }
</script>

date라는 datepicker에서 데이터가 변경이 되면,

compareDatepicker에서 해당 기간만큼 이전 기간이 자동으로 선택되게 했다.

그 이후에 이전 기간이 만약에 다른 연, 월 일 경우 해당 위치로 datepicker 포커스를 이동시키는 코드이다.

this.$refs.compareDatepicker.move(this.compareDate.end);

위 코드를 이용하면 특정날짜로 datepicker를 이동할 수 있다.

‍ 위 코드 결과화면

datepicker 선택하는 화면

move function을 이용해 주니 이제 비교하는 차트가 알아서 그전 데이터로 이동하는 것까지 볼 수 있게 되었다!

편안- 하다

[webstorm] 에디터 폰트 크기 변경하는 방법(단축키, 마우스 휠 적용)

김평범님 — Tue, 18 Apr 2023 21:55:11 +0900

인텔리제이(intelliJ)에서 나온 웹스톰(WebStorm)을 기본 에디터로 이용 중인데,

최근 재택근무를 이용하면서 방송화면으로 내 코드를 보여줘야 되는 일이 발생했다

보통 폰트를 고정해 놓고 사용하는데, 상황마다 키우고 줄이 고를 반복해야 하다 보니

단축키를 찾게 되었다.

웹스톰(WebStrom) 폰트크기 변경하는 방법

1️⃣File → Setting을 들어던 지 Ctrl + Alt +S를 눌러서 Setting 창을 열어준다.

2️⃣Change font size(Zoom) with Ctrl+ Mouse Wheel 체크하기

webstorm 폰트 사이즈 변경

위 기능을 체크해서 켜주면,

앞으로 컨트롤을 누르고 마우스 휠을 조절해 주면

에디터 폰트 사이즈가 바로 변경이 된다.

vue.js 에서 resize 감지 하는 방법 && carousel 스크린 사이즈 별 데이터 표시하기

김평범님 — Tue, 4 Apr 2023 20:13:56 +0900

UI상 한 화면에 많은 데이터를 이용할 때 carousel을 이용해 준다.

vue carousel 라이브러리를 확인해 보면 가로, 세로 몇 개씩 콘텐츠를 보여줄지 변수로 지정을 하는데

이때 화면 크기에 따라서 자동으로 수정되는 UI를 만들어보도록 하겠다.

Vue Carousel 라이브러리 추천

https://www.npmjs.com/package/vue-slick-carousel

vue-slick-carousel

Vue Slick Carousel with True SSR Written for Faster Luxstay. Latest version: 1.0.6, last published: 3 years ago. Start using vue-slick-carousel in your project by running `npm i vue-slick-carousel`. There are 38 other projects in the npm registry using vue

www.npmjs.com

현재 내가 이용하고 있는 vue-slick-carousel 가로 세로 보여줄 카드 크기를 결정할 수 있고,

예시페이지도 매우 제공이 잘되어있다.

✅vue-slick-carousel 연결하기

npm install vue-slick-carousel

npm 명령어로 바로 설치가 가능하다.

‍ 간단한 샘플 예시코드

example.vue

<template>
    <div style="padding:40px; background:gray;">
        <VueSlickCarousel
                :rows="2"
                :slidesToShow="2">
            <div v-for="i in 10" class="pd16">
                <div class="card">{{i}}</div>
            </div>
        </VueSlickCarousel>
    </div>
</template>
<script>
    import VueSlickCarousel from 'vue-slick-carousel';
    import 'vue-slick-carousel/dist/vue-slick-carousel.css';
    import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';


    export default {
        components: {
            VueSlickCarousel
        },
    };
</script>
<style>
    .pd16 {
        padding: 16px;
    }

    .card {
        height: 250px;
        background: pink;
        border-radius: 8px;
        color: #fff;
        text-align: center;
    }
</style>

설치가 완료되었으면 important로 라이브러리를 가져와준 뒤 실행시킬 수 있다.

지금은 10개의 카드가 보이는 단순한 캐러셀을 만들어 주었다.

결과화면

carousel만들어진 화면

적용한 속성을 보면 :row와 :slideToShow를 넣어주었다.

:rows : 세로로 보여줄 카드 수
:slideToShow: 가로로 보여줄 카드 수

(옵션 별 자세한 사항은 위 npm 사이트 참고해 보자 )

위의 형태로 하면 한화면에 가로2개 세로2개로

한번에 총 4개의 카드가 보이게 된다.

좀 더 고민을 해보면 이렇게 보이는 slide의 개수를 화면상 크기에 맞춰서 가변적으로 바꿀 수 없을까?

고민하게 된다.

그래서 아래 코드를 추가하게 되었다.

Vue.js resize 시 화면 크기 계산하기

javascript에서 제공하는 이벤트 리스너를 이용하면 이벤트 처리가 가능해진다.

아직 이벤트 리스너 기능을 잘 모른다면? 아래 포스팅 참고하기!

https://ordinary-code.tistory.com/64

[JavaScript] 이벤트리스너(Event Listener)란? - 사용법 및 주의사항

동적인 웹 애플리케이션의 구현을 위해서는 사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다. 이러한 개념에서 Javascript 이벤트 객체에 대해서 관심을 가질 필요가 있다. JavaScirpt

ordinary-code.tistory.com

그래서 나온 코드는 아래와 같다.

example.vue

<template>
    <div style="padding:40px; background:gray;">
        <!-- carousel row, col 변수로 연결,
        css를 이용해서 .card 클래스에 높이250 지정-->
        <VueSlickCarousel
                :arrow="true"
                :slidesToShow="carouselParam.col"
                :rows="carouselParam.row"
        >
            <div v-for="i in 100" :key="i" class="pd16">
                <div class="card">
                    {{i}}
                </div>
            </div>
        </VueSlickCarousel>
    </div>
</template>
<script>
    import VueSlickCarousel from 'vue-slick-carousel';
    import 'vue-slick-carousel/dist/vue-slick-carousel.css';
    import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';


    export default {
        components: {
            VueSlickCarousel
        },
        data() {
            return {
                carouselParam: {
                    row: 6,
                    col: 4,
                },
            };
        },
        mounted() {
        	//페이지 접속 시 resize 이벤트 핸들러 추가
            window.addEventListener('resize', this.handleResize);
            //최초 한번 실행
            this.handleResize();
        },
        beforeDestroy() {
        	//페이지 떠날 때 이벤트 핸들러 삭제
            window.removeEventListener('resize', this.handleResize);
        },
        methods: {
            handleResize() {
                const vm = this;
                //resize 실행마다 width, height 가져오기
                let width = window.innerWidth;
                let height = window.innerHeight;
                
                //브라우저 넓이에 따라서 보여질 카드 개수 표시
                if (width < 768) {
                    vm.carouselParam.col = 1;
                } else if (width >= 768 && width < 970) {
                    vm.carouselParam.col = 2;
                } else if (width >= 970 && width < 1400) {
                    vm.carouselParam.col = 3;
                } else if (width >= 1400 && width < 1800) {
                    vm.carouselParam.col = 4;
                } else if (width >= 1800) {
                    vm.carouselParam.col = 5;
                }
                
                //높이에 딱 채울 카드 개수 계산하기
                //padding값까지 포함한 282px을 높이로 나눠줘서
                //최대 들어갈 수 있는 카드 개수 정하기
                let row = Math.floor(height / 282);
                
                //라이브러리 특성한 row 개수가 우선시 됨
                let maxCol = Math.ceil(100 / vm.carouselParam.col);
                vm.carouselParam.row = maxCol < row ? maxCol : row;
            },
        },
    };
</script>
<style>
    .pd16 {
        padding: 16px;
    }

    .card {
        height: 250px;
        background: pink;
        border-radius: 8px;
        color: #fff;
        text-align: center;
    }
</style>

1️⃣이벤트 리스너 추가/삭제 코드 넣어주기

mounted()로 해당 페이지에 접근할 때 먼저 이벤트 리스너를 추가해 주고, 실행시켜 준다.

페이지 누수 방지를 위해서 beforedestory()로 페이지에서 나갈 때 이벤트 리스너를 꼭 삭제해 주자.

2️⃣resize 될 때마다 실행될 function 코드 넣어주기

handleResize function에서는 페이지 크기가 변경될 때마다

브라우저의 width와 height값을 가져온다

해당 조건에 맞춰서 보여줄 행, 열 값을 결정해 준다.

width 조건의 경우 넓이가 좁아질수록, 보여주는 행 카드 수를 줄여주는 코드를 넣어줬고

height 조건의 경우 지금 브라우저 높이에서 card height를 나눠서

한 페이지에 총 몇 개의 카드가 들어가는지를 체크해 주었다.

:row 조건에는 정수만 받을 수 있기 때문에 Math.floor()를 이용해서 내림을 해주었다.

결과화면

페이지 넓이 조정마다 알아서 카드 개수를 조절해주게된다.

vue-slick-carousel 특성 보정하기

만약 캐러셀이 동작할 만큼 카드가 없는 경우

Vue-slick-carousel에서는 row개수를 우선해서 카드를 정렬하게 된다. for문이 100개가 아니라 15개로 줄여보겠다.

row개수가 우선시 되어서 한쪽이 비어보이는 캐러셀이 나오게됨

maxCol로 보정이 필요한 이유는 만약 15개로 for문을 줄여보았다.

화면상 한 페이지에 모든 데이터가 표시가 가능한 상황이 되면

가로를 우선 채워주지 않고 세로로 우선 콘텐츠를 채워져서 한쪽이 비어 보이게 된다.

이래서 총 개수 세로 값보다 row 세로값이 큰 경우는 maxCol을 우선 적용해 준다.

maxCol 보정 코드를 추가한 결과화면

이런 식으로 maxCol값으로 보정을 하면 한쪽이 비어보이는 캐러셀이 아닌

꽉 찬 캐러셀을 만들 수 있다.

[react] 함수형 컴포넌트와 클래스형 컴포넌트의 차이

김평범님 — Mon, 3 Apr 2023 20:57:31 +0900

React 컴포넌트(Component)의 역할

리액트에서는 화면에서 보이는 인터페이스를 설계할 때 '컴포넌트' 단위로 설계가 이루어진다.

컴포넌트는 가장 기본적인 템플릿으로 데이터를 받아서 화면에 필요한 UI형태로 띄워주는 역할을 한다.

리액트에서는 이런 컴포넌트 단위로 앱을 구성하게 된다.

리액트에서는 컴포넌트는 선언 방식에 따라서

함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다.

1️⃣함수형(Function) 컴포넌트

자바스크립트의 함수형태로 표현되는 컴포넌트이다.

return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다.

function about() {
  return (
      <div>
        <h2>Hello React</h2>
      </div>
  )
}

export default about;

자바스크립트에 익숙한 개발자라면 확실히 직관적이며,

메모리 자원도 클래스형 컴포넌트보다 덜 사용하게 된다.

큰 차이는 아니지만, 빌드 후 배포할 때도 함수형 컴포넌트가 파일크기도 더 작아진다.

2️⃣클래스형(Class) 컴포넌트

import React, {Component} from 'react';

class about extends Component {
    render() {
        return <div> Hello, React</div>
    }
}

export default about

위와 동일한 동작을 하는 코드를 클래스형 컴포넌트 형태로 변경시켰다.

클래스형 컴포넌트를 사용하려면 React에서 Component를 상속해서 만들어줘야 한다.

클래스형 컴포넌트에서는 render라는 함수를 이용해서 JSX를 반환시켜 줘야 한다.

클래스형 컴포넌트에서는 함수형 컴포넌트와는 다르게 lifecycle과 state를 사용할 수 있다.

그래서 컴포넌트 내에서 상태를 관리하고 업데이트를 할 수 있다는 장점이 있었으나.

리액트 업데이트 이후 Hooks이라는 기능이 도입되면서 함수형에서도

비슷한 형태로 작업이 가능해졌다고 한다.

webstrom github 연결 끊겼을 때 로그인 하는 방법

김평범님 — Sun, 2 Apr 2023 20:38:25 +0900

갑자기 잘되던 git push가 안돼서 보니 로그인이 끊긴 상태

webstorm에서 Setting > version Control > GitHub를 확인해 보면 계정 연결상태를 확인할 수 있다.

webstorm github 연결 끊김

연결이 끊긴 상태가 되면 webstrom 자체에서 로그인을 하라는 창이 생성되는데,

왜 그런지 모르겠는데 이메일 패스워드를 입력을 해도 로그인이 안된다

이럴 경우 github의 Use Token 기능을 이용해서 로그인이 가능하다.

일단 GitHub사이트에서 토큰을 먼저 발행해오자.

Github Token 발행하기

Github의 setting메뉴를 접속해서

Personal access tokens > token Classic 메뉴에 접속해 준다.

Github 토큰 생성하기

우측 상단의 Generate new Token을 눌러서

New Personal access token(classic)을 클릭한다

GitHub 토큰 유효기간 설정해주기

Expiration에서 유효기간을 안지정을 해주면 경고문이 뜬다.

꼭 유효기간을 입력하기를 권고해서 일단 다시 잡아준다.

GiHub 토큰 생성하기

일정을 지정해 주고 토큰 권한 'repo', 'gist'를 체크해 주고 생성을 해준다.

GitHub 토큰 오류

두 개 상태를 체크를 안 하고 생성을 해주면 해당 토큰을 쓸 수 없다는 안내문이 나온다.

나도 'repo'만 넣고 체크하고 생성을 하니 오류가 발생해서 다시 생성해 주었다.

GitHub 토큰 생성하기

생성을 하게 되면 토큰값을 확인할 수 있고

복사를 눌러준 뒤 webstorm에서 토큰 값을 입력해 주면 정상적으로 로그인이 되는 것을 확인할 수 있다.

[Next.js] pages 폴더 라우팅 구조 및 Link 이동 하기

김평범님 — Wed, 29 Mar 2023 22:48:28 +0900

Next.js pages 라우팅과 링크 이동

Next.js pages 폴더구조 이해하기

Next.js에로 프로젝트를 생성하면 자동으로 pages 폴더가 생성이 된다.

Next.js 특징으로 폴더 구조 내 파일 이름으로 라우팅을 자동으로 잡아주는 것이 가능하다.

next.js 폴더 구조

기본으로 생성되는 index페이지 외 about.jsx, users.jsx 페이지를 추가로 생성해 줬다.

next.js에서는 별다른 작업이 없어도 자동적으로 해당 페이지에 접근이 가능하다.

export default function about() {
  return (
      <div>
        <h2>About</h2>
      </div>
  )
}

export default function users() {
  return (
      <div>
        <h2>users</h2>
      </div>
  )
}

'/about' → /pages/about.jsx 파일 화면 접근

'/users' → /pages/users.jsx 파일 화면 접근

about url 접근 화면

위에처럼. jsx파일을 만들어서 pages 폴더에 넣어준 뒤

해당 경로로 접근해 주면 작성된 h2 태그에 값이 뜬 것을 볼 수 있다.

Next.js 폴더 하위 구조를 통해서 URL 경로 잡기

Next.js pages 폴더 밑에 다시 디렉터리를 만들고 파일을 넣어주면

URL경로가 디렉토리 명 path 그대로 적용된다.

page users 경로

next.js 하위 URL

'/users' → /pages/users/detail.jsx 파일 생성을 하면,

폴더구조 경로로 URL로 잡히는 것을 볼 수 있다.

Next.js page 이동하기

Next.js에서 Url 이동은 next/link의 Link 컴포넌트를 통해서 활성화 시킬 수 있다.

import Link from 'next/link';

위에서 만든 폴더 구조를 이제 링크이동을 시켜줄 수 있다.

<Link href="url 경로">

<Link>태그를 만들고 href 속성에 URL 경로명을 적어줘서 이용하면 된다.

import Link from 'next/link'
export default function index() {
  return (
      <div>
        <h2>Users</h2>
        <Link href="/users/detail">상세페이지 이동</Link>
      </div>
  )
}

users 페이지 이동 클릭 시 이동 화면

React 서버사이드랜더링 적용을 위한 Next.js

김평범님 — Sun, 26 Mar 2023 21:01:01 +0900

서버사이드 랜더링이란?

Server Side Rendering(SSR)로 브라우저에서 화면을 그려주는 주체가 서버인 경우이다.

반대의 개념으로는 Client Side Rendering(CSR)이 있다.

우리가 사용하는 react는 기본적으로 CSR을 이용한다.

하지만, SSR이 주는 장점들이 있어서 SSR 환경에서 개발이 필요할 때가 있다.

서버사이드랜더링(SSR) 장점

검색엔진(SEO) 최적화, 검색엔진에서 웹페이지 수집 가능
초기 렌더링 속도가 CSR에 비해 빠르다.

Next.js 이용하기

Next.js

서버사이드랜더링을 적용을 하려면 코드로도 가능하지만 Next.js라는 프레임워크를 이용하면

간단한 설정으로 SSR 설정이 가능해진다.

Next.js 의 또 다른 장점은?

1️⃣코드스플리팅

코드스플리팅은 빌드를 할 때 파일크기를 최소화하는 것을 도와준다.

하나의 파일로모든 자바스크립트를 만들어서 빌드하는 것이 아니라,

파일을 분리하는 작업을 코드 스플리팅이라고 한다.

Next.js의 경우 코드스플리팅의 복잡한 과정을 자동으로 최적화 하여준다.

2️⃣오토라우팅

Next.js에서는 라우팅을 페이지 기반으로 관리한다.

page 폴더 깊이로 자동 라우팅 처리를 해주기 때문에 별도의 라이브러리를 설치할 필요가 없다.

첫 Next.js 프로젝트 생성해보기

nxt create-next-app

next 프로젝트 생성 성공 화면

첫 Next 프로젝트 실행시키기

npm run dev

next프로젝트 실행시키기

실제동작 화면

npm run dev호출어로 프로젝트를 실행시키면,

아무런 변경이 없다면 3000번 포트로 서버가 실행된다.

localhost:3000으로 화면에 접속하면 next 프로젝트가 정상적으로 실행된 것을 볼 수 있다

카카오톡에서도 chatGPT를 쓸 수있다? - AskUP 이용하기 (사진 텍스트 글자로 전환도 가능)

김평범님 — Thu, 16 Mar 2023 21:50:46 +0900

요즘 가장 핫한 AI 하면 바로 chatGPT이다.
많은 사용자들이 몰려서 사이트가 다운되기도 할 정도로 많은 관심이 있는데
이제 chatGPT와 같은 채팅기능을 카카오톡에서도 이용할 수 있다고 한다.

카카오톡 ChatGPT AskUP 란?

Askup 카카오톡 chatGPT

Askup은 카카오톡 플러스 친구로 ChatGPT를 카카오톡에서 활용할 수 있는 채널이다.

카카오톡 ChatGPT AskUP 채널 추가하기

askup은 카카오톡 채팅 탭에서 우측 상단의 돋보기 버튼을 눌러서 askup으로 검색하면 된다.

askup

벌써 친구가 19.1만으로 어마어마한 사용자가 있는 AskUp

우측의 채널플러스를 눌러서 채널추가를 하면 완료!

Askup 활용하는 방법

1️⃣ 이미지사진에서 텍스트 추출하기

Askup에서 텍스트 출력하기

먼저 방에 들어와서 채팅알람이 뜬 화면을 캡처를 해서 다시 Askup 채팅방에 업로드를 해주었다.

사진에 있는 글자를 텍스로 변환해 줘!라고 요청을 하자마자

바로 캡처화면에 있는 이미지를 모두 텍스트화시켜준 모습을 확인할 수 있다.

PDF 파일이라던지 이런 거 캡처해서 올려서 보내주면

회사에서 작업할 때도 매우 편하게 이용할 수 있을 듯하다

2️⃣일반적인 ChatGPT 기능

ChatGPT기능 카카오톡에서 활용하기

ChatGPT에서 물어보는 듯한 질문을 여기다 하면

역시나 자세한 답변을 바로 준다.

가끔 궁금한 게 생기면 바로 카카오톡을 열여서 물어보면 될 듯하니 정말 편하다!

Askup 한계점

1️⃣2023년 3월 기준 AskUp의 답변자료는 2021년 10월 이전까지 학습된 OpenAI 모델이다

그렇게 때문에 최신 자료에 대해서는 답변을 받기 어렵고

2️⃣이미지에서 텍스트를 읽을 수 있는 한계도 1000자 이하라고 한다.

3️⃣하루에 100회 무료 질문만 이용 가능하다고 하다.

많다면 많고 적다면 적은 편인데,

자주 쓰는 분들이라면 하루 100회까지 가능하니 이 부분도 생각해서 사용하면 좋겠다.

[개발용어] BFF 패턴이 무엇인가?

김평범님 — Thu, 9 Mar 2023 21:20:47 +0900

BFF 패턴

Backend for Frontend의 약자로 간단히 말하면 프런트앤드를 위한 백앤드 서버를 말한다.

(왼) 일반적인 API 서비스 패턴 (우) BFF 패턴

BFF패턴이 발생하게된 이유는 다양한 디바이스 장치 때문이다.

같은 서비스라도 다양한 디바이스 장치가 생겨나면서 각각 환경에 맞는 UI가 필요해졌고

프런트앤드 개발자들은 이전에 비해 더 많은 클라이언트 환경을 고려하게 되었다.

(PC, 모바일, 애플워치, 태블릿 등..)

같은 서비스라도 사용하는 디바이스 환경에 따라서 보이지는 디자인과 데이터도 달라지게 되는데,

이런 분기 처리를 하기 위해 나타난 것이 바로 BFF 패턴이다.

BFF패턴의 특징

프론트앤드 요구사항에 맞는 도움을 주는 보조 서버 개념으로

BFF패턴은 하나의 클라이언트에 하나의 매칭되는 BFF가 존재한다.

BFF는 하나의 큰 프로젝트 구조인 모놀리틱 구조라면 전혀 필요하지 않고

MSA(마이크로 서비스 아키텍쳐)를 이용할 때 유용한 패턴이다.

하지만, 각각 호출하는 API를 각 디바이스 별로 코드를 다시 만들어줘야되기 때문에

코드 중복이 되거나 재작성되는 불편함도 가지고있다.

BFF의 역할

API 호출 최소화
클라이언트 별 필요한 데이터 파싱
프론트앤드 로직 최소화 가능

위 역할을 볼 수 있는 상황을 만들어보자.

쇼핑몰 홈페이지를 만든다고 가정해보자.

하나의 애플리케이션에 고객정보, 상품정보, 주문정보 등 다양한 정보를 얻을 API가 만들어졌다.

프론트앤드에서는 보통 하나의 API값만을 이용하지 않고

페이지를 그려주기 위해서는 각각의 API에서 내가 원하는 정보만 받아서 처리를 하고 싶다.

기존 API 호출 방식이라고 하면?

Service 별 API 호출

일단 3개의 API를 각각 호출하고 내가 원하는 정보를 빼서 다시 포맷팅 하는 로직을

프론트앤드 코드에 넣게 된다.

// /api/getCustomer 호출
 {
 	id:1,
    userName:'홍길동',
    userPhone:'01012345678',
    userAddress:'서울특별시',
    created:'2023-02-09 14:02:03',
    updated:'2023-02-09 14:02:03',
 }
 
 // /api/getProduct 호출
 
  {
 	id:240,
    productName:'아이아이 핸드폰케이스-Iphone14Pro',
    productPrice:23500,
    created:'2022-01-10 13:12:15',
    updated:'2022-01-12 14:15:57',
 }
 
  // /api/getOrder 호출
 
  {
 	id:125485,
    orderDate:'2023-03-01 12:00:34,
    state:3, //state 3은 배송완료 코드이다
 }

각각 API호출해서 받은 return 값들을 가정해보자.

쇼핑몰 가정 UI화면

return받은 값들을 각각화면에 맞는 정보로 보여주면된다.

하지만 return 결과값을 보면 화면에 사용하지않은 코들 값이 넘어오게 되는 문제가 생기며,

order 정보의 경우는 state 코드 3으로만 오다보면 배송완료라는텍스트로 변환시켜줄 로직이

프론트앤드 코드에 추가되어야 한다.

이런 상황에서 발생하는 문제는

API 호출량 증가, 필요한 데이터 포맷팅을 위한 프론트앤드 로직 추가

이런 코드 들은 프론트앤드 코드가 복잡해게된다.

만약 복잡한 포맷팅을 요하거나, return 데이터 양이 크다면 프론트앤드 코드 성능에 바로 문제가 발생한다.

만약 여기서 BFF 패턴이 추가 된다면?

BFF 패턴 추가

// BFF 코드 return 예시
 {
    userName:'홍길동',
    productName:'아이아이 핸드폰케이스-Iphone14Pro',
    productPrice:23500,
    orderDate:'2023-03-01 12:00:34',
    orderState:'배송완료'
 }

지금 내가 호출한 클라이언트 상황에 맞춰서 준비된 BFF를 호출 할 수 있다.

이경우 호출이 1번으로 줄어들으며, 각 클라이언트에 맞춰서 원하는 데이터를 포맷팅 로직을 BFF에 작성해

딱 원하는 데이터 형식으로 return을할 수 있다.

이처럼 BFF패턴을 이용하면, 프론트앤드 코드의 복잡도를 낮추고,

불필요한 데이터가 아닌 딱 맞는 포맷팅 된 데이터만을 받을 수 있어 보안에도 더 유리해질 수 있다.

※ 개념이해로 공부하고작성된 포스팅입니다. 혹시나 오류가 있으면 언제든지 댓글로 알려주세요!

[개발] 소스 코드 시 유용한 비교 사이트 (텍스트 문서 비교 사이트)

김평범님 — Sat, 4 Mar 2023 21:14:33 +0900

개발 시 두 파일의 소스코드를 비교할 일이 있다.

오늘도 내 자리에서는 동작하는 코드가

다른 동료 개발자 자리에서는 동작을 안 하길래

파일을 비교해 보기로 했다.

분명, git에서 코드를 받아서 작업을 했다고 하는데 작동이 안 되어서

이럴 경우 이용하기 좋은 사이트이다.

Diffchecker 사이트

Diffchecker사이트

사이트는 매우 간단하다. 한쪽에 Original Text를 넣어주고

다른 쪽에 Chaged Text를 복사해서 넣어주면 해당 수정된 부분이 바로 표시가 된다.

✅사이트 접속 주소

https://www.diffchecker.com/

Diffchecker - Compare text online to find the difference between two text files

Compare text Diffchecker will compare text to find the difference between two text files.Just paste your files and click Find Difference

www.diffchecker.com

[개발자 공부 시작하기] 2023 국민내일배움카드 신청하는 방법 - 개발 강의 저렴하게 듣는 방법

김평범님 — Sun, 26 Feb 2023 14:19:44 +0900

내일배움카드 신청방법 및 신청 조건

개발자 직군이 뜨면서, 비전공자도 개발자를 도전하는 분들이 많아졌다.

이럴 때 대부분 개발학원을 알보게 되는데, 개발학원 가격이 너무 비싸 부담스러울 수 있다.

이 때 이용 가능한게 바로 국민내일배움카드이다.

국민내일배움카드란?

국민내일배움카드는 취준생이나 이직, 퇴직 이후 새로운 기술을 배워서 취직을 할 수 있도록

개발 역량에 필요한 학원비를 지원해준다.

해당 카드는 누구나 만들기 가능한데 아래 분들은 대상에서 제외된다.

현직공무원, 사립학교 교직원
만 75세 이상인 사람
졸업까지 남은 수업연한이 2년을 초과하는 대학생
연 매출 1억 5천만원 이상 자영업자
월임금 300만원 이상 특수형태근로종사자와
월임금 300만원 이상이면서 45세 미만인 대규모기업종사자

위 경우는 내일배움카드발급이 불가하다.

위 경우를 제외한다면 국민 누구나 발급이 가능하다.

국민내일카드 지원내용

내일 배움카드 지원 범위

내일배움카드를 발급받은 뒤 내일배움카드를 사용할 수 있는교육기관에 등록을한다면

지원범위 내에서 훈련비의 45~85%는 국가에서 하원비를 지원해준다.

300만원이 기본적으로 제공이되고, 추가 대상자의 경우는 100~200만원까지도 추가 지원이 된다고한다.

일단 기본은 300만원 까지 지원이되며, 해당 카드는 5년간 사용할 수 있다.

훈련지원금 제도 운영

내일배움카드 훈련지원금

내일배움카드는 국비를 지원받아 하기 때문에, 실제 듣는 수강하는 사람들이 안듣게 되면 세금 낭비가 된다.

실제로 훈련받는 분들의 원활한 훈련참여를 위해서

훈련기간 중 80% 이상 출석을하면 월 11만 6천원 훈련장려금도 추가로 받을 수 있다.

국민내일배움카드 발급하는 방법

국민내일뱀움카드는 직업훈련포털 HRD-Net에서 발급이 가능하다.

사이트 주소는 아래를 통해서 접속하자.

https://www.hrd.go.kr/hrdp/ma/pmmao/newIndexRenewal.do

직업훈련포털 HRD-Net

오늘도 더 성장할 나를 위한 직업훈련 지식포털 안녕하세요. 로그인을 해 주세요. 로그인 간편인증 로그인 개인 기업 회원가입

www.hrd.go.kr

국민내일배움카드를 발급하려면 로그인이 필요하기 때문에 먼저 회원가입을 진행해주자.

로그인 이후 실명인증을 진행해줘야하는데 이건 하라는 대로 일단 다해준다.

국민내일배움카드 발급절차

내일배움카드 신청 절차는 나름 까다로워서 시간을 잡고 진행해주도록 하자.

소요시간은 30분정도가 걸린다고 한다.

1️⃣ 국민내일배움카드 발급신청 바로가기

2️⃣국민내일배움카드 발급 신청 안내 및 동의

내일배움카드 발급신청

내일배움 카드 신청페이지에서 먼저 발급신청전 확인사항내용을 확인해준다.

4페이지 정도 의 파일을 확인서를 먼저 꼼꼼히 읽어준다.

워크넷 가입하기

내일배움카드는 취업 및 창업을 희망하는 분들에게 지원되는 카드로

워크넷의 구직등록을 해서 구직의사를 표시해야합니다.

워크넷에 구직활동을 표시하려면 이력서를 업로드해놓아야 합니다.

워크넷까지 가입이 끝나서 구직활동으로 바꿔놨다면

유의사항을 읽고 확인을 통해서 다음 화면으로 넘어간다.

3️⃣ 내일배움카드 발급신청서 작성 (신청인정보입력)

신청인 내용 입력하기

내일배움카드 2단계에서는 신청인 정보를 입력합니다.

이때 중요한 점은 영문명은 여권 성명으로 무조건 맞춰서 작성을 해줘야한다.

4️⃣ 카드발급 정보 입력하기

카드발급정보 입력하기

카드는 원하는 유형의 형태로 발급을 하면된다.

농협 / 산한카드 2가지 카드사에서 제공을하는데

신용카드를 선택할 경우 연회비가 발생할 수 있다고 한다.

신용카드 : 연회비 발생
체크카드 : 학원비 결제 시 본인 부담금 결제전이 미리 넣어둬야함

두가지가 번거로운 점인데 이건 상황에 맞춰서 선택해서 진행하자

내일배움카드 카드발급 신청방법

카드발급신청방법

일단, 카드발급해야 하기 때문에 카드를 발급하기 위한 절차가 필요하다.

일단 가장 간단한건 은행을 방문해서 거기서 하라는대로 하는게 좋긴하지만 방문해야되는 번거로움이 있으니

우편을 통해서 받는걸로 진행하길 추천한다!

우편으로 신청시 모바일 신청을 하면, 카드 발급을 위한 URL이 내 핸드폰으로 발송된다고 한다.

해당 발송 내용 URL을 통해서 상세 내용을 입력해서 카드 발급이 가능하다!

모바일 신청이 어려울 경우는 전화신청을 선택해서 유선상으로도 발급을 진행하자

5️⃣ 지원대상 선택하기

지원대상 선택하기

지원대상은 카드를 신청할 때 당시의 나의 상황을 선택하면된다.

취준생일 경우실업자를 선택해주면 된다.

재직자의 경우는 추가 제출 서류없이 바로 신청이 가능하다.

6️⃣카드배송지 정보 입력하기

내일배움카드 신청을 마쳤다면 이제 카드를 어디로 받을지를 선택해준다.

신청인정보와 동일을 클릭하면, 위에 작성한 내용이 동일하게 들어온다.

7️⃣ 내일배움카드 발급신청 가능 여부 확인하기

내일배움카드 발급여부 확인하기

마지막으로 내가 내일배움카드 해당자인지 자가 진단 체크를 하는 페이지가 나온다.

해당 정보는 꼭 맞는 내용으로 작성을하고 이후 거짓인 내용으로 밝혀지면 발급취소가 된다고 하니

꼭 정확한 내용으로 표시해줘야 한다.

이후 몇가지 정보 제공관련된 부분 내용을 읽어주고 체크한 뒤

발급신청을 눌러준다.

카드는 신청 이후 발급 시 시간 짧으면 2,3 길면 1주일도 걸린다

미리미리 카드를 신청해 놓고, 이후 내일배움카드가 사용한 개발학원을 찾아서 할인을 받고 시작해보자

[Notion] 데이터베이스 값 한번에 모두 수정하기 - 노션 다중삭제, 다중복사 하는 법

김평범님 — Thu, 16 Feb 2023 20:48:36 +0900

Notion 데이터베이스 값 일괄 수정

노션 신규 업데이트 소식 데이터베이스 일괄 변경 기능이 추가되었다.

노션의 데이터 베이스가 점점 기능이 좋아지고 있어 활용도가 점점 늘어나는 것 같다.

노션 데이터베이스 일괄 변경

데이터베이스 일괄변경 노션

노션 일괄변경은 한번에 동일한 데이터로 바꿔야하는 행이 있을 때

동일하게 값을 변경할 수 있는 기능이다.

업데이트 이후 행 바로 앞에 체크 박스 기능이 생겼다.

✅데이터베이스 특정 행 선택하기

노션 데이터 베이스 체크

선택 된 행은 앞에 파란 체크박스와 연한 하늘색으로 표시가 된다.

노션 다중 선택 이후 수정 가능한 이벤트

노션 데이터 데이터 베이스 일괄 변경 방법

선택된 행은 삭제, 복제가 가능하고

한번에 다른 페이지로도 옮기거나, 즐겨찾기로도 추가가 가능하다.

데이터 베이스 값 일괄 변경하기

노션 속상 값 한번에 변경하기

노션에 특정갑싱 선택이되면 위에 *개의 행이 선택됨 이라는 표시가 생긴다.

그리고 그 옆에는 해당 테이블 속성 값들이 표시되는데

이 때 다른 값을 선택을 해주면 한번에 선택된 행의 속성값이 일괄 변경된다.

위의 예시처럼 진행중인 테스크를 한번에 완료 처리하는 것도 가능하다!

[vue] Error: Node Sass does not yet support your current environment 오류 해결하기

김평범님 — Mon, 13 Feb 2023 21:57:32 +0900

Node Sass does not yet support your current environment

발생된 에러코드

Module build failed(from/node_modules/sassloader/dist/cjs.js): friendly-errors 10:11:49
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v4.14.1 at module.exports (C:\...\node_modules\node-sass\lib\binding.js:13:13) at Object.<anonymous> (C:\...\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1165:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
    at Module.load (node:internal/modules/cjs/loader:1043:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1067:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at getDefaultSassImpl (C:\...\node_modules\sass-loader\dist\index.js:198:10)
    at Object.loader (C:\..\node_modules\sass-loader\dist\index.js:80:29)

해결방법

npm rebuild node-sass

해결방법은 매우 간단히도 위에 코드를 한번 돌려주면 된다.

npm rebuild 명령어를 이용하면 해당 패키명을 재빌드 해주는 코드라고 한다.

https://docs.npmjs.com/cli/v7/commands/npm-rebuild

npm-rebuild | npm Docs

Rebuild a package

docs.npmjs.com

nuxt Error/ Cannot read properties of null(reading 'plugins') 해결 방법

김평범님 — Thu, 9 Feb 2023 19:23:54 +0900

Nuxt 프로그램을 신규로 가져와서 npm install을 하니 갑자기 오류가 발생했다.

Nuxt Version이 2.16.0 버전이 설치가 되면서 문제가 난 듯하다.

Nuxt 설치버전 확인하기

pacakge-lock.json 파일을 확인해주자.

nuxt 설치버전확인하기

만약 pacakage-lock.json파일에 @nuxt/config가 2.16.0이 설치가 되면 해당 이슈가 날 수 있다.

해결방법

npm install nuxt@2.15.8

위 코드를 이용해서 nuxt를 2.15.8 버전으로 재설치를 해주면 된다.

만약 해당 코드로 설치해도 안된다면

node_modules와 package-lock.json파일을 먼저 삭제해 준 뒤

npm install nuxt@2.15.8
npm install

먼저 nuxt를 설치해 준 뒤, 나머지 npm install을 이용해서 나머지 패키지들을 설치해 주자.

[Vue.js/nuxt] 페이지 이동 시 감지 후 이벤트 발생하기 (watch/router)

김평범님 — Mon, 30 Jan 2023 21:15:46 +0900

vue, nuxt $route 이동 감지하기

Nuxt 프로젝트 중에 nuxt-link 등 을 이용해서 페이지가 이동될 때

특정 페이지에서 이벤트를 발생해야되는 경우가 있다.

이런 경우는 watch 속성에서 $route를 바라보게 해서 이벤트를 발생시킬 수 있다.

vue watch란?

watch는 특정 데이터의 변화를 감지되면 특정 로직을 실행할 수 있다.

$route watch 샘플코드

<template>
...
</template>
<script>
    export default {
        ...
        watch: {
            $route: function (to, from) {
            	console.log(to)
                console.log(from)
            }
        }
    }
</script>

위 코드를 이용하면, $route 즉 페이지가 이동될 때마다 해당 로직이 실행된다.

to의 경우에는 현재 진입한 페이지의 속성이 나오며,

from을 찍어보면 과거에 나온 페이지를 확인할 수 있다.

결과화면

watch $route

콘솔 로그의 결과를 보면 지금 진입한 페이지인 index 페이지의 속성과

과거에 넘어온 페이지인 detail 페이지의 route 속성 값을 확인할 수 있다.

해당 코드로 특정페이지에 진입했을 때 코드 실행이 가능하다.

[JavaScript] 빈 객체 확인하는 방법 (object 빈 객체 체크)

김평범님 — Mon, 26 Dec 2022 20:06:42 +0900

자바스크립트 빈객체 체크하는 방법

객체가 빈 객체 상태를 체크할 경우가 있다.

let emptyObject = {};

위에처럼 빈 객체를 만들었다면, 이제 해당 객체가 빈객체인지 확인해보는 방법이다.

Object.keys(newObject).length === 0

⭐Object.keys란?

Object.keys() 메소드는 해당 객체가의 속성을 배열 형태로 반환해줍니다.

결국 반환된 배열의 length가 0일 경우 해당 객체가 비었다고 판단할 수 있다.

Object.keys() 샘플코드

<script>
	let emptyObject ={};
	let sampleObject = {
		name:'홍길동', 
		age:20
	}

	console.log(Object.keys(emptyObject));
	console.log(Object.keys(sampleObject));
	console.log(Object.keys(emptyObject).length === 0);
	console.log(Object.keys(sampleObject).length === 0);
</script>

Object.keys() 결과화면

위 코드를 실행했을 때 결과 화면이다.

[Notion] 데이터 베이스 하위 항목 넣기 (노션 표 하위 항목을 이용한 WBS 작성하기)

김평범님 — Mon, 19 Dec 2022 22:11:21 +0900

노션데이터베이스 하위항목 업데이트!

노션에서 가장 잘 이용하는 속성이라고 하면 바로 데이터베이스!

프로젝트를 정리하거나 일정 정리할 때 노션 데이터 베이스는 필수인데,

이번 12월 15일 노션에서 새로운 업데이트로 데이터베이스에 하위 항목이 추가되었다.

⭐노션 데이터베이스 하위 항목 추가

notion 데이터베이스 하위항목 추가

노션 데이터베이스는 원래 한줄한줄이 하나의 데이터였는데

이번 하위 항목이 추가되면서 하나의 데이터에 속하는 하위 항목까지 깔끔하게 정리가 가능하게 되었다.

노션 데이터베이스 하위 항목 추가하기

먼저 윈도에서 노션을 쓰는 분들이라면 노션 최신 버전을 업데이트를 먼저 받아준다.

1️⃣노션 데이터베이스의 오른쪽 상단의 점 3개 버튼을 클릭한다.

2️⃣하위 항목을 클릭해서 설정을 진행한다.

하위 항목이 생성되면 자동으로 관계형 칼럼이 추가된다.

3️⃣하위 항목의 추가되면 행위의 마우스 커서를 올릴 경우 토글 버튼이 생성되면서

하위 항목을 닫고 열고를 진행할 수 있게 된다. 열은 뒤 새 하위항목을 추가해 주면된다.

❤️Notion으로 만든 WBS

Notion하위 속성을 이용한 WBS 작성

하위 속성을 이용해서 만들어본 간단한 WBS 표이다.

확실히 그룹핑이 되다 보니 단계별 테스트 관리에 매우 용이하다.

노션 WBS 작성 예시

노션 타임라인을 이용하면 좀 더 직관적으로 WBS를 만들 수도 있다.

노션에서는 의존관계 생성도 가능해져서 이렇게 좀 더 세분화된 개발단계별 진행상황을 확인할 수도 있다.

확실히 복잡한 데이터를 제공해주니 이제 노션만으로도 테스트 관리가 확실히 용이해진 듯하다.

nuxt mounted 2번씩 호출 될때 (mounted twice when render)

김평범님 — Thu, 8 Dec 2022 21:05:51 +0900

오늘 개발하다가 발견한 특별한 상황

백앤드 개발자 분이 첫 페이지 로딩이 느린 것 같다는 말을 보니까

mounted 될 때 호출하는 function이 두 번씩 되는 것을 발견했다.

검색해보니 나와 같이 비슷한 상황이 나오는 사람들이 있는 듯했다.

원인은 찾지 못하고 급하게 처리하는 방식을 찾아서 공유해보려고 한다.

Nuxt mounted가 두 번씩 호출되는 원인

nuxt 레이아웃

문제는 nuxt 레이아웃에서 무슨 원인인지 모르겠는데

레이아웃에 import 한 컴포넌트들이 모두 2개씩 들어가 있다.

위 내용을 확인한 건 크롬 확장 프로그램인 vue.js devtools이다.

만약 이용하고 아래 프로그램을 크롬에 추가해보자.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko

Vue.js devtools

Browser DevTools extension for debugging Vue.js applications.

chrome.google.com

해결 방법

구글링 해본 결과 <client-only>로 컴포넌트를 감싸주면 해당 오류가 해결된다는 글을 보고 바로 적용해보았다.

nuxt layout client-only이용 후

<template>
    <div id="wrap">
        <client-only>
             <nuxt/>
        </client-only>
    </div>
</template>

위의 코드처럼 <nuxt/> 위에 <client-only>로 덮어주면,

두 번씩 <nuxt/>가 랜더링되어서 mounted가 두번 호출되는 오류는 해결이 된다.

<client-only>의 역할은?

해당 컴포넌트 안에 들어있는 자식 요소들은 클라이언트 사이드 랜더링 시 코드가 진행되게 해주는 역할을 한다.

[Vue.js] $ref 가져올 때 변수를 통해서 접근하기

김평범님 — Thu, 1 Dec 2022 23:27:29 +0900

vue $ref란?

vue코드에서 DOM요소에 접근하기 위해서 사용하는 속성

HTML 예시 코드

<div ref="target"/>

Vue 접근 예시 코드

this.$refs.target;

script 코드 측에서 html에 지정한 ref를 접근하는 방법은 위와 같다.

$refs접근 시 변수로 접근하기

refs의 경우 ID처럼 고유한 하나의 유닛을 접근해야 될 때가 있다.

만약 for문으로 10개의 refs를 생성한다면 이때는 변수를 이용해줘야 한다.

<div v-for="i in 10" :key="i" :ref="`target-${i}`">
 {{i}}
</div>

위 코드로 10개의 div를 생성해주면,

각각 다른 ref속성을 갖는 DOM이 생성된다.

vue 접근 예시 코드

selectRefs(i) {
    let targetRef = `target-${i}`;
    vm.$refs[targetRef][0];
}

그냥 텍스트로 접근할 때와 다른 점은 변수로 $refs를 호출해주면 배열 안으로 데이터가 들어온다.

선택된 $refs를 접근하려면 첫 번째를 가져온다는 [0]을 뒤에 붙여주면

변수 형태로 DOM에 접근이 가능하다.

[nuxt/vue]백앤드 프록시 서버 설정하기 (vue.js 타 도메인 CROS 에러 해결하기)

김평범님 — Mon, 28 Nov 2022 21:06:30 +0900

Nuxt.js Proxy설정 (Axios Cros 에러 해결)

현재 상황은 프로젝트 파일에서

frontend 서버는 localhost:3000 이용하며,

backend 서버는 localhost:3001 이용 중이다.

이럴 경우 frontend 서버에서 axios에서 호출을 할 경우 CROS error가 발생했다.

frontend는 nuxt.js 이용 중인 상황일 때 해결 방법이다.

Nuxt Proxy 이용하기

1️⃣설치하기

nuxt에서 간편하게 프록시를 설정을 할 때 이용하는 라이브러리를 먼저 설치해주자

https://www.npmjs.com/package/@nuxtjs/proxy

@nuxtjs/proxy

proxy support for nuxt server. Latest version: 2.1.0, last published: 2 years ago. Start using @nuxtjs/proxy in your project by running `npm i @nuxtjs/proxy`. There are 51 other projects in the npm registry using @nuxtjs/proxy.

www.npmjs.com

npm install @nuxtjs/proxy --save

2️⃣nuxt.config.js 파일 설정하기

modules: [
    '@nuxtjs/proxy'
  ],
  proxy: {
    '/api': 'http://localhost:3001',
  }

설치해준 @nuxtjs/proxy는 module 등록해준 뒤

특정 url이 호출되면 백앤드 서버로 연동되도록 설정만 해주면 끝난다.

3️⃣vue파일에서 axios 호출하기

 axios.get('/api/특정URL')
   .then((res) => {
        console.log(res)
    });

실제 호출 시 /api/URL을 입력하면 CROS에러가 아니라

결과값을 받아보는 것을 확인할 수 있다.

[JavaScript] filter를 이용해서 Array 객체에 특정값 찾아 가져오기

김평범님 — Wed, 23 Nov 2022 20:43:32 +0900

Javascript 객체 배열에서 filter 이용하기

javascript 데이터 형태 중에서

객체 배열 형태를 많이 이용하다 보니 해당 Array에서 특정 값을 갖고 있는

객체를 찾아야 되는 업무가 많았다.

오늘은 javascript의 필터 기능을 이용해서

특정 key에 특정 value를 가진 객체를 찾아내 보도록 하겠다.

Array.filter란?

Array filter를 이용하면 해당 조건에 만족하는 요소를 모두 찾아서 반환시켜준다.

예시 코드

<script>
 const numbers = [1,2,3,4,5];
 let result = numbers.filter( number => number > 3 );
 console.log(result); 
</script>

filter 예시코드 결과

위의 코드를 보자. 1~5까지 숫자를 가진 배열에서 3보다 큰 수를 찾으라고 하면

4,5라는 새로운 배열을 만들어서 return 해준다.

filter기능을 이용하면 이처럼 배열에서 내가 원하는 조건을 가진 요소를 가지고 새로운 배열을 만들 수 있다.

객체 배열 내에서 특정 value 값을 가지는 객체 반환하기

단순한 배열이 아닌 조금 더 복잡한 key vlaue를 가진 객체 배열을 만들어보자.

 const students = [
    {name:'김하영', age:18},
    {name:'이소영', age:17},
    {name:'김사라', age:16}
];

이름과 나이를 갖고 있는 객체 배열이 있다고 가정하다.

여기서 김하영이라는 사람의 나이를 가져와서 사용을 해야 한다고 하면

이때 filter를 이용하면 쉽게 가져올 수 있다

 let result = students.filter( student => student.name  === '김하영' );

filter에서 name이 감하 영인 사람을 가져올 경우에는 위 코드를 이용하면 된다.

filter는 해당 배열을 for문을 돌면서 name값에 김하영이 있는 데이터를 찾게 된다.

위 예시코드 결과

위 코드의 결과를 콘솔로 찍어보면

김하영이라는 데이터를 가진 객체 하나가 들어와 있는 것을 확인할 수 있다.

 console.log(result[0].age);

나이만 가져오서 표시하기

콘솔 로그로 0번째 배열에 age를 가져오라고 명령을 하면

김하영의 나이인 18만이 return 되어 사용이 가능하다.

[javascript/HTML] input checkbox readonly 시키기

김평범님 — Thu, 27 Oct 2022 21:35:09 +0900

checkbox readonly 적용

input에서 사용자는 수정을 못하게 하려면

readonly라는 옵션을 이용하면 된다.

최근 프로젝트에서 input check box도 readonly를 시키려고 아래 코드를 넣었으나,

동작하지 않았다.

input type checkbox readonly 오류 코드

<input type="checkbox" readonly />

readonly="true"로 변경을 해봤지만 그 부분도 적용이 안되고,

disable="true"는 작동이 되고 뭐일까 하고 찾아봤다.

input type checkbox readonly 성공 코드

<input type="checkbox" onClick="return false" />

확인해보니, checkbox의 readonly는 먹지 않아서 위처럼 onClick 이벤트에서 return false를 걸어주면 된다고 한다.

실제로 적용해보니 잘 작동한다.

[nuxt/vue] nuxt에서 .env developement버전 production버전 파일 연결하기

김평범님 — Thu, 13 Oct 2022 21:56:26 +0900

nuxt에서. env 파일을 배포 환경과 개발환경마다 다르게 쓸 경우가 있다.

오늘은 @nuxtjs/dotenv를 이용해서 배포 환경마다 .env파일을 변경해보도록 하겠다.

1. @nuxtjs/dotenv와 cross-env를 설치를 해준다.

npm install @nuxtjs/dotenv --save
npm install cross-env --save

2. package.json 설정

cross-env를 이용해서 환경변수를 설정해줄 수 있다.

package script에서 실행할 때 NODE_ENV 값을 설정해준다.

"scripts": {
  "dev": "cross-env NODE_ENV=development nuxt",
  "start": "cross-env NODE_ENV=production nuxt start",
},

이렇게 설정을 해줄 경우

npm run dev를 하면 NODE_ENV가 development로 설정이 되고

npm run start를 할 경우 NODE_ENV가 production으로 설정이 된다.

3. .env.development, .env.production 파일 생성

.env 파일 생성해주기

프로젝트 루트에다가 이제 개발 환경과, 배포 환경에서 써줄 파일을 생성해준다.

이때 뒤에 이름은 cross-env로 설정해준 NODE_ENV 뒤에 명칭으로 맞춰준다.

4.nuxt.config.js 파일 설정

modules: [
    ['@nuxtjs/dotenv',{filename: `.env.${process.env.NODE_ENV}`}]
],

nuxt.config 파일에다가 modules 부분에

설치한 @nuxtjs/dotenv를 연결해주고 file경로 지정해준다.

✨결과 화면

.env TEST변수설정

TEST라는 변수를. env 파일 중 배포와 개발 파일에 각각 다른 변수명을 넣어준다.

mounted() {
  console.log(process.env.TEST)
},

console.log로 찍어보기

실제로 돌려볼 경우 console 쪽에 배포 환경에 따라서 다른 변수명이 찍힌 걸 확인할 수 있다.

윈도우 10(Window 10) 폰트(글꼴) 파일 설치 위치 확인하기

김평범님 — Sun, 9 Oct 2022 19:24:03 +0900

윈도우에서 내가 설치한 폰트가 어떤 것들이 있는지 체크를 하거나

혹은 내가 설치된 폰트 파일을 복사해서 다른 곳에 쓸 일이 있을 때

현재 내 PC에 어디에 폰트가 저장되어있는지를 확인해줘야한다.

Window10 폰트 경로

C:\Windows\Fonts

윈도우 폰트 저장위치

내가 설치한 폰트는 C드라이브에 windows/fonts 폴더에 들어가면 확인할 수 있다.

해당 경로에서 내가 필요한 폰트 파일을 찾아서

복사하면 내가 원하는 위치에도 붙여넣기가 가능하다 :)

[Git] git ignore가 동작하지 않을 때 (git 캐시 삭제)

김평범님 — Thu, 6 Oct 2022 20:42:40 +0900

최근 협업 중에 git ignore에 파일을 추가했지만,

생각 없이 올리다보니 git ignore가 정상적으로 동작하지 않는 것을 발견했다.

검색을 해보니 git에도 캐시가 있어서,ignore에 들어가도 바로 적용이 안되는 경우가 있다고 한다.

WebStorm 폴더 색상 별 git 상태 확인하기

webstorm에서 보다보면, git이 연결될 경우 파일 색상에 따라서 git 상태를 확인할 수 있다.

webstorm git 상태

빨간색 : git commit 목록에 add되지 않은 상태
파란색 : 이전 commit파일과 비교했을 때 변경이 내용이 있는 상태
흰색 : 이전 commit과 비교했을 때 변경 내용이 없는 경우
초록색 : 이전 commit에는 해당 파일이 없이 새로 생성이된 경우
노란색 : .gitignore에 추가된 상태

예시 사진을 보면 pacakge-lock.json은

현재 git ignore에 추가되어서 노란색으로 변경된 상태이다.

만약 git ignore에 파일을 추가했지만 노란색으로 변경이 안된 상태라면

git ignore가 캐시가 있어서 적용이 안되고 있을 가능성이 제일 크다.

‍♀️git ignore 캐시 삭제하기

//git cache 삭제 
git rm -r --cached .

//.gitignore에 추가된 파일을 제외하고 모두 git commit 리스트에 add
git add .

//commit하기
git commit -m "커밋메지시입력"

[EAI_AGAIN 오류] getaddrinfo 오류 해결 방법 (+ ping DNS 테스트)

김평범님 — Wed, 31 Aug 2022 20:34:52 +0900

⚠️Error:getaddrinfo EAI_AGAIN

EAI_AGAIN오류

아침 출근부터 오류 발생 처음 보는 오류인데, 일단 아마존 DB가 접속이 안된다.

로그인이 안 되는 대형사고 발생!!

EAI_AGAIN이란?

EAI_AGAIN은 DNS 조회시간 초과 오류이다.

PING 테스트 진행

ping 테스트 정상적인 결과

ping테스트 실패화면

DNS가 문제라고 하니, ping으로 google.com을 호출해봤는데

문제가 없는 서버에서는 ping이 잘 날라고 있었는데,

지금 오류가 발생하는 서버에서는 Temporary failure in name resolution 오류가 발생

nslookup 테스트 진행

nslookup 명령어 뒤에 조회하려는 도메인을 입력하면,

네임서버 관련된 조회가 된다고 하니 이것도 테스트를 진행

nslookup google.com

nslookup google.com 명령어를 입력했는데,

결과는 server can't find server:SERVFAIL

역시나, 뭔가 네임서버를 찾지 못하는 듯하다.

문제 해결 방법

cat /etc/systemd/resolved.conf

etc/systemd/resolved.conf

확인해보니 네임서버 설정은 cat /etc/systemd/resolved.conf에서 설정할 수 있다고 해서

확인을 해보니 설정 쪽 DNS에 아무런 설정이 되어 있지 않았다.

해당 파일에 DNS 뒤에 8.8.8.8을 추가하고 서버를 재실행해준 뒤 정상 작동되었다.

[vue] vue 데이터피커 - bootstrap datepicker css 확인 방법(debug 속성)

김평범님 — Sat, 27 Aug 2022 21:38:45 +0900

많이 사용하는 datepicker 중 bootstrap datepicker가 있다.

필요한 모든 기능들이 제공되어서 꾸준히 사용하고 있는 datepicker!

공식사이트는 아래 링크 참고

https://getdatepicker.com/4/

Get awesome Dashboard Templates Looking for a template with the datepicker ready to go? Then get check out these templates from our partners.

getdatepicker.com

https://www.npmjs.com/package/vue-bootstrap-datetimepicker

vue-bootstrap-datetimepicker

Vue.js date time picker component for bootstrap 4. Latest version: 5.0.1, last published: 4 years ago. Start using vue-bootstrap-datetimepicker in your project by running `npm i vue-bootstrap-datetimepicker`. There are 23 other projects in the npm registry

www.npmjs.com

vue bootstrap datepicker 개발자 도구 문제

bootstrap datepicker의 경우 모든 기능이 제공되지만,

가끔 내가 원하는 디자인으로 커스텀이 필요한 경우가 있다.

문제는 bootstrap datepicker의 경우 클릭시 element가 추가되고 제거되는 형태라서

개발자도구에서 해당 element들의 구조를 확인하기 힘들다.

bootstrap datepicker debug 속성 활용하기


dateOptions: { //데이터피커 옵션 값
  debug:true
},

datepicker 속성에서 debug를 넣어주면

클릭을 해도 datepicker가 없어지지 않아서, 개발자도구에서 실제 datepicker 구조를 확인할 수 있게 된다.

실제 사용 시에는 클릭을 해도 datepicker가 사라지지 않기 때문에

개발모드에서만 활용해주고,

실제 배포 시에는 해당 속성을 제거해주면 된다.

[vue] v-if 내 조건으로 filter로 데이터 변환 후 비교하기

김평범님 — Fri, 5 Aug 2022 19:05:28 +0900

vue js v-if filter 활용하는 방법

vue.js에서 v-if 조건 중 filter를 통해 정제된 데이터 값이랑 비교하고 싶을 때가 있다.

v-if문 시 filter로 이용한 데이터 값 조건으로 넣어주기

v-if="$options.filters.필터명(필터파라미터)"

샘플 코드

filter를 통해서 user레벨을 확인한 뒤 그에 따른 인사말을 v-if를 이용해서 출력하는 코드이다.

<template>
    <div>
        로그인회원 레벨 : {{$options.filters.levelCheck(userList, loginUser.id)}}
        <div v-if="$options.filters.levelCheck(userList, loginUser.id) === 2">
            안녕하세요! 정회원이시네요!
        </div>
        <div v-else>
            안녕하세요! 준회원이시네요!
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                userList: [
                    {id:1, name:'김철수', level:1},
                    {id:2, name:'김한나', level:2},
                    {id:3, name:'이사랑', level:2},
                    ],
                loginUser:'',
            }
        },
        mounted() {
          this.loginUser = this.userList[0];
        },
        filters: {
            levelCheck(object,id) {
                if (object === undefined || object === null || object === "") {
                    return -1
                } else {
                    let target = object.filter(object => object.id === id);
                    if (target.length === 0) {
                        return
                    } else {
                        return target[0].level
                    }
                }
            },
        },
    }
</script>

만약 필터를 통해서 준회원인지 정회원인지 확인하고

그에 맞는 텍스트를 보여줘야 하는 상황이라면

회원 레벨을 체크하는 필터를 만든 뒤

v-if에서 user를 확인해서 출력된 level 값에 따른 텍스트를 보여준다.

결과 화면

만약 로그인 user가 0번 김철수 일 경우

v-if vue filter조건으로 사용하기

만약 로그인 user가 1번인 김한나 일 경우

v-if vue filter 결과화면

조건에 따라 텍스트가 변경된 것을 확인할 수 있다.

[css] css :has 사용 방법 및 지원 브라우저 (특정 요소 갖는 부모 요소 찾기)

김평범님 — Tue, 2 Aug 2022 23:37:04 +0900

css :has 사용방법 및 지원 브라우저

css 작성하다 보면,

자식 선택자를 선택하는 것은 매우 잘되어있는데,

부모에서 밑에 해당 자식이 있는 경우 작동하게 하는 방법이 딱히 없는 것 같아서 찾아보았다.

필요한 상황

예를 들어 ul li 구조에서 a태그 내. active 클래스가 활성화되었을 때

li 태그에 css를 주고 싶은 상황이다.

자식선택자 선택하기

li밑에 있는. active class를 가진 a태그에 css를 주는 것은 매우 간단하다.

ul li a.active {
 color:skyblue;
}

ul 태그 안에 li태그 안에 a.active가 되어있는 태그를 찾는 방법이다.

그냥 depth순서대로 작성해주면 해당 태그를 선택해서 css를 적용할 수 있다.

.active 태그 있는 곳에 css 적용

✨특정 자식선택자를 가진 부모 태그 선택하기

반면 li 태그중 .acitve a태그가 가지고 있는 경우 css를 적용하는 방법이다.

li:has(.active) {
        padding:12px;
        text-decoration: underline;
}

:has 태그를 이용하면 해당 자식을 갖고 있는 부모 요소를 선택할 수 있다.

. active태그를 갖고 있는 li태그에 css를 적용할 수 있는 가상 클래스이다.

.ac:has태그 적용 결과화면

. active태그를 가진 목차 3 li에 underline이 적용된 것을 볼 수 있다.

:has 지원 브라우저

내가 딱 원하는 기능이었으나, 아쉽게도 아직 :has는 대부분 브라우저에서 지원이 되지 않는다.

can I use :has

can I Use에서 확인해본 결과 :has 선택자는 사파리 외에는 모두 적용이 안되고 있다.

크롬에서는 105 버전 이상부터 적용이 되고 있다고 한다.

크롬 현재 공식 버전

크롬의 경우 22년 8월 현재 103 버전이 공식 빌드 버전이고,

beta버전도 아직 104 버전이 공식이라 아직 적용이되기에는 좀 기간이 걸릴 것 같다.

[Notion] 노션 데이터베이스 사이드 보기 기능 추가 (업데이트 알림)

김평범님 — Tue, 26 Jul 2022 21:45:19 +0900

노션 업데이트 사이드보기

Notion에서 오랜만에 눈에 띄는 업데이트가 나왔다.

오늘은 노션 사이드 보기 기능에 대해서 알아보기로 하겠다.

노션 데이터베이스 기능을 아직 잘 모른다면?

https://ordinary-code.tistory.com/31

[Notion] 노션에서 데이터베이스(표) 기초 사용법 이해하기

우리가 작성하는 메모 앱에서 원하는 기능 중 하나는 표이다. 표의 경우, 많은 사람들이 내용을 작성하는데 자주 이용하는 포맷인데, 대부분 사람들이 엑셀을 많이 사용하기 때문에 엑셀에서 사

ordinary-code.tistory.com

✨노션 사이드보기 업데이트

노션의 데이터베이스는 하나의 페이지로 이루어진다.

노션의 표를 클릭하면 보통 중앙에 팝업이 뜨는 형태로 볼 수 있었는데

이번 업데이트로 사이드로 데이터베이스 표를 확인할 수 있게 되었다.

노션 사이드 보기

노션 업데이트 사이드뷰

노션에 이번 업데이트인 사이드뷰는

페이지가 바로 옆쪽으로 열려서 미리보기로 콘텐츠를 확인하면서도

표의 내용을 볼 수 있다는 장점이 있다.

노션사이드 보기 말고 페이지 보기로 다시 변경하려면?

사이드 뷰가 편리한 분도 있지만,

만약 기존의 페이지 보기 형식이 더 편하신 분들은 페이지 보기 선택을 바꿀 수 있다.

노션 데이터베이스 페이지 보기 옵션

데이터베이스 우측 상단 점 3개 메뉴를 클릭한 뒤

레이아웃 > 페이지 보기 선택에서 변경이 가능하다.

만약 기존 처럼 중앙에 보고 싶으면 중앙에서 보기

전체페이지로 바로 이동하고 싶으면 전체 페이지 보기를 선택하면 된다.

[javascript] 배열 내 특정 객체 값 제거하는 방법(splice 이용하기)

김평범님 — Wed, 20 Jul 2022 20:21:16 +0900

javascript 배열 splice이용하기

javascript 내에서 배열을 조작해야 되는 것 중 내가 원하는 값을 지우고 싶을 때가 있다.

이때 이용하는 것이 바로 splice()

✂ Array.splice()

배열 뒤 splice를 이용하면 기존 요소를 삭제하거나 교체하는 것이 가능하다.

array.splice(시작 index, 제거 index, 추가 요소)

시작 index

배열 변경을 시작할 index 번호를 입력한다.

제거 index

0을 입력하면 어떤 요소도 제거되지 않으며, 특정수를 입력하면 start 이후부터 해당 수만큼 요소가 제거된다.

추가 요소

배열에 새로 추가될 요소가 들어간다. 만약 입력이 없다면 제거만 되고 새로운 요소는 추가되지 않는다.

샘플 코드

let obj = [
	{id:1, name:'apple'},
	{id:2, name:'banana'},
	{id:3, name:'peach'}
];

obj.splice(0,1); //applie 객체 삭제

obj.splice(1,1);//banana 객체 삭제

obj.splice(2,0);//아무일도 없음

위샘플코드 결과화면

샘플 코드를 보면 1번 경우는 index 0번에 있던 apple이 삭제되고

2번의 경우는 중 index 1번에 있던 바나나가 삭제

3번의 경우는 제거 index를 0으로 넣어서 아무런 일이 일어나지 않는다.

배열 내 새로운 객체 추가

let obj = [
	{id:1, name:'apple'},
	{id:2, name:'banana'},
	{id:3, name:'peach'}
];

obj.splice(3,0,{id:4, name:'melon'}); //index 4번에 melon 추가

샘플 코드 결과화면

마지막 3번째 인자에 추가 요소를 넣어주면 index 3번에 melon이 추가된다.

let obj = [
	{id:1, name:'apple'},
	{id:2, name:'banana'},
	{id:3, name:'peach'}
];

obj.splice(2,0,{id:4, name:'melon'}); //index 2번에 melon 추가, 기존 2번 peach 3번으로 밀림

샘플코드 결과화면

만약 시작 index를 2번으로 지정하면 peach가 4번으로 밀려난다.

특정 id를 찾아서 삭제하기

하다 보면 특정 id를 찾아서 객체 내에서 삭제를 하고 싶은 경우가 있다.

그때 이용하면 좋은 코드

샘플 코드

function remove(id){

	let obj = [
		{id:1, name:'apple'},
		{id:2, name:'banana'},
		{id:3, name:'peach'}
	];

	obj.forEach((item, index)=> {
		if(item.id === id) {
		obj.splice(index, 1);
		}
	});
};

remove(3) //peach 삭제

샘플코드 결과화면

위 코드를 이용하면 간단히 특정 id 값을 체크해서 해당 객체 내에서 제거가 가능하다.

[javascript] 빈객체 if문으로 확인하는 방법 ({} check / Object.keys 주의사항)

김평범님 — Tue, 19 Jul 2022 20:50:30 +0900

자바스크립트 빈객체 확인하기

자바스크립트에서 default 객체를 선언하는 방법은 아래와 같다.

const obj = {};

이후 로직에서 obj 객체에 key,value가 세팅이 되었는지 아닌지 체크하는 방법이 필요해서

찾아보게되었다.

Object.keys 이용하기

Object.keys()를 이용하면 주어진 객체의 key 이름을 배열로 반환한다.

Object.keys(obj) //빈객체일 경우 [], key가 있는경우 [id,name]

해당 기능을 이용해서 if문처리가 가능하다.

예시코드

let obj = {}
obj ={
    id:1,
    name:one
}

if(Object.keys(obj).length !== 0) {
  alert("빈객체아님!")
}

실행 결과 화면

위 예시로 빈객체인지 아닌지 확인이 가능하다!

✅사용시 주의사항

만약 obj객체에 object(객체)형태가 아닌 다른 형태의 객체를 넣었을 경우에도 error가 나는 것이 아니라
ES2015에서 부터는 강제로 인수를 객체로 변환해서 인식해버린다.

let obj = {}
obj ='빈객체'

if(Object.keys(obj).length !== 0) {
  alert("빈객체아님!")
}

console.log(obj)
console.log(Object.keys(obj))
console.log(Object.keys(obj).length);

</script>

결과화면

위와 같은 오류로 if문 처리가 정확히 되지 않을 수 도있으니
객체가 아닌 다른 형태의 인수가 들어가지 않도록 주의해야 한다.

[vue.js] input 에서 이미지 업로드 벨리데이션 처리

김평범님 — Tue, 12 Jul 2022 20:48:36 +0900

이미지 업로드 시 벨리데이션 처리하기

프로젝트를 진행하다 보면 이미지를 업로드해서 프로필 사진을 적용한다던지 하는 기능을 만들 경우가 있다.

오늘은 input 으로 받은 이미지를 밸리데이션으로 체크하는 샘플 코드를 작성해보았다.

⚠️이미지 업로드 시 주의 사항

동일한 파일이 업로드 되었을 때 어떤 식으로 처리할 것인지
파일 용량이 큰 파일 업로드를 허용할지 아닐지
이미지 업로드 시 확장자는 어디까지 받을 것인지

이러한 부분을 고려를 해서 개발을 해야 한다.

✨이미지 파일 업로드받기

<input type="file" />

이미지 파일을 업로드받으려면 input type을 file로 변경하면 윈도 파일 브라우저가 뜨는 input 박스가 생성된다.

파일선택 가능한 input 박스

input accept 처리하기


    <input type="file" accept="image/*"/>

만약 파일 처리에서 accept 속성을 넣으면 여기서 적용시킨 형태의 파일만 파일 브라우저에서 뜨게 된다.

accept 속성 처리하기

image/*의 속성을 넣으면 작동된 윈두우 파일 브라우저에서는 이미지 파일만 뜨게 된다.

업로드된 이미지 정보 확인하기

샘플 코드

<template>
<div style="padding:30px;">
    <input type="file" accept="image/*" @change="fileChange"/>
    <p>
        upload 이미지 :{{file.name}} ({{file.size}}) / {{file.type}}
    </p>
</div>
</template>
<script>
    export default {
        data() {
            return {
                file: '',
            }
        },
        methods: {
            fileChange: function(e) {
                console.log(e.target.files)//files는 배열로 들어온다.
                this.file = e.target.files[0];

            }
        }
    }

</script>

위 코드를 보면 파일을 업로드하면 업로드하는 순간 @change를 통해서 fileChange function을 실행시킨다.

실행해보면 e.target.files 내부에 업로드한 파일 정보다 들어간 것을 볼 수 있다.

files 정보는 배열 형태로 들어오며, 파일을 여러 개 넣어주면 복수개도 들어올 수도 있다.

결과 화면

업로드한 파일의 정보들을 확인할 수 있다.

위처럼 업로드를 하면 바로 해당 업로드된 파일 정보를 확인할 수 있다.

업로드 파일 형태를 이용해서 밸리데이션 처리하기

샘플 코드

fileChange: function (e) {
    const file = e.target.files;
    let validation = true;
    let message = '';

    if (file.length > 1) {
        validation= false;
        message = `파일은 한개만 등록 가능합니다.`
    }

    if (file[0].size > 1024 * 1024 * 2) {
        message = `${message}, 파일은 용량은 2MB 이하만 가능합니다.`;
        validation = false;
    }

    if (file[0].type.indexOf('image') < 0) {
        message = `${message}, 이미지 파일만 업로드 가능합니다.`;
        validation = false;
    }

    if (validation) {
        this.file = file
    }else {
        this.file = '';
        alert(message);
    }

}

만약 밸리데이션을 처리하고 싶다면 위에처럼 length, size, type 등으로

input에 들어오는 파일들을 처리할 수 있다.

만약 원하지 않는 파일이 들어오지 않는다면 file변수에 해당 파일을 넣지 않고 빈칸으로 남겨둔다.

[Nuxt]다음 카카오 우편번호 서비스 Vue 프로젝트에 연동하기

김평범님 — Tue, 5 Jul 2022 19:54:30 +0900

주소 검색해서 입력하는 사이트에서 자주 보는 카카오 우편번호 서비스가

이번 프로젝트에 필요해서 연동해보기로 했다.

카카오 우편번호 서비스

카카오우편번호 서비스는 키를 발급할 필요도 없고

사용량 제한도 없고

기업도 무료료 사용할 수 있다.

카카오 우편번호 서비스 스크립트 연동하기

카카오 우편서비스는 사용법도 너무 간단하다!

제공되는 자바스크립트 파일을 추가한 다음 바로 실행이 가능하다.

우편번호 서비스 연동 자바스크립트

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

샘플 코드

<template>
  <div>
  	// 버튼 클릭 시 주소검색 팝업 띄우기
     <button class="button primary-button" @click="postOpen">주소검색</button>
  </div>
</template>

<script>
  export default {
    head() {
      return {
        script: [
        	//해당 페이지에 카카오 서비스 사용을 위한 코드 삽입
          {type: 'text/javascript', src: "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"},
        ]
      }
    },
    data() {
      return {
          address:'',
      }
    },
    methods : {
      postOpen() {
      	const vm = this;
        new daum.Postcode({
          oncomplete: function(data) {
          //확인 시 결과 데이터 Return 확인
            console.log(data)
            this.address = data.address
          }
        }).open();
      }
    }
  }
</script>

onComplete data 형태

카카오 우편번호 서비스 return 데이터

주소를 선택 한 다음 들어오는 결과 화면이다.

address 에서 주소를 이용할 수 있고

addressEnglish에는 영어 주소도 들어와 있다.

zonecode는 우편번호이다.

서버리스 컴퓨팅이란? - 서버리스 개념과 AWS Lambda(람다) 서비스 알아보기

김평범님 — Sun, 3 Jul 2022 14:55:00 +0900

AWS 람다 서버리스 구성 장점 단점

서버리스 컴퓨팅(Serverless computing)이란?

서버리스 컴퓨팅이란 보통 클라우드 모델 중하나이다.

단어 자체로는 서버리스이지만, 실제로는 서버는 존재하나

서버에 관련된 부분을 크게 신경 쓰지 않아도 된다라는 의미로 서버리스라는 단어를 사용한다.

클라우드 서비스 플랫폼에 서버리스 컴퓨팅을 제공하는 서비스에

소스를 올리게 되면 바로 애플리케이션이 돌아가게 된다.

서버리스 컴퓨팅을 이용하면 서버를 구매할 필요도 없으며,

배포 후에 user 수에 따른 스케일링이라던지 프로비저닝도 자동으로 제공되어

소스 외 서버에 관련된 부분은 개발자가 신경 쓸 필요가 없다는 것이 장점이다.

✨AWS Lambda

AWS Lambda

아마존 람다는 아마존 웹서비스에서 제공하는 서버리스 클라우팅 서비스이다.

아마존 람다는 서버를 프로비저닝 또는 관리하지 않아도

모든 애플리케이션 또는 백엔드 서비스에 대한 코드를 실행할 수 있는

이벤트 중심의 서버리스 컴퓨터를 제공한다.

AWS Lambda 웹 애플리케이션 아키텍처

AWS 람다 로 웹어플리케이션 구성하기

일단 Amazon S3에 프런트 앤드 코드를 올려서 배포를 한 이후

user가 해당 사이트에 들어와서 특정 function을 호출하면

Amazon API Gateway에서 Lambda에 올라간 Backend Function Code가 실행되어

데이터를 찾아서 User에게 Return 값으로 전달해주는 구조가 된다.

AWS Lambda의 장점

1️⃣자동화 관리

AWS Lambda를 활용할 경우 인프라 관리는 AWS Lambda에서 자동으로 진행된다.

OS 업데이트 신규 패키지 등 도 알아서 Lambda가 알아서 관리해주며,

서버에 User가 많아질 경우 서버 규모 조정 등도 Lambda가 다 알아서 해준다.

유지보수, 보완, 모니터링 은 Lambda가 다 알아서 해주는 구조이므로

backend 개발자는 코드 작성에만 집중하면 된다.

2️⃣사용한 만큼만 지불

Lambda가 저렴한 이유는 바로 내가 만든 함수가 호출될 때 비용이 발생한다.

보통 가상머신에 서버를 만들게 되면 가상 머신이 도는 24시간 아무 호출이 없어도 우리는 가상 머신을 생성했다는 사실 하나로 비용을 지불해야 된다.

하지만 Lambda의 경우 내가 만든 함수가 호출될 때만 비용이 발생되어

사용자가 많이 접속하지 않는 사이드 프로젝트의 경우 Lambda로 프로젝트를 만들게 되면 비용을 절약할 수 있다.

AWS Lambda의 단점

1️⃣용량 제한

배포 패키징 용량제한

Lambda는 작은 단위의 함수를 나눠서 업로드를 하기 때문에 올릴 수 있는 코드 제한이 있다.

람다에 업로드하는 배포 패키지는 250MB 제한이 있다.

보통 내가 사용하는 Nuxt 배포 패키지도 람다를 이용할 수 있으나, 배포 패키지 용량 제한이 있어서

대규모의 프로젝트가 되면 용량제한이 걸릴 수도 있다.

2️⃣콜드 스타트(Cold Start) 이슈

콜드 스타트는 람다가 오랫동안 호출되지 않다가 오랜만에 호출될 때 발생하는 딜레이를 말한다.

람다는 해당 기능이 호출될 때 실행이 되는 구조라

오랫동안 해당 기능이 호출이 되지 않으면 다시 해당 기능을 하기 위한 컨테이너를 실행하는 시간이 조금 걸리게 된다.

3️⃣람다 동시 실행 함수 제한

람다 동시실행 제한

람다는 기본적으로 1000개의 함수가 동시에 실행될 수 있도록 제한되었다.

서비스가 커지게 된다고 하면 기본 할당량을 넘어서 서비스 동시 실행 수를 증가해서 사용을 해야 한다.

크롬 브라우저 커서 없애기 (텍스트 클릭 커서 깜빡임 제거 / 캐럿브라우징이란?)

김평범님 — Wed, 29 Jun 2022 00:09:43 +0900

어느 순간부터인가 크롬 브라우저에서 클릭을 하면 자꾸 커서 깜빡이는 현상이 나왔다.

사실 귀찮아서 그냥 쓰고 있었다가

오늘은 개발할 때 갑자기 너무 신경이 쓰여서 미뤄두었던 해결 방법을 찾기로 했다.

해당 기능은 크롬 브라우저에서 제공하는 기능이다.

크롬 브라우저 텍스트 커서 제거 단축키

텍스트 커서 페이지 탐색 중지

간단히 없애려면 F7을 누르면 된다.

F7을 누르면 해당 기능을 껐다가 켰다할 수 있다.

텍스트 커서로 페이지 탐색 기능 OFF 하기

크롬 우측 상단 설정

먼저 해당 기능은 우측 상단 점3개를 클릭하면 설정 메뉴에 들어갈 수 있다.

크롬브라우저 접근성 텍스트 커서 페이지 탐색

일단 크롬 브라우저에서 설정 > 접근성 메뉴에 들어가면

텍스트 커서로 페이지 탐색 기능을 OFF 하면 더 이상 클릭 시 커서 깜빡임이 없어지는 것을 확인할 수 있다.

그럼 왜 해당 기능이 필요한 것일까?

캐럿브라우징이란?

캐럿 브라우징은 마우스 대신 키보드를 이용할 때 텍스트를 선택하던지 링크를 찾을 수 있는 기능이다.

캐럿 브라우징이 켜져 있어야 키보드를 탭키를 눌러서 링크 이동하던지

키보드 화살표로 스크롤 이동이 가능해진다.

캐럿브라우징 활성화 상태

해당 기능은 실제로 마우스를 쓰지 못하는 환경에서는 매우 유용한 기능이기는 하다.

[css]<hr> 태그 색상 바꾸는 방법

김평범님 — Sat, 25 Jun 2022 23:16:43 +0900

<hr>태그 색상 변경방법

<hr> 태그란?

hr 태그를 이용하면 콘텐츠 중간에 선을 그을 수 있다.

보통 주제가 변경이 될 때 이용하는 태그이다.

<hr> 태그는 기본적으로 검은색으로 제공되고 있다.

만약에 해당 색상을 바꾸고 싶다면?

<hr>태그 선 색상 변경 코드

hr {
    background:pink;
    height:1px;
    border:0;
}

hr 태그를 변경하려면 background나 color 속성만 변경하면 색상이 변하지 않는다.

height를 1px을 주고 background를 주면 색상이 변하는 걸 확인할 수 있고

이때 border는 0으로 맞춰준다.

<hr>태그 컬러 변경

줄 넓이를 키우고 싶을 경우 height를 조절해주면 끝!

internet Explorer 서비스 종료! - 엣지(edge)에서 Internet Explorer 이용하기

김평범님 — Sun, 19 Jun 2022 21:52:17 +0900

첫 퍼블리셔가 되어서 날 매일 같이 괴롭히던 internet Expolorer가 드디어 서비스가 종료되었다.

막상 현업에 있을 때 크로스 브라우징 할 때는 빨리 사라져 버려라!!라고 생각했지만

막상 서비스가 실제로 종료되니 왜 좀 섭섭한건지

internet Explorer 서비스종료

구 internet Explorer 11에 접속하니 22년 6월 15일 이후 서비스가 종료되었다는 안내가 뜬다.

사실문제가 되는 이유는 과거에 internet Explorer 환경에 최적화되어서 만들어진

웹 솔루션을 현업에서 사용하는 분들도 상당히 많다.

다행히 이런 분들을 위해서 Edge에서 과거 Internet Explorer 모드를 지원하는듯했다.

Microsoft Edge 시작하기

internet Explorer Edge에서 internet Explorer 이용하기

다행히 다양한 방법으로 에지(Edge) 브라우저에서 구 IE 모드를 지원을 하긴 하는듯하다.

1️⃣IE 모드 호환되도록 IE 모드 사용 설정 허용하기

해당 주소를 복서 해서 edge에 붙여 넣는다.

edge://settings/defaultBrowser

edge에서 Internet Explorer 실행하기

기본 브라우저에서 사이트를 Internet Explorer 모드로 다시 실행할 수 있습니다를 허용으로 변경한 다음

edge를 다시 시작해준다.

2️⃣ 도구 모음 단추 추가

해당 주소를 복사해서 edge에서 붙여 넣는다.

edge://settings/defaultBrowser

edge에서 internet Explorer 모드 단추 토글 켜기

브라우저 디스플레이 > 도구 모음에 표시할 단추 선택으로 이동하면

Internet Explorer 모드 단추 토글을 켜준다.

3️⃣IE 모드에서 다시 로드

왼쪽 상단 점 3개를 클릭하면 메뉴 중에서

Internet Explorer 모드에서 다시 로드라는 기능을 제공한다.

Internet Explorer 모드에서 다시로드하기

해당 버튼을 클릭하면 Edge에서도 internet Explorer 모드로 사용이 가능하다고 한다!

관리자 권한 오류 발생

internet Explorer 모드에서 페이지를 열려면 관리자권한으로 다시설치하세요.

클릭해보니 바로 되진 않고 관리자 권한으로 Edge를 설치하라는 안내가 뜨면서 안된다.

다른 분들은 다 잘되는데 왜 저만 안되는 거죠 ㅠㅠ

혹시 해결하신 분들이 있다면 댓글로 알려주시면 감사하겠습니다.

어쨋든 나와 함께 시작한 Internet Explorer가 드디어 없어진다고 하니 은근 시원섭섭하다

[css] 체크박스, 라디오버튼 색상 변경하기 (accent-color, 기본요소 컬러 변경)

김평범님 — Wed, 15 Jun 2022 22:12:02 +0900

css accent-color

input에서 체크박스, 라디오 버튼의 백그라운드 컬러를 바꾸고 싶을 때가 있다.

그냥 생각으로는 background 속성을 사용을 하면 변경이 되지 않을까라고 해서 적용을 해봤지만

input의 기본 color는 원래 css로 변경이 불가능했다.

checkbox, radio button의 색상을 바꾸려면, 단순 css로 원래 불가능했는데

최근 새롭게 출시된 css 기능 중 accent-color가 추가되었다.

css accent-color

accent-color는 HTML 요소 기본 색상을 변경할 수 있는 새로운 기능의 css이다.

크롬 기본 요소들 디자인

edge에서 보이는 기본 요소 디자인

기존 css의 디자인을 바꾸려면 Label 등을 이용한 편법으로 수정해야 되고

가장 기본적인 컬러 변경 자체도 안돼서 브라우저에서 제공하는 기본 디자인을 사용해야 되었다.

해당 기능 지원 가능 브라우저

accent-color 지원브라우저

현재는 각 브라우저 최신 버전에서만 지원이 가능하며,

구 internert Explorer에서만 지원이 되지 않는다.

최신 버전 브라우저에서만 지원이 되기 때문에

불특정 다수에게 서비스하는 프로그램에서는 아직 사용하기에는 어려울 듯하다.

❤️예시 코드

:root {
	accent-color: red;
    accent-color:#5729e9;
    accent-color: rgb(0,200,0);
    accent-color: hsl(228,4%,24%);
}

:root accent-color

accent-color요소를 :root에 적용을 하면 모든 요소의 컬러를 한 번에 변경을 할 수 있다.

accent-color가 적용되는 HTML요소는 총 4가지이다.

checkbox
radio
range
progress

accent-color에 들어가는 값은 색상을 지정해주는 코드로 사용할 수 있다.

accent-color 선택자로 나눠주기

 input[type=checkbox], input[type=radio] {
    accent-color:red;
}
input[type=range], progress{
    accent-color:black;
}

accent-color Element

선택자를 이용하면 요소 별로도 색상 지정이 가능하다.

2022 UI 트렌드 글래스모피즘과 클레이모피즘 CSS 생성하기(glassmorphism & claymorphism)

김평범님 — Tue, 7 Jun 2022 21:27:21 +0900

글래스모피즘이란?

반투명한 유리를 댄듯한 효과를 말한다.

"얼린유리" 효과라고 해서 배경에 불투명한 유리를 올린 것 같은 효과를 말한다.

글래스모피즘

글래스모피즘을 잘 활용하려면?

어느정도 배경 투영되어야 되서 비비드한 컬리와 패턴이 있는 배경 위에 사용을 해야 효과가 난다(배경 위에 떠있는 효과)
내부 쉐도우를 넣어서 테두리는 살짝 밝게 처리해준다.

글래스모피즘은 불투명도와 블러를 조절해서 효과를 낼 수 있다.

손 쉽게 글래스모피즘 효과를 보고싶다면 아래 링크에서 확인해보자.

https://hype4.academy/tools/glassmorphism-generator

클레이모피즘

클레이모피즘은 좀 더 부풀려진 말랑해보이는 3D모양의 UI 트랜드를 말한다.

inner shadow, outerShadow를 활용해서 좀 더 부푼 듯한 효과를 내는게 중요하다.

클레이모피즘을 잘 활용하려면?

내부 외부 그림자를 모두 활용해서 최대한 통통하게 표시해준다.
그림자 방향은 X축과 Y축 옆으로 빼준다.
border-radius 를 좀 더 과감히줘서 동글동글한 느낌을 살려준다.

손 쉽게 클레이모피즘 효과를 보고싶다면 아래 링크에서 확인 가능하다.

https://hype4.academy/tools/claymorphism-generator

[Window 11] 윈도우 화면 간단하게 녹화 하는 방법

김평범님 — Sat, 4 Jun 2022 22:41:52 +0900

window11 화면녹화

윈도우 11에서 화면을 녹화하는 방법은 매우 간단하다.

window11에서 단축키로 윈도우 화면 녹화를 제공한다.

별도의 프로그램 설치 없이 바로 되는게 너무 편리하다.

✂️윈도우 화면 녹화 단축키

윈도우키 + Alt + R

해당 단축키를 누르면 바로 녹화가 시작된다.

윈도우 녹화 화면

녹화가 시작되면 오른쪽 상단 위에 녹화가 시작되었다는 창이 뜨게 된다.

녹화 종료는 동일한 단축키로 윈도우 + Alt +R을 눌러주거나

왼쪽 상단의 녹화창의 정지 버튼을 클릭하면 된다.

윈도우 화면 녹화 저장 경로

윈도우 화면 녹화

내 PC > 동영상 > 캡처

위 경로에서 화면 녹화가 된 것을 확인할 수 있다.

[JavaScript] 웹에서 Push 알람 발생하기 (Web Notification/alert)

김평범님 — Wed, 1 Jun 2022 21:42:56 +0900

javascript Web Notificaiton

‍♀️JavaScript alert 이용하기

자바스크립트에서 알람을 발생하는 것 중에

가장 많이 사용하는 것이 바로 alert이다.

<script>
	alert("알람발생");
</script>

alert 알람 발생

alert으로 알람을 발생시키면 해당 웹에 들어가면 바로 알람을 확인할 수 있다.

하지만 alert의 문제의 경우는 해당 탭에 포커싱이 되어있을 때는 잘 볼 수 있지만

해당 탭에 포커싱이 안되어있을 경우 해당 알람창이 뜨는지를 알 수가 없다.

HTML5 Web Notification API

HTML에서는 웹페이지에서 알람을 표시하면 페이지 외부에서 표시가 되는 Notification API를 제공한다.

해당 웹페이지가 백그라운드로 돌고 있어도 내가 쓰는기기에서 알람을 볼 수 있는 기능이다.

Web Notification 사용 조건

해당 기능을 이용하려면 하지만 조건이 있다.

바로 HTML5로 보내는 Notification알람을 받을 권한을 체크해서

허용한 사람들에게만 알람을 줄 수가 있다.

Web Notification 알람 허용 팝업창 띄우기

Notification.requestPermission().then(function(result) {
  console.log(result);
});

HTML 웹페이지에서 알람 표시 창 띄우기

위 코드를 이용하면 알람 권한을 허용하지 않은 어플리케이션이라면 허용 요청 창을 띄울 수가 있다.

Web Notification 권한 확인하기

let permissionCheck = Notification.permission;

위 코드를 확인하면 현재 사이트에 Notification을 허용했는지 아닌지를 체크할 수 있다.

default : 사용자에게 아직 권한 요구를 하기 전, 알람 표시되지 않음
granted: 사용자에게 알람 표시를 요구했으며, 사용자가 허용한 상태
denied : 사용자에게 알람 표시를 요구했으나, 사용자가 거부한 상태

실제 Web Notification 사용해보기

예시코드

<script>
    function helloWorld(){
        let date = new Date().toLocaleString();
        let notification;
        let notificationPermission = Notification.permission;
        if (notificationPermission === "granted") {
            //Notification을 이미 허용한 사람들에게 보여주는 알람창
            notification = new Notification(`Hello,World!! `, {
                body: `재방문일시: ${date}`,
                icon: 'hello.png',
            });
        } else if (notificationPermission !== 'denied') {
            //Notification을 거부했을 경우 재 허용 창 띄우기
            Notification.requestPermission(function (permission) {
                if (permission === "granted") {
                    notification = new Notification(`Hello,World!! `, {
                        body: `첫방문일시: ${date}`,
                        icon: 'hello.png',
                    });
                }else {
                    alert("알람 허용이 거부되었습니다.")
                }
            });
        }
    }

    helloWorld();
</script>

Notification 알람 예시

위 코드를 실행한 뒤 허용을 누르면 시스템 알람이 뜨는 것을 확인할 수 있다.

new Notification 속성

body는 title 밑에 뜨는 텍스트를 입력할 수 있고,

icon을 입력하면 옆에 이미지로 표시될 경로를 입력하면 이미지도 함께 뜨게 된다.

자세한 옵션들은 아래 URL을 확인해보자!

https://developer.mozilla.org/ko/docs/Web/API/notification

Notification - Web API | MDN

Notifications API의 Notification 인터페이스는 사용자에게 데스크톱 알림을 설정하고 보여주는데 사용됩니다.

developer.mozilla.org

ㅋㅣㅂㅗㄷㅡㄱㅏㅇㅣㅅㅏㅇㅎㅐㅇㅛ! 키보드 자음 모음 분리 해결하기

김평범님 — Fri, 27 May 2022 19:10:31 +0900

키보드 자음 모음 분리현상이 일어난 이유

오늘도 작업을 하느라 컴퓨터를 이용 중인데 갑자기 나도 모르는 팝업창이 생성되었다.

"현재 언어로는 받아쓰기를 사용할 수 없습니다 : 한국어"
지원되는 언어를 확인하려면 여기를 클릭하세요.

윈도우 음성인식

다시 또 작업을 하려고 보니 키보드 자음 모음이 분리되는 현상이 나타났다;

처음에는 왜 나타나는지도 모르고 당황했다.

알고 보니 윈도우 + H키를 누르면 실행되는 음성인식이 실행되면

버그로 키보드 자음 모음이 분리되는 현상이 나타난다고 한다.

키보드 자음모음 분리현상 해결방법

해결방법은 매우 간단하다 윈도우키 + V를 눌러주면 정상적으로 작동한다.

네이버 웨일 다크모드 설정하기 - 탄소중립을 위한 소소한 실천

김평범님 — Wed, 25 May 2022 20:24:53 +0900

네이버 웨일 다크모드 설정하기

최근 유튜브를 보다 보면 화질이 자동으로 떨어지는 것을 느껴본 적이 있을 것이다.

최근 국제적인 이상기후로 IT 업계에서 탄소중립을 위한 소소한 방법들이 제시되고 있다.

유튜브의 화질 저하도 이러한 실천 방법 중의 하나이다.

유튜브 화질 저하와 탄소중립

유튜브의 화질을 낮춰서 시청을 하게 되면, 탄소배출량이 감소한다고 한다.

낮은 화질로 영상을 보는 경우 전력사용량이 저하되는 것에 대한 효과라고 한다.

다크 모드 이용하기

요즘 유행하는 다크 모드도 탄소배출 저하에 도움이 된다.

스마트폰에서 다크 모드를 적용할 경우 소비전력이 현저히 줄어든다고 한다.

이러한 탄소중립에 맞춰서

네이버 웨일 브라우저는 브라우저 자체에서 다크 모드를 지원하기 시작했다.

다크모드를 적용하는 것만으로도 환경에 도움이 되다니!

이런 소소한 행동부터 다 같이 적용해보도록 하자!

네이버 웨일 다크 모드 적용하는 방법

먼저 네이버 웨일이 없으신 분들은 네이버 웨일 브라우저는 먼저 다운로드한다.

https://whale.naver.com/

네이버 웨일 브라우저

일상을 여는 새로운 시작 네이버 웨일

whale.naver.com

네이버 웨일 브라우저 설치가 완료되면 실행을 해준다.

네이버 다크모드 적용하기

왼쪽 상단의 사용자 프로필을 클릭하면,

스킨 컬러를 세팅할 수 있는 기능이 있다.

오른쪽에서 다크모드를 클릭해주면 탭 메뉴, 주소창 등에 다크 모드가 적용이된다.

웹 콘텐츠 부분에도 다크모드를 적용하려면

웹 콘텐츠 다크모드 사용하기를 클릭하면, 웹 창도 다크모드가 설정이 된다.

네이버 웨일 브라우저 다크모드 설정

간단한 설정 만으로도 탄소중립에 도움이 될 수 있다고 하니

꼭 해보길 추천한다.