XMLHttpRequest(XHR) 기초 이해 XMLHttpRequest XMLHttpRequest (XHR) 객체는 서버와 상호작용하기 위한 객체로 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. 즉, AJAX 프로그래밍에 주로 사용되는 객체이다. HTTP 이외의 프로토콜을 지원한다(file 과 ftp ) XMLHttpRequest는 readyState 값이 존재 하는데 다음과 같은 상태를 정의한다. 0: UNSET(미전송) - 요청이 생성된 상태로 아직 서버에 요청을 보내지 않은 상태 1: OPENED(열림) - open() 함수가 호출된 이후로, 요청 초기화가 된 상태 2: HEADERS_RECEIVED(헤더 응답) - send() 함수 호출 이후, 서버에 요청한 결과의 헤더를 수신한 상태 3: LOADING(로딩) - send.. ocean floor/js floor / 2021. 12. 10. / dankthedust

[PowerShell] VSCode 터미널 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 해당 오류는 스크립트 실행에 있어서 윈도우내의 방화벽으로 인한 보안 이슈로 제한이 되었기 때문이다. 나의 경우는 parcel-bundler를 전역에 설치하여 실행한 결과 VSCode 내의 터미널에서 다음과 같은 오류 메시지가 발생하게 되었다. 앞 전에 프로젝트 별로 parcel-bundler를 설치하여 실행할 때에는 별 문제가 없었는데 전역으로 설치하니 생긴 문제인가 아니면 충돌이 난건가 싶어 불안함을 느끼며 구글링을 바로 했다. https://singa-korean.tistory.com/21 해당 사이트에서 친절하게 도움을 받아 해결하였으며, 나 또한 블로그에 남겨 다른 분들의 해결에 도움이 되고 싶어 글을 작성하기로 했다. 1. 먼저 윈도우 작업표시줄의 돋보기에서 PowerShell을 검색하여 을 선.. ocean floor / 2021. 11. 6. / dankthedust

API, Library, 그리고 Framework 개발 공부를 하면서 많이 접하는 API, Library그리고 Framework. 공부를 하면서 활용하다보면 개념이 애매모호 할 때가 많은 것 같아 정리 해 두려고 한다. ⚠ 다만, 해당 정보는 블로그와 위키백과를 토대로 작성한 개인의 생각을 정리한 내용으로 광범위한 프로그래밍 개념을 명확하게 진술해주는 내용은 아님을 밝힙니다. 참고는 위키백과와 정리가 잘되어 있는 블로그를 참고했다. Libarary 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 비휘발성 자원이란 전원이 차단되어도 데이터를 유지하는 컴퓨터 메모리를 말한다. 라이브러리에는 미리 작성된 코드, 서브루틴(함수) 크래스, 값, 자료형 등을 포함한다. 라이브러리 (컴퓨팅) - 위키백과, 우리 모두의 백과사전https:.. ocean floor / 2021. 10. 12. / dankthedust

JSON과 Storage(local, session) JSON JSON은 속성과 값으로 쌍을 이루는 데이터 포맷으로, 비동기 브라우저/서버 통신(AJAX)를 위해 넓게는 XML을 대체한다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. JSON파일은 하나의 문자데이터이나, JavaScript에서 데이터 값을 불러와지면서 그 파일의 자료형이 해석되어 사용된다. // myData.json { "name": "Lee", "age": 25, "emails": ["dankthedust@gmail.com", "8wall_dawn@kakao.com"] } import myData from './myData.json' console.log(typeof myData); // Object const user = { name:.. ocean floor/js floor / 2021. 10. 9. / dankthedust

Import와 Export Import와 Export를 통한 가져오기, 내보내기 프로젝트를 만들면서 많은 js 파일들이 생기게 되는데 특정 js파일에서의 생성한 함수, 변수 등을 다른 js에서도 사용하며 활용할 수 있도록 하는 역할을 import(가져오기), export(내보내기)이 한다. Export export 는 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용하며, 내보낸 값은 다른 프로그램에서 import 를 통해서 가져가 사용할 수 있다. 내보내지는 모듈은 "use strict"와 관계없이 엄격 모드가 적용된다. 기본(default) 내보내기 // 모듈 내의 선언한 식별자 내보내기 export { 식별자 as default }; // 각각의 식별자 내보내기 export default function .. ocean floor/js floor / 2021. 10. 9. / dankthedust

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

21年10月 10月 휴가를 갔다오면서 toss에서 frontEnd 개발자로 일하고 있는 형을 만나 스스로 공부하는 길에 대한 질문을 많이 했다. 7.24에 잡았던 기준을 조금 업데이트 하고자 한다. [ ] 1. 프로그래머스 문제 level 1 다 풀어보기 [ ] 2. 백준 문제 100문제 풀어보기 [ ] 3. 부스트 캠퍼스 프론트 엔드 강의 완강하기 [ ] 4. 클론 코딩 후 추가 하고 싶은 기능을 계획 잡고 스스로 발전 시켜보기 [ ] 5. 웹 서비스 페이지를 구상하고 만들어보기 [ ] 6. 부스트 캠퍼스 김민태 강사님의 JS & TS 강의 완강하기 [ ] 7. react 공부하기 [ ] 8. 4, 5번 react로 재구성 해보기 [ ] 9. 리팩토링 도전하면서 문제점 도출 및 보완해보기 휴가 기간동안에 지인을 통.. memoir / 2021. 10. 7. / dankthedust

assign() 과 객체의 참조값, 참조에 의한 전달 온라인 강의를 병행하던 중 Object.assign() 함수에 대한 예문을 연습하고 있었는데 의아한 점이 있었고 의문점을 해결하면서 확실하게 알게된 객체의 특성중 참조값의 개념에 대해서 작성하여 남기고자 한다. Object.assgin(target, ...sources)의 개념은 대상 객체인 target에 출처 객체sources의 열거 가능한 자체 속성들을 복사하여 붙여넣은 후 대상 객체를 반환하는 메소드이며, target이 빈객체{}가 아닐 경우, 반환받은 값을 저장한 새로운 변수는 target과 참조값을 공유한다. 여기서 MDN의 내용에서의 기본개념에대한 설명과 달리 내가 추가한 내용은 target과 참조값을 공유한다 라는 것이다. MDN문서에도 참조값을 복사한다라고 명시되어 있으며, 객체의 특성에 .. ocean floor/js floor / 2021. 10. 7. / dankthedust