Vue.js에서 이벤트 핸들링 개선하기 Vue.js를 사용할 때, 종종 이벤트 핸들링을 위해 @click 같은 디렉티브를 사용한다. 조건에 따라 이벤트를 처리하는 방법을 살펴보자. 기존 코드 기존에는 아래와 같이 작성했다. 이 코드는 isCheckNeeded가 참일 때만 checkNav 함수를 호출하려고 시도한다. 하지만, 여기서 checkNav는 호출되지 않고 참조만 전달된다. 함수가 실행되지 않으므로 예상한 동작을 하지 않는다. 개선된 코드 이를 개선하기 위해, 함수 호출을 명확하게 하거나 다른 방식을 사용할 수 있다. 위 코드는 조건이 참일 때 checkNav()를 호출한다. 함수가 실행됨으로써 원하는 동작을 얻을 수 있다. 또는 다음과 같이 논리 연산자를 사용하여 코드를 더 간결하게 만들 수 있다..
Vue 컴포넌트에서의 속성 상속과 커스터마이징 Vue에서는 컴포넌트 간 속성 상속을 통해 부모 컴포넌트에서 정의한 속성을 자식 컴포넌트에게 전달할 수 있다. 이 과정에서 몇 가지 기본 규칙과 커스터마이징 방법을 알아볼 것이다. 속성 상속의 기본 구조 속성 상속은 부모 컴포넌트에서 자식 컴포넌트로 속성을 전달하는 과정이다. 예를 들어, index.vue에서 fb-input-phone 컴포넌트로 속성을 전달하는 구조는 다음과 같다. 휴대폰 번호 input 테스트 input-phone.vue 컴포넌트에서는 $attrs 객체를 사용해 부모로부터 전달받은 모든 속성을 상속받을 수 있다. 이는 다음과 같이 구현할 수 있다. 속성 상속을 제거하고 커스터마이징 모든 속성을 상속받는 것이 아니라 일부 속성만 선택적으로 ..
MacOS Catalina부터 기본 쉘로 Zsh가 도입되었다. 많은 사용자가 Oh My Zsh를 사용해 환경을 구성하지만, 느린 터미널 속도와 불필요한 플러그인으로 인해 필요한 기능만 설정하여 사용하는 것이 바람직하다. zsh 폴더 설정 zsh 설정을 시작하기 위해 필요한 폴더를 만들고 환경변수를 임시로 설정한다. mkdir $DEV_SDK/zsh ZSH=$DEV_SDK/zsh mkdir $ZSH/plugins mkdir $ZSH/themes touch $ZSH/.zshrc History 설정 Zsh 사용자의 명령어 기록을 관리하기 위한 설정을 한다. 기존 Oh My Zsh 사용자라면 기존 히스토리를 가져오고, 그렇지 않으면 새로운 파일을 생성한다. # 기존 History 복사 또는 새로 생성 mv ~/..
Microsoft Edge 및 IE의 특별한 입력 필드 아이콘 숨기기 Microsoft Edge 및 이전 버전의 Internet Explorer 브라우저는 사용자 편의성을 위해 텍스트 및 비밀번호 입력 필드에 특별한 아이콘을 기본적으로 제공한다. 하지만 때로는 이러한 아이콘이 디자인이나 사용성 측면에서 방해가 될 수 있다. 아래에는 이 두 아이콘을 숨기는 방법이 설명되어 있다. -ms-clear 아이콘 숨기기 -ms-clear 아이콘은 텍스트 입력 필드()에 문자가 입력되었을 때 나타나며, 입력된 텍스트를 한 번에 지울 수 있는 ‘X’ 아이콘을 표시한다. 이 아이콘을 숨기려면 다음 CSS 코드를 사용한다. input::-ms-clear { display: none; } -ms-reveal 아이콘 숨기기 ..
DEV_ROOT 설정 개발 작업을 하면서 다양한 라이브러리, SDK, 설정 파일들을 관리하는 것은 때때로 복잡해질 수 있다. 모든 개발 관련 파일을 한 곳에 모아 문제 발생 시 전체 시스템을 초기화하지 않고도 해당 폴더만 삭제함으로써 간편하게 문제를 해결할 수 있다. DEV_ROOT 설정하기 DEV_ROOT를 설정하는 과정은 여러 하위 디렉토리를 포함하는 하나의 루트 디렉토리를 생성하는 것으로 시작한다. 다음은 DEV_ROOT와 필요한 하위 디렉토리들을 생성하는 방법이다. mkdir ~/.DEV_ROOT mkdir ~/.DEV_ROOT/sdk mkdir ~/.DEV_ROOT/lib mkdir ~/.DEV_ROOT/bin mkdir ~/.DEV_ROOT/include mkdir ~/.DEV_ROOT/lib..
SQL vs NoSQL 데이터베이스: 주요 차이점 데이터베이스 기술은 다양한 데이터 저장, 검색 및 관리 방법을 제공한다. SQL(Structured Query Language)과 NoSQL(Not only SQL)은 이러한 방법 중 가장 널리 사용되는 두 가지 유형이다. 이들은 데이터 모델, 확장성, 복잡성, 일관성 등 여러 영역에서 차이점을 보인다. 데이터 모델 SQL: 관계형 데이터베이스로, 데이터를 엄격한 스키마에 맞춰 테이블로 구조화한다. 데이터는 테이블의 행과 열에 저장되며, 테이블 간의 관계를 통해 복잡한 데이터 조직과 쿼리가 가능하다. NoSQL: 비관계형 또는 분산 데이터베이스로, 유연한 스키마를 제공한다. 다양한 데이터 모델을 지원하는데, 여기에는 키-값 저장소, 문서 저장소, 그래프 ..
문제 Error: EACCES: permission denied` 노드 패키지를 글로벌로 설치 할 때 권한 문제 발생 /usr/local/bin/pacakge -> /usr/local/lib/node_modules/pacakge/bin/pacakge > pacakge@4.13.0 install /usr/local/lib/node_modules/pacakge > node scripts/install.js Unable to save binary /usr/local/lib/node_modules/pacakge/vendor/linux-x64-72 : Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/pacakge/vendor' at Obj..
문제 새로운 맥을 구입 한 후 깃에서 클론 하려는데 권한 에러가 발생했다. Permission denied (publicly). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 원인 PC를 변경할 때마다 등록되지 않은 새로운 기기이므로 SSH키를 발급받아서 설정해야하는 당연한 상황이다. 해결방안 아래 명령어를 입력하면 SSH 키를 생성하는 과정이 시작된다. RSA 알고리즘을 사용하여 새로운 SSH 키 쌍(공개키와 비밀키)을 생성하게된다. ssh-keygen -t rsa -C "깃 이메일주소" 그럼 아래와 같이 문구가 나오고 엔터를 ..
문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다.예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다. b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. n은 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 자신보다 두 칸 앞에 a가 있습니다. 이는 2로 표현합니다. n도 자신보다 두 칸 앞에 n이 있습니다. 이는 2로 표현합니다. a는 자신보다 두 칸, 네 칸 앞에 a가 있습..
문제 설명 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 solution을 완성하세요. ..
