본문 바로가기

Front-End78

[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.
[mongoDB] 몽고DB document sort(정렬) db.컬렉션명.find().sort(객체 2021. 3. 6.
[JavaScript] 동적으로 input text 추가하기 DOM 사용하기 form태그를 사용하다보면 input type="text"를 많이 사용하게 된다. 그런데 필요에 따라서 text박스를 넣고 빼고를 하고싶은데 그것을 만들줄 몰라서 한참을 생각하고 고민했다. 아주 간단한 예시를 들것이고 그것에 세세하게 설명을 할 것이니, 필요한 부분들만 가져가시면 될 듯합니다. DOM에 대한 설명이 궁금하신분들은 아래 링크를 참조하세요. meanbymin.tistory.com/61?category=923684 [JavaScript] DOM 문서 객체 모델 문서 객체 모델(Document Object Model) Html문서나 XML문서 등을 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. meanbymin... 2021. 3. 4.