복사사용 하기 데이터 원본을 그대로 수정한다면 의도치 않은 사이드 이펙트를 방지하기위해서 데이터의 원본을 바로 수정하것은 지양하는 것이 좋습니다. 복사를 하여 카피본을 만들어서 사용하는 습관을 가지는것이 좋습니다. propery 삭제 방법 (구조분해 할당, delete 메소드) 구조 분해 할당을 사용하거나 자바스크립트에서 지원하는 메소드 중에 delete 를 사용하면 객체 내 원하는 propery (key, value)를 삭제시킬수 있습니다. delete 사용하면 원본 객체의 데이터가 바뀌게 되어 복사후 사용하는것이 데이터 관리에 좋다고 생각합니다. 구조 분해 할당 delete 메소드

Array.filter() JavaScript의 배열 메서드중에 filter를 이용하면 지정한조건을 배열의 길이 만큼 반복합니다. 원본 배열을 해치지 않고 새로운 배열을 만들어주는 메서드입니다. filter 메서드는 자주 사용하는 메서드 중에 하나라고 생각됩니다. filter(Boolean) 을 이용한 falsy한 값 필터 filter메서드 콜백함수 안에 Boolean을 넣는다면 truthy한 값 만을 반환합니다. truthy : 문자, 객체, 숫자, true, 배열 falsy : null, 0, false, undefined truthy한 값만을 반환 할 수 있습니다

Intersection Observer의 사용법 1. new IntersectionObserver() 생성 >new IntersectionObserver()를 통해 생성한 인스턴스 io는 관찰자를 초기화하고 관찰 대상 target을 지정합니다. callback : 조건이 되면 실행되는 콜백함수 option : 관찰자 옵션 target : 관찰할 대상 등록 2. option 설정 > new IntersectionObserver에 들어갈 인자중 하나인 option은 교차의 기준을 정합니다. root : 교차되는기준이 되는 요소입니다. 기본값은 viewport 입니다. rootMargin : 일반 margin과 동일하게 적용할 수 있고 -값도 가능합니다. threshold : 엘리먼트의 가시성 여부를 판단하기 위한 값으로 0~1값이

이벤트 루프 > 이벤트 루프는 브라우저내에 내장된 기능입니다. Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인합니다. > >만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행합니다. Call Stack (호출 스택) 함수가 호출되면 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행합니다. 자바스크립트는 하나의 Call Stack을 사용하기 때문에 해당 task가 종료하기 전까지는 다른 task를 작업하지 못합니다. Event Queue(Task Queue) 비동기 처리 함수의 콜백 함수, 비동기

Promis Promis는 비동기처리를 수행할 콜백 함수를 인수로 전달 받고 resolve, reject 두 함수를 인수로 전달 받는다. 후속처리 메서드 .then : 비동기 처리가 성공했을 때 호출 .catch : 비동기 처리가 실패 했을때 호출 .finally : 성공,실패 여부 없이 무조건 한 번 호출 (공통적으로 처리 할 내용이 있을 때 유용하다.)

원시타입과 객체타입 > 자바스크립트는 7가지 데이터 타입을 제공한다. 크게 원시타입, 객체타입으로 구분한다. 원시타입(primitive type) 숫자 문자열 불리언 null undefined 심벌 객체타입(object/reference type) 객체 원시 타입 원시타입의 값은 변경 불가능한 값이다. 원시 값을 변수에 할당하면 변수에 확보된 메모리공간에는 실제 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이다. 객체 타입 객체(참조) 타입의 값은 변경 가능한 값이다. 객체를 변수에 할당하면 변수에 확보된 메모리공간에는 참조 값이 저장된다. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한

데이터 타입 >자바스크립트의 모든 값은 데이터 타입을 가지고 있습니다. ES6 기준으로 7개의 데이터 타입을 가지고 있고 크게 2가지로 나눌 수 있습니다. 1. 원시 타입 (기본형, Primitive Type) 숫자 타입 (number) : 숫자 문자열 타입 (string) : 문자열 불리언 타입 (boolean) : true / fulse undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null타입 : 값이 없다는 것을 의도적으로 사용하는 값 symbol 타입 : ES6에서 추가된 7번째 타입 2 객체 타입 (참조형, Reference Type) 객체 타입 : 객체, 함수, 배열, 정규표현식 등 숫자 타입 (number) 자바스크립트의 숫자타입은 모든 수를 실수로 처리한다. 정수로 표현을 해도 사실은 실수라는 것! 특별한 세 가지 값도 가지고 있다.

fetch() 👨‍💻 fetch함수는 데이터를 전달 할 때 사용하는 javascript 내장함수입니다! fetch에서 API 주소를 받고 then은 promise 를 처리 할 때 사용되는 메서드다. promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. 1. method fetch 함수에서 method는 데이터를 전달하는 방식을 정하는 메서드입니다. "GET" , "POST" 두 가지 방법이 있습니다. 기본값은 "GET" 상태입니다. GET 메서드는 데이터를 가져올 때만 사용합니다. POST 메서드는 서버로 데이터를 전송합니다. 2. body 프론트엔드에서 method를 POST 방식으로 데이터를 전달해야 한다면 fetch의 두 번째 인자에 method 와 body**를 입력합니다. *method

문제4 👨‍💻 > 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부) ex) 예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문 num = 1221 return true => 뒤집은 모양이 1221 이기 때문 num = -121 return false => 뒤집은 모양이 121- 이기 때문 num = 10 return false => 뒤집은 모양이 01 이기 때문 해결방법 >숫자를 뒤집기위해 String 타입으로 변환 > 스프레드 문법을 사용해 배열로 변환 > a.reverse() : 순서가 반전된 배열을 반환한다. > arr.join([separator]) 반전된 배열 result 변수에 result.join("")을 하게되면 "1221

문제2 👨‍💻 > reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x : 숫자 return: 뒤집어진 숫자를 반환! ex) 예들 들어, x: 1234 return: 4321 x: -1234 return: -4321 x: 1230 return: 321 해결방법 >x가 음수가 아닐때 --> 양수일때 > Math.abs() : 주어진 숫자의 절대값을 반환하는 메서드 x의 절대값을 문자열로 바꾸기 위해 String 메서드 사용 문자열로 바꾸는 이유는 주어진 인자 숫자위치를 바꾸기위해서다. reverse 메서드를 사용하기위해선 배열이어야 하기때문에 이전에 미리 []감싸며 각각의 인덱스로 만들기위해 스프레드 문법[...]을 사용했다. > a.reverse() : 순서가 반전된 배열을 반환한다. > arr.join([separator]) : 배

문제1 > twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums : 숫자 배열 target : 두 수를 더해서 나올 수 있는 합계 return : 두 수의 index를 가진 숫자 배열 ex) nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 해결방법 >for문을 두번 사용한 이유는 배열안의 두 숫자를 비교하기 위해서다. if문에서 nums[i],nums[j] 를 더해 target 인자와 같은 숫자가 나온다면 return으로 배열의 index를 구할 수 있다.[i,j]

React👨‍💻 프론트엔드 기술에서 빠질 수 없는 기술 React 를 익히는 첫 날이다! React는 Javascript 사용자 인터페이스 (UI) 라이브러리 라고 보면 된다. 프레임워크와 착각 할 수 있지만 엄연히 다르다. > 프레임워크는 다른사람들이 만들어둔 틀 안에서 작업을 하는것 ex) Vue,Angular > 라이브러리는 내 작업에 다른사람이 만들어둔 코드를 가져와 사용하는것 ex)React 라이브러리인 React는 기술적인 기능을 추가하기 위해 third-party를 설치하고 React-Router 등 여러 기술을 사용 할 수 있다. Node & NPM Node.js Node.js는 자바스크립트가 브라우저 환경 밖(ex:서버)에서도 작업 할 수 있는 환경이다. 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설

최대값 구하기 👨‍💻 예시문제는 배열안의 "string" 중에서 가장 긴 값을 구하는 것! 사용한 메서드 Array 메서드 중 , Math의 max 메서드를 사용하고indexOf 로 최대값의 배열을 찾았습니다. map() > map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. indexOf() >문자열 내에 있는 문자들은 왼쪽에서 오른쪽 방향으로 순번이 매겨집니다. 제일 처음 문자는 0번째 순번(index)이며, stringName 문자열의 마지막 문자의 순번 stringName.length -1 입니다. indexOf 메서드는 대소문자를 구분합니다. Math.max() >Math.max()함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다. 스프레드 연산자 ... >스프레드 연산자를...사용하면 배열,

Instagram 인스타그램 클론코딩으로 실질적인것을 많이 접했다고 느낀다. DOM으로 HTML과 Javascript를 연결하여 동적인 효과를 부여 할 수 있었다. 로그인 화면 구성이다. querySelector() 우선 Javascript에서 HTML을 가져오는 것 부터 시작된다. 그 때 사용 되는 메서드인 querySelector()이다. 불러오기 위해선 유효한 CSS 선택자여야한다. > const nam

인스타그램 댓글기능을 구현하기위해* 세가지 메서드*를 사용했다. createElement() Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환한다. 이렇게 자바스크립트에서 p태그를 만들 수 있다. 하지만 태그를 만들었다고 해도 할 일이 남아있습니다. 지금은 태그만 만들었을 뿐 어느 위치에 둘지, 태그 속에 어떤 내용을 넣을지 안정했기 때문이다. appendChild() Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. appendChild()의 인자속에 추가하고 싶은 변수를 넣고. appendChild()앞에 자식으로 속하고 싶은 위치를 넣는다. innerTe

arrow function 화살표 함수(arrow)표현은 전통적인 함수표현(function)의 간편한 표현법이다. 이름이 없는 함수 이름이 있는 함수 인자를 받는 경우 기존의 쓰던 함수를 사용하던 방식 처럼 인자를 넣을 수도 있다. 인자가 하나라면 소괄호 생략이 가능하다. 인자가 두 개 이상이라면 생략 할 수 없다. return 함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호가 생략가능하다.