본문 바로가기

자바스크립트11

Redux로 투두리스트 만들기 문제 해결 원장님께 질문을 통해 문제를 해결할 수 있었다. 1. checked가 true임에도 화면상에서는 체크가 해제된 이유 => 렌더링이 되지 않았기 때문! 렌더링은 state나 props가 변경될 때 수행이 되는데, checked는 단순 속성이 자동으로 변경된 것이기 때문에 렌더링이 이루어지지 않는 것으로 보인다. onChange를 통해 todo의 상태(isDone)가 변경될 때 렌더링이 되므로 그 때 checked 속성도 수동으로 변경시켜준다. 왼쪽의 기존 코드는 조건문을 통해 변경시켜주고 오른쪽의 수정된 코드는 todo.isDone의 상태를 통해 변경시켜준다. 2. 수정 시 내용 입력이 없으면 기존 내용이 사라지는 오류 이 부분은 set이되지 않아서 발생한 오류이다. 기존의 코드는 다음과 같고 40번째 줄.. 2022. 12. 20.
[Develog] 바닐라js로 게시글 수정 기능 구현 현재 로그인한 유저가 isOwner이면 수정, 삭제 버튼이 보이도록 한다. 이 때 isOwner은 autherService의 currentUser의 uid가 DB의 post 콜렉션의 creatorId와 일치하는지 여부로 판단할 수 있다. 이 때 수정 버튼을 누르게 되면 OnEditing 함수가 반응하게되는데 onEditing 함수가 반응하게되면 수정, 삭제 버튼이 안보이고 완료버튼이 나타나게 되고 기존의 텍스트 데이터들은 안보이고 input창, textarea창, 지역선택 창이 보이도록 한다. 또 제목란(input)에는 setAttribute 속성을 통해 기존 데이터가 보이도록 한다.(textarea는 html에서 적용함) 기존 데이터를 넣어주지 않고 공백으로 제출하게되면 제목 또는 내용이 사라지는 경우.. 2022. 11. 27.
[Develog] 파이어베이스 + 자바스크립트 / 바닐라js로 게시글 삭제 기능 구현 삭제 버튼의 속성에 name을 추가해서 id 값을 지정한다. 이 때의 id값은 DB에 저장되는 post 콜렉션의 문서 id이다. 삭제 버튼을 누르게 되면 event.target.name은 문서의 번호가 되게 된다. 따라서 doc에 id 값을 줄 수 있게 되고 해당 id의 문서를 지울 수 있도로 구현할 수 있다. 2022. 11. 27.
[Develog] 자바스크립트 새로 고침해도 로그인 유지하는 방법 localStorage와 sessionStorage 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. sessionStorage는 새로고침해도 데이터가 사라지지 않게하고 localStorage는 브라우저를 다시 실행하도 데이터가 사라지지 않고 남아있다. 쿠키를 사용해도 되는데 왜 웹 스토리지 객체를 사용할까? 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않기 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 부라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다. 쿠키와 또 다른 점은 서버가 HTTP .. 2022. 11. 27.
[자바스크립트] javascript sort() 메소드 사용방법 1. sort() 메소드란? Array.prototype.sort() sort()는 배열에서 사용하는 메소드이다. 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 일반적인 다른 언어의 sort()함수와는 다르게 자바스크립트는 원소들을 문자열로 만든 뒤 유니코드 값을 기준으로 정렬하기 때문에 sort()함수만 사용한다면 우리가 원하는 정렬이 나오지 않는다. 2. sort() 구문 arr.sort([compareFunction]) sort()의 구문은 다음과 같다. compareFunction을 생략하게 되면 각 요소를 문자열로 변환해 비교한다. 따라서 compareFunction을 생략하면 정렬은 다음과 같이 이루어진다. let arr = [1, 6, 4, 3, 100]; console.log.. 2022. 11. 17.
[자바스크립트] 정규 표현식 기초 자바스크립트 정규 표현식과 사용방법 1. 정규 표현식 만들기 const re = /a/ //a 한글자 const re2 = /abc/ //abc 세글자 정규 표현식은 다음과 같이 슬래시로 패턴을 감싸서 작성 const re = new RegExp('a') // == /a/ const re2 = new RegExp('abc') // == /abc/ 이는 RegExp 생성자 함수를 사용해서 다음과 같이 표현할 수 있다. 바뀔 수 있는 패턴이나, 사용자 입력과 같이 외부 출처에서 가져오는 패턴의 경우 생성자 함수를 사용하면 좋다. (Using the constructor function provides runtime compilation of the regular expression) 2. 정규 표현식 사용법.. 2022. 11. 15.
[자바스크립트] 배열에서 최대 값 구하는 방법 펼침 연산자, 펼침 구문, spread syntax(...)를 사용한다. 자바스크립트에서 펼침연산자란? 배열에 포함된 항목을 펼쳐주는 역할을 한다. 펼침 연산자 단독으로는 쓰일 수 없고 '...arr'와 같이 펼침연산자 뒤에 배열명이 온다. 마침표 세개(...)로 표시한다. 일반 변수에 담으면 오류가 나기 때문에 객체나 배열에 담아줘야 한다. let arr1 = [1,2,3] let error = ...arr1 // 블록 범위 변수를 다시 선언할 수 없다는 오류가 발생 let correct = [...arr1] // 가능 자바스크립트 배열에서 최대값 구하는 방법 배열은 Math.max() 메서드가 적용되지 않기 때문에 펼침 연산자를 사용해야 한다. let arr = [1,2,3] //arr에서 최대 값을.. 2022. 11. 14.
[자바스크립트] filter(), reduce(), fill(), map() 배열 메서드 정리 1. filter() 2. reduce() 3. fill() 4. map() 1. filter() Array.prototype.filter() filter() 메서드는 배열 각 요소들을 filter 메서드 내부에 기입된 함수에 대입하여 조건에 부합하는 함수만 거르는 기능을 한다. const word = ['sparay', 'limit','elite','exuberant','destruction','present']; const result = words.filter(word=>word.length>6); //words배열에서 6글자 이상인 글자들만 추출하여 배열로 반환 console.log(result); //["exucerant","destruction","present"] ▶프로그래.. 2022. 11. 11.
[자바스크립트] 기본 자료형, 형변환 자바스크립트의 기본 자료형 정리 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 여덟 가지 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떠한 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다. //no error let message = "hello"; message = 123456; 1. 숫자형 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용, 정수의 한계는 ±2의 53승이다. 일반적인 숫자 외에 Infinity, -Infinity, NaN 같은 특수 숫자 값이 포함된다. Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대를 나타내고 NaN은 계산 중에 에러가 발생했다는 것을 나타낸다.. 2022. 11. 9.

티스토리툴바