JavaScript34

• 

  [Basic] for …in 반복문을 처리하는 배열과 객체 (obj & array for looping) The developer say code. 배열인 경우는 index를 출력한다. 객체인 경우는 key 값을 순서대로 출력한다. 객체를 만약 {a:1, c:2, b:3} 이렇게 입력했으면, a,c,b 순서로 출력을 행한다. 이런 특성을 Enumerable 이라고 한다고 한다. Enumerable 이라는 것 자체가 순서를 열거할 수 있는 것에 대한 것을 말한다. 사실 find나 map, filter 같은 것도 모두 동일한 특성을 갖고 있다. (추가적인 자료는 밑에 참조 경로를 참조) index 나 key를 string 으로 받기 때문에 index가 있거나, key가 있을 때, 예를 들어, if(Array.key=== "a") { /* codes */} 같은 방식으로 실행이 가능 할 것 같다. input co.. Javascript/Basic 2021. 6. 23.

• 

  [JavaScript] 자바스크립트 배열 추가, 삭제 방법 (push, pop, splice) [펌] 자바스크립트 배열 추가, 삭제 함수 배열 추가 : Array.push(), Array.unshift(), Array.splice() 배열 삭제 : Array.pop(), Array.shift(), Array.splice() 배열 요소를 추가하는 방법 var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'c', 'd'] arr.push('d'); // 배열의 끝에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['d', 'a', 'b', 'c'] arr.unshift('d'); // 배열의 앞쪽에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'd', 'c'] arr.splice(2, 0, 'd.. Javascript/Basic 2021. 5. 28.

• 

  [javascript] try..catch & 에러 핸들링 try { // 코드... } catch (err) { // 에러 핸들링 } finally { // 에러 발생 여부와 상관없이 try/catch 이후에 실행됨 } 위와 같은 방식으로 작성한다. 어떤 코드가 에러가 발생할 수 있기 때문에 그에 대한 대비책으로 코드를 작성해둘 수 있다. useEffect 안에서 무조건 실행되지 않는 구문이 있을 수 있다. 그런 경우에 catch 문을 활용해서 로그인 화면으로 이동시키거나, 특정 String으로 적용시키는 게 좋을 수 있다. 코드라는 게 완벽할 수 없다. 어떤 상황에 에러가 발생할지 예상은 하지만 모든 예상이 불가능하다. 그렇기 때문에 위 코드를 작성하는 것이다. 스크립트가 중단되는 것을 막는 것이다. 과용하면 코드가 복잡해질 가능성이 매우 크다. 중요한 핵심.. Javascript/Basic 2021. 5. 27.

• 

  [Basic] 특정 기간 내 배너 띄우기, 현재 시각 확인 하기 배경 홈페이지가 업데이트되면서 리뉴얼을 시작하게 되었다. 이에 따라 배너를 특정 기간에 띄워야 할 필요가 있었다. 이를 해결하기 위해서 코드를 찾아보았었다. 코드 const startDate = new Date ("2021-05-24T00:00:00z"); // 뒤에 z를 안붙이면 IE10 > 일 경우, 에러. 꼭 붙이자 const endDate = new Date ("2021-05-31T23:59:59z"); const now = new Date(); // 현재 날짜 확인 const readyStartDate = new Date ("2021-06-01T00:00:00z"); const readyEndDate = new Date ("2021-06-01T10:00:00z"); if(endDate > now.. Javascript/Basic 2021. 5. 21.

• 

  [Basic] 깊은 복사, 얕은 복사 shallow copy, deep copy, slice, JSON.parse, JSON.stringify 개요 자바스크립트는 근본적으로 깊은 복사가 불가능하다. 이를 해결하기 위해 아래와 같은 짓을 한다. 기초적 방법 let tempJson = JSON.parse(JSON.stringify(json)); 위 방법이 깊은 복사를 하기 위한 가장 기초적인 방법이다. 배열은 slice로도 깊은 복사가 가능하다. (1 depth 배열인 경우) 그러나, 객체인 경우는 위 방식을 택하거나, 현재 기준으로 2가지 라이브러리를 사용하는 방법이 있다. Lodash 와 Ramda 깊은 복사를 할 수 없어서 만들어진 라이브러리인데, 기본적으로 처리하는 방식은 같은 것으로 보인다. (자바스크립트의 언어적 특성 때문에 이런 돌려차리를 해야 한다는 게 우습긴하다.) 자세한 내용은 아래 출처를 이용합시다. 출처: https://bba.. Javascript/Basic 2021. 5. 20.

• 

  [javascript] reference 사이트 MDN developer.mozilla.org/ko/docs/Web/JavaScript Jscript docs.microsoft.com/ko-kr/previous-versions/visualstudio/visual-studio-2010/72bd815a(v=vs.100) Javascript 사전 (생활코딩) www.opentutorials.org/course/50 Javascript/Basic 2021. 4. 9.

• 

  [javascript] 프로토타입으로 생긴 특징들.. (prototype based programming) 나중에 이해해두어야겠다.... 일단 자료는 퍼왔다. 자바스크립트는 일단 이 개념부터 이해할 수 있어야 편할 것 같다. 각종 생기는 effect가 이때문에 생기는 경우가 많다. 프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입기반 프로그래밍은 클래스리스(class-less), 프로토타입 지향(prototype-oriented) 혹은 인스턴스 기반(instance-based) 프로그래밍이라고도 한다. 프로토타입 기반 언어의 가장 원조격인 프로그래밍 언어인 셀프는 데이비드 엉거와 랜덜 스미스가 개발했다. 클래스리스 .. Javascript/Basic 2021. 4. 9.

• 

  [javascript] class 문법 - super() 정의 아래 내용을 잘 읽으면 알 수 있다. super() 문법은 상위 클래스를 참조할 수 있게 하는 것이다. 여기서 this에 대한 궁금증도 생길 수 있는데, this는 작성하는 동안 구조의 맥락에 맞추어져서 상위 개체나, 생성자, 소속된 것에 대해 인스턴스화하는 구문이다. this를 통해 instance화 하고, 클래스의 구조를 엮어서 사용하는 것이다. (완전 정확하지는 않을 것 같다. javascript는 prototype언어이기 때문에 좀 더 정확히 알아볼 필요가 있다. 현재 나의 이해가 여기까지 닿을 뿐이다.) class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.width = width.. Javascript/Basic 2021. 4. 7.

• 

  [Dev] CallBack 콜백함수 콜백함수란 이름 그대로 나중에 호출되는 함수를 말한다. 콜백함수라고 해서 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다. 콜백함수도 일반적인 자바스크립트 함수일 뿐이다. 예를 들어, 이벤트 핸들러 같은 것을 콜백함수라고 할 수 있다. CallBack을 활용한 비동기적 프로그래밍 이 부분이 가장 큰 장점이다. 그리고 사실, 이 부분 때문에 사용하는 것이다. 1. 사용자 이벤트 처리 2. 네트워크 응답 처리 - A 응답이 있을 때, 그 다음 처리를 해야할 함수가 있을 때 사용된다. 3. 파일을 읽고 쓰는 등의 파일 시스템 작업 4. 의도적으로 시간 지연을 사용하는 기능 (알람 등) 대표적으로, setTimeout, setInterval, clearInterval 함수 같은 것이 있다. 출처 :.. Javascript/Basic 2021. 3. 29.

• 

  [For] 반복문 기초 (forEach/ ) forEach forEach는 가장 기본적인 Loop 메소드이다. 구동방식은 array의 map 함수와 같다. 배열을 순차적으로 i[0] ~ i[length - 1] 까지 확인하는 것이 가능하다. 작동 방식이 완전히 동일하다. // for 구문 버전 - 쓰지말자 const arr = [3, 9, 4, 2, 7, 6]; for (let i = 0; i { if (n % 2 == 0) { console.log(n); } }); 출처 https://b.. Javascript/For 2021. 3. 25.

• 

  [Array] 비구조화 구문 할당 (기본문법 / 추가문법 / 주의사항) 기본 문법 [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 console.log(a2); // 2 console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9] 좌항이 호출될 변수명 집합, 우항이 할당될 값이다. 좌항의 각 요소에는 같은 index가 아니라 value가 할당된다. 또한 전개 연산자( ... )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용할 수 있습니다. 나머지 값들은 배열로 ...rest_a 부분에 할당된다. 객체의 경우도 동일하다. 배열 대신 객체로 rest_a 부분에 할당된다. 추가 문법 우항의 key값에 변수명으로 사용 불가능한 문자열이 있을경우 아래와 같은.. Javascript/Array 2021. 3. 22.

• 

  [Array] 배열 다루기 (Concat/ Join/ Filter/ Find/ Map&forEach, Reduce, Slice) 스스로 배열에 대한 기본학습이 부족한 듯 하여, 추가적인 학습을 하고 기록을 시작함. 2021.03.18 1. concat const items = [1,2]; // output [1,2] const newItems = items.concat(3,[4],[[5]]); // output [1,2,3,4,[5]] concat 요약 사용시기 새 배열에 Element 추가 원본 조작 여부 X Return O 특징 parameter 1번 분해 주의사항 배열을 추가하려면, [[element]] 형태로 감싸야 함. Concat은 원본을 조작하지 않는다. Return 있음. 입력되는 parameter를 1번 분해한다. (*코드에서 [4] item이 배열이 아니라, element로 저장되는 것을 보면 알 수 있다. 2... Javascript/Array 2021. 3. 18.