JavaScript - 조건부 객체 속성 추가하기

조건에 따라서 객체의 속성을 추가하고 싶을 때가 있습니다.특정 조건일 경우에만 { name: 'superman' } 을 추가할 때 어떻게 코딩하면 좋은지 한번 알아보도록 하겠습니다. 고전적인 방법if문을 통해서 프로퍼티를 생성하고 값을 넣는 방법이 있습니다.var isCondition = true;var person = { age: 20};if (isCondition) { person.name = 'superman';} 삼항 연산자 이용하기객체에 삼항연산자를 이용해서 프로퍼티를 추가할 수 있습니다.var isCondition = true;var person = { age: 20, ...(isCondition ? { name : 'superman' } : {})}; 논리 연산자 ( && ) ..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 28.
• textsms

드래그 할때, 클릭 이벤트 방지 하는 방법

아래와 같이 클릭 이벤트를 만들어서 사용하고 있었습니다. 하지만, 드래그할 때도 아래와 같이 클릭 이벤트가 발생하였습니다. 저는 단지 드래그 이후 복사를 하고 싶었는데, 클릭 이벤트를 발생시키고 싶지 않았습니다. const div = document.querySelector('div'); div.addEventListener('click', () => { alert('click'); }); 클릭 이벤트 방지 시키는 방법 아래와 같이 mousedown, mousemove 이벤트를 이용해서 동작이 드래그인지 판단합니다. 그 이후 mouseup 이벤트에서 click 이벤트 로직을 실행시킵니다. const div = document.querySelector('div'); let isDrag; div.addEve..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 23.
• textsms

a태그 이용해서 파일 다운로드 하는 방법 2가지

a태그를 이용해서 다운로드할 수 있는 방법 두 가지에 대해서 알아보도록 하겠습니다. a 태그 download 속성 이용하기 a태그는 해당 url로 이동하거나, 새 탭을 열 수 있습니다. 하지만 download 속성을 사용하면 해당 url의 파일을 다운로드할 수 있습니다. download 값을 넣게 되면 해당 이름으로 파일 다운로드를 할 수 있습니다. 다운로드 단 주의해야할점이 있습니다. 동일 출처 정책에 의해서 다운로드 파일의 경로가 현재 페이지의 url과 동일해야 다운로드가 가능합니다. clickEvent를 이용해서 다운로드하기 다운로드의 파일 경로가 다르다면 a tag에 click 이벤트를 이용해서 다운로드할 수 있습니다. 아래와 같은 방법으로 파일 다운로드를 할 수 있습니다. 다운로드 const c..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 21.
• textsms

Nuxt fetch() 컴포넌트 데이터가 업데이트가 안돼요

Nuxt2에서 아래와 같이 fetch 속성을 사용하려고 하였는데, 컴포넌트 데이터가 업데이트가 되지 않았습니다. async fetch({ $api }) { try { const { data } = await $api.getUserList(); this.list = data; } catch (e) { console.log('error', e) } }, 원인 fetch는 nuxt 2.12 버전 이후로 업데이트가 되었습니다. fetch hook을 사용하려면 fetch안의 파라미터를 넣으면 안됩니다. 파라마터를 넣으면, 업데이트 이전의 fetch가 동작해서 컴포넌트가 업데이트 되지 않습니다. 해결방법 fetch 파라미터를 지우고, this를 통해서 데이터 구성요소를 업데이트 하면 정상 작동합니다. async f..

• format_list_bulleted Develop/Nuxt
• · 2023. 11. 18.
• textsms

git push 할때 자꾸 username, password 물을때 해결방법

평소에는 InteliJ를 이용해서 git push를 해서, git을 사용할때 인증을 할 필요가 없습니다. 하지만, 터미널에서 git push를 할때마다 username과 password를 입력해야 해서 번거로울때가 있습니다. 왜 자꾸 로그인 정보를 물어보나 찾아보았습니다. git push Username for 'https://github.com': powerku Password for 'https://powerku@github.com': 원인 제가 git clone 할때 HTTPS 방식으로 git clone을 해서 터미널에서 git push를 할 때 로그인 정보를 묻는 것이였습니다. 해결방법 git remote set-url origin "YOUR_GIT_URL" SSH 방식으로 git clone를 하..

• format_list_bulleted Develop/Git
• · 2023. 11. 17.
• textsms

Github SSH 키 만드는 방법

Github SSH 키 만들기 터미널을 이용해서 Github SSH 키를 만들 수 있습니다. 1. 터미널을 열기 ssh-keygen -t rsa -b 4096 -C "YOUR_EMAIL" 2. 키 복사하기 출력된 키를 복사합니다. cat .ssh/id_rsa.pub 3. GitHub > Setting > SSH and GPG keys 4. New SSH KEY > Key 입력 이후 SSH 방식으로 git clone을 하면 로그인 인증 과정 없이 바로 git push가 가능합니다. Git clone HTTPS 와 SSH 방식 차이점 git push 할때 자꾸 username, password 물을때 해결방법 평소에는 InteliJ를 이용해서 git push를 해서, git을 사용할때 인증을 할 필요가 없습..

• format_list_bulleted Develop/Git
• · 2023. 11. 17.
• textsms

자바스크립트 - 문자열로 변경하는 방법 4가지

자바스크립트에서 문자열로 변경하는 방법이 여러가지 있습니다. 그 중 4가지를 소개 시켜드리겠습니다. String() String 생성자를 이용해서 문자열 변경할 수 있습니다. const num = 123; const obj = { name: 'superman' }; const arr = ['superman', 'batman'] const str = String(num); // '123' const str2 = String(obj); // [object Object] const str3 = String(arr); // superman,batman .toString() toString 메서드를 이용해서 문자열로 변경할 수 있습니다. const num = 456; const obj = { name: 'supe..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 12.
• textsms

자바스크립트 - 문자열을 숫자로 변경하는 방법 parseInt, Number 차이점

자바스크립트에서 문자열을 숫자로 변경할 수 있습니다. parseInt 함수를 사용하거나, Number 생성자를 이용하는 방법이 있습니다. parseInt와 Number를 사용하면 간단하게 문자열을 숫자로 변경할 수 있지만, 몇 가지 차이점이 있기 때문에 주의하셔야 합니다. 기본사용법 const str = '100'; parseInt(str); // 100 Number(str); // 100 뒤에 문자가 들어간 숫자 const str2 = '100px'; parseInt(str2); // 100 Number(str2); // NaN 앞에 문자가 들어간 숫자 const str3 = '약300'; parseInt(str3) //NaN Number(str3) // NaN 공백이 들어간 숫자 const str4 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 11. 7.
• textsms

React Query - 비동기 상태 관리 라이브러리 알아보기

React Query란? React Query는 비동기 상태 관리 라이브러리입니다. React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다. React Query 장점 1. 적은 보일러 플레이트 코드 2. 캐싱 3. 중복 요청 방지 4. 오래된 데이터 업데이트 5. 로딩, 에러, 데이터 결과 처리가 쉽습니다. useQuery를 이용해서 직관적으로 사용할 수 있고, 보일러플레이트 코드 작아서 사용하기 간편합니다. 또, 캐시를 이용해서 데이터를 가지고 있어서 성능이 우수하고, 로딩 및 에러 처리 하기가 쉽습니다. 첫 번째 API 호출 시에 데이터를 캐시에 가지고 있습니다. 두 번째 동일한 API 호출 시 캐시에 가지고 있는 데이터를 즉시 반환합니다. 그 이후 다시 데이터를 조회한 ..

• format_list_bulleted Develop/React
• · 2023. 11. 7.
• textsms

Next.js 에서 Socket.io 이용해서 실시간 채팅 만들기

Socket.io 란? 웹 어플리케이션에서 양방향 통신을 가능하게 해주는 라이브러리 입니다. Socket.io 라이브러리와 Next.js 프레임 워크를 이용해서 실시간 채팅을 구현 하겠습니다. 실시간 채팅 만들기 1. Next.js 프로젝트 생성 npx create-next-app Next.js 설치하기 npx create-next-app Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 두가지가 있습니다. npx create-next-app을 이용해서 한 번에 자동으로 설치하는 방법과 next.js에 필요한 라이브러리를 하나 powerku.tistory.com 2. axios, socket.io, socket.io-client 라이브러리 설치 npm install axios..

• format_list_bulleted Develop/Next.js
• · 2023. 11. 4.
• textsms