본문 바로가기
반응형

전체 글102

[React] history 사용하여 component 이동시, 화면은 바뀌지 않고 url만 변경될 때 해결법 현재 쇼핑몰을 만들고 있는데 문제가 생겼다. Header 부분에 있는 제품 카테고리를 선택하면, 그에 맞는 제품 렌더링 되어야 하는데.... url 만 변경되고 제품 리스트는 그대로 있는 것이 아닌가!.. 그래서 부랴부랴 구글에 검색해보니까 나와 유사한 상황이 많았다. 수정한 코드 1. Route 변경 [변경전 코드] 변경전에는 Route로 하드코딩을 다 박아뒀었다. (얼마나 무식한 방법이었던가 T_T) url로 parameter를 변경하기 위해서 다음과 같이 했었는데.. 해당 코드를 다음과 같이 바꾸었다. // App.js // =============== 변경전 코드 =============== [변경후 코드] // App.js // =============== 변경후 코드 ==============.. 2022. 4. 7.
[React] Functional Component 외부 함수 vs 내부 함수 코드를 짜다가 문득 궁금한게 생겼다. import React from 'react'; const ex1() {}// component 외부 함수 export default function Join() { const ex2() {}// component 내부 함수 return( ) } 하나의 컴포넌트안에서 함수를 쓸 수 있는 방법이 두 가지가 있는데, 하나는 외부에서 정의하는 것이고 또 다른 하나는 컴포넌트 내부에서 정의하는 것이다. 아직 리액트에 대한 기초가 부족한터라 혹시나 두 가지 차이점이 있나 찾아봤는데 결론은... 차이점이 없다. 단순히 가독성을 위해서 다르게 쓰일 수 있다고 한다. 참고 사이트 * React 컴포넌트 외부 vs 내부에 변수 및 함수 정의 차이 https://velog.io/@ad.. 2022. 4. 4.
[Javascript] 이벤트 처리 방법 onClick vs EventListener 차이점 Button을 클릭 후, 실행할 함수를 정의하기 위해선 onClick 혹은 eventListener로 함수를 정의할 수 있다. 그러면 다음 두가지의 차이점을 무엇일까? onClick의 경우는 하나의 콜백만 지정할 수 있으나, EventListener의 경우에는 여러 개의 콜백을 지정할 수 있다. onClick onClick 이벤트 핸들러를 두번 사용하게 되면 가장 나중에 선언한 이벤트 핸들러가 작동하게 된다. var btn = document.getElementById('btn'); btn.onclick = function() { alert('onclick-1'); } btn.onclick = function() { alert('onclick-2'); } 즉, 다음 코드를 실행할 경우, alert 창에 .. 2022. 4. 3.
[Javascript] 배열에서 특정 값 찾기 배열 속 값 탐색하기 indexOf let arr1 = ['apple', 'banana', 'peach', 'tomato']; console.log(arr1.indexOf('banana')); // 결과값: 2 console.log(arr1.indexOf('lemon')); // 결과값: -1 indexOf 메서드는 배열 안에서 특정 문자열에 해당하는 위치를 찾을 수 있다. 일치하면 값이 배열 속 문자열이 존재하는 위치를 나타내며, 일치하지 않으면 -1이 결과값으로 나타난다. find // 배열일 경우 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // callback(element, index, array) array.find(v => v > 5); // 6 fin.. 2022. 3. 31.
[MySQL] Inner Join을 사용한 데이터 추출 Inner Join 두 테이블이 일치하는 결과를 나타낸다. select [필드] from [기준테이블명] as a join [하고 싶은 테이블명] as b on b.[매핑필드] = a.[매핑필드]; select * from shoppingcart as cart join customer on customer.id = cart.customerId ; 다중 테이블 Inner Join Inner Join을 여러 Table과 매핑하고 싶다면 join 문장을 여러번 사용하면 된다. select cart.id, cart.customerId, customer.name, cart.productId, product.productName, product.imgUrl, cart.quantity from shoppingcart.. 2022. 3. 23.
[MySQL] Node js에서 SQL과 동적으로 매핑하는 방법 기본 하드코딩 var clubSn = req.params.clubSn; var sql = 'SELECT * FROM CLUB WHERE CLUB_SN = "' + clubSn + '";'; dbconn.query(sql, function(err, results, field){ .... }); 파라미터 1개일 때 매핑 var clubSn = req.params.clubSn; var sql = 'SELECT * FROM CLUB WHERE CLUB_SN = ?'; dbconn.query(sql, clubSn, function(err, results, field){ ... }); 파라미터 2개이상일 때 var clubSn = req.params.clubSn; var clubNm = req.params.club.. 2022. 3. 22.

티스토리툴바