본문 바로가기

전체 글90

[React] ref: Dom에 이름 달기 (useRef) 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업을 할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트에서 DOM에 이름을 다는 것을 ref(reference의 줄임말) 이라고 한다. ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접적으로 건드려야 할 때'입니다. JavaScript 를 사용할 때에는, 우리가 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트에서는 ref로 사용하는데 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수를 사용합니다. In.. 2021. 5. 13.
[JavaScript] 자식 노드 모두 삭제하기 부모노드에서 자식노드를 모두 지우고 싶은데 잘 되지 않을때가 많다. 아래 예시를 보자 const 부모노드 = document.querySelector( ".부모노드클래스이름" ); while (부모노드.hasChildNodes()) {// 부모노드가 자식이 있는지 여부를 알아낸다 부모노드.removeChild( 부모노드.firstChild ); } 원래 removeChild 메서드는 removeChild(지울 자식노드)를 적어줘야하는데, 위의 코드는 부모노드의 첫번째 자식을 계속해서 하나씩 반복문으로 지우는 방식이다. 간단하게 사용할 수 있으니 편하게 사용하면 될 듯하다. 2021. 4. 15.
[JavaScript] for문 안에서 Ajax 돌리기 이번에 코드를 짜면서 처음으로 Jquery의 힘을 빌렸는데 사용한 부분이 바로 for문 안에서 Ajax를 사용할 때이다. 내가 짜고 있는 정확한 코드를 보여줄수는 없지만, 글자로 표현하자면 바닐라 자바스크립트로 코드를 짜고 있었고, ajax를 이용하여 배열에 값들을 넣어놓고 그 배열을 재사용하여 for문을 돌려서 ajax로 다시 한 번 값을 받아오는 것이였다. Promise의 방법도 사용해보고, fetch를 사용해보았지만 바닐라 자바스크립트로 해결하지 못하였다. 혹시나 이 글을 보시고 바닐라 자바스크립트로 for문 속에서 ajax를 사용하는 방법을 아시는 분은 댓글을 달아주시면 정말 감사하겠습니다. 자 이제 알아보도록 하자. for (let i = 0; i < review.length; i++) { (f.. 2021. 4. 14.
[CSS] 마우스 클릭 금지, 안되게 막기 jquery나 javascript로 막을 수도 있지만 가장 간단하게 css로 막는 방법입니다. 작동안함 2021. 4. 12.
[JavaScript] form태그 action 경로 여러개 만들기 요즘 PHP를 많이 사용하고 있는데, form태그를 사용하다가 하나의 form으로 여러 경로로 보낼 수 있으면 좋지않나? 라는 생각을 가지고, 공부하게 되었다. 예시) 전송1 버튼을 눌리면 form태그에 적은 action에 해당되는 경로로 정보가 보내지고, 전송2 버튼을 눌리면 submit2함수가 호출되면서 form의 action 주소가 두번째로 보낼 경로로 바뀌어서 보내지게 된다. 2021. 4. 12.
[PHP] PHP의 변수 PHP 변수 $변수이름; // 변수 선언 $변수이름 = 값; // 변수의 초기화 PHP 변수의 종류 1. 지역 변수 함수 내부에서 선언된 변수는 오직 함수 내에서만 사용할 수 있습니다. 함수 내부에서 선언된 변수는 함수의 호출이 종료되면 메모리에서 제거됩니다. { $num = 10;// 지역변수 } echo($num);// 사용 x 2. 전역 변수 함수 밖에서 선언된 변수는 함수 밖에서만 사용할 수 있습니다. 함수 밖에서 선언된 변수를 함수 내부에서 사용하려면 global 키워드를 함께 사용해야 합니다. $num = 10; { global $num; echo($num); } 3. 정적 변수 함수 내부에서 static 키워드로 선언된 변수를 의미합니다. 함수 내부에서 선언된 정적 변수는 함수의 호출이 종료.. 2021. 4. 11.
[MySQL] 중복데이터 하나만 남기고 삭제하기. 문법) DELETE a FROM [테이블명] a, [테이블명] b WHERE a.[순서값을 가진 컬럼명] > b.[순서값을 가진 컬럼명] AND a.[중복값을 비교할 컬럼명] = b.[중복값을 비교할 컬럼명]; a와 b는 임의로 주는 값이기 때문에 어떠한 문자열을 넣어도 상관없습니다. 테이블명은 데이터를 가지고 있는 TABLE의 이름을 써주시면되는데 예시로 test라는 테이블을 사용했습니다. 순서값을 가진 컬럼명은 보통 AUTO_INCREMENT(자동 증가)하는 숫자 데이터가 담긴 컬럼입니다. 저는 보통 idx(index의 약자) 컬럼을 AUTO_INCREMENT 컬럼으로 설정해놓습니다.(개취입니다) 중복값을 비교할 컬럼은 데이터를 가지고 있는 컬럼명을 써주시면 됩니다. 여기 예시로는 value라는 컬럼.. 2021. 4. 2.
[JavaScript] reduce 함수 const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const val = 0; const total = number.reduce((val1, val2, idx, arr) => { return val1 + val2; }, val); console.log(total); reduce() val1 : reduce() 함수의 두번째 파라미터 val의 값이 들어온다. val2 : number 배열의 첫번째 데이터 ' 1 ' 이 들어온다. idx : reduce() 함수의 두번째 파라미터인 val(두번째 파라미터)을 사용했는지의 여부(파라미터가 있는지 없는지)에 따라 값이 달라진다. val을 사용했다면 0부터 시작하고, 사용하지 않았다면 1부터 시작한다. arr : reduce() .. 2021. 3. 29.
[React] React에서 SASS, SCSS 사용하기 Sass는 CSS pre-processor(전처리기)로써 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줍니다. https://sass-guidelin.es/ko/ Sass Guidelines — Korean translation 분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드. sass-guidelin.es sass설치 $ yarn add node-sass 색상관련 git yeun.github.io/open-color/ Open Color Color scheme for UI design yeun.github.io @mixin name {} 여러 중복되는 코드를 방지하기 위해 써주는 문법 중 하나. @m.. 2021. 3. 27.