본문 바로가기

전체 글

 (61)
반응형 데이터 도구 import { reactive, toRefs } from 'vue'const state = reactive({ count: 0, name: '홍길동',})// 구조 분해 할당 시 반응성을 유지하고 싶다면const { count, name } = toRefs(state)count.value++ // state.count가 함께 변경됨vue3에서는 반응형 데이터를 다루는 것이 중요하다. 그렇다면 반응형 데이터라는 게 뭘까?vue에서는 데이터가 바뀌면 가상 DOM에서 먼저 변화를 감지하고 필요한 부분만 실제 DOM으로렌더링을 한다. 이 때 데이터가 바뀌는 것을 감지하는 것. 이 때 쓰는 것이 반응형 데이터 도구들이다만약에 vue에서 안에서 let num = 1이라 선언하고 num = 2라고 해도 이게 ..
196. Delete Duplicate Emails(LeetCode) Table: Person+-------------+---------+| Column Name | Type |+-------------+---------+| id | int || email | varchar |+-------------+---------+id is the primary key (column with unique values) for this table.Each row of this table contains an email. The emails will not contain uppercase letters. Write a solution to delete all duplicate emails, keeping only one unique email wi..
Import??? export?? 가 뭘까? 코딩을 공부하다보면 수많은 코드들에서 Import, export가 정말 많이 나온다. 이것들이 무엇이고 어떻게 활용할 수 있는지 정리해보자 Import한 마디로 가져온다는 거다. 무엇을? export 한 것을. Export한 마디로 내보낸다는 거다. 무엇을? 내가 내보내고 싶은 것을. 코드로 간단하게 보자 //Math.jsexport default function add(a, b) { return a + b;}Math.js에서 내가 add라는 함수를 다른 곳에서 사용하고 싶을 때 이렇게 export를 사용하면 된다. 여기서 default가 붙어 있는데 이것은 이 파일에서 기본으로 export하고 싶은 값을 사용하고 싶을 때 사용한다. export default는 파일 당 하나의 값만 보낼 수 있다.  ..
명령형 프로그래밍?? 선언형 프로그래밍??이 뭘까? 어제 리액트를 공부하면서 이런 말이 나왔다. 리액트는 선언형으로 작성해야하고 자바스크립트는 명령형으로 작성하라고 한다. ???? 이게 도대체 무슨 말인가? 싶어서 이제 검색을 해봤고 그에 관한 것을 정리하고자 한다. 명령형 프로그래밍(Imperative)어떻게(How) 할 것인가에 집중하여야 한다.개발자가 단계별로 명령을 내려서 원하는 결과를 얻는다.보통 반복문, 조건문, 직접적인 DOM 조작 등이 포함된다.const button = document.createElement("button");button.textContent = "클릭!";button.addEventListener("click", () => { alert("버튼 클릭됨!");});document.body.appendChild(butto..
조건에 맞는 사용자 정보 조회하기(SQL) [프로그래머스] SELECT A.USER_ID, A.NICKNAME, CONCAT(A.CITY, " ", A.STREET_ADDRESS1, " ", A.STREET_ADDRESS2) AS '전체주소', CONCAT(SUBSTR(A.TLNO, 1, 3), '-', SUBSTR(A.TLNO, 4, 4), '-', SUBSTR(A.TLNO, 8, 4)) AS '전화번호'FROM USED_GOODS_USER ALEFT OUTER JOIN USED_GOODS_BOARD B ON B.WRITER_ID = A.USER_IDGROUP BY A.USER_IDHAVING COUNT(B.BOARD_ID) >= 3ORDER BY A.USER_ID DESC 여기서 SUBSTR을 쓰니 계속 틀렸다고 한다. 그래서..
Array.includes에 대하여 const isAdmin = admins.includes(user.uid);공부를 하다가 이런 코드를 만났다.includes 이게 뭐하는 함수인지 전혀 몰랐다. 그리곤 아..뭐 admins에 user.uid를 추가하는 함수인가 보다 하고 넘어갔는데다음날 다시 이제 공부를 하는데 이 부분을 잘못하고 이해하고 있어서 살짝 헤맸다.그래서 한 번 정리하고자 한다. includes는 자바스크립트에서 데이터형태가 배열일 때 사용할 수 있는 함수이다.includes( )는 배열(Array)에서 특정 값이 존재하는지 확인하는 메서드이다. const arr = ['apple', 'banana', 'cherry'];console.log(arr.includes('banana')); // trueconsole.log(arr...
onClick={login}, onClick={login()}의 차이 리액트를 공부하다보면 항상이 이 부분이 헷갈렸고 이번에 제대로 한 번 집고 넘어가보고자 한다.보면 어떨때는 onClick={login} 이렇게 참조값만 전달하는 경우가 있고 어떤 경우는 onClick={login()}이렇게 함수를 전달해 놓은 경우가 있다. 이 둘의 차이점이 뭘까? 그리고 어느 경우 어떨 때 구분해서 사용해야할까? onClick={login}의 경우login은 함수의 참조를 전달하는 거다. React는 이 login 함수를 이벤트 핸들러로 등록해두고, 버튼이 클릭될 때 login 함수를 실행한다즉, 버튼을 클릭할 때만 login 함수가 실행된다.onClick={login()}의 경우login()은 함수를 실행한 결과값을 전달한다.만약 login 함수가 비동기 함수라서 Promise를 반환..
임시 테이블과 임시 SEQ_NO 만드는 법(MySQL) 테스트를 위해서 임시적인 데이터와 SEQ_NO를 만들어서 테스트해야하는 경우가 있었다. 그래서 임시 테이블과 임시 SEQ_NO를 생성하는 방법을 알아보자.  물론 여러가지 방법이 있겠지만 내가 주로 사용했던 방법을 기록하고자 한다. CREATE TEMPORARY TABLE temp_table ( id INT PRIMARY KEY, name VARCHAR(50), created_at DATETIME);INSERT INTO temp_table (id, name, created_at)VALUES (3, '뚱이', NOW()), (4, '스폰지밥', NOW()), (5, '징징이', NOW()), (6, '다람이', NOW()), (7, '집게사장', NOW()), ..

티스토리툴바