보일러 플레이트 뜻 어원 사용 예시

개발 용어 중 보일러 플레이트라는 말이 있습니다. 이 코드는 보일러 플레이트로 관리해서 만들면 좋겠다 보일러 플레이트 단어 뜻과 어원 어떻게 사용되는지 알아보도록 하겠습니다. 보일러플레이트란? 프로그래밍 분야에서 사용하는 보일러 플레이트는 반복적으로 사용되는 코드 조각들을 재사용하는 패턴을 의미합니다. 프로그래밍 코드 이외에도 개발 초기 필수적으로 설정이나 구조들도 보일러 플레이트가 될 수 있습니다. 보일러 플레이트 코드를 재사용을 하면 개발자들이 비즈니스 로직에 더욱 집중할 수 있어서 프로젝트 작업 속도 향상에 도움이 됩니다. 보일러플레이트 어원 보일러를 만들때 강철에 보일러 이름과 정보를 동일하게 입력하는 틀에서 시작되었습니다. 이 단어가 프로그래밍 분야로 넘어오게 되었습니다. 보일러 플레이트 코드 ..

• format_list_bulleted Develop/etc
• · 2023. 6. 29.
• textsms

Vue Mixin(믹스인) 사용법과 장단점

Minxin 란? Mixins는 Vue 컴포넌트에서 코드를 재사용할 수 있는 방법입니다. 언제 사용하면 좋을까? Vue 컴포넌트에서 HTML과 Style은 재사용이 가능합니다. 컴포넌트가 비슷한 로직을 가지고 있으면 Mixins를 사용하는 것이 좋습니다. 예를 들면, 회원 정보 List를 조회하는 컴포넌트(UserList)와 프로젝트 List를 조회하는 컴포넌트(ProjectList)가 있으면 컴포넌트 초기화 이후 데이터를 조회하고, List 컴포넌트를 만드는 로직이 비슷하다면 Mixins을 통해서 코드를 재사용하고, 중복 소스를 제거할 수 있습니다. 사용법 mixins 폴더를 생성하고 listMixin.js 파일을 생성합니다. listMixin.js export default { data(): { re..

• format_list_bulleted Develop/Vue
• · 2023. 6. 28.
• textsms

Vuex - state, getter, mutations, actions 역할 사용법

안녕하세요. 지난 포스팅에서 Vuex가 무엇인지 언제 사용하는지에 대해서 알아보았습니다. Vuex 상태 관리 라이브러리 설치 방법 사용법 Vuex란? Vuex는 전역 상태(global state)를 관리하는 라이브러리입니다. 지역상태 vs 전역상태 상태는 Local State와 Global State가 있습니다. 지역 상태(local state) 전역 상태(global state) 하나의 컴포넌트에서 powerku.tistory.com 이번에는 Vuex를 더 나은 방법으로 사용하기 위해서 state, getter, mutations, actions에 대해서 알아보도록 하겠습니다. State, Getter, Mutations, Actions를 사용해야 하는 이유 methods: { addOne() { th..

• format_list_bulleted Develop/Vue
• · 2023. 6. 21.
• textsms

Vue에서 Intersection Observer를 활용한 무한 스크롤 구현하기

Intersection Observer 란? 브라우저의 자바스크립트 API 중 하나입니다. 엘리먼트의 가시성 변화를 감지할 수 있습니다. 예전에는 스크롤 이벤트를 통해서 스크롤 페이징을 구현하였는데, 브라우저 과부하를 일으켜서 성능 저하가 일어나기도 하였습니다. 하지만 Intersection Observer API를 브라우저의 내부 로직을 이용하여 엘리먼트의 가시성 변화를 감지할 수 있어서 성능이 좋고 효율적으로 무한 스크롤을 구현할 수 있습니다. 언제 사용하면 좋은지? 1. 무한스크롤 구현 사용자가 스크롤을 할 때 새로운 내용을 동적으로 로드할 수 있습니다. 무한스크롤을 이용하면 페이지 로딩 속도를 개선할 수 있고 부드러운 사용자 경험을 제공할 수 있습니다. 2. 이미지/광고 로딩 최적화 화면에 보일때..

• format_list_bulleted Develop/Vue
• · 2023. 6. 15.
• textsms

농구 픽업 게임 순번 정해주는 프로그램

안녕하세요 픽업 게임이나, 게스트 농구 경기를 참가하게 되면 순번을 정해서 뛰는 경우가 많습니다. 한 팀에 5~8명 정도 1번부터 8번까지 순서를 정합니다. 각 순서대로 5명씩 경기를 뛰게 됩니다. 1쿼터 1,2,3,4,5 2쿼터 6,7,8,1,2 3쿼터 3,4,5,6,7 ... 이렇게 경기를 뛰게 됩니다. 하지만 경기를 뛰다보면 순간적으로 다음 차례가 기억이 나지 않는 경우가 있어서 프로그램으로 한번 만들어 보았습니다. + 버튼을 누르면 선수를 추가할 수 있고 다음 버튼을 누르면 다음 차례에 뛸 선수들을 표시 합니다. 필요하신 기능이나 문제점이 있으시면 댓글로 부탁드립니다. 감사합니다. https://powerku.github.io/today-basketball/

• format_list_bulleted Develop/Made by powerku
• · 2023. 6. 2.
• textsms

Vuex 상태 관리 라이브러리 설치 방법 사용법

Vuex란? Vuex는 전역 상태(global state)를 관리하는 라이브러리입니다. 지역상태 vs 전역상태 상태는 Local State와 Global State가 있습니다. 지역 상태(local state) 전역 상태(global state) 하나의 컴포넌트에서 영향을 줌 전체 앱 또는 다수의 컴포넌트에 영향을 줌 ex) 입력 요소에 의해 사용자가 값을 입력, show / hide 를 결정하는 값 ex) 유저 권한 상태, 장바구니 Vuex는 하나의 컴포넌트가 아닌 여러 컴포넌트들 또는 전체 앱에서 사용하는 데이터들의 값을 관리하기 위해서 사용하는 라이브러리입니다. Vuex는 언제 사용해야 할까? Vue를 처음 사용하실 때는 Vuex에 대해서 이해하기가 쉽지 않습니다. 충분히 Vue를 사용하고 경험해보..

• format_list_bulleted Develop/Vue
• · 2023. 5. 26.
• textsms

nvm use 사용했는데 node 버전 변경이 안될 때 해결 방법

문제 사항 nvm use를 실행하고 node -v를 하면 node 버전이 변경돼야하는데 변경이 되지 않는 경우가 있습니다. nvm use {version} nvm use 16 node -v // not 16 해결방법 1. 명령 프롬프트를 관리자 권한으로 실행 하고 다시 명령어를 입력해봅니다. 1번 방법도 안되면 2번 방법으로 넘어갑니다. 2. C:\Program Files\nodejs 폴더를 삭제합니다. 기존 nvm을 이용해서 설치한 node가 아니라, node 단일 버전을 설치한 경우 nvm 을 사용해도 node 버전이 변경이 되지 않는 경우가 있습니다. 해당 폴더 삭제 이후 nvm use를 다시 해보시길 바랍니다. nvm 설치 방법 자주 사용하는 명령어 사용법 프론트엔드 개발할 때 필수적으로 설치해야..

• format_list_bulleted Develop
• · 2023. 5. 24.
• textsms

내가 10년 피운 담배 금연 하게 된 결심 방법 후기

담배 끊는 방법에 대해서 이야기하려고 합니다. 요즘에는 담배 피우는 사람들이 많이 적어지기는 하였습니다. 제가 대학교 1학년 입학했던 시절에는 남학생들은 거의 대부분 담배를 피웠던 것으로 기억합니다. 안 피우는 애들이 좀 이상하게 보는 경우가 있었습니다. 안 피우는 남학생들한테 "넌 왜 담배 안 피워?" 이렇게 물어보곤 했었습니다. 현재는 6년 동안 금연하고 있습니다. 아직도 1년에 1~2번 정도는 흡연 욕구가 강하게 들 때가 있기는 합니다. 술 마시다가 주위 사람들이 담배를 피운다던지, 스트레스를 강하게 받는 경우 하지만, 금연 이후 담배가 너무 득보다는 실이 많다고 느껴서 피우지 않습니다. 금연하는 방법 1. 본인의 확고한 금연 의지가 있어야 합니다. 본인이 금연을 하겠다는 생각이 강력하게 있어야 합..

• format_list_bulleted 일상/리뷰
• · 2023. 5. 22.
• textsms

Vue provide inject 간편하게 데이터 전달하기

provide, inject를 사용하는 이유 Vue에서 데이터 전달을 위해서 props를 많이 사용합니다. 하지만 props를 사용할 때, 자식 컴포넌트의 계층이 깊다면 여러 컴포넌트를 거쳐서 데이터가 전달되게 됩니다. 데이터가 필요가 없는 컴포넌트인데도 props를 통해서 전달해야 하고, 번거로움이 있습니다. provide, inject를 사용하게 되면 부모 컴포넌트에서 데이터를 제공하게 되고 모든 하위 컴포넌트에서 inject를 통해서 데이터를 받을 수 있습니다. 지금부터 사용방법에 대해서 알아보겠습니다. provide inject 사용하기 // 부모 컴포넌트 export default { provide() { return { value: this.value }; }, } 부모 컴포넌트에서 provi..

• format_list_bulleted Develop/Vue
• · 2023. 5. 19.
• textsms

블로그 포스팅 자동으로 글 쓰는 방법 (feat. 뤼튼)

안녕하세요 요새 Chat GPT가 워낙 다양하게 사용이 많이 되고 있습니다. 그래서 티스토리 블로그에서도 글쓰기 에디터에서 AI를 이용해서 자동으로 글을 써주고, 어떻게 글을 쓸지 모를 때는 추천해 주면 어떨까?라는 생각이 들었습니다. 그래서 인터넷을 검색해 보니 실제로 그런 서비스들이 있었습니다. 제가 소개시켜드릴 사이트는 뤼튼이라는 사이트입니다. 광고, 협찬 아닙니다. https://wrtn.ai/ wrtn 챗gpt보다 나은 한국형 gpt-4 이미지 생성 무제한 무료 Gen AI 챗봇 - 나만의 AI를 직접 만들수도 있습니다 wrtn.ai 뤼튼 사이트에 접속하시고 로그인하시면 이용하실 수 있습니다. 블로그 포스팅 자동으로 쓰는 방법 상단에 툴 ➡️ 긴 블로그 포스팅에 들어갑니다. 그러면 주제를 작성하..

• format_list_bulleted 일상/블로그
• · 2023. 5. 18.
• textsms