Java에서의 this, Python에서의 self는 명확하게 현재 인스턴스 자신을 나타냅니다. 객체 내에서 this를 씀으로써 자신의 인스턴스 변수나 함수에 접근을 할수가 있습니다. 하지만 JavaScript에서의 this는 실행 컨텍스트에 따라 다르게 동작합니다. 함수가 어떻게 호출되었느냐에 따라 this의 값이 동적으로 결정됩니다. 또한 일반적인 함수에서 this는 호출한 객체를 나타내며, 화살표 함수에서는 함수가 생성될 때 상위 스코프의 this를 유지합니다. this란?? 함수가 호출되는 시점의 실행 컨텍스트(Execution Context)입니다. JavaScript의 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 입니다. 즉, 함수를 실행하는 환경(호출하는 방법, 환경)이..
구조 분해 할당(Destructuring Assignment)이란? 배열 또는 객체의 구조를 분해하여, 그 값(분해된 속성)을 개별 변수에 담는 표현식을 의미합니다. 배열 구조 분해 초기화된 배열에서 값을 가져오려면 해당 값이 있는 인덱스에 접근해 가져와야 사용을 할수 있습니다. const arr = [1, 2, 3, 4, 5]; const firstvalue = arr[0]; const secondvalue = arr[1]; const thirdvalue = arr[2]; console.log(firstvalue, secondvalue, thirdvalue); // 1 2 3 위의 방법을 간단하게 해결할수 있는 방법이 있습니다. 배열에서 변수명을 선언해준뒤 arr의 값을 차례대로 할당받으면 됩니다. c..
화살표 함수란? 화살표 함수는 함수표현식보다 단순하고 간결한 문법으로 함수를 만드는 것입니다. 화살표 함수는 아래 함수처럼 문법의 생김새를 차용하여 지어졌습니다. let func = (arg1,arg2, ...argN) => expression 위 함수를 좀더 알아보기 쉽게 하자면 let add = (a, b) => a + b; 이렇게 할수가 있습니다. 말로 풀어 설명하면 add를 호출하면 a와 b의 인자 값을 받아와서 더한뒤 그값을 리턴한다입니다. 즉, 위 화살표 함수는 아래의 let add = function(a, b){ return a + b; } 이 함수의 축약형이라고 볼수가 있습니다. 훨씬 간단하고 알아보기 쉽게 함수를 만든 것입니다. 화살표 함수의 선언방법 1. 매개 변수가 한 개인 경우에는,..
필요한것 node.js를 설치 합니다. node.js - 자바 스크립트를 활용한 서버 사이드(server-side) 백앤드 개발이 가능한 소프트웨어 플랫폼 visual studio code를 활용하기 때문에 설치합니다. 확장(extension)쪽에서 code runner를 입력한뒤 설치해 줍니다. 그런뒤 콘솔을 출력하고 싶다면 ctrl + alt + n을 해주시면 됩니다. JavaScript 기초 // 1 [문자열 결합] console.log(2023 + 12 + '월' + 29 + '일' + true + null + undefined); //2035월29일truenullundefined // 2 [나누기] console.log(7/2); // 3.5 // 3 [몫구하기] console.log(parse..
자바 스크립트로 CRUD구현하기
자바 스크립트를 사용해서 CRUD를 간단하게 구현할수 있다는걸 알고 제대로 이해하기 위해 정리했습니다. 첫번째로 파이어 베이스에 연동을 해야합니다. 파이어 베이스를 사용할것인데 파이어 베이스 연동하기 힘드신 분은 아래 링크 보고 오시면 이해하기 쉽습니다. 미니 프로젝트 배포하기[파이어 베이스(Firebase)](1) 미니 프로젝트 배포하기[파이어 베이스(Firebase)](1) 파이어 베이스 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중 할 수 있도록 도와주는 플 startcoriny.tistory.com 위 내용의 설정을 다 했다면 일단 가장먼저 데이터 입력을 해서 파이어 베이스에 데이터가 들어가는지 확인해..
공부하면서 fetch기능을 사용하여 어떤식으로 작동하는지는 배웠지만 fetch가 뭐야? 라고 물어봤을 때 머릿속에 정리된게 없어서 이렇게 기록으로 남기게 되었습니다. fetch fetch 자체는 단순히 네트워크를 통해 데이터를 요청하고 응답을 처리하는 데 사용되는 JavaScript API입니다. 또한 Promise를 반환하여, 이를 통해 비동기적으로 네트워크 요청을 다룰 수 있습니다. 그럼 여기서 모르는게 두가지가 나왔습니다. Promise는 무엇이며 비동기적은 어떤 것이냐? 우선 비동기적부터 알아보자면 실행의 방법은 동기적과 비동기적 있습니다. 동기적(synchronous) 가장 직관적이 예로 로그인을 하고자 할 때 아이디와 비밀번호를 적은다음 로그인 버튼을 눌렀을 때 새로고침과 같이 페이지가 재로딩..
간단하게 말하면 특정 이벤트의 기본 동작을 막는 JavaScript메서드 입니다. 예를 들어 a태그를 누르면 href를 통해 해당 링크로 이동을 하고 button을 누르면 해당 버튼의 type대로 동작을 합니다. 하지만 preventDefault() 메서드를 호출하면 이벤트가 발생했을 때 즉, a나 button을 클릭했을 때 수행되는 기본동작들을 중단 시킬수 있습니다. 보통 preventDefault()메서드는 기본 동작을 중지하고 추가적인 동작을 수행하고자 할때 유용 합니다. 더 직관적인 예로 form태그를 통해 button으로 제출을 하는 상황입니다. JavaScript코드 $('form').on('submit', function(e) { console.log('폼이 제출되었습니다.'); }); 위 ..