본문 바로가기

728x90
반응형

전체 글

(269)
[Git] repository(원격 저장소) 주소 변경 기존 원격 저장소 주소를 변경하기 위해서는  git remote set-url  명령어를 사용하면 된다. 변경하기 전 현재 local의 git 저장소가 어느 원격 저장소와 연결되어 있는지 보고 싶다면 아래와 같이  git remote -v  명령어를 입력해 확인할 수 있다. git remote -v# origin https://github.com/id/repository.git (fetch)# origin https://github.com/id/repository.git (push)   확인 후 git remote set-url origin 를 입력하면 원격 저장소 주소가 변경된다. git remote set-url origin https://github.com/id/new-repository.git
[Javascript] JSON 다루기 이번 글에서는 자바스크립트에서 JSON 내장 객체를 이용하여 JSON 형식으로 표현된 데이터를 다루는 방법에 대해서 알아보려 한다. 먼저 JSON이 무엇인지에 대해 간단하게 짚고 넘어가겠다. JSON(JavaScript Object Notation)은 데이터를 문자열의 형태로 나타내기 위해 사용된다. 그 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리 잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포맷이다. 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있다. JSON이 기존에 사용되던 XML과 같은 데이터 포맷을 빠르게 대체할 수 있었던 이유는 무엇보다도 가독성 때문일 것이다. JSON 포맷의..
[Javascript] 객체 복사 방법, 얕은 복사와 깊은 복사 예를 들어 아래와 같은 객체가 있다고 가정해 보자.const original = { num: 1000, bool: true, str: "test", func: function () { console.log("func"); }, obj: { x: 1, y: 2, }, arr: ["A", "B", "C"],}; 위 객체를 복제하여 새로운 변수에 복제본을 할당해야 한다면 어떻게 하겠는가? 원본에 영향이 없도록 복제해야 한다면 어떻게 하겠는가? 이번 글에서는 자바스크립트에서 객체를 복제하는 다양한 방법에 대해서 정리해 보려 한다.    자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값NumberStringBooleanNullUndefined 참조값ObjectSymbol 원시..
[Javascript] Axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 Ajax와 더불어 사용하는 것. 이미 자바스크립트에서는 Fetch API가 있지만 프레임워크에서 Ajax를 구현할 땐 Axios를 쓰는 편이라고 볼 수 있다.    Axios 특징운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용.Promise(ES6) API 사용요청과 응답 데이터의 변형HTTP 요청 취소HTTP 요청과 응답을 JSON 형태로 자동 변경  Axios vs FetchAxiosFetch써드파티 라이브러리로 설치 필요현대 브라우저에 빌트인이라 설치 불필요XSRF 보호해 ..
[Javascript] innerHTML, innerText, textContent innerHTML, innerText, textContent는 DOM 요소의 콘텐츠를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만 조금씩 차이가 있다. 속성HTML 태그 처리숨겨진 요소의 텍스트보안(XSS)innerHTMLHTML 태그로 렌더링가져올 수 있음설정할 수 있음위험 가능성 큼innerText단순 텍스트로 변환하여 렌더링가져올 수 있음설정할 수 있음상대적으로 안전textContent단순 텍스트로 변환하여 렌더링가져올 수 없음설정할 수 있음상대적으로 안전    innerHTMLinnerHTML은 element의 속성으로 element 내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를..
[Javascript] 즉시 실행 함수(IIFE) IIFE란?Immediately Invoked Function Expression의 줄임말로 정의되지마자 득시 실행되는 함수 표현식을 말한다.// 아래 두 함수는 동일한 동작을 수행한다.var app = function() { console.log('함수 호출');};app(); // '함수 호출'// 즉시실행함수 IIFE(function() { console.log('함수 호출');}()); // '함수 호출' 위의 두 함수는 동일한 로직을 가지고 있다. IIFE는 전체 익명함수를 괄호로 감싸 줌으로써 내부 코드가 선언문이 아니라 표현식인 것처럼 Parser를 속인다. 단, 익명함수이기 때문에 재사용은 적합하지 않다. 물론 기명으로도 가능은 하다. 하지만 보통 함수의 이름을 짓는 것은 호..
[Javascript] this this 정의let group = { title: "1team", students: ["Kim", "Lee", "Park"], title2 : this.title, title3() { console.log(this.title) }};console.log(group.title2); //undefinedgroup.title3(); // 1team this는 함수의 블록 스코프 내에서 선언되어야 작동한다.  브라우저의 콘솔창을 켜고(F12) this를 입력해 보자.this; // Window {} 그리고 이번엔 변수와 함수 안에 넣어서 실행해 보자.var ga = 'Global variable';console.log(this.ga); // === window.gafunction a() { console..
[Javascript] Fetch API 자바스크립트 AJAX 요청 방식정통적으로 XMLHttpRequest 객체를 생성하여 요청하는 방법이 있지만 문법이 난해하고 가독성 또한 좋지 않다. 따라서 이번 포스트에서는 자바스크립트 AJAX 통신의 최신 기술인 fetch() 사용법에 대해 알아보려 한다.   XMLHttpRequest 방식 XMLHttpRequest 객체를 이용한 정통적인 초창기 비동기 서버 요청 방식이다. 성능에는 문제가 없지만 코드가 복잡하고 가독성이 좋지 않다는 단점이 있다.var httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = function () { if (httpRequest.readyState == XMLHttpRequest.DONE && htt..

728x90
반응형